Perceived Affordance, Usability and Online Sales:

One of the most important goals of web site usability testing is finding and fixing perceived affordance issues.  You can increase your usability, conversion and thus your web site Return on Investment (ROI) by improving perceived affordance.

What’s perceived affordance?  For web site owners, it’s the art and science of designing objects like ‘buy now’ buttons in such a way that your web site visitors know just by looking at it that they can click on it.

One of the most important functions of web site usability testing is to evaluate the perceived affordance of links and buttons.  By testing and optimizing perceived affordance of critical objects, such as “Add to Cart” or “Buy Now” buttons, web sites can dramatically increase conversion, and thus ROI.

Definition of Perceived Affordance:

According to Don Norman, the Godfather of design and usability and the author of the book “The Design of Everyday Things,” the concept of perceived affordance is defined this way;

“The word “affordance” was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal).

What the designer cares about is whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible).

In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The computer system, with its keyboard, display screen, pointing device (e.g., mouse) and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and clicking on every pixel of the display screen.”

According to William Gaver, there are three categories of affordance:

• Perceptible
• False
• Hidden

By evaluating the design elements that communicate perceived affordance for various objects in your web site, you can determine which category an object fits, and if wrong, take steps to correct it.

Perceived Affordance is Critical for Your Web Site Success:

When you think about your web site, your ROI in fact lives or dies on your ability to successfully manipulate design to improve perceived affordance.  Your web site is primarily a one-way pipe of information, the majority being visual information (with the potential for some audio).  You provide the visual information, and your web site visitors consume and comprehend it (or at least try to).

Because the primary interaction that takes place on your site is one-way visual, you must be zealous in your attempts to understand and evaluate how well you are communicating perceived affordance.  Testing and optimization of elements that impact perceived affordance should be your number one goal, because it directly impacts your conversion rates, and thus your web site’s ROI.

Actions your web site visitors take such as mouse clicks or typing characters, although very important, are never going to happen unless you provide clear, consistent and effective visual clues about how to take actions.  You do this by continually testing and optimizing the crucial elements of your site that establish and communicate perceived affordance.

Examples of Perceived Affordance in Buttons:

Let’s examine a few examples of perceptible perceived affordance in action.  In order to visually communicate that a button is clickable and will enable the site visitor to take action, it is necessary to use design to visually separate, distinguish and illuminate a function.

As demonstrated above, Amazon.com uses many design elements to generate high perceived affordance of their “Add to Shopping Cart” button, including use of:

• Strongly contrasting yellow button color
• Only use of that yellow color on the page
• Heavy outline border around button
• Round strongly contrasting icon of shopping basket
• Text in button “Add to Shopping Cart”
• Larger font for button text
• Elongated shape, round on left side, squared on right side
• Gradient fill in top of button to visually mimic 3-D shape
• Dark blue background color for surrounding box

Another example is eBay, which creates a high perceived affordance of the “Buy It Now” button.

For eBay, the “Buy It Now” button uses multiple design elements to effectively communicate perceived affordance:

• Strongly contrasting blue button color
• Only use of that blue button color on the page
• Largest sized button on page
• Text in button “Buy It Now”
• Larger font for button text
• Strong contrasting colors, white text on blue background
• Dark gray background color for surrounding box

To provide contrast, let’s examine use of design elements that appear to provide a function, but in fact do not.  This is known as false affordance, and can work against web site visitors.

False Affordance:

A false affordance is an apparent affordance that has no real function.  False affordance is a major contributor to lower web site conversion and lost online sales.  This is because a false affordance breaks the faith a web site visitor has in the web site’s functional abilities, and causes doubt and confusion.

Example of a False Affordance:

In this example, the prominently displayed “Featured Gift” and photo of the toy seem to indicate that more information about the toy might be available by clicking, but where?  Web site visitors who come across the display are left wondering, because no clear action button seems available for this toy.

A common tool many web site designers use is to make the image of the product clickable.  But that is not the case here.

In fact, there is no action available, the image of the toy is not clickable, nor is the heading “Featured Gift.”  There is no way to navigate to the featured toy using the visual designs offered, thus the connection with a “false affordance.”

There are many types of designs that can lead to false affordance, some of the more common being:

• Objects that look like buttons, but are not
• Photos of objects that are not links, especially if place with photos that are links
• Placing a blue outline around an image or link, yet no link is present
• Underlined text that is not a link
• Use of blue in text that is not a link
• Form data entry fields that are not active

For web site owners, false affordances are extremely damaging, and cause many more problems than simply lost clicks to a particular item.

By prominently displaying a false affordance on the home page, a web site causes damages including:

• Lost faith (visitors wonder – “is this clickable, what about this, or this?”)
• Lost focus (visitors spend more time trying to solve a navigation problem than shopping)
• Lost sales (frustrated visitors will often not complete their task)
• Lost trust (many visitors will simply leave the site – never to return)

Finding and fixing false affordances should be a high-priority job of every web site owner, especially those who own eCommerce sites – as false affordances  cost lost visitors, conversion and sales.

Poor Design and Hidden Perceived Affordance:

As with false affordance, poorly designed techniqes can hurt perceived affordance and can cause major performance issues for web site owners as well.  This is referred to as Hidden Affordance.  In the case of poor design, visual clues that a link or function is present are not displayed as visually separate, distinguished and illuminated.

Example of poor perceived affordance:

The example above demonstrates a site that provides web site visitors with a display of products available for purchase.  However, the function associated with “Checkout Now” – in this case a link to an online order form – is poorly displayed because it has minimal visual clues as to it’s function, and thus has low perceived affordance.

Among the perceived affordance problems with the “Checkout Now” button are:

• No button shape around the text
• Yellow text color is not a strong contrast against the white page
• No underline when mouse rolls over text
• Text in button visually close to “Back to results text”
• Missing a background color to call attention to location
• Upper left location not typically associated with ‘continue’ action

Improve Perceived Affordance with Testing:

So how do you improve your web site objects perceived affordance – with testing and re-testing.  There are four primary types of testing that can be used to analyze and optimize perceived affordance.  They are:

1. Expert Usability Review – Also called a “heuristic review.” This review uses expert analysis of interaction devices such as buttons, links and related functions against industry standards and best practices.  The best form of an expert usability review is to receive several, since each expert might focus on unique aspects that grouped together form a better picture of what needs to be improved and why.
2. Usability Testing – Using 1-on-1 moderated testing, a web site owner can quickly find problems with task flows for critical tasks.  These often involve issues with perceived affordance.  Because usability testing only needs about 7 or so participants, and because it uses real web site visitors, and can be done very quickly and for low cost, usability testing is a great way to find issues with perceived affordance.  It is the only method a web site owner can use to determine the “why” of an actual web site visitor’s behavior.
3. A/B Testing – Two different versions of a button, link or related object can be tested on your web site at the same time using a traffic split.  50% of the traffic goes to the version that has the “A” version (the original version of the object usually) and 50% to the new test “B” version.  After enough statistically significant results are captured, a winner can be picked based on interaction rate.  A/B testing is pretty reliable, assuming enough traffic is present.  However, it won’t tell you the “why” of the visitor behavior, and of course it might negatively impact your conversion if the “B” test version is worse than the original version.
4. Multivariate Testing – For sites with large amounts of traffic, multiple versions of objects can all be tested at the same time.  This allows for rapid analysis and iteration of the best possible combination of elements.  The downside to multivariate testing is it needs lots and lots of traffic to establish statistically significant results.  In addition, as with A/B testing the “why” of visitor behavior won’t be know, only which combination of elements performs the best.

Conclusion, Increase Your Usability and Website ROI with Perceived Affordance

Perceived affordance is critical to your web site success, and to your conversion and ROI.  Perceived affordance determines how well your interaction object designs communicate their function and use to your web site visitors.  Poor perceived affordance hurts your web site interaction, conversion and sales and results in lower ROI.  You can increase your ROI by conducting testing and optimization with the interaction objects on your web site.  An excellent way to identify potential issues and optimizations of perceived affordance is with usability testing.  Continual testing and re-testing ensures you are maximizing your potential usability, perceived affordance and thus ROI of your web site.

For more information about maximizing your web site’s perceived affordance and ROI contact me.

Similar Posts:

• Usability Testing Makes Killer Online Marketing Campaigns
• Main Navigation Types and Usability, Pt 1 Horizontal Navigation
• Customer Satisfaction Surveys are Usability Early Warning Radar
• Nielsen Causes Twitter Uproar – Stop Password Masking?
• Birthday Thoughts and Usability Rednecks

Guest Blog – Susan Weinschenk and Top 10 Attributes of a Usable and Persuasive Web Site

It’s my distinct pleasure to post this guest blog for you by Susan Weinschenk, Ph.D., author of the book “Neuro Web Design: What Makes Them Click?”

I’ve been an avid reader of Susan’s blog “What Makes Them Click” and Susan has graciously agreed to post one of her articles here.  I think you’ll enjoy this article, as well as find it very informative.

Susan is the Chief of User Experience Strategy for Human Factors International (HFI). Her clients call her, The Brain Lady, and that is also her Twitter name @thebrainlady.

Enjoy!

The Top 10 Attributes of a Usable and Persuasive Web Site

By Susan Weinschenk, Ph.D.

Susan Weinschenk

Whether you spend a fair amount of time online, or you are responsible for the design or content of a web site or web application, the list below should be of interest to you.

What are the most important attributes of a web site that make it both usable and persuasive? Why do some web sites succeed in making us click while others result in abandonment?

1.The organization of the information at the website (the information architecture) fits the visitor’s mental model –

Is the website organized the way the visitor thinks? For example, if the visitor comes to a website looking up reviews of computer monitors is there a category called monitors? Or is the information on monitors part of the “Peripherals” category. Do the visitors really think of “peripherals” when they come to the site?

Web designers and content managers are often too close to their own information and need to make sure that the categories and organization of the web site match what most visitors have in their heads when they arrive at the site.

Usable and persuasive sites are designed for the visitor’s mental model.

2. Less is More –

Have you ever heard about the “magic number” 7 plus or minus 2?–the idea that people can remember or deal with between 5 to 9 things at time? Well, that’s a myth. Research shows that the real magic number is 3 or maybe 4.

Research shows that people can only deal with about 3-4 items of information at a time. Anything more than that they are not really seeing or paying attention to.  People will tell you they want more choices, but the research on decision-making is clear that too many choices means that we don’t choose at all.

Usable and persuasive sites provide 3 to 4 clear choices at a time.

3. The top third of the page, in the center, is “prime real estate” –

Where information is on the page does matter. The top third is the part of the page that people see first. Contrary to what some people say, the very top left is NOT the place people look first. The web has come to be much more of a TV model (top middle) than a book model (top left in countries that read left to right and top to bottom).

Smart designers pay attention to what is in this top third of the page. They make sure it is attention getting, meaningful, and speaks to the emotional/unconscious part of the brain, not just the logical /conscious part.

Usable and persuasive sites make good and careful use of the prime real estate.

4. Use visual and cognitive distinctions –

There is a lot going on at a typical web site page these days. There are images, and major category navigation bars. There are links to information about the company or individual who owns the site. There might be a place to go for help, a top banner with a shopping cart and a footer with more information. Then there is the main content on the page, and maybe there is advertising.

The list goes on and on.

In order to make sure the visitor knows where to look the site design has to use both visual and cognitive distinction.

Visual distinction means that a certain part of the screen uses different shapes, sizes, colors or fonts to look different.

For example a navigation bar has a green background, and a border around it. It is a rectangle and it is vertical. The top navigation bar on the other hand is horizontal, is on the top right of the page, is a set of links without a background color or a border. It looks visually different than the left navigation bar.

It’s not enough, though to use JUST visual distinction. The different parts of the page must also be cognitively distinct.

Cognitive distinction means that the items that are in different locations belong together with other items in that location, and are distinctly different than the items in other parts of the screen.

For example, the items in the green left navigation bar refer to different products I can buy. The items in the top right navigation bar without color are where I go to make changes to my account, get help, and ask for support.

Usable and persuasive sites use both visual and cognitive distinctions.

5. Engage all 3 brains –

In my book Neuro Web Design: What makes them click? I talk about the idea that we don’t have just one brain, we really have 3:

• The new brain is the logical/conscious brain
• The mid brain governs emotions
• The old brain is interested in scanning the environment and asking, “can I eat it?” “can I have sex with it?” “will it kill me?”

Engaging the old brain means that you are speaking to issues that are important to the basic self, such as food or security/danger or sex. Since most sites aren’t about food or sex, this leaves danger messages such as security, feeling safe, the idea that we are getting something for FREE or some other trigger that grabs the attention of the old brain.

Engaging the mid brain means that you are using photos or pictures or stories that talk to the emotional part of the visitor.

Engaging the new brain means that you have taken care of all the rational/logical reasons why someone would want to continue at your site.

Usable and persuasive sites engage all three brains.

6. Make text easy to scan –

In general, people don’t like to read online. Devices such as the Kindle are an exception, since they don’t use regular LCD screens. Most websites are still being viewed on regular laptops and monitors, and these are still hard use for blocks of text.

With some exceptions (for example, people who have subscribed to the NYTimes Reader software application), people will not read large blocks of text online. In place of these large blocks web sites should be concise, and use headings, bullets, and small paragraphs to break up text.

Usable and persuasive sites make text easy to scan.

7. Use progressive disclosure to show people what they need when they need it –

Lots of people come to a web site. Some know what they want, some are browsing. Some have lots of knowledge about what the site contains and some are new to the topic.

The best tactic therefore is to use “progressive disclosure.”

This means showing a small amount of information and then having the visitor click for more information. Then there is some more information and they can click again for more.

Have you heard that the user should be able to get to what they want in 3 clicks or less? That’s another myth! As long as the clicks make sense people are willing to “follow the scent” to get to their information.

Usable and persuasive sites use progressive disclosure.

8. Use grouping to show what things go together and limit clutter –

With all the information and pictures and videos and ads that are on screens these days it’s easy to forget that a screen can be visually overwhelming, especially to someone who is new to the page. There is a whole science behind designing screens and pages so that they use grouping to reduce clutter.

There can be a lot of material on the page as long as the things that go together are placed together, and that there is a little more space between separate groups than there is within items inside of a group.

Web sites that minimize the number of unique margins by lining up labels and fields and columns well can have lots of information and still not appear cluttered.

Usable and persuasive sites pay attention to the grouping of information and limit clutter.

9. Build in the features and functionality that make the site become a habit –

Research shows that over time people will tend to focus on one or two web sites for a particular task. For example, they will go to one or two websites for news, one or two web sites to shop, one or two web sites for entertainment. So what makes them choose to come back over and over to one or two sites and let the others fall away?

Sites that build in features that encourage use to be habitual are the winners, for example, e-commerce sites that make it easy to re-order (Staples), or offer one-click buying (Amazon). Or sites that aggregate all of your financial information together in one place (Mint) or allow you to not only send a twitter message but also monitor the twitters on particular topics (HootSuite).

There’s a limit here though. It’s not about having lots of features, it’s about having the one or two “can’t live without it” features that make the site become a habit.

Usable and persuasive sites choose and outperform in one or two killer features and functions.

10. Create a buzz in a specific market –

Don’t forget the power of social validation. I have a whole chapter on this in my book on “Neuro Web Design: What makes them click?”

People listen to what other people say, especially if they are uncertain about what to do.

So if there are 5 different sites that you can use to upload your photos, but one of those sites is talked about amongst your twitter group, is written about at the blogs you read, and advertises how many members they have, then that is the site you are most likely to check out and stick with.

Usable and persuasive sites know who they are aiming for, and do the marketing and publicity to make sure that have buzz among a certain cohort.

Conclusion: Top 10 Attributes of a Usable and Persuasive Web Site

So that’s the current top 10 list. Try evaluating your favorite websites against the list and let me know what you think. What sites do you use that match several of the items on the list?

If you liked this article check out Susan’s blog: www.whatmakesthemclick.net for more information about Neuro Web Design.

About the Author:

Susan Weinschenk, Ph.D., is the author of the popular blog “What Makes Them Click? Applying Psychology to Understand How We Think Work and Relate.”

Susan has a Ph.D. in Psychology and 30 years of experience as a usability, user experience, and human factors consultant for Fortune 500 companies. She is the author of several books in the field, and her most recent book, published by New Riders is, “Neuro Web Design: What Makes Them Click?” She is Chief of User Experience Strategy for Human Factors International (HFI). Her clients call her, The Brain Lady, and that is also her Twitter name: @thebrainlady.

Similar Posts:

• Interview with Susan Weinschenk, Ph.D., Author of "Neuro Web Design"

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!

Similar Posts:

• Usability Testing Makes Killer Online Marketing Campaigns
• Agile Usability
• Usability Overview Presentation
• Usability, A/B or Alpha/Beta Testing, What’s Better? Part III – Usability Testing
• 24 Usability Testing Tools

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!

Similar Posts:

• Interview with Elizabeth Rosenzweig

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

Similar Posts:

• Main Navigation Types and Usability, Pt 1 Horizontal Navigation
• Right Side Main Navigation Gone
• Interaction Elasticity
• SEO and Usability Matrix – 7 Ways Search Engines Are Like Humans
• Increase Your Usability and Website ROI with Perceived Affordance