Monthly Archives: September 2009

1 1

Interview with Elizabeth Rosenzweig, Founder of World Usability Day

Elizabeth Rosenzweig is the driving force and founder of the Usability Professional’s Association World Usability Day, a day that seeks to recognize and promote usability as a means to making services and products easier to access and simpler to use. The World Usability Day or “WUD” for short takes place on the 2nd Thursday of the month of November.

Elizabeth Rosenzweig
Elizabeth Rosenzweig

In her “spare” time, Elizabeth leads the Bubble Mountain user experience consulting firm and is also an author, a multi-patent holder and mom.

Q1. What’s your background? Where did you go to school, what subjects interested you?

My background is in art and photography. I studied photography and fine arts at Goddard College in Vermont and worked as a freelance photography and graphic designer Fellowship for a few years when I graduated. I had a Fellowship at the Sun Valley Center for Arts and Humanities before returning to Vermont to go the freelance work.

I finally decided to go to graduate school and ended up at the Visible Language Workshop (WLW), The Media Lab at Massachusetts Institute of Technology (MIT).

I loved art, art history, sociology, psychology, english and poetry. I studied graphic design and then computer graphics at MIT.

In undergraduate school I was trained to take machines apart and put them back together. I remember once when a printing press didn’t work, we, my peers, took it apart to see what was wrong.

It took us a while to diagnose the problem and put the press back together, but it taught me a valuable lesson-that a machine is only a machine and that people are the one who make a machine work.

In graduate school I learned to work with digital technology and found that made me feel that we, people and users of machines, had even more control then we thought. By using a programming language to talk to a machine, I found that I could control the machine in ways I had never imagined. This was a real paradigm shift for me.

Q2. How did you get into the usability field?

Actually ,it was a bit accidental. I was studying computer graphics at MIT in 1985 and realized that no-one was doing advocacy for users. Then I started to do programming when I got out of graduate school and did a bit of design when I started putting users in front of the applications I was working on.

I heard people saying that they felt stupid when they saw a computer, and that struck me as wrong. How can a machine make a person feel stupid? Shouldn’t it be the other way around.

Since my background is in photography and printmaking, I had a lot of experience with different types of machines and was comfortable working with them. I found myself getting outraged that people would get so intimidated by a machine and I wanted to change that.

I started by creating a system for photographers and artists. At the VLW we had a system that allowed users to create amazing imagery. It was called “Sys” and was a precursor to Photoshop.

Sys was better then photoshop because it had evolved over the years by students using it, creating new functionality and iterating. Sys ran on a minicomputer and the output was either slides or a Polaroid large format printer.

Sys really opened my eyes to the capabilities of digital imagery but it was very hard to use. I decided that my thesis would be to create an easier system for users so they could access the power of the computer.

Once I graduated I started to work as a Graphic Design specialist. In those days, 1985, there was not really a field of user-centered design but many of us were doing those jobs.

I took the developers on my team out into the field to watch users do their jobs and then we would all go back and figure out how to design a system that was easy for those users to work. Over the years SIGCHI and then UPA developed and I was happy to have a peer group.

Q3. What is it about usability that you most enjoy, or find most rewarding?

I find it meaningful when I can make a difference. I enjoy helping people overcome their fear of technology and making them feel more powerful in terms of their use of tools. I enjoy developing tools and systems that help people do what they need and want to do, in a fun and easy way.

It is especially rewarding to work in a field that is making a difference, such as one of recent projects for National Science Foundation (NSF).

This is the National Science Foundation’s Ocean Observatories Initiative (OOI), the largest project I ever worked on, whose goal is to pull together data from several fields, including oceanography, NASA satellite and land seismic networks to create a cyberinfrastructure.

This was exciting because one of the goals was to create an easy to use system that would allow anyone to view data about the earth. The team started with eliciting user requirements from stakeholders and users. It was exciting to be part of a team that was walking the walk and talking the talk about user centered design.

Q4. You founded World Usability Day, why did you feel Usability needed a “day?”

I wanted to raise awareness about the problems of technology products and services so that the average citizen would know that they don’t have to make do with things that don’t work.

I wanted stop people from looking at machines and feeling stupid. I also wanted to bring the profession to parts of the world that had never heard of it before.

It is interesting to see that raising awareness is a slow process but spreading the profession is happening faster then I anticipated.

World Usability Day is a big part of the new success the field of user centered design has enjoyed in countries like India, Brazil, Russia, Poland, Romania, Peru, Philippines, Canary Islands, Iceland and many others.

In addition World Usability Day has helped to solidify the field in many parts of Europe and Australia.

Q5. World Usability Day is on the second Thursday of November, why that day, is there significance to it?

We tried very hard to find a day that would work all around the world. We wanted to balance all the conferences that took place in the spring and summer, as well as major vacation times. We tried to avoid major holidays like Christmas, Easter, Jewish High Holidays, Ramadan, and other important days such as major elections, bank holidays, etc.

We did a survey for all the volunteers and found only a few days that worked for everyone. It turns out that some holidays run on a lunar calendar and therefore move the dates. We tried to give a lot of leeway for those and came up with the current date.

Q6. In the past, some high-profile personalities in the usability industry have claimed that the World Usability Day charter and world usability day itself are irrelevant. How do you respond to people who maintain the charter is overkill, or that every day should be usability day and no specific day is needed?

I have talked with a few of them, and while some high profile personalities will always want to create controversy a few have changed their initial position.

I know of at least one very high profile personality who now sees that having a day for people to focus on the importance of user-centered design has opened up the field in places like India and many other countries.

He has said that the value of this message and raising awareness is very good for the field in general, and of course, for some countries specifically.

Q7. World Usability Day has been expanding greatly, you now have at least 43 Countries participating in World Usability Day events, why do you think there’s been such an increase in interest in usability?

The timing is right and people see that they don’t have to put up with products and services that don’t work right. People like to get together and they like structure.

World Usability Day has created a structure that allows people to share ideas, and plan regular events around important themes in user centered design.

In addition, World Usability Day has been able to go beyond any one organization to pull people together for something greater than themselves or their local group.

Also, we have provided a great and workable infrastructure for organizers to stay involved each year and build on their past work.

Q8. Your firm, Bubble Mountain Consulting, provides a pretty broad array of user centered design services. What are most of your clients asking for these days, what (if any) are the trends in existing or new service requests you are seeing?

In the past two years I have had many requests for contextual inquiry, persona and use case development and writing of user requirements.

There is always work in doing website design and redesign. I find that design is a staple of my practice, but I enjoy the full process.

I think the trend to really understanding the user is getting momentum and that is exciting, since that is where our profession can make a difference.

Prior to that I had been doing more innovation and invention, which is a lot of fun.

I think with the economy going down the work has gotten more concrete and specific around product revision and smaller applications.

Q9. What’s next for you? What are your looking forward to accomplishing in the future?

I want to get World Usability Day on the calendar of the United Nations.

If you look at the calendar of the UN you can see many dates such as World Book and Copyright Day, World Intellectual Property Day and World Television Day, in addition to all the humanitarian commemorations.

The value of getting recognized by the United Nations is more visibility and connection to other important events in the world. I think this would help us make the impact we are looking for.

If anyone wants to be a part of that, there are a few ways to help. The first is to go to World Usability Day and sign our charter.

The second way to help is to contact me and work with our committee to organize UN Ambassadors to sponsor our petition.

Thank you Elizabeth Rosenzweig!

To learn how you can participate in World Usability Day visit the Get Involved page. You can visit the World Usability Day Events page to stay current on the latest happenings with World Usability Day and to learn about events in your area.

1 60

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 ‘website’ in place of ‘website 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
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
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
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
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.
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
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.

Windows Explorer 1Windows Explorer 2

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 triggered 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
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=
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
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

You should be a usability zombie. Really!

Usability and Zombies

Zombie by wvs via Creative Commons licenseUsability and zombies go together like Halloween and candy corn.

Why? Because of a few things that zombies do really well from a management perspective that you should copy and mimic. What with Halloween coming along it makes sense for you to consider this sage advice and carefully implement it. I guarantee it’ll help you be a better usability practitioner, or double your money back (wait, you didn’t pay anything, oh well, you get the idea).

By the way, you can thank me later because being a usability zombie not only in your work activities, but physically dressing up as one at your next Halloween office party guarantees you notoriety, a win for ‘most creative costume’ and a few highly trafficked photos on Flickr, (just give me credit for your big win, ok?).

For those of you who don’t know what a zombie is (and how was living in that cave all your life anyway?), Wikipedia defines a zombie as (yes, Wikipedia does too have a page for zombies why are you surprised?):

“A zombie is a creature that appears in folklore and popular culture typically as a reanimated corpse or a mindless human being.”

Craig defines zombies as:

“Dead people that some unknown (potentially evil) force reanimates so they can walk the earth again, but this time instead of wondering how come their iPhone isn’t forwarding their latest email (while sipping their non-fat no whip Grande mocha) they’re looking for delicious living human flesh to eat (by the way, goes great with the non-fat no whip Grande mocha, try it! and tell your friends!).”

If you need to research Zombies and usability, I highly recommend one of my favorite so-cheesy-it’s-great Zombie movies for your edification, ‘Dawn of the Dead‘ (the original 1978 version, not the re-make) by George A. Romero.

You see, Zombies have some excellent qualities that make them outstanding at getting things done with minimal fuss and maximum efficiency.

So here’s a few zombie qualities you should employ when going about your usability duties, well, like a zombie:

1. Zombies are focused

Zombies have but one purpose, one goal, one mission. In their case it’s to eat living human flesh. This makes them excellent managers, because they never lose their focus, and they stay on track no matter what obstacles are in their way.

Likewise, you as a usability practitioner must be focused. You must not let obstacles stop you. Your sole (so to speak) goal is to generate more money for your company or client. No really, it is! You just happen to be using your expert talents at usability to accomplish this goal.

Usability is NOT the end goal, usability is but a means to a goal. And that goal is to help your company ( or your client’s company) do what it does better, faster and cheaper. Period.

If your company sells mobile cellular devices and plans, then focus all your usability energy on helping the company sell more cellular devices and plans.

If your organization is a library, then focus all your usability energy on making it easier for your library visitors to find and access the literature they need.

If you company sells Space Pet Clothes (yes, a company does actually sell space pet clothes (why do you not believe me, I’ve not steered you wrong yet, have I?) then by gosh use your usability talents to help them sell more space pet clothes.

And speaking of space pet clothes, yes, the Picard shirt (Best Captain – other than Kirk of course) would look GREAT on Jake, my Chihuahua.

Jake, Craig Tomlin's dog
Jake would look good in space pet clothes

Anyway, be like a zombie, focus 100% of your usability energy on improving your (or your client’s) organization’s ability to sell or deliver whatever they make, sell or service.

2. Zombies are slow but steady

Zombies are slow, but they never stop. This makes them excellent at staying the course and getting things done.

Usability practitioners who maintain a slow but steady pace can accomplish huge amounts of work. Like the story of the Turtle and the Hare, sometimes being too fast, not paying attention to detail and not staying steady will hurt you.

The latest fads are great and all, but the best way to be productive and accomplish usability improvements is by focusing on doing the things that matter, and ignoring the temptation to be thrown off course by some newfangled gadget or idea.

Be like a zombie, slow and steady. You’ll get that living human flesh usability improvement done and make a difference for your firm before you know it.

3. Zombies “live for” human flesh

OK, this one is a bit of a stretch but stay with me. Zombies live for (so to speak) and love eating human flesh, it’s pretty much what they excel at and what they know really, really well. They are experts at finding and devouring flesh.

Likewise, you should be an expert at usability, it should be your love. This means studying up on usability, talking about it with others and generally staying current with usability information and education.

Like loving human flesh, loving usability and taking opportunities to stay informed about it is a great way to improve your usability skills. Reading blogs (such as this one), books and using other resources like the Usability Professional’s Association (UPA) is an excellent way to continuously educate yourself about usability and our industry. The UPA has some excellent newsletters and magazines. If you’re not a member, it’s easy to join the UPA, and the education and information you will have access to will be very helpful.

4. Zombies don’t quit

One of the most redeeming qualities of a zombie is the fact that they will not stop, nor be persuaded to quit or give up. From a management standpoint this means when the going gets tough, the tough get (and keep) going.

For usability practitioners, there may be difficulties or seemingly impossible situations to deal with, but don’t give up.

Keep on trying, and don’t be at all afraid to do what zombies do and go up, around, over, under or across obstacles. Zombies don’t quit with their mission, neither should you.

5. Zombies have no politics

Zombies do not form groups or cliques, and zombies don’t spend time politically maneuvering themselves to corporate advantage. Neither should you.

Like a good zombie, you must refrain from the usual office politics, gossiping or other political forms of energy-drain, and instead stay true to usability and your purpose. I’m not advising you to hide from your peers, but if someone starts in on rumors or other company gossip, find a reason to politely excuse yourself and exit gracefully. No need to participate in time wasting bashing of others. Instead, focus on bashing some usability problems out of existence.

A good user experience is not just about web sites or applications, it’s about the quality of your time with your co-workers and peers. Make it a good experience and don’t participate in negative company politics.

Conclusion: Zombies and Usability

So now that you’ve had a chance to ‘digest’ all this excellent living human flesh usability information I think you’ll agree with me that zombies and usability go together like Halloween and candy corn.

Usability work, if practiced with a zombie-like determination, will have an impact on your organization, and on you!

So now that we both agree that being a usability zombie is a good thing, what’s YOUR favorite zombie movie?

0 6

I’m currently researching the next part in my main navigation series, which is Part 2, vertical menus. After reading this, if you wish you can head over to the 1st Part, Main Navigation and Horizontal Menus and read up on that.

Anyway, I’ve noticed a trend that I thought you should know about. Right side main navigation seems to be pretty much gone for almost all of the major web sites us usability folks typically examine.

For example, in the old days (like way back in 2002), Adobe used right side navigation as is shown in the screen shot below.

Adobe in 2002 used right vertical navigation
Adobe in 2002 used right vertical navigation

Technically, I would consider this right side navigation not really “main” navigation in the sense that there are global navigation elements (Store, Products, Support, Corporate) at the top of the page, which should be classified as “main navigation.” However, the point is the navigation from a consumer standpoint is available on the right side, using the additional usability element of icons to help attract the eye.

Today Adobe is pretty much the lone standout for using right side navigation, as seen in this screen shot from September 2009. Again, this technically is not “main navigation” because the right side navigation changes depending on which product you’re on.

Adobe in 2009 uses right vertical navigation
Adobe in 2009 uses right vertical navigation

The vast majority of large web sites are using either horizontal or L shaped main navigation. Now I’ll be the first to admit I’ve not scanned every single large volume web site out there to quantify my analysis, but I’ve looked at the top 20 and among those right side vertical main navigation does not exist. Also, there are plenty of examples of sub-navigation (or reverse inverted L shaped navigation) being used in blogs and other web sites. However, main navigation (aka Global Navigation) on the right side is missing, presumed gone.

As a matter of fact, if you are aware of a large site that uses right side main navigation I’d appreciate it if you would let me know, just shoot me a Comment below, I would appreciate it!

So why are we not seeing right side navigation used commonly? My belief is because of a couple of reasons:

  • First, right side main navigation is counter to the western tradition of reading top to bottom, and left to right.
  • Second, if the overwhelming majority of web sites use a single main navigation style, it is the “standard” and thus doing something different causes undesirable extra cognitive load on users.

Does that mean right side main navigation cannot work? Nope. I think as long as consistent use of main navigation is practiced it probably doesn’t matter too much which one you pick.

So, that’s my brief update, look for the next part of my main navigation series about vertical navigation and please send a comment if you are aware of a major site that uses right side main navigation.

Thanks!

1 43

Main Navigation Types & Usability

Main navigation, also known as Global navigation (if the navigation is always present on each page) is a crucial element for web site or web-based application usability. There are many variations of main navigation systems, however for the vast majority of existing web sites or web-based applications* there are four primary types:

  • Horizontal
  • Vertical
  • Inverted L
  • Mega Footer

(* For ease of reading, from now on I’ll just use the term ‘web site’ in place of ‘web site or web-based applications.’)

Which main navigation system is used depends on several variables, including;

  • Information architecture of the site
  • Screen size or typical location of use of the web site
  • User needs including any special accessibility issues

The screen size issue is a very important consideration now that more and more users rely on mobile devices to find and access content and functionality.  With mobile screen size being extremely limited vs. typical displays in homes or offices, it’s important to consider which type of main navigation will work best for each environment.

The main navigation type chosen will have a direct and significant impact on the usability of a web site, and because of this great care should be taken before deciding on a navigation type.  From a usability standpoint, there are multiple benefits and challenges for each primary type of navigation.

Main Navigation: Part 1 – Horizontal Menu

Horizontal menus have links placed across the page, well, horizontally.  This has a tendency to work well for Western cultures, in which reading from left to right, top to bottom is the norm.  Horizontal menus align with Western user’s expectations for important content being at the top of a page.

First level horizontal menu items “Subject 1” “Subject 2” & “Subject 3”
First level horizontal menu items: Subject 1, Subject 2 & Subject 3

Typically horizontal menu bars are located at the top of the page, but there are several notable exceptions to this rule, including the home page of Blogger.com, which has the main navigation at the bottom of the page.

Blogger.com home page horizontal main navigation is located at the bottom of the page.
Blogger.com home page horizontal main navigation is located at the bottom of the page.

Active vs Inactive Menu Items:

A good horizontal navigation menu relies on a visual change to indicate Active vs Non-active state.  The active state of a menu item provides the user with visual feedback that the user is on that page, or in that section of the site.  Typically active state menu items will use a change in font or background color, size or shape of the text, or the addition of objects such as underlines, arrows or other objects to indicate active vs. not active.

As the example from Yahoo below shows, the Active subject ‘Web’ in the first screen shot has the tab, which is connected to the Web Search bar.  In the second example, ‘Images’ has the tab connected to the search bar, because it is now the active subject.

As a side note, it is also interesting that Yahoo changes the text of the search button to be aligned with the main navigation active subject to ‘Web Search’ when the ‘Web’ tab is active, and ‘Image Search’ when the ‘Images’ tab is active.

Yahoo horizontal menu navigation

Yahoo is an example of a horizontal menu visually changing to indicate the active menu item
Yahoo is an example of a horizontal menu visually changing to indicate the active menu item

Multiple Levels of Horizontal Menus:

Adding more menu choices to horizontal menus is typically achieved by providing additional horizontal menus below the 1st level menu.  This provides additional visual information with which to make navigation choices, and helps provide additional contextual information about the contents of the web site.

Likewise, 2nd or 3rd sub-levels of menu links can be added below the main navigation level.  As demonstrated below, each subject in the main level can have a sub-level, and sub-sub level added below that.

An example of adding sub-levels of main navigation links
An example of adding sub-levels of main navigation links

In the past, it was more common to see multiple rows of horizontal menus being used for main navigation, however they are not as commonly used today.  An example of a web site using multiple levels of horizontal menus is in the screen shot below.

Example of a web site that uses multiple=

However, as more main navigation menu rows or sub-levels are added, this technique causes other usability issues.  The most significant usability issues include:

  • Content is pushed vertically down the page
  • The visual (thus cognitive) load on the user is increased by the additional menu choices

For these reasons, caution should be used when displaying multiple rows of sub-level or main navigation.

Horizontal Menus with Drop Down Sub-Menus:

Because of the usability issues caused by multiple levels of horizontal menus, alternative methods of displaying sub levels using drop down menus were developed.

Techniques for displaying drop down menus from main navigation horizontal menus include mouseovers (where the menu drops down when the user rolls the mouse cursor over the menu item) or clicks (where the menu drops down when the user clicks the menu item).

Most often, a single main navigation link will have a single drop down below it, containing additional main navigation menu items or sub-level navigation links.  The example below demonstrates a drop down menu of sub-level menu items attached to the ‘Subject 1’ main navigation menu item.

A drop down menu can display 2nd level items via mouseover or click of “Subject 1”
A drop down menu can display 2nd level items via mouseover or click of ‘Subject 1′

To display additional sub-levels of menu choices, many drop down menus include fly-outs, menus that appear to the right of the higher-level selection (see example below).

A Fly-out 3rd level menu resulting from hovering over the 2nd level “Subject 1c”
A Fly-out 3rd level menu resulting from hovering over the 2nd level ‘Subject 1’

This use of drop down menus and fly-outs solves the problems of page content being pushed vertically downward by multiple horizontal menus, and also of the increased cognitive load caused by displaying multiple rows of horizontal navigation.

Google’s horizontal navigation menu with additional navigation links via a drop down

Google’s horizontal navigation menu with additional navigation links via a drop down

However, the use of drop down menus also causes a new set of usability problems.  These include the fact that menu items, thus content, are visually hidden from users, causing potential navigation issues.

In addition, another usability issue may be encountered by users with motor skill impairments.  These users may have difficulty accessing certain kinds of drop down menus, especially those menus that require the user to carefully move their cursor to the right on a drop down menu item to reveal additional sub-levels for that item via fly-out menus.

As a side note, in addition to user problems, certain technology implementations of drop down menus can cause search engine spiders to be unable to access the drop down menus, and thus not be able to access the lower levels of web site content for indexing purposes.  For this reason, caution should be used when choosing the technology that will display the drop down menu.

A recent variation of drop down menus that is becoming more popular for main navigation is the ‘Mega Drop Down Menu.’

Mega Drop Down Menus

Mega drop down menus are large (usually 2 or 3 column) boxes with groups of sub-level links from the main navigation item, often sorted into distinct visual groupings.  Because they have a much larger amount of screen space available for display, most mega drop down menus do not require the user to scroll.

Also, because of their larger screen size, mega drop down menus have the benefit of being able to display 2nd and 3rd level items at the same time, and thus do not hide important links from users as a typical drop down menu with a fly-out would.

As the example below demonstrates, mega drop down menus can group multiple categories of sub-menu items and can easily accommodate 2nd and 3rd level items.

A mega drop down menu can contain multiple=

As the screen shot from DIYNetwork.com below demonstrates, a mega drop down menu can accommodate multiple sub levels of navigation in a much large screen space.  This provides the added benefit of visually separating and grouping menu choices using white space, headers, bullets and/or icons.  This gives far greater contextual information for users, enabling faster and more efficient web site navigation.

DIYNetwork uses mega drop down menus as part of the horizontal main navigation system
DIYNetwork uses mega drop down menus as part of the horizontal main navigation system

However, because Mouseovers or clicks are required to display the mega menu, they suffer the same issue of hiding potentially important navigation choices as traditional drop down menus, and thus must be used with care.

Information Architecture and Drop Down Menus

Because of the hiding effect of drop downs, including mega drop downs, a common information architecture issue most web site designers must carefully address is what items should be included in the 1st level main navigation menu, and what items are secondary or tertiary and thus should be grouped in subsequent sub-levels (i.e., inside drop downs).

When making decisions about the structure of a horizontal navigation system (or any of the other main navigation choices) and drop down menus, a carefully planned information architecture and labeling system should be developed and used in advance.

This information architecture and labeling should be the result of card sorts and ethnographic research regarding the typical user’s mental map of the content & flow.  Matching the mental map of the users with the main navigation and drop downs is one of the most important ways to ensure good usability and a satisfying user experience.

There are other variations of horizontal main navigation, beyond what was covered here.  However all variations of horizontal main navigation have the same basic benefits and limitations, a summary of which is:

Benefits of Horizontal Menus:

  • Uses minimal vertical screen real estate, allowing maximum width of screen for content
  • Follows Western cultural reading process of left to right, top to bottom
  • Provides simple and effective visual context of the content structure of the site

Limitations of Horizontal Menus:

  • Limited width of screen means limited number of main navigation links
  • Difficult to scale, adding more main menu links over time is problematic
  • Adding 2 or 3 levels under 1st level uses more vertical screen space, pushing content lower
  • Adding additional levels of main navigation causes additional cognitive load on users

Summary: Main Navigation using Horizontal Menus

The benefits of using horizontal menus as the main navigation for a web site are compelling, and if done correctly, greatly contribute to the usability of a web site.

A proof for this may be the fact that out of the Top 10 most visited web sites (according to Alexa as of 9/12/2009) 9 out of the 10 use Horizontal navigation:

Web Site:  Main Navigation Type

1. Google.com: Horizontal Menu
Google Main Navigation

2. Facebook.com: Horizontal Menu
Facebook Main Navigation

3. Yahoo.com: Horizontal Menu
Yahoo Main Navigation

4. YouTube.com: Horizontal Menu
YouTube Main Navigation

5. Bing.com: Horizontal Menu
Bing Main Navigation

6. Wikipedia.org (English): Vertical Menu
WikiPedia Main Navigation

7. Blogger.com: Horizontal Menu (bottom)
Blogger Main Navigation

8.MSN.com: Horizontal Menu
MSN Main Navigation

9. Baidu.com: Horizontal Menu
Baidu Main Navigation

10. MySpace.com: Horizontal Menu
MySpace Main Navigation

Part 2 in the main navigation and usability series is a review of vertical menus.

Recently, MultiChannel Merchant magazine published the 2nd part of my 2 part article on ultra-simple usability eCommerce tips.  The article is titled: 5 More Ultra-Simple Usability eCommerce Sales Tips and as an added bonus comes with screenshots highlighting each of the tips on actual eCommerce sites.

As with the first part, the 2nd part introduces simple usability improvements that can have a big impact on conversion rates and sales for eCommerce sites. These tips are based on usability best practices and usability testing sessions and results I’ve received on many, many web sites over the past decade.

Here’s a quick listing of the tips, the details are in the article:

  1. Follow the order of the typical steps of a buy-flow
  2. Don’t place extraneous non-sales content between users and products
  3. Always show product photos
  4. Always show price discount savings
  5. Remove obvious errors and omissions
5 More eCommerce Sales Tips
5 More eCommerce Usability Sales Tips

I hope you find these tips helpful, if so, please let me know.  And if not, well, ok, go ahead and let me know that too (but I’m hoping for more of the “helpful” category let-me-knows!).

Read 5 More Ultra-Simple Usability eCommerce Sales Tips here.

Let's Connect

112Subscribers+1
934FollowersFollow
4,255FollowersFollow