<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=652504974959061&amp;ev=PageView&amp;noscript=1">

Drupal for Business

At Duo, we build connections.

How to Maximize Website Usability

Recently, I researched human attention spans on Google. I found many articles claiming that humans’ attention spans (8 seconds) are now shorter than those of goldfish (9 seconds), as of 2013. Confusingly, I found just as many articles disputing the goldfish claim and estimating that human attention spans land within the range of 2 - 5 minutes. When it comes to websites, a staggering 55% of visitors spend fewer than 15 seconds on most web pages according to @arctictony

What this means is users won’t spend much time on a website if it requires significant cognitive effort from them, especially if it’s early in their visit. A confusing, crowded, or chaotic interface that doesn’t facilitate maximum clarity and legibility will draw users’ attention towards deciphering the interface instead of drawing their attention towards what really matters - the content. On the other hand, an interface that presents meaningful, engaging content in an understandable format will keep users’ attention focused where it needs to be - on the content that solves their problem.

User Experience: Do the Heavy Lifting for Me

When users arrive at a homepage, they should be able to quickly determine the identity and mission of the website or company. However, drawing an accurate conclusion about the company isn’t the responsibility of the user. It’s the responsibility of the the designers and the rest of the site’s team to use the interface as a communication tool that facilitates maximum understanding from users.

An ambiguous or overwhelming homepage design that requires a user to guess who the company is and/or what the company does requires an elevated level of brain power soon after the user arrives to the site. If the user can’t resolve that cognitive ambiguity within a reasonable amount of time, they will be more likely to leave the site and look elsewhere for a solution to their problem. Make sure a homepage communicates a clear message about the company or product that makes the identity and the mission of the company obvious.

An interface needs to clearly communicate to the user where they can go and what they can do next. First, make sure your website has a structured and consistent main navigation that has a maximum of 7 sections. The main navigation is where the user looks to orient themselves on the website and determine where they can go next.

Second, make sure there are clear calls to action on the homepage (and every other page). A call to action is a direct suggestion for users to perform an action that helps the company achieve its business goals. Ideally, the business goals of the company align with user goals, increasing the likelihood that users will perform mutually desired actions to achieve the goal. A few common examples of calls to action are “Learn More”, “Buy Now”, “View Details”, or “Start Your Free Trial”.

Prioritize Your Homepage’s Content Using Visual Hierarchy

A visual hierarchy is a way to prioritize information by using aesthetics to let the user know the level of importance and/or the level of detail of the content on the page. Hierarchies help guide users’ eyes naturally around the page, minimizing the possibility of overwhelming them by providing them with too much information at the same time.

To create an effective visual and informational hierarchy, use larger font sizes, images, and the most prominent space on the homepage (the top left or center of the page just underneath the navigation) for high priority content that provides a relatively low level of detail. Keeping each content area brief helps to reduce the amount of time it takes the user to digest the homepage content, and will increase the likelihood that users will visit new parts of the site to find out more details.

Here’s an example of a visual hierarchy with three levels of content:


In this example, Visual Hierarchy Level 1 is a clear, concise message that tells users what the product is. The larger font size and centered positioning at the top of the page make the message very prominent, attracting the users’ eyes toward the most important content first.

Visual Hierarchy Level 2 has some short informational blurbs about the product with accompanying icons, providing a brief overview of the features. A first glance of the three areas tells the user that this content is important because it’s in a prominent space, the blurbs are emphasized by a new font color, and they are accompanied by images. Each of the three elements are easy to digest, encouraging the user to read more by moving on to the paragraph below.

By looking at the paragraph text in Visual Hierarchy Level 3, it’s clear that this block of content has the highest level of detail. The smaller font size combined with the length of the content lets the user know there’s more to know about the product.

Finally, the section of content ends with a primary call to action that lets the user know what to do next.

Usability Testing: The 5 Second Test

 Usability testing is not a test of the user, but a test of how well the interface communicates its information and available actions. In usability testing, the “5 second test” is an evaluation of the accuracy of users’ first impressions of your website.

The focus of the 5 second test is to determine whether users can answer questions like “What/who is this?” and “What can I do here?” within 5 seconds of landing on a web page (usually the home page).

During the 5 second test, participants are shown screenshots of a web page for 5 seconds. Then, they are asked to recall the information or content they just saw. Common questions asked to participants include “What does this company do?”, “What (or who) is this website for?”, and “What actions did the web page ask you to take?”. If users’ first impressions of the page first are accurate to what the content is trying to communicate, the page passes the 5 second test.  

If your home page doesn’t pass the 5 second test, consider the following:

  • Does the home page have an apparent and meaningful visual hierarchy?
  • Does the content make it clear who the company is and what they do?
  • Does the navication help users know here they are on the site, and where they can go?
  • Does the home page have at least one call to action?

After making these updates, keep an eye out for how your analytics change - to prove once and for all that we can still beat the goldfish attention span!


Topics: Marketing Design

Popular Posts