The BEST way to do usability testing

My friend Matt knows the best way to add usability testing to application development – do usability testing early (and often) – unfortunately he (and many other application development companies) can’t always do it.

Matt’s a business development guy for a software development company – not only is he good at application business development, he’s also a really nice guy.

Matt is up in Chicago right now freezing his tail off, demonstrating a new application to his customers and getting feedback from them.  Unfortunately, Matt couldn’t add usability early in this project because budgets, timelines and deliverables were already contracted before he met me and thought about adding usability to this project.  Next time Matt!

Anyway, Matt wanted to include usability testing as part of the development process, knowing this would make for a more usable application and provide his clients with a better application.  The problem however is the application development process for his application is almost complete.  All the design and usability decisions have already been made, coding is done, and it’s a bit too late to make significant usability changes now.

The best usability means starting usability testing early

Matt and other smart developers know that adding usability testing very early, like at the beginning of the development process is the best way to go.

There are 2 major advantages to adding usability early:

1. Lowest Cost – Adding usability at the beginning of application development is the lowest cost way of performing usability testing and optimization.  At the early conceptual stage, card sorts, wireframe tests, reverse card sorts and user research can be conducted easily, with minimal tools (like paper and pencil even) but with maximum data.


Obtaining user feedback about information architecture, labeling, navigation and layout is super easy at the stage.  And it’s amazingly low cost, the only real costs involved are time spent considering alternatives, time spent asking users usability questions, and time spent re-drawing an information architecture, wireframes or cards for a card sort.

2. Highest Influence – Conducting usability testing early in the design stage enables developers to have access to information that can dramatically influence the design of the application.  User feedback early in development will uncover any potential major issues with information architecture, because users can provide feedback about their mental map of how a process should flow.


Being able to make major changes to an information architecture to better suit your end-user needs at this stage is as easy as re-drawing an information architecture document, but as significant as saving an application from major usability issues and massive wasted coding time near the end of the project.  It also saves the large amount of time and resources necessary to make changes to the application after it has gone live – to “fix” usability problems post-launch.  It’s far more efficient to catch usability issues prior to coding, rather than after coding.

Obtaining direct user feedback as the software development life cycle advances means making continual small but significant optimizations to the application.

Consider Matt on his airplane flight from Boston to Chicago – it’s far easier for his plane to make small course corrections as it travels on its path, vs one major course correction near the end of its journey.  Likewise, it’s far easier, but more significant, to make small application changes based on end-user feedback from usability testing throughout development process, vs at the end.

This chart that I had used in my Overview of Usability presentation I think summarizes pretty well why starting early with usability makes the biggest impact.

Usability and its impact on design

What am I saying here?

Your best usability impact on an application comes early in the process, while your ability to make changes is great, and the cost to make those changes is minimal.

Don’t wait for your application to be coded before you think about adding some usability testing.  Your best method of adding usability testing is at the very start of the project.

For my buddy Matt and his Chicago clients I’m keeping my fingers crossed and hoping for the best.  For you and your applications you now know the best way to add usability to your development process.

For more information about the best way of adding usability testing to your application development process just contact me.  I’m a nice guy, and I really know my usability stuff, just ask Matt!

World Usability Day, Nov 12, 2009

Today is November 12, 2009 which means it’s officially World Usability Day. In honor of World Usability Day, the theme of which is “Designing for a Sustainable World” consider how you might make a small contribution to the cause.

From a design standpoint, making things more usable, more efficient, provides a way to promote sustainability. From a human standpoint, doing something to promote sustainability, like recycling bottles and cans at your office, riding a bike to work, or turning a few lights off that are not needed can help. Letting more people know about World Usability Day, and the importance of making the things we use more usable is another excellent way to promote sustainability.

And the World Usability Day site is also promoting sustainability. On the website you can order a free LED light (you just pay shipping and handling) to replace an energy inefficient filament bulb with an LED bulb. The supply is limited to 1,000 free LEDs, so hurry. Just use the WUD2009 promo code on checkout. That’s another small way you can help promote a sustainable world.

For more information about World Usability Day you can read my recent interview with World Usability Day found Elizabeth Rosenzweig.

Spread the word about World Usability Day, and do just one small thing to promote sustainability. Put together, our little small things can grow into a mountain of big things that help our world, and each other!

Vertical Navigation Types and Usability

This article, vertical menus and usability, is part 2 of a multi-part series on main navigation types and their impact on usability. The first part is “Main Navigation – Horizontal Menus and Usability.”

(For ease of reading, I’ll use the term “web site” in place of “web site or web-based applications.”)

Vertical Menus

Vertical menus (or left side menu navigation as it’s sometimes referred to) are another commonly used web site main navigation technique and have several usability advantages and disadvantages. With vertical menus, typically a web page is divided into 2 or more columns, the vertical menu column being used for the main navigation, and the other column or columns for content, advertising, links and so forth.

It is important to note that vertical menus as main navigation do not have a horizontal menu bar present at the top (or bottom) of a web page. To be classified as a vertical menu main navigation, ONLY the vertical menu is present. Web sites that use a horizontal and vertical menu configuration are referred to as L shaped configuration menus, which I’ll cover in more detail in the next post in this series.

Left Side Vertical Menu

The example below demonstrates a left side vertical menu configuration.

An example of a left side vertical menu

Right Side Vertical Navigation

For the vast majority of web sites that use vertical menus for main navigation, the vertical menus are present on the left side of the page (thus the name “left side menu” or “left side navigation”). However, vertical menus can be located on the right side of the web page as is demonstrated below.

An example of a right side vertical menu

From a usability perspective, it makes little difference which type of vertical menu, left or right, is used as long as the use is consistent throughout the web site.

In the past, say about 9 or 10 years ago, there were examples of large web sites using right side vertical menus for main navigation. However as I documented in my post “Right Side Main Navigation is Gone” the use of right side vertical main navigation has all but disappeared from large web sites.

One example of a large web site using right side vertical menus for main navigation was Adobe. Back in 2002, Adobe used right side vertical menus for access to content as can be seen in the screen shot below.

In 2002 Adobe.com used right side vertical menus

To be 100% technically correct, Adobe also had a horizontal main navigation bar (containing Store, Products, Support, Corporate) thus could be termed a reverse L shaped main navigation scheme – however for purposes of this discussion we will use it as an example in that the primary user content links and attention is drawn to the right via the use of icons and larger font size text.

Structure of Vertical Menus and Usability

The structure or organizational formatting of the vertical menu has dramatic impact on usability. Smart web sites will structure their vertical menu main navigation to the mental map (expectations) of their typical users. There are primarily two types of Vertical menu structure:

• Category –lists links in categorical order
• Alphabetical –lists links in alphabetical order

Using the correct vertical menu structure for typical web site users is the easiest way to ensure good navigational usability and user experience satisfaction. Using the incorrect vertical menu is the easiest way to ensure poorer usability and can be the cause of many users abandoning a site.

Amazon uses a vertical menu that is based on a category structure, as is seen in the screen shot below.

Amazon.com uses categorical vertical menu structure

Ebay uses a vertical menu that has an alphabetical organizational structure as can be seen by the screen shot below.

Ebay uses alphabetical vertical menu structure.

Vertical Menu Display Methods and Usability:

There are a variety of ways to display the vertical menu links, and as with the organizational structure the display method used can have a dramatic impact on usability.

In general, there are three primary ways to display vertical menu links:

• Standard display listing
• Tree listing
• Grouped listing

Examples of Standard, Tree (demonstrating expanded sub-level) and Group listings

Standard vertical menus from a usability standpoint are very efficient and user friendly. Standard vertical menus have listings of first level links only. Because they use minimal vertical and horizontal space, well thought-out standard menus enable the display of more web site content, which also helps create a more user friendly experience. However, standard vertical menus cannot display sub-level links and thus are not useful for larger sites with many sub-level pages.

Tree vertical menus are a variation of standard menus in which 2nd or 3rd level items are displayed using indents to indicate the subordinate level. Tree vertical menus solve the problem of providing additional navigational links for sub-levels, however they do have their own usability issues. Indents must be great enough to visually differentiate sub-levels from main levels. This has the undesirable effect of making the menu take up more horizontal space which negatively impacts the space available for content.

In addition, if there are many 2nd and 3rd level links, the vertical menu can become very long horizontally, creating undesirable usability issues with large amounts of scrolling, which requires users to “remember” where potential links are, and forcing some important links to be well below the fold.

To counter the issue of a very long vertical menu bar, designers can use an icon for expanding and contracting sub-levels (as demonstrated in the Tree listing above) to reveal or hide sub-level links. The benefit for usability is the ability to “reveal” or “hide” additional sub-levels of navigation, which keeps the vertical navigation menu shorter and thus more convenient for users to scan and use.

Typically arrows or other forms of icons are used to visually inform users that a 1st level link contains sub-levels.

As with the example of Windows Explorer demonstrated below, clicking the icon reveals the sub-levels, and the icon changes to indicate the sub-level is now in its revealed state (as with the downward arrow in the above example). A second click on the icon once again hides the sub-level, and the icon returns to the original view to demonstrate the sub-levels are in a hidden state.

Screen shots showing Explorer hiding & revealing the “Pictures” folder sub-levels

Another variation of using Tree based navigation is the use of fly-out menus to reveal sub-levels of links. As is demonstrated in the Amazon.com screen shot below, fly-outs enable 2nd and 3rd level links to be displayed to users. Fly-outs improve usability by minimizing the amount of screen space the vertical menu bar uses.

Fly-out menus can be trigged via mouse clicks or as is demonstrated below with mouseovers. From a usability standpoint choosing which type of trigger to use to reveal the fly-out will depend on the abilities of the typical users who interact with the web site.

Amazon uses mouseover fly-out menus to display sub-levels of vertical menu links

A recent variation of this fly-out method is the Mega Fly-out vertical menu, as is demonstrated in the screen shot from Sears.com. Mega fly-out menus can contain a large number of sub-level links, and can be grouped and categorized using headers, white space and font sizes.

Sears uses Mega fly-out menus to display multiple vertical menu sub-links.

Mega fly-out menus have the usability advantage of providing a much larger set of sub-level links for the user to find and evaluate.
However, mega fly-out menus also have potential usability issues that should be noted, some of which include:

• Mega fly-out menus may be difficult for certain users to access, especially users with mobility issues.
• Mega fly out menus can cause designers to consider adding additional navigation links in the mega fly-out that technically are not sub-levels of the main vertical navigation link. This could add to user navigation errors if uses become confused about what sub-level content belongs under each main vertical navigation link.

Grouped vertical menus generally use a combination of labels, white space and font and size treatments to visually cluster similar links together. From a usability perspective the use of these visual techniques helps users scan and navigation vertical menu links.

Grouped vertical menus can be organized either by categories or alphabetically. As can be seen in the screen shot from USA.gov, this vertical menu is grouped by categories.

Example of USA.gov Grouped vertical menu

Typical grouped vertical menus share several traits in common:

• Large headings define each cluster or group of vertical menu links
• Headings are often not links themselves
• 2nd and 3rd level links are usually not displayed in the main vertical menu

Grouped vertical menus can help improve usability, by visually grouping or clustering similar main navigation links. When used with an information architecture that is carefully mapped to user expectations, this can be a very powerful means of improving navigation usability. This is because grouped menus reduce the cognitive load of users by helping users focus on clusters of links, instead of having to read and comprehend each link a long listing of links (as happens with a standard vertical menu using a categorical listing).

Benefits of Vertical Menus:

• Enables larger number of menu links to be displayed down the length of the page
• Provides easy scanning of menu items
• Scales well vertically, with the ability to add additional menu links downward

Limitations of Vertical Menus:

• Does not scale well horizontally, especially if displaying 2nd or 3rd level menus
• Longer vertical menus may hide important links below the fold
• Adding 2nd and 3rd level menus typically requires using fly-outs or other display methods which can cause additional usability issues
• Large numbers of vertical menu links may cause additional user cognitive load

Summary – Main navigation using vertical menus

Vertical menus as a main navigation type are useful when displaying longer listings of menu links, and thus have an advantage over horizontal menus in this regard. However, vertical menus come with usability issues that must carefully be addressed if the number of menu choices exceeds the visible space above the fold.

Using the Group or Tree types (with fly-outs) of vertical menus is a common way to present additional 2nd and 3rd levels of menu selections for vertical navigation. However, the information architecture must align with user’s mental maps to ensure maximum usability of these more complex navigation systems.

For more information, see Main Navigation Types and Usability, Part 1, Horizontal Navigation