Associations are always looking for ways to recruit new members and engage existing ones. A consistent resource for both of those goals is your association's website.
No matter the size of your organization, implementing some simple modern website design best practices can drastically improve traffic and conversion. At the core of modern website design for associations is a combination of quality design with seamless functionality – this is essential for keeping your professional audience engaged.
However, no matter how relevant and informative your content is, if it’s hosted on a website with poor design and UX (user experience) you’ll lose engagement. Good content will only get noticed if it's easily accessible and recognizable on the channel it's published on.
With this in mind, and off the heels of my recent content marketing blog post, I'll break down how you can modernize your association's website to provide a high-quality user experience for your professional audience.
1. VISUAL HIERARCHY
Visual hierarchy is the order in which a user processes information on a page. Understanding how your audience naturally processes content is incredibly important for providing good UX on your association's website. It’s the order in which the human eye perceives what it sees.
The best way to explain a visual concept is through a visual.
So here's a quick exercise for you. Please rank the circles in order of importance:
Without having any information about these circles, you were more than likely able to rank them pretty easily. That my friend, is a visual hierarchy.
The fact of the matter is, certain parts of your website are more important than others (your association's value proposition, CTA's, member benefits, etc.), and because of that fact you want those sections of your website to get more attention from members than the less important parts.
The question to ask is where do you want the user to click? Those sections need to be more prominently represented through design than others. Take a look at the layout below.
All the sections are presented equally, and therefore the eyes won't know if one section is more important or relevant than another. When you only have a matter of seconds to grab a website visitor's attention, a lack of Visual Hierarchy can cause you to lose engagement from your audience.
Here's an example of how Visual Hierarchy can help your members know where they should focus.
As you can see from the image hierarchy is not limited to just size. You can make sections, CTA's, copy, etc. more prominent by using color as well.
What's your association's business objective?
What do you want non-members to do when visiting your website? What do you want existing members to do when visiting your association's website? What are your association's goals?
You should rank sections on your website based on those goals.
Here’s an example of a screenshot from The American Marketing Association's website.
- The biggest eye-catcher is the sun-kissed hero image splashed across the page.
- Second place goes to the headline.
- Third is the call to action "Learn More", thanks to clever use of color.
- Fourth place goes to a paragraph of text under the headline.
- The fifth spot goes to the "Join AMA" call to action tucked away in the top right corner - again thanks to the use of color.
- The top navigation menu is last.
This is visual hierarchy, and as you can see it helps your members process information and actions easier.
Some homework - take a look at your association's website with this new knowledge and consciously rank the elements in a visual hierarchy. Consider if something is important - like key information your audience seeks -and is too far down in the hierarchy? If so, then make it more prominent.
A major part of Visual Hierarchy is also understanding how the average person tends to read information online.
2. UX AND READING PATTERNS
An association tends to have a lot of content and information to share, and many try to fit as much as possible on their homepage – industry news, publications, job postings, member testimonials, events, partner networks, login forms, and even recent Tweets!
Consider your own consumer behavior when navigating online. When you visit any other website, or read an email, or a news article, more times than not do you actually read through the whole thing or just skim through it?
Research from Neilson in 2006 group found that people only read about 20% of a page. Eleven years later, in 2017, they did the same tests again and got the same results. Below is a heat map that tracked eyeball movement to gauge how consumers navigate content on a website.
The Nielsen Norman Group calls this popular style of consumer reading the F-Shaped pattern.
The F-Shaped Pattern
The consultancy giant defined the F-Shaped Pattern as follows:
It's characterized by fixations concentrated at the top and the left side of the page.
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Finally, users scan the content’s left side in a vertical movement. Sometimes this is a slow and systematic scan that appears as a solid stripe on an eye-tracking heat map. Other times users move faster, creating a spottier heat map. This last element forms the F’s stem.
The implications of this pattern are:
- First lines of text on a page receive more gazes than subsequent lines of text on the same page.
- The first few words on the left of each line of text receive more fixations than subsequent words on the same line.
Have a look at your association's website. Is the layout optimized to this? Attracting and engaging new members requires providing consumers with their preferred experience. Your members will get more value and a better experience if your website was fine-tuned to how they prefer to consume content and information.
So what exactly does the F-Shaped pattern look like on an optimized website? Here's an example of it from Hubspot.
As you can see, their website layout is perfectly optimized to the F-shape pattern. However, a website for a software company has vastly different information to share when compared to an association. Here's how the American Heart Association uses this layout for their website.
It's very possible for an association to share all the various segments of content relevant to their audience using this layout. Taking the time to structure your association's website to this popular reading pattern could vastly improve engagement.
While the F shape is the most common website reading style, it's not the only one - based on Nielsen Norman Group's research. I highly recommend taking a few minutes to read their analysis and learn about the various reading patterns people use when consuming information online. Being knowledgeable about them can help you strategically layout your website to boost engagement and conversion.
But don't go just yet! The way you lay out your association's website is just one element of modern website design.
3. IMAGES COMPLEMENT INFORMATION
We've cemented the fact that the average member or non-member visiting your association's website is more likely to just scan your content than read through all of it.
If you truly want to optimize your association's website for skimming behavior, remember one thing:
Less text, more visuals.
Eye-tracking studies show internet readers pay close attention to information-carrying images. In fact, when the images are relevant, readers spend more time looking at the images than they do reading text on the page.
In fact, if a relevant image is paired with information, people retained 65% of the information three days later.
Look again at the screenshots I shared of the American Heart Association's website above.
Notice anything in particular?
For someone just skimming your website, images help to draw the user's attention to the information being shared. If the text is limited in length, it can make processing that information easier. If the user wants to learn more about that topic, they can then choose to click through to get more details.
Take the time to audit your association's website and find opportunities to replace text-heavy sections with images and less text. This approach will also improve the chances of your website visitors navigating through multiple pages - which will decrease your website's exit rate.
3. MOVING VISUALS
This is a more advanced style of graphic and web design. If you work with a graphic designer or marketing agency that is capable of animation it’s worth the cost and effort to help attract and engage members with your association's website.
Animation can help create a better user experience especially if used for functionality. Used strategically, it can help your website’s SEO rankings by keeping visitors engaged and decreasing exit rates in the process.
4. MOBILE-FRIENDLY DESIGN
I can’t discuss how to attract and engage members with your association's website without highlighting the importance of mobile responsive design.
According to the latest statistics from Statista, In 2018, 52.2 percent of all website traffic worldwide was generated through mobile phones. Considering those statistics, when it comes to creating brand awareness, it’s clear to see why your online content needs to be mobile-friendly.
Your association's website should be mobile responsive. Website content and design should automatically, and intuitively, change to fit the device on which the site is displayed.
FINAL THOUGHTS
Web design is a technical skill that the average association executive will have to outsource. While some may place it low on their priority list, the reality is that your association's website is your organization's online HQ for members and non-members alike seeking resources. All of your marketing and sales efforts point directly back to your website.
In an age where a consumer can jump through multiple sites in a matter of seconds to find their preferred experience, design and layout is essential for keeping your audience engaged. Invest the time and resources into design to ensure you make the most of those first few seconds your audience members engage with your website.