Study Guide for the Homepage Usability Book

Many companies run reading groups or study groups about usability or web design, where team members meet to discuss the lessons from books like Homepage Usability: 50 Websites Deconstructed . The following four exercises will work for home study (i.e., just yourself), but they are mainly targeted at design teams that want to apply the lessons from the book to their own project.
The page numbers in the following refer to the English edition of the book. If you have a translated edition, the guidelines and statistics recommendations may be located on different pages.

Exercise 1: Evaluate a Redesigned Homepage

BBC released a redesign of their homepage after we published the book. Compare the redesigned homepage with the original picture and commentary in Homepage Usability and evaluate how many usability problems BBC solved in the new design.

Calculate two scores: the percentage of good features retained and the percentage of usability problems fixed in the design.

Instructions

  1. Compare the following redesigned homepage for the BBC website to the BBC homepage and commentary in the book .
  2. For each positive design element that the redesign retains , score the design one point towards the positive percentage. If they keep only part of the positive feature, count it as half a point. See "Tips" below for list of positive comments.
  3. For each usability problem that the redesign fixes , score one point toward the usability issues fixed. If they only partially fixed the problem, count half a point towards the total. See "Tips" below for the list of usability issues.
  4. Add up the points for positive features retained in the design. Divide the total by 8 (total possible points). This gives you the percentage of good features kept in the design.
  5. Add up the points for usability problems fixed in the redesign. Divide the total by 28 (total possible usability issues). This gives you the percentage of usability problems fixed in the design.
  6. Finally, compare your scores with our solution. (Please do not follow this link until after you have scored the redesign on your own.)

Tips

Some comments have both negative and positive remarks, as outlined below:

  • Positive aspects. 8 possible points for keeping these design goodies in the redesign:
    Window title, red numbered comments 1, 8, 9, 17, 19, 23, and 24.
  • Usability problems. 28 possible points for fixing these design flaws in the redesign:
    Window title, tagline, red numbered comments 2, 3, 4, 5, 6 (2 points possible), 7, 8, 10, 11, 12, 13, 14, 15, 16, 18, 20, 21, 22, 23, 24, 25, 26, 27, 28, and 29.

The numbers refer to the red "bubbles" in the analysis of the old www.bbc.co.uk homepage in Homepage Usability (shown on pages 84 and 86 in the English edition).

 

Screenshot of the redesigned BBC Homepage

Please compute your scores based on the following screen capture, which we used in deriving our solution. Of course, you can also look at the live www.bbc.co.uk site, but you should score the screenshot below, in order to best compare your score with our results.

Screenshot of the redesigned BBC homepage

Solution to Exercise 1 (please do not peek - don't follow this link until after you have scored the new BBC page)

Even though the BBC changed their design, the original homepage analysis in the book is still of interest. Many of the other websites represented in the book are probably going to take advantage of getting free consulting and will probably revise their homepages as well. That is OK, because the goal of the homepage analyses was not to provide recommendations to 50 design teams. When we write design recommendations, we do so in a different style. The goal of the book is to learn about homepage design by taking a detailed look at a set of case studies. So it's just an additional benefit when readers get the opportunity to compare the before and after versions of the pages, and thus see which of the usability problems have been fixed.

 

Exercise 2. Use guidelines to evaluate other homepages

  1. Choose a homepage (other than your own) to use for this exercise. You might want to try evaluating a competitor's homepage, a site with similar business goals, or a homepage from a popular website that interests you.
  2. Take a screenshot of the homepage, to ensure that you evaluate the same design for all of the guidelines. Capturing the page is necessary, because many sites update their content frequently.
  3. Evaluate whether or not the homepage follows the homepage guidelines (pages 10 to 35 in the English edition). For each guideline, give the site one point if it follows the guideline, or half a point if it only partially follows the guideline.
  4. Add up all of the points.
  5. Divide the total points by 113 (the total number of guidelines). This will give you the percentage of the guidelines that the homepage follows.
     

Tips

  • Although you should use your screenshot of the homepage for the exercise, you'll probably need to have the live site available, in order to check some links or functionality.
  • Limit your scoring to the homepage, even if you need to go to other pages in the design in order to evaluate it. For example, a site might have a section with information about the company, but not have any link to it on the homepage, and so shouldn't get any points for that guideline.
  • It may be that some of the guidelines don't apply to the homepage you are evaluating. For example, the guidelines for presenting stock quotes would not apply to a page without stock quotes (for example, a homepage for a government agency). If you are certain that a certain guideline doesn't apply, then you should not add a score for that guideline. In such cases, you would use a smaller number than 113 as the divisor in step 5: you would divide by the number of guidelines scored, not counting those that do not apply.
  • Reading groups can do this exercise in a variety of ways. Groups can evaluate the sites together, but we recommend that each member do the exercise independently, and then get together to compare and discuss the scores and rationale as a group activity.

 

Exercise 3. Evaluate your own homepage's guidelines compliance

Use the procedure in Exercise 2 to evaluate how closely your company's own homepage follows the homepage guidelines.

 

Exercise 4. Evaluate how close you are to the "recommended homepage design"

  1. Evaluate how many of the recommendations your homepage follows from the table at the end of the statistics chapter (pages 52 and 53 in the English edition), using the following procedure:
  2. For each recommendation in the table that your site follows, give yourself points equal to the number of stars in the "Strength of Recommendation" column. For example, if you have your logo in the upper left corner, you get three points.
  3. Add up all of the points.
  4. Divide the total points by 85 (highest possible score). This will give you an estimate of how close your homepage is to the ideal design, in terms of what percentage of the recommendations you follow.