Home Page Usability: Empathising with Visitors

Let’s face it, we’re never truly going to get into our customers shoes and walk around. It ain’t happening—our own biases get in the way of truly empathising with them. That doesn’t mean we stop trying to develop an understanding of their behaviors, wants, and needs. People in marketing and sales understand the value of this. While there’s been more talk around empathy lately, the practice of actually empathising with customers isn’t embedded into most companies’ culture.  

Multiple studies show the detrimental effect of poorly designed web pages, and especially homepages. Beyond bad impressions, slipshod design leads to decreased visitor engagement and increased abandonment. Bottom line, a lot of money is being left on the table. A simple practice to reduce confusion and improve design is to establish empathy-based practices to improve your visitors’ experiences. A thoroughly reviewed and usability-tested homepage streamlines users from entry, through information acquisition, to sale, to checkout, to a graceful exit. 

We’ve administered empathy-based practices and usability reviews with dozens of healthcare and healthtech websites. And we’re here to show you the most commonly found missteps. 

Reduce detractors. Hick’s Law basically says, the more stimuli to choose from, the more indecisive a user becomes. Excessive options increase a users cognitive load, making it vitally important to limit the set of distractions to avoid frustrating the user. Bottom Line: reduce the number of links, buttons, graphics, copy, and images on your homepage (especially above the fold) to focus the user on the primary call-to-action.  

The aesthetics of Sun Nuclear are sound, as the hot spots show the user is looking at the key areas. However, there are a couple of distractions. As shown in the screenshot and heatmap, the faux element (white arrow in the blue box) caught a high number of users. The arrow is not clickable, even though the copy says “starts here.” See the heatmap example above a screenshot of the homepage:

Jakob Nielsen covers many tactics in his article “113 Design Guidelines for Homepage Usability.” We’ve included our favorites below. 

Clarify your purpose. A home page should distinguish itself from its competitors right away. Display the company name and/or logo in a reasonable size and noticeable location (typically top left). Emphasize the site’s objective and what makes it valuable to users. Finally, emphasize the highest priority tasks so that users have a clear starting point on the homepage. Bottom Line: create a headline and subhead that simply states what your business does, the problem it solves, and what steps interested visitors should take next.  

Although Aimee health has a well-placed logo and a good descriptive tagline, the headline and subhead don’t specify what they do, what problems they solve, or what benefits their clients can achieve. 

Write customer-focused copy. Remove clever phrases and marketing lingo that make people work too hard to decipher its meaning. Spell out abbreviations, initialisms, and acronyms, and immediately follow them by the abbreviation. Avoid exclamation marks and excessive use of uppercase letters. Bottom Line: your visitors need to quickly and easily comprehend your site’s language.

Covergent Dental developed Solea, a laser dental technology that replaces the anxiety-inducing dental drill in favor of a soundless laser. That’s innovative technology, but the user would need to know why from the very start. For nascent products that lack mass awareness and adoption, they should provide context to clearly identify what Solea is. 

Create a navigation hierarchy. Group items in the navigation area so that similar items are next to each other. Avoid providing multiple navigation areas for the same types of links, and never include an active link to the homepage on the homepage. Don’t use made-up words for category navigation choices. If a site hosts a shopping cart feature, call it a cart and include a link to it on the homepage. Use icons in navigation only if they help users to recognize a class of items immediately. Bottom Line: navigation should have predictable and easily recognizable labels, icons, formatting, and location.  

Remove decorative graphics. Although graphics and animation can play a critical role in the effectiveness of a home page, use graphics for practical purposes. Avoid highly complex background images with text on top of them (blur or soften the background so text is legible). Avoid animating critical elements of the page, such as the logo, tag line, or main headline. Bottom Line: use graphics to accentuate content, and remember to consider who your audience is (age, ethnicity, gender, veterans etc.) and diversify your photographs accordingly. 

Develop and follow design standards. Limit font styles and formatting, such as sizes and colors.  Over-designing copy can detract from the meaning of the words. Use high-contrast text and background colors so that the type is as legible as possible. The most critical page elements should be visible “above the fold” (first screen without scrolling) in the most prevalent window size. Bottom Line: use fonts and text formatting judiciously, and only to further your page’s purpose and mission, not as decoration.

Include title tags. Browser window titles contribute to improved search engine marketing and to clarifying the website’s intent. Begin the window title with the relevant information, usually the company name. Include a short description of the site in the window title. Bottom Line: use clear concise language in the window titles to further promote your business. 

Visit www.nngroup.com for a full list of Nielsen’s 113 tactics.

Focus user intent. Arrange and organize website elements so that visitors naturally gravitate toward the most important elements first (usually call-to-action buttons or links). Optimizing usability naturally leads visitors to complete a desired action. By adjusting the position, color, or size of certain elements, the site’s layout will encourage viewers to see the most critical elements first. Bottom Line: make sure your most critical elements stand out in size, color, and contrast. 

In the example below from Teladoc (teladoc.com), you can see that the main headline, “The right care when you need it most.” sits atop the visual hierarchy with its size and page position. It draws your eye before anything else. This is followed by the subhead “Talk to a doctor, therapist, or medical expert anywhere you are by phone or video.” The call-to-action, “Get started now,” is right below this key information, which helps the user decide what to do next. Users can click this CTA, or click “How it works” for more information. 

Summary

Follow these guidelines to empathise with your website’s visitors, and most importantly, test your updates with actual customers to verify that the design is aligned with your findings. Usability tests are one of the most accurate and effective ways to empathise with customers. They provide a lens to see how customers interact with your website or digital platform, and provide actionable insight to reduce bounce rate and increase conversion. That means a stronger ROI on your paid media campaigns, and greater profitability.