|
A Look At Home Page Usability |
|
|
April 29, 2003 Issue IV WeidmanConsulting.com Home Page UsabilityWill Weidman Also available: PDF version of this article. This issue of the WC Journal is the result of reading an excellent book and then applying the concepts described in the book to my own Web site. The book is "Homepage Usability: 50 Websites Deconstructed" by Jakob Nielsen and Marie Tahir. Dr. Nielsen is possibly the most notable Web usability expert in the industry, and he has written several books on the subject. His usability Web site is full of useful articles and news. (You might also notice that the site’s appearance is quite minimalist, which is in line with his own philosophy of Web design.) The book is very readable and full of examples of the authors’ assessment of 50 large and medium-sized company Web sites. After reading the book I decided that my own site could probably benefit from the same analysis. Although I won’t go through each of the book’s 113 home page guidelines, I will focus on those most needed by my site. After reading the article you might think that I am dogging my own site, but that’s not the case at all. My site fared very well against the guidelines, but I chose to focus this article on the areas for improvement, seeing that as being more informative. By the way, in case you are curious, Nielsen’s consulting firm charges $10,000 for a home page assessment. I charge a lot less :-) *** Background InformationIt might be helpful to understand how my Web site design came about in the first place. I do not have any formal background in graphic design, but I do have strong opinions about design for the Web. Although I have some programming background, I am also not a professional Web developer. (The last production code I wrote was written in the "C" language and ran under Windows 3.1 in 1994.) In the course of working in the Web industry for several years, I have picked up some HTML and JavaScript coding skills. When I began to put together my own site, I wanted a very simple design that was more text-emphasized than graphical in nature. I envisioned a site with a lot of content (such as the WC Journal) that would effectively communicate what Weidman Consulting is about, and demonstrate the depth of my knowledge. These factors led me to the text-heavy design of the site which was also well within my programming abilities. Site PerformanceIt is extremely important to have your home page load quickly. All of the other usability factors we will discuss are meaningless if visitors are forced to wait - because they won’t. In my own surfing, if a page is not loading visibly in a few seconds I will assume that the site is broken or that the server it’s coming from is inexcusably slow. There are very few instances where I will tolerate a long wait time before hitting the stop button on my browser and moving on to the next site. There are four factors affecting the load time of your home page:
Page design and server performance are the only two factors that you have some control over, and page design is covered below. Your hosting company controls the server’s performance. If your site is hosted on a shared server (one computer with many Web sites on it), the performance can be affected by how busy the other sites on the server are. A dedicated server for your Web site might be an option to improve performance if you feel that the shared server is a problem. The other two performance factors, network loading and client PC performance are out of your control. You cannot control how busy the Internet is or what kind of computer and Internet connection your visitors are using to get to your site. On this note, remember that there are still a lot of dial-up users out there, and those users are particularly sensitive to page load time. (A client of a Web development company I once worked for had a very wealthy clientele. He insisted he was going to purchase an adequate PC for each of his clients so that they could experience his company’s Web site in the "proper way." Needless to say, this approach is out of the reach of all but a few companies, and not even that company actually followed through with the idea.) The design of the Web page can significantly affect the download time, and it is something that you can control. The number and size of the images on the page can cause it to bloat. A text-only page will load much more quickly than the same page with graphics added. Nielsen recommends a page size of 50 kB or less. I used a freely available tool at the Search Engine World Web site (WebPage Size Checker) to check the size of the Weidman Consulting home page. Here are the results:  The presentation of the results is a bit confusing - you can’t just add all of the numbers to get a "Grand Total: Images+HTML" of 26,926 bytes. The two key numbers are: "Total WebPage Size" and "Size of All Images." The first tells you how large the raw HTML file is that contains the coding for the page (8,621 bytes for my site). The second number tells you how large the image files are that are downloaded in addition to the raw HTML page (18,305 bytes). The sum of the two, 26 kB for my home page, isn’t too bad compared to the book’s recommendation. My page loads in 2 - 3 seconds using my cable modem connection. (Note: if you want to check your own load time make sure you clear out your local cache of files - your browser keeps copies of frequently accessed files on your hard drive to speed up the display of pages you visit often. In Internet Explorer you need to go to "Tools > Internet Options > General > Temporary Internet Files - Delete Files.") It looks like my page design is in good shape from a load time perspective. If I redesign it, I will have to keep this factor in mind. I have had generally good performance with my hosting provider (my site is on a shared server), so I don’t see any performance issues that need to be addressed. Communicating the Site’s PurposeNow that I have determined that my site loads quickly enough, the rest of the usability test begins. You can use this static snapshot of my home page for reference. (Note: this is just an image of the site - you can't click on the links, and it will open in a separate window.) The home page must communicate quickly and effectively what the company does, or what the intent of the Web site is. It’s very important to have the company logo present, marketing "tag line" (if applicable), and a description of the products and services. My site met the book’s criteria with the following exceptions:
I don’t have a tag line, but that’s OK. The lead paragraph does explicitly state what Weidman Consulting does, which I think is the most important factor in this category. Communicate Information About Your CompanyAs Nielsen and Tahir state, "People like to know with whom they are doing business, and details about the company give credibility to the site." Each home page should have an "About Us" link. The preferred label for this link is "About <name-of-company>." Although my site has an about us page, I used the non-conventional "Who We Are" label for the link. In the month of March 2003, that page was the third most visited on my site. It is clearly an important page to have. Another must-have link from the home page is a contact page, with "Contact Us" being the recommended label. My contact page gives you all the critical info needed to get a hold of me, and uses a simple e-mail link for electronic communication. It could be enhanced with an online form, although the book does not make a recommendation either way about this. Content WritingAccording to Nielsen and Tahir, Web content should be optimized for scannability and convey as much as possible in a few words. My site is not the most scannable. I tend to fall on the side of more text content per page than the norm. I have heard arguments on both sides of the long content versus short content Web page issue. For content rich sites, I think it’s impossible to separate articles out onto multiple pages, or edit it down to be more "Web friendly." I think that a good compromise for my site would be to reduce the amount of text on the home page to make it more focused (more on that below), but keep the interior pages as is. Another aspect of content writing discussed in the book is the use of customer-focused language. The content should be written to accommodate the visitor’s point of view and avoid "insider" language. Looking at my home page, I realized the WC Journal link in the top navigation violates this guideline. Anyone who was visiting the site for the first time would have no idea what the link was to, although they might guess. The WC Journal page is the eighth most popular page on my site, yet I think that it offers the most useful content of any of the other areas. This tells me I need to modify the site to make its value more obvious to the new visitor. A visitor-friendly description on the home page is probably a good place to start. LinksThere are a couple of straightforward guidelines for links presented in the book. The Web page programmer has flexibility over how links are presented on a page. He or she can change the color of the text, the color of the link after it’s been visited, and whether or not the link appears underlined. The guidelines recommend sticking to the traditional blue for unvisited links and purple for visited links. Links should be underlined except when in navigation bars, where the user knows that he or she is looking at a list of links. I have violated these guidelines in two ways. First, the blue-colored underlined links that appear in the body text and News areas do not become purple after the pages have been visited. I did this on purpose, and it was done to keep the appearance of the page consistently the same. The book offers a good argument for changing the appearance of visited links, though. It does help users remember which pages they have visited. Also, you probably didn’t know that the titles of the blue and green colored box areas are also links ("Internet Marketing & Web Strategy" and "Web Project Services"). These don’t look like links because they’re not underlined and the font is black. Again, this was purposeful at the time. I was trying to de-emphasize these links, wanting visitors to go directly to the key links shown in the body text of each colored area (like the one for "Search Engine Optimization (SEO)"). The subtle links still work for search engine crawlers coming to the page - they still find and index the pages that those links point to. In retrospect, the pages linked to by those headings are valuable and should probably be more prominently presented. NavigationThe main navigation on my site is across the top, with a secondary version in the footer. This is one of the standard configurations discussed in the book (which is good because it is familiar to users), but does violate the guideline that states not to include redundant links, which my top and bottom navigation do have. The book recommends avoiding commonly found pull-down menus because they "hide" the menu choices. My site does not use these because my personal preference is not to, and because the site is not so big that the navigation is complex. I have read Dr. Nielsen’s opinion against dynamic navigation (expanding menus activated by hovering or clicking) before, and I believe that there are good arguments on both sides of the argument. For my site, no changes are needed here. Graphics and Graphic DesignMy site doesn’t include too many graphics. There’s one picture on the home page, and the "Why Do Only 27%..." panel is also a graphic. Graphics should be meaningful and not gratuitous. Nielsen and Tahir give the example using a photo of someone meaningful to the context of the content rather than a stock photo of a nameless individual. The picture on my home page is intended to convey a "light at the end of the tunnel" feeling. People have responded positively to the image, so know that it adds value to the page. The book recommends a 12-point font for main body text. This is actually quite large - my site currently uses 8-point. The challenge is getting as much information on the first screen ("above the fold" in newspaper terms) as possible. If I were to increase the font size that much, the page would go from being just over two screen lengths (at the most common screen resolution of 800 x 600 pixels) to - well - a lot more than that. When I redesign the page, I will have to play around with this a bit to get a happy medium. One of the most important aspects of the home page design is the presentation of a number of competing actions. If the page offers too many choices, all equally prominent, then users are likely to get confused. For example, my home page is designed to attract visitors to the following links:
The links in the "Web Project Services" area are also important, but those noted above are placed higher on the page for a reason. Likewise, the "News" links are important, but are in a smaller font so that they compete less with the main links. (That font really violates the 12-point guideline.) There are 29 links on my home page, and if all of them were presented with equal emphasis and weighting, it would be far more confusing. The problem does get more complex as sites get bigger. Every group or division or individual in the company wants equal space and attention on the company home page. The challenge is minimizing what you emphasize there, because all topics should not be given equal billing. By the way, my Web logs tell me that my three targeted links are not the top three paths from my home page to the rest of my site. This data will help me improve the design and increase the number of visits to those pages. Measure ItI am seriously thinking about re-designing my site after completing this exercise. As noted earlier, there are 113 total guidelines presented in the book and lots of excellent examples. What I’ve discussed here is just the beginning. One additional point to walk away with is that you can look at the data generated by your site and measure how well you’re meeting the needs of your users (and how well you’re satisfying your goals for your site). By examining which pages are most popular and what paths through the site are taken most frequently, you gain insight into the behaviors of your visitors. This is just another example of how important Web Metrics (discussed in 2/5/2003 WC Journal) really are. *** I hope that you continue to find insight and value in the WC Journal, and welcome your comments, which can be addressed to me at will@weidmanconsulting.com. I encourage you to subscribe to the WC Journal so that you can receive articles via e-mail as soon as they're published.
Full list of WC Journal articles
|
|