Back to main workshop page

 

Usability is a measure of how easily your product or service can be employed to satisfy the user's needs.  (Some people separate the usability of a site – how easy it is to learn, navigate, etc. from the utility of a site – can you accomplish the desired task).  In these notes, we first identify several shared characteristics of highly usable Web-based products and services.  Second, we review helpful metrics when designing for usability.  Finally, we review usability studies to explicitly measure design success.

 

1.0 Dimensions of usable design.

 

The common design characteristics of successful sites may be  organized along three different dimensions:  Page-level structure, site-level structure, and content.  Conforming to design conventions is a simple way to enhance usability.  Deviations are typically successful only under two circumstances:  [1] the specific product or service explicitly requires it or else [2] the deviation is a critical differentiator that itself represents an innovation in user experience that becomes a standard.  We present conventions in each dimension as guidelines and discuss successful deviations from those conventions.

 

1.1. Page-level design considerations. 

A website is constructed as a collection of individual pages.  Regardless of the product or service being delivered, page-level design tends to adhere to two common conventions:  place page-level elements in standard locations and minimize scrolling.

 

1.1.1. Place page-level elements in standard locations.  Core content typically appears in the center of the page framed to the left, to the right, above, and below by different functions.  To the left, the core content is framed by a navigational bar containing links defined by an organizational schema.  The core content is framed to the right by ads, promotions, illustrations, and other dynamic and variable content.  Above and to the left is the site logo that typically doubles as a direct-link to the home page.  Above and to the right are personalization links.  Above and to the center are some combination of a tabbed navigation bar for global context, a breadcrumb navigation bar for local context, and/or a search bar.  Below are institutional links including information about the company including links to contact information and privacy policies. 

 

Examples.  The New York Times, Amazon.com and CNN all conform to the standard layout of page-level elements.  Notice that Kayak deviates by placing its search function in the center of the page because its core service involves search-based access to airline pricing.

 

1.1.2. Minimize scrolling.  Often referred to as the "top-fold," this convention derives from user studies which show that fewer than 50% of all users scroll vertically beyond one screen's worth of content and even fewer scroll horizontally.  Designers are therefore advised to assume a common standard screen size and resolution (currently between 19 and 21 inches at a resolution of 1024 x 768) and to also test their content on various screen sizes and at different resolutions. 

 

Examples.  Google's core functionality is concentrated within a single page and the Craig's List for any given city is just over one page in length.  Longer pages such as CNN or the New York Times employ the physical newspaper metaphor to place prominent news headlines and story summaries "above-the-fold" with links to other stories further down.  Moreover, customization options at sites like the BBC (see the discussion on "personalization" in the session on Enabling Technologies) allow users to adjust what appears "above-the-fold."

 

1.2. Site-level design considerations.

Site-level structure is defined by the organizational schemes by which users navigate a site.  You can read more about organizational schemes in the discussion on Information Architecture.  Two common guidelines in establishing site-level structure are to provide navigational context and to minimize page clicks.

 

1.2.1. Provide navigational context.  Regardless of the navigational scheme employed, usability is best achieved by consistently providing users with a combination of global and local context.  From any page within the site, users should know how the current page fits within the principal navigational scheme of the site (global context).  In addition, as noted in the discussion on Information Architecture, a single site may employ different navigational schemes within and between different content groupings to target different users and needs.  Local context enables users to see how the current page fits within an alternate navigational scheme.

 

Examples. Macy's exemplifies many retail sites.  A combination of left-hand and tabbed navigational bars provide global context, signaling transitions between different departments.  A breadcrumb navigational bar provides local context within a department. ("Breadcrumbs," evoking Hansel and Gretel, refers to a line of hyperlinks corresponding to the path the user has taken through the site structure, usually provided near the top of the page. For example: HOME > products > apparel > hats.) Others use breadcrumbs to lead customers through the stages of a multi-step process (e.g. purchasing and shipping at Amazon or completing an electronic income tax return at Intuit).  Not all sides provide context, however.  Services accessed primarily through search rather than browsing have no site-level context to maintain.  A Google search result page does not frame results in the context of all possible searches.

 

1.2.2. Minimize page clicks.  A well-designed navigation scheme is driven by the observation that users are fundamentally lazy.  Consequently, the designer's objective is to minimize the number of pages that a user must traverse in order to discover the content that they seek.  The challenge is to balance two competing demands:  [1] minimizing the amount of information on a single page in order to minimize scrolling (see above) and [2] increasing the amount of information on a page to minimize the number of pages that the user must scan and click through. 

 

Examples.  Craig's List minimizes page clicks by compactly presenting direct links to numerous classified sub-areas on a single page. The tradeoff is that there are more topics than will fit on a single, standard screen.  Amazon patented One-Click shopping to minimize purchase steps.  In some instances, however, extra steps that may slow the user are deliberately inserted.  Legal considerations may require the user to scroll through an entire text-window containing Terms-of-Use before proceeding. Consider also attempts to cross-sell or up-sell users on services such as the promotional pages inserted by Intuit in its Turbo Tax personal tax filing software. 

 

1.3.  Content-level design considerations.

Content level considerations encompass everything from the selection of text and graphics to the use of animation and pre-defined widgets.  To meet the needs of the user, the appropriate content-level decisions will vary tremendously depending upon the product or service.  Numerous collections of good examples abound and the reader is advised to consult collections such as:

• Prioritizing Web Usability
• Designing Interactions

However, a few conventions regarding language, speed, and user-input are consistent across effective sites.

 

1.3.1. Match user language.  Meeting user needs means matching the language of the user.  The terminology, depth, and breadth of a site should align with the intended audience.  Terminology refers to the vocabulary, writing style, and syntax.  Depth refers to the level of detail with which a site addresses selected topics.  Breadth suggests the range or scope of the topics being addressed. 

 

Examples.  Consider two different digital camera buying guides:  DP Review and Better Photo. Note differences in the depth and breadth of the vocabulary with which camera features are addressed.  Then, consider a third guide: Better Photo redux. Switching to an entirely different vocabulary (images rather than text), this third guide targets users who are more visual in their approach.

 

1.3.2. Design for speed.  As users today increasingly access the Web over high-speed networks, the temptation is to include Flash, video, audio, and other multimedia features to embellish sites.  However, such flourishes often impede rather than enhance usability, adding needless steps or distracting content, particularly for repeat users.  The obvious exception is when the product or service is the delivery of video, audio, etc.   Other objectives such as brand buildling or the creation of a user

 

Examples.  Consider two user-personas:  [1] a brand-sensitive user, new to the sport of running wishing to purchase a pair of Adidas running shoes and [2] a user seeking information to verify whether a specific model, the Adidas Supernova Cushion 7 in men's size 10.5, is the proper shoe for their running style and then wishing to purchase that shoe.  Two different sites: Adidas and Zappo's sell shoes.  Both sites provide search boxes for direct access to makes and models.  However, consider the browsing/shopping experience for Persona 1.  If a user selects the correct ShopAdidas store category from the appropriate menu tab, the Adidas and Zappo's experiences are quite similar.   In all other instances, users must avoid crashing the site while downloading and then navigating multimedia Flash content with limited guidance on the different options.  The additional embellishments provide little added benefit to Persona 1.  Conversely, if the user can find it, Adidas provides an inter-active shoe-finder application for Persona 2. 

 

1.3.3. Minimize user-input.  With the rise of Web-based social networking, gathering user input has become as important as disseminating information.  Guidelines for collecting content from the user include: keep it to a minimum and keep it simple, standardizing with widgets where possible.  Two obvious exceptions are products or services whose raison d'etre is the aggregation of user input and user-logins related to personalization (we discuss personalization further in the session on Enabling Technologies).

 

Examples.  In many Web-based products and services, the collection of order, billing, and shipping information is a common reason for gathering user input.  One-Click ordering or personalized user-accounts are methods that minimize the need for repeated entry.  The combination of text entry, drop-down menus, and radio buttons for entering addresses is now relatively standard across all commercial sites.  Radio buttons, check-boxes, and drop-down menus simplify input while reducing the potential for data-entry errors.  At TripAdvisor, customer reviews of hotels are the core service.  However, certain portions of the review are standardized using check-boxes such as asking users to self-classify the purpose of their travel.  By standardizing user feedback, TripAdvisor can support enhanced services e.g. filtering reviews so that business travelers read reviews by other business travelers (see also comments on "personalization" in Enabling Technologies). 

 

2.0  Designing for Usability.

 

The characteristics of well-designed sites are divisible into three dimensions:  page-level, site-level, and content.  Having identified the characteristics of good design with respect to these dimensions, we now consider metrics that quantify these characteristics to guide design for usability.  

 

2.1. Page-level metrics.

2.1.1. Fitts's Law.  Adapted to Web site design, this is a mathematical model of human behavior used to predict the time required to click on a navigation link based upon the size of the link or button and the mouse-distance traveled.  In page-level design, Fitts's Law explains the conventional layout where navigational elements are oriented on the edges of a Web page with the most prominent items in the upper-left and upper-right corners.  The left-hand navigation bar on any given page should be reserved for the organizational scheme matching the local context of that page.  Because of Fitt's Law, excessive use of drop-down menus is discouraged. 

  

2.1.2. Page scrolling, vertical.  Empirical studies verify that fewer than half of all users vertically scroll on a page.  Adjusting for different screen sizes and resolutions, designers should measure the number of vertical screens per web page.  In page-level design, the disinclination to scroll explains conventions that limit a page to no  more than two or three screens.

 

2.1.3. Page scrolling, horizontal.  Empirical studies verify that users are even less likely to scroll horizontally than vertically.  Adjusting for different screen sizes and resolutions, designers should measure the number of horizontal screens per web page.  In page-level design, the significant barrier to horizontal scrolling explains why navigational elements tend to appear on the upper, left-hand, and lower borders of a page.  Advertising elements are typically placed along the right-hand border so that if screen size and resolution dictate horizontal scrolling, the least important items are truncated. 

 

2.2. Site-level design metrics.

2.2.1. Navigation test.  User studies suggest that that the three common navigational questions posed by users are:  where am I, what is on this page, and where can I go from here?  In site-level design, a simple navigation stress test helps determine the need for local and/or global contextual navigational elements.  Good design will almost always provide a link back to the Home page.  The left-hand navigation bar is the logical location for providing local context which may be the same as global context in a narrowly targeted product or service.

 

2.2.2. Page breadth/depth.  For any page in the site, designers can measure the number of navigational elements on the current page (page breadth).  In addition, designers can measure the minimum number of pages between the current page and the home page as well as the maximum number of pages between the current page and the home page (page depth).  In site-level design, maximizing usability means selecting appropriate primary and secondary organizational schemes to minimize the number of steps that users must take to achieve their desired outcome.

 

2.3.  Content-level design considerations.

2.3.1. Content map.  A content map is a tabular inventory of the major item headings and navigational elements on a site.  For each entry, note where the information comes from and how different user populations name the same elements. Card-sorting techniques may be used to check hierarchical groupings of major item headings. In content design, the content map is a comprehensive way to measure and ensure the consistent use of terminology across all headings and navigational elements. A content map also facilitates comparative analysis by comparing the resulting groupings and item headings to those of competitors.

 

2.3.2. Keystroke mapping.  Count the total number of keystrokes (not only navigational pages) required to complete a specific user task.  In content design, keystroke counting helps minimize the number of steps required to achieve a particular task. It also helps identify opportunities to introduce widgets such as drop-down menus or check-boxes in place of text-entry fields to reduce opportunities for data entry errors.

 

3.0 Usability Testing.

 

A/B testing and multivariate testing are techniques for designing based upon feedback from actual users or personas (virtual user profiles that are modeled after exemplary target users). First, select a user sample and/or create one or more virtual personas.  Second, define an explicit task in line with needs targeted by this product or service.  Third, identify one or more design choices at the page-level, site-level, and/or content level.  For example, consider the placement of particular navigation elements or the use of different organizational schemes.  Fourth, identify explicit alternatives for each design element.  Navigation elements might appear in a left-hand navigation bar or as a tabbed navigation bar.  The organizational scheme for the navigation elements might be task-oriented or alphabetical.  Multiple versions of the site are prototyped where each version includes some combination of the different design alternatives. 

 

In multivariate testing, regression techniques are used to assess the impact of specific choices on one or more dependent variables that measure usability.  A/B testing may be characterized as a special case of multivariate testing where there are only two different versions of a site and changes in the dependent variable are correlated with a version without attribution to explicit design choices. 

 

Usability measures in user testing include: time-to-complete the task, completion rate, and errors.  For example, a site might support task completion via a single link; but if users cannot find (navigation) or cannot interpret (content) the link, users may take longer than anticipated or give-up entirely.  User testing can report time-to-completion in actual units of time.  User studies will also validate whether assumptions used in static analysis actually hold.  For example, does the user clickstream match design assumptions about the number of pages navigated or keystrokes required to accomplish a task.  Completion rate measures how often users give-up.  In the process, documenting user errors reveal opportunities to update certain design choices.  Addtionally, user testing allows for surveys to gather self-reported, subjective measures of user satisfaction.