The Vanguard View: Insight for Association Websites

Engage and Convert: Ensure Visual Hierarchy on your Association Website

Posted by Ray van Hilst on Tue, Jul 08, 2014


This is the first in a series of blog posts based on the “5 Website Improvements to Make in 5 Minutes (or Less)” session I co-presented with Maggie McGary at the ASAE Membership, Marketing and Communications Conference in June 2014.  Each post will cover one of the elements we discussed in more detail with today’s post covering Visual Hierarchy.  To get a sneak peek of future posts, view the slides from our session on Slideshare.

Key Elements of Visual Hierarchy

Never underestimate the importance of your association website's visual layout. Whatever your target audience, whatever your sector, all websites need to follow some basic design rules to ensure maximum engagement with visitors.

GodzillaHere are three important elements to remember:

  • The more important an item is, the more prominent it should be - You can think of your site's layout the way a journalist creates news articles: the more important a piece of information, the higher up in the article it appears. So, when designing each page, you need to be sure that the most important elements are the most prominent – the bigger they are, the better the chance your visitors will get a fast understanding of your page's unique message. This is your hook.
  • Items related logically should also relate visually - Any aspects on your website which are connected by theme or type should share a visual design. So, for example, if your site offers webinars, conferences and online learning, these could be grouped as “education,” and therefore be placed within the same box: neat, tidy, simple.
  • Items are nested visually to show what's part of what  - In other words, each group of products or services should be clearly separated to allow users to see the individual components of the respective group. This is basic navigation sense, allowing users of all levels to find what they need, exactly when they need to. 

F-shaped Reading Patterns

Users read websites in the same F-shaped pattern: they start at the upper part of the content area –  typically where the titles and essential information sits – in a horizontal movement, before proceeding down the page a little bit. They will then read across the screen again, in a second horizontal pattern, shorter than the first – this covers the F's lower bar. Lastly, users will then scan the left side, in a vertical pattern, completing the F. 

Designing your page to follow this pattern ensures a smoother reading experience for the user, offering more comfort and ease than a simple block of scrollable text, or a stream of text in a poorly erratic layout.

The image below from the Nielsen-Norman Group shows this pattern in action.  For more information about how readers follow this F-shape pattern, check out this article.

Layout Considerations

To maximise user engagement, then, you need to create a visual hierarchy within this viewing pattern. You also need to communicate user value: base your navigation and layout on the user's key actions.

How do you do that? Place yourself in your visitor's shoes. What do you want or need to see within the first two seconds of landing on your homepage? Does your current layout present who you are & what you do in a clear, engaging way? Are the visuals attractive? You need to keep the user and let them explore the site based on their needs – they must be able to get from one page to another with a minimum of fuss. You need to engage your user enough to convert them into a customer.

The Call to Action

This is a key feature of your content – you must provide the user with a 'next step' in order to complete their experience. Whether this means filling out a form, registering for an event, or connecting with you on social media, the CTA needs to be clear, persuasive and unmissable.

For example, you could use something along the lines of:

“For more information about applying to cooking school, download the Ultimate Guide to Becoming a Restaurateur.”

This is fast, easy to understand and clearly explains what the user will click through to.

Other quick calls to action include:

  • “If you found this helpful, share it on Facebook or Twitter”
  • “Connect with fellow members on LinkedIn”
  • “Stay informed of this and other important policy issues by signing up for our Action Alerts” 

So, take a look at your website and compare it to these best practices. Does it feature the F-shaped pattern? Are the visuals eye-catching, clear and engaging? Does it make you want to stay on the site or click back out as fast as you can?

If the answer is no, give us a call – we'll revamp your site and boost user engagement for maximum results.

Free eBook - 10 Things Members Want from Your Association Website

Topics: usability, association website design, best practices, association websites

Subscribe via E-mail

New Call-to-action

Follow Me

Latest Posts

Our Most Popular Posts