When was the last time you took a good, hard look at your home page, including its load time, navigation structure, content and layout? A well-designed home page is essential to having a successful e-commerce business: it instills confidence, raises the level of engagement, increases search engine visibility, and removes barriers to access and to purchase.
The home page is the most important page on your Website; it gets more views from users and more weight from the search engines than any other page. This is an opportunity you won’t want to squander.
A “usable” home page is efficient and intuitive: It’s quick and easy for your visitors to navigate and interact with in order to reach their desired goal — a goal that often aligns well with your goals, e.g., online purchase, catalog sign-up. A visitor should not be made to think too hard in order to accomplish that goal.
If a door requires a “push” or “pull” sign in order for people to operate it, that door’s designer has failed. Web users have become conditioned to sites having certain attributes and behaving in certain ways. Break these standards or veer from these norms and you’ve put your visitor in the uncomfortable position of having to relearn how the Web works — in ways particular to your site.
I should also note that usability and accessibility go hand-in-hand. Usability is about ease-of-use, whereas accessibility is about universal access — across browsers, operating systems, mobile and handheld devices, screen readers for the visually impaired. Both are critical to your success.
Here are some keys to home page makeover success, regardless of whether your home page has been freshly redesigned or not.
Three-second test: Does your home page pass the “three-second test”? This is the snap judgment of your value that your visitor makes upon entering your site. It’s a litmus test of sorts for your site’s value proposition and how well you are able to get it across.
If you want to pass this test, you must emphasize the highest priority tasks and answer the “What do you want me to do?” question. In other words, make it clear why the visitor is there and what they should do.
Screen real estate: In real estate, it’s all about “location, location, location.” This holds true on the Web, too. Cut to the chase. Don’t waste valuable screen “real estate” with a “welcome” message, or with crediting your site’s technology platform or your Web design or search marketing firm.
Calculate the percentage of screen real estate taken up by content of interest to your visitors — vs. navigation, filler, welcome messaging, self-promotion, and empty space. The most valuable screen real estate is “above the fold” — in the part of the screen where the visitor doesn’t have to scroll to see it — vs. “below the fold,” where it is not visible without scrolling.
Scrolling: Avoid horizontal scrolling; it’s painful for your visitors. Vertical scrolling is okay, but try to put your key navigation elements, product offers and conversion triggers “above the fold” (as described above) to maximize their visibility.
Clues: Good usability is like baked-in instructions on how to browse, how to search, how to add to cart, how to subscribe, how (and why) to create an account, and so on. Sometimes you’ll need to augment this with some subtle hints. These clues don’t necessarily need to be in the form of explanatory text; rather, they can be incorporated into the design, layout or language.
Text readability: Make paragraphs of text readable. This means choosing a legible font and selecting the correct font size, line height, and width of space for the paragraph. Use high-contrast text and background colors. Limit the number of font styles, sizes, and colors used on the page. Usability expert Jakob Nielsen contends that over-designed text can detract from the meaning of the words.
Navigation: Your primary navigation should be in a highly noticeable area, preferably directly adjacent to the main body of the page. It can be on the top or on the left; both offer good usability. When it comes to sidebar navigation, a left nav is preferable to a right nav.
Nielsen cautions against providing multiple navigation areas for the same types of links, using made-up words for category names on the navigation. Categories need to be immediately differentiable from each other — if visitors don’t understand your made-up terminology, it will be impossible for them to differentiate categories. He’s also against using icons in navigation — unless the icons help visitors to recognize a class of items immediately, such as new items, sale items, or video content.
Splash page/country selector: A splash page might be better named a “barrier page” since it presents a barrier to your users — an additional click before the user can get to any useful content. By detecting your customer’s location based on their IP address, you can send the version of your site that you believe to be appropriate to their location.
And if you occasionally get it wrong, it’s not the end of the world; by including a country-switcher in a prominent location on your home page, you can provide those wayward travelers with easy access to the correct location using a minimum of “screen real estate.”
Image-intensive: Image-intensive home pages are pretty common for online retailers, but yet visually impaired users and search engine spiders require text to make sense of your content. Relying too heavily on images can degrade accessibility, decrease search rankings, and increase page load times, which leads to a poor user experience.
Don’t go overboard with the graphics, and when you do use them, be sure to include alternate text as “alt” attributes and label the graphics when their meaning is not clear from the context. Target.com was sued by the U.S. National Federation of the Blind because of their lack of “alternate text” to describe images.
Flash: If at all possible, avoid Flash for your site’s navigation and for any textual content — if search engine rankings are important to you. If you feel you must use Flash, you have some tools at your disposal, including sIFR, SWFObject, noscript tags, and Adobe’s Search Engine SDK. And there’s always the old stand-by: the tactic of creating an HTML version.
The first three tools detect Flash and/or JavaScript and then display the Flash or corresponding text/images based on the result. Google engineer Matt Cutts explained to me how Google uses the search engine SDK tool to pull out text in your Flash files, and recommended that Website owners do the same to gauge the state of their Flash-based textual content. This will be a real wake-up call.
Contact number: I’ve always been a fan of making it easy for your customers to do business with you — using the channel of communication they prefer. If it is over the phone, so be it. Is your contact number displayed prominently — above the fold — on your home page? Or is it buried?
Plenty of online retailers want to discourage visitors from picking up the phone, to varying degrees. If you’re customer-focused, you’ve probably made it fairly visible (and if you’re company-focused, fairly invisible). I’d also suggest measuring offline (phone) conversion by publishing a toll-free phone number on your Website that is not used elsewhere.
“Click to verify” badges: Should you dedicate valuable screen real estate to “Click to Verify” HackerSafe, BizRate and VeriSign badges? Perhaps. Try placing them in different parts of your home page, vs. removing them altogether, and see how it impacts your bounce rate and conversion rate.
Groupings: Consider how content categories can be arranged together or otherwise changed to reduce steps and increase conversions. Move content around to make it clearer. Group items in the navigation so that similar items are next to each other. Be sure to group corporate information, such as About Us, Investor Relations, Press Room and Jobs.
Links: I cringe whenever I see generic link text such as “click here” and “more” — and for good reason: it’s considered bad practice for SEO (search engine optimization) and usability alike. Differentiate links from each other and make them easy to scan. Don’t obscure whether a link has been visited or not.
By default, visited links differ in color from unvisited links, for good reason: it helps users navigate the Web more effectively. Essential links to place on your home page include About Us, Contact Us, Privacy Policy and Your Cart. Place links to your highest-margin, most popular goods on your home page. The fewer clicks needed to locate a top product, the better. It’s helpful for SEO when those links are keyword-rich too.
Logo: Your logo graphic is best placed in the top left. It’s common for the logo to be linked to the home page, i.e., it doubles as a “Home” button. Don’t make it clickable on the home page, however. And remove all “Home” buttons and links, or make them not clickable. In other words, don’t include an active link to the home page on the home page.
Language: Use customer-focused language, not company-focused. Don’t make visitors work hard to figure out what you’re talking about by using marketingspeak, technobabble, acronyms and various other jargon. Label sections and categories according to the value they hold for the customers, not according to what they do for your company. Be consistent with your capitalization and other style standards.
Spider food: There’s another type of “user” to keep in mind when redesigning your home page: search engine spiders. This requires a balancing act. From a search engine optimization perspective, it’s advantageous to have at least several hundred words of body copy on the home page. But this much copy could interfere with an image-intensive home page.
One workaround that is fraught with hazards is sticking all the content for spiders well and truly below the fold. For example, the Patagonia.com home page (a splash page, by the way) has a paragraph stuffed with a ton of keywords below the fold. Supplementing the home page with keyword-stuffed gibberish that is of low or no value to humans is not going to earn you any points with Google engineers.
HTML code “bloat”: Remove code bloat in your HTML that slows your home page load time. This can include HTML comments, inline JavaScripts and CSS that are inline instead of in an “include file,” and unnecessary repetition in style definitions.
Cascading style sheets (CSS): CSS is preferable to old school Web coding practices for the benefits it affords in Web standards compliance, accessibility and SEO. Web standards zealots love CSS, which can be used to precisely position images and text, apply a range of styling effects to text, build tables, replace text with images selectively for humans but not for spiders (a technique known as “image replacement”), and so much more. Suffice it to say, anything that can be done using old school techniques can be duplicated using CSS, and then some.
Mouseover navigation: I always advise creating the mouseover effect with CSS rather than JavaScript, and using text links in the navigation rather than graphic images. This approach is crucially important for SEO and, when combined with graceful degradation/progressive enhancement, it is also more accessible to mobile devices and screen readers for the visually impaired.
Drop-down menus: Note that mouseovers and drop-downs are not the same thing. Drop-down menus are form fields. Use them sparingly, especially if the items in them are not self-explanatory.
Search box: This should go without saying, but have a type-in form field, not just a “search” link that leads to a page with a search form. Place the search field above the fold for easy access. My preferred placement is near the top right or the top center of the page. Make the box wide enough to display the visitor’s entire search query — 25 to 30 characters should be enough.
Forms: Jakob Nielsen cautions against using multiple text entry boxes on the home page, especially in the upper part of the page where people tend to look for the search box. If you do make use of forms, make it easy to fill out form fields by being able to tab from one field to the next, pre-completing form fields when the information is known, making all of the steps clear, and providing feedback after forms are submitted.
If using checkboxes or radio buttons, know when to use which one. Use radio buttons when the options are mutually exclusive and only one can be chosen. Use checkboxes when the options are not mutually exclusive and are each optional. Make fill-in fields long enough to give the users room to type. Mark mandatory fields clearly and try to avoid making fields mandatory.
Title tags: Page titles are tucked away at the top of the browser window (up in the blue bar, if you’re running Windows), where users don’t pay them much mind. But they are also used in search results and in bookmarks, which definitely adds to their importance. The title tag is not a place to stuff keywords, as that destroys the readability and persuasiveness of the title text. Make the title compelling. Lead with your most important keywords, not with “Welcome to.” Try to keep it to 15 words or less.
Personas: Understand what it is your visitors are looking for — and then cater to them. A great way to “get inside their heads” is to develop personas that represent major groups of your visitors and describe a specific (fictional) representative from that group.
Tag cloud: A tag cloud is a collection of keyword links where the font size of each keyword is proportionate to the number of times that keyword has been used.
Tag clouds, popularized on Web 2.0 Websites including del.icio.us and Flickr, have both usability and SEO benefits. A retailer example is BarnesandNoble.com, with a tag cloud featured near the bottom of the home page.
Browser compatibility: By adhering to Web standards and accessibility guidelines, you help ensure cross-browser compatibility. Inconsistencies between the browsers’ rendering engines can cause your home page to not display as intended. Check how your home page displays on various browsers (including older versions), alternative platforms (Mac, Linux, older versions of Windows), and mobile devices. An easy way to do this is with Browsershots.org.
Liquid layout: The home page size should adjust to different screen resolutions and browser window sizes, and not leave gaping holes where content should be. Some visitors will increase the font size to make text easier to read. Try this with your home page (hit CTRL + a few times in your Web browser) to see what happens to the page design. If the results are disappointing, rejig your font sizes (go with relative, not absolute) and your layout.
Testing, 1, 2, 3: Test my assertions. Test your own assumptions. Test everything. You could do simple A/B split testing, but even better is multivariate testing, where you can test many variables at once. It doesn’t have to be expensive or time consuming. Sure, there are great pay options such as Offermatica, Optimost, and Vertster, but there’s also Google’s free Website Optimizer.
Bells-and-whistles disabled: Turn off CSS, JavaScript, images and Flash, in various combinations. This will help you “see” what your site looks like to different users, including spiders, which turn off all four of the above. This is accomplished most easily if you utilize a tool such as the Web developer extension for Firefox (https://addons.mozilla.org/en-US/firefox/addon/60).
Displaying alternative attributes will help you clearly see what is behind your images. Not every user enables JavaScript, so by turning off that function you can see if you need to provide alternative means of navigation.
Eye tracking and click tracking: Eye tracking and click tracking can help ensure things that are important to you are not being missed or ignored by your visitors. Eye tracking studies, like those conducted by Eyetools, provide insight on where a representative set of users focus their eyes when viewing your home page (or other pages).
Click tracking software (like CrazyEgg) analyzes where your visitors click. Both eye tracking and click tracking will display the results in the form of a heat map, like the ones at http://www.MarketingSherpa.com/tele/LPET.pdf and http://crazyegg.com/overview#heatmap.
The keys to having a great home page are now within your grasp. Whether you incorporate these tips slowly and individually over the coming months or save them up for an extreme makeover, I think you’ll find there’s a lot of money to be made through tweaks to your home page UI.
Stephan Spencer is founder/president of Netconcepts (netconcepts.com), a Madison, WI-based SEO agency.