Vaught Usability Group, LLC
By Nina Vaught, Certified Usability Analyst

How to Make Your Homepage ‘Sticky’

The homepage is a critical element for any successful website.  To take advantage of site traffic, homepages must be ‘sticky’ enough to persuade visitors to stay and explore.

Even guests who enter the site on an internal page, at some point, click to the homepage to re-orient themselves or to find out more about you.  As world-renowned usability expert Jacob Nielson aptly put it, ‘Homepages are the most valuable real estate in the world’.

A sticky homepage:

  • Downloads quickly
  • Communicates site purpose and value to the user within 8-10 seconds
  • Confirms the visitor is in the right place to meet their goals
  • Effectively sets a tone for the site that projects a positive brand image
  • Gives the user a place to start

Quick downloads

Accepted Internet wisdom informs that websites should download in 8-10 seconds before visitors get impatient and click away.  New information from a 2006 survey of over 1,000 online shoppers suggests users are becoming more impatient, and the new critical download time could be as low as 4 seconds.

To shorten the time your homepage takes to load, consider the content and media.  Make sure all images are optimized for fast download.  If you have ‘cool’ stuff that does nothing to help or inform site visitors, remove it.  Except in rare cases, using Flash, animation and sound, does nothing to enhance user experience.  In testing, users frequently report ‘cool stuff’ as annoying, especially if on a site they visit frequently.  Optimizing images and eliminating unnecessary elements that are for design sake only, can significantly speed up download time.

Eye testing reveals online users scan text before looking at graphic images. So if you have important images that load slowly, make sure text appears first.  Note, however, that if your page loads in stages, your logo and banner should appear with the first elements to appear on the page.

Communicate purpose and value

The first elements users see on your homepage are critical in convincing visitors to stay and explore, rather than clicking away.  They are your chance to create a good first impression of your website and your company.  As such, pay careful attention to your masthead, logo, and tagline.

Website Masthead

On the Internet, the masthead that identifies the owner of the website and, sometimes, the particular section of the site. The website masthead located at the top of a Web page.  It was named after a similar feature of newspapers and magazines, which in turn got its name from the top of a mast on a ship.

On a professional-looking site, the masthead is typically a horizontal band that spans the full width of the page and is about 160 pixels tall.  It should be visually set apart from the rest of the page, usually with a border and/or a different colored background and should appear consistently on every page of your website.

A masthead contains the company logo and tagline to help users identify the business owner and purpose of the website. It should be clean and professional, and highlight your company name and tagline without competing elements. For a professional look, every site should have a masthead. Sites without one look amateurish, suggesting a small or unprofessional operation, which negatively impacts the credibility of the site. In a 2006 MarketingSherpa survey, 68% percent of responders said they have left a site because it didn’t have a professional aesthetic and they didn’t feel comfortable doing business on the site.

Your masthead should never contain advertising or other elements that may confuse users as to the purpose of the site or ‘who’ the website belongs to. Placing advertising above the masthead is a common practice for sites that earn revenue from advertising.  If your site sells  space above the masthead, make sure the advertising is a style distinctly different, so users readily recognize it as advertising and not the masthead itself.

Logo

Strong Web convention in countries where users read from left to right and top to bottom, sets user expectations to find a company logo at the top left of the masthead.  Hence your logo is the first opportunity to create a good impression of your company and your website.

Take a fresh look at your logo.  If it doesn’t look clean and professional, it may be time for an update.

Tagline

Every site should have a tagline to explicitly summarize what the site or company does. For most companies a catchy, but content-free tagline that works for print and other media isn’t effective on the Web.  National brand taglines like “where’s the Beef” or “Just Do It” are immediately connected with the company because of massive marketing to establish these otherwise meaningless phrases as company branding.

If a less than informative tagline is part of your company branding, keep it to maintain consistency in your branding but provide a supplemental tagline to help clarify the purpose of the site.

Confirm the visitor is in the right place

After scanning the logo, company name and tagline, users quickly scan navigation, headings, subheadings, underlined text links and images to further access whether or not they can meet their goals on a specific site.

Navigation

Formal navigation provides clues as to what the site is about and what can be done there.  Navigation should be instantly recognizable by virtue of style and placement.

Make navigation look like standard navigation buttons, links or tabs.  Over-designing navigation elements with fancy fonts or busy backgrounds make it hard to recognize and read – or worse, make navigation elements look like an advertisement, which users have learned to ignore.

Place navigation where users expect to find it – top horizontal and/or left vertical navigation is most common.  Center of page navigation is also successful when designed appropriately (when it looks like navigation).

Naming of navigation should be straight-forward, intuitive and in users’ vocabulary. Clever navigation naming provides users no clue as to what is on the site or how to get to what they’re after.

Headings and subheadings

Headings and subheadings should ‘pop’ and contain key words that users and search engines look for to verify the page is relevant to their goals.  Emphasize headings with larger and/or bold fonts, different colors, or different font families to facilitate scanning and help users spot keywords.

Text links

Text links in the body should:

  • Be underlined
  • Be a distinctive and different color than other body copy and headings
  • Contain key words
  • Describe succinctly where the link leads to

Good text links stand out on the page and provide additional information as the user and search engines scan the page to determine relevance of the website.  If using a different color to highlight headings, be consistent using the color for headings and do not use a link color for non-clickable headings.

Relevant graphics

Use relevant graphics that clarify or enhance meaning or benefits.  Eye tracking studies have found that although users don’t immediately fixate on images, they have a tendency to recognize them peripherally without focusing on them, allowing users to navigate quickly and decide on relevant content in a split second.  Never use images just for decoration, as they may confuse the purpose of the site.

Using images to imply benefits that evoke an emotional response can be  more compelling than describing the same benefits in words.  Here’s an example: On a real estate site, a picture of a happy family in front of a house, with inviting warm light emitting from the windows creates a warm emotional response; where by comparison, a picture of a house is just a picture of a house.  Pictures of real clients in front of the house would be even more powerful (with their consent, of course).

Online and offline campaigns

A disconnect between online and offline marketing campaigns and the websites to which they drive traffic is a common problem.  Too often, would-be customers responding to a campaign are lead to a dead-end on the homepage.

A solution: mirror images and messages from any marketing campaigns prominently on your homepage, and provide an intuitive path for users to follow for relevant information.

Show competitive benefits prominently

Users report two of the most compelling reasons to shop at one online store versus another are FREE shipping and a strong guarantee.

Don’t make visitors hunt to find out your competitive advantages.  If you offer FREE shipping, announce it prominently in your masthead or within the top 3” of the screen.  The best guarantees are ‘best price’ and ‘ no-hassle return’.

Setting Tone

Your homepage sets the tone for the entire site and, in many cases, may establish a visitor’s first impression of your company.  Make sure the impression you make is positive and professional.  If you have a physical store or location, align your branding image online carefully with that of your offline image.

Visual design and layout

A homepage two-to-three screens long is no longer passé if your site warrants it. Users expect to scroll vertically.  Designing so horizontal scrolling is required to see the whole screen, however, can hide important elements and is hard for users to navigate.

Optimize for the lowest reasonable screen resolution that visitors are using to eliminate the need for horizontal scrolling.  As of January of 2007, W3Schools reports that 14% of users are still at 800×600 screen resolution, the current recommended resolution for which to optimize.  If you design for a higher resolution, at least make sure horizontal scrolling is not required in order to see important information or navigation at 800×600. Don’t forget to also test on multiple Web browsers to verify users are seeing what you think they are seeing.

Strive for a clean, organized design and layout.  Studies conclude that poor design (cluttered and busy) implies poor service and detracts from credibility and trustworthiness. Fostering the trust necessary to make users comfortable in doing business with you is imperative.

Color, fonts, graphics, language and content all define the tone of your site.  Match design elements, tone of copy and content to the positioning of your product/service and target market.  Example: For e-commerce sites selling elegant high priced products, use elegant (but readable) fonts, upscale images that elude to an elite lifestyle, limited colors (like blues, silvers, black) lots of white space, minimal text, and messaging that emphasizes quality.  Conversely on a sports site, go for sleek fonts, lively colors, action images and messaging that eludes to health, strength, energy and life.

Step back and review your site from an outside perspective. Design a tone that suits your product and audience – not your favorite colors or personal style.  Ask friends or customers what adjectives come to mind when viewing your site.  If they don’t come up with adjectives that match the image you are trying to create – rethink your design.

Use high contrast between text and background for easy reading. Black text on a white or pale yellow background is often recommended. Make fonts big enough for even older visitors to read. User testing indicates that font size for body text should not be smaller than 12 pixels.  Stay away from center aligned body text.  It’s not only difficult to read, it is also a dead give-away to a homemade site.

If you use a different font family for body text and headings, don’t use more than two. Have one family for headings and the other for body text.  If you do this, be sure the font families are distinctly different. Don’t get carried away with utilizing different styles (italics, different weights and sizes) within font families either, as pages can easily become cluttered and busy which inhibits scanning and detracts from the professional look of your site.

Copywriting

Your copy is a strong element in setting the tone of your site.  Create copy that reflects the right ‘attitude’ for the image you want to create.  Copywriting appropriate for all sites is straight forward, objective, truthful, in users’ language and provides valuable information to the user.

Self-congratulatory writing, overstatements and marketing hype are offensive to most users.  Avoid exclamation marks – they ‘shout’ at users.  Remember that most people want to buy but they don’t want to be sold.

Know your users and don’t talk over their heads or beneath their intelligence.  The average reading level of adults in the United States is about 8.5 grade level. If you have Microsoft Word, you can test the grade level of your writing in the spelling and grammar check in the tools menu.  Just select the text you want to test and perform a spelling and grammar test.  Reading ease and grade level scores are provided based upon Flesch Reading Ease and Flesch-Kincaid Grade Level tests. For example, this paragraph is rated 62.1 for ease of reading at about an 8.8 grade level:

The Flesch Reading Ease Score rates text on a 100-point scale; the higher the score, the easier it is to understand. For most standard documents, aim for a score of approximately 60 to 70.   Flesch-Kincaid Grade Level Score rates text on a U.S. school grade level. For example, a score of 8.0 means that an eighth grader can understand the document. For most documents, aim for a score of approximately 7.0 to 8.0.  If your target audience is highly educated, you can aim for a higher grade level.

Advertising

If your site earns revenue selling advertising, keep in mind that the ads on your site reflect upon your company image.  Create design policies for advertisers that are different in design, but aligned with your brand.

Don’t allow ads to overpower basic site content.  Place ads in a banner above the masthead and in other peripheral areas.  Advertisements placed anywhere but the top banner area should be labeled ‘advertisement’ so they are not confused with site content.

Continual motion is distracting; it creates ‘visual noise’ that undermines users from accomplishing their goals. If you allow ads or otherwise employ motion, you will achieve higher page views by setting ad policies that follow these guidelines:

  • Only one moving element should be viewable on the screen at 1024 x 768.  On a long scrolling page fit one moving element at the top and one at the bottom where they will not be within viewer’s site at the same time.
  • Consider allowing motion only if it is brief and then turns itself off.
  • Require a mechanism for users to turn the motion off.
  • Disallow ‘blinking’ and fast movement, as they destroy users’ ability to concentrate elsewhere on the screen.  They usually cause annoyance and have also been reported to cause headaches and vertigo. Users won’t stay on pages that annoy or make them otherwise uncomfortable.  Images that change slowly are more effective and less irritating.

A place to start

If site visitors can’t figure out where to start to achieve their goals on your website, chances are they’ll click away to your competitor.  Many elements play a part in designing a homepage with clear starting points to move users beyond the homepage.  Some of the most important are discussed below.

Formal navigation

To provide an intuitive starting point for users, it is imperative that your site architecture is well organized, and more importantly that your navigation labeling is clear, distinguishable and in the users’ language. By distinguishable, we mean that there is a clear difference in expectation as to what will be found when clicking one button or link versus another.

A common example of indistinguishable categories is the two categories, ‘Products’ and ‘Solutions’.  Solutions can mean anything – and aren’t the company’s products also solutions?  In testing, most users confronted with these two choices, don’t know which to click to find what they’re looking for.

It is a good idea to test with real users  – even if informally – to confirm that your site visitors understand your navigation scheme.  If your target audience is broad, you can conduct a quick and easy informal test of your navigation by grabbing a few friends or family members (the more the better) and asking them to find specific products on your website by using the navigation (rather than your site search).  Ask them to speak out loud as they look for the items to tell you why they are clicking specific navigational elements and what they expect to find. Watch how they go about looking for items and note where they head down a wrong path.  Ask them what terms would be more meaningful to them if they have problems.

Site search

According to a 2005 Jupiter Research Report, about 33% of users go directly to the site search function rather than using formal navigation to browse.  Creating an effective site search is largely a matter of configuration of the search engine, but here’s what you can do from the homepage:

  • Place a search box (not a link to search) in your global header.
  • Make search on the homepage search the whole site by default.
  • Don’t offer a feature to search the Web. Why direct users off your site?
  • Make the search box 25-30 characters wide.  Many users think they must contain their query to the size of the box.
  • Clearly state what is searchable. Example:  [search item# or keyword]
  • If there are no other important form fields on the page, design to have the curser already in the search box.
  • Allow the enter key, as well as the go or search button, to initiate the search.

Support users’ highest priority tasks and your business objectives

Make prominent those elements that support users’ highest priority tasks and your business objectives for the site.  Here’s a great example from thelendingtree.com

The Lending Tree knows that most users, regardless of where they are in their decision process, are coming to their site to find out about getting a loan.  Site visitors don’t have to navigate anywhere to get started.  This task tool is prominently placed beneath the formal navigation and masthead.

Design elements

Disorganized pages that are visually cluttered, with too many competing elements, split users’ attention, causing confusion and no clear starting point.

One way to keep down the clutter is to make things that are the same, look the same.  For example:  All of your headings on the page should look the same – not be in twelve different type styles, colors and sizes.

Create a visual hierarchy of information on the page with elements that guide users’ eyes to the most important points first.  The most important item should be the most prominent thing on the page.  The continuum of elements that draw attention from the ‘quietest’ to the ‘loudest’ looks like this:

Make sure your most important information is not over-powered with unimportant information that is ‘visually louder’.

Accommodate natural viewing patterns to prioritize content.  Starting on the left, the top 3” of your screen is prime viewing space for information user’s should see first.  Once users scan the page, if they haven’t already moved on through the site search or formal navigation, eyes fixate on the center of the screen.

A wall of text overwhelms users and discourages reading or scanning.  If you require high content of rich text for organic search engine ranking, design so that information above the fold (in the first screen without scrolling), is easy to scan, with brief text and key words emphasized in headings, subheadings and body text links.  Use space below the fold to add the volume of rich content search engines require for relevancy.

In all of your Web writing (above and below the fold) keep paragraphs short (8-10 lines max).  Add visual interest to the text, facilitate scanning and emphasize key points with:

  • Headings and subheadings
  • Underlined embedded body text that cross-link pages
  • Bullets

Calls-to-action

Calls–to-action help users know what they can do on your site and also encourage them to do what you want them to do.  Calls-to-action can be buttons, links or clickable images.

Determine frequent goals of your site visitors and what actions you want them to take.  Include calls-to-action to support those goals. Content and calls-to-action should balance users’ needs and goals with your business objectives for the site.

While your visitor is focusing on information in the center of the page, they are peripherally aware of the right side, and frequently look there for more information. This is an ideal location for calls-to-action like ‘register for seminar’ or ‘sign up for newsletter’ to keep users engaged with the site.

Keep it simple

Faced with too many choices, people choke and make no choice at all.  Keep your homepage as simple as possible while still showing the broad picture of what is on your site.

The sticky homepage

Designed correctly, your homepage will compliment and enhance your brand image.  It  will instill confidence in doing business with you by setting a professional and trustworthy tone.  Visitors will quickly see the purpose of the site, the breadth of options and how to achieve their goals.  Visual elements will highlight the most important information and compel users to take action and explore past the homepage.

Nina Vaught is founder and Director of Usability for Vaught Usability Group where she aids clients in achieving higher website conversion rates by showing them how to make their sites more persuasive and easy for visitors to use.  Contact Nina at nina@vaughtusability.com.