Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Efficiently Simplifying Navigation, Part 3: Interaction Design

Having addressed the information architecture1 and the various systems2 of navigation in the first two articles of this series, the last step is to efficiently simplify the navigation experience — specifically, by carefully designing interaction with the navigation menu.

When designing interaction with any type of navigation menu, we have to consider the following six aspects:

  • symbols,
  • target areas,
  • interaction event,
  • layout,
  • levels,
  • functional context.

It is possible to design these aspects in different ways. Designers often experiment with new techniques3 to create a more exciting navigation experience. And looking for new, more engaging solutions is a very good thing. However, most users just want to get to the content with as little fuss as possible. For those users, designing the aforementioned aspects to be as simple, predictable and comfortable as possible is important.

Further Reading on SmashingMag:

Symbols Link

Users often rely on small visual clues, such as icons and symbols, to guide them through a website’s interface. Creating a system of symbolic communication throughout the website that is unambiguous and consistent is important.

The first principle in designing a drop-down navigation menu is to make users aware that it exists in the first place.

The Triangle Symbol Link

A downward triangle next to the corresponding menu label is the most familiar way to indicate a drop-down menu and distinguish it from regular links.

1-preview-opt8
A downward triangle next to the menu label is the most reliable way to indicate a drop-down. (Source: CBS9) (View large version10)

If a menu flies out, rather than drops down, then the triangle or arrow should point in the right direction. The website below is exemplary because it also takes into account the available margin and adjusts the direction in which the menu unfolds accordingly.

2-preview-opt11
A triangle or arrow pointing in the right direction is the most reliable way to indicate a fly-out menu. (Source: Currys12) (View large version13)

The Plus Symbol Link

Another symbol that is used for opening menus is the plus symbol (“+”). Notice that the website below mixes symbols: an arrow for the top navigation menu and a “+” for the dynamic navigation menu to the left (although an arrow is used to further expand the dynamic menu — for example, to show “More sports”).

3-preview-opt14
Some websites use a “+” to drop down or fly out menus. (Source: Nike) (View large version15)

Mixing symbols can be problematic, as we’ll see below. So, if you ever add functionality that enables users to add something (such as an image, a cart or a playlist), then “+” would not be ideal for dropping down or flying out a menu because it typically represents adding something.

The Three-Line Symbol Link

A third symbol often used to indicate a navigation menu, especially on responsive websites, is three horizontal lines.

4-preview-opt16
Three horizontal lines is frequently used for responsive navigation menus. (Source: Nokia17) (View large version18)

Note a couple of things. First, three lines, like a grid19 and a bullet list20 icon, communicate a certain type of layout — specifically, a vertical stack of entries. The menu’s layout should be consistent with the layout that the icon implies. The website below, for example, lists items horizontally, thus contradicting the layout indicated by the menu symbol.

5-preview-opt21
Three lines do not work well if the menu items are not stacked vertically. (Source: dConstruct 201222) (View large version23)

The advantage of the more inclusive triangle symbol and the label “Menu” is that they suit any layout, allowing you to change the layout without having to change the icon.

Secondly, even though three lines are becoming more common, the symbol is still relatively new, and it is more ambiguous, possibly representing more than just a navigation menu. Therefore, a label would clarify its purpose for many users.

6-preview-opt24
An accompanying label would clarify the purpose of the three lines. (Source: Kiwibank25) (View large version26)

Consistent Use Of Symbols Link

While finding symbols that accurately represent an element or task is important, also carefully plan their usage throughout the website to create a consistent appearance and avoid confusion.

Notice the inconsistent use of symbols in the screenshot below. The three lines in the upper-right corner drop down the navigation menu. The three lines in the center indicate “View nutrition info.” The “Location” selector uses a downward triangle, while the “Drinks” and “Food” menus, which drop down as well, use a “+” symbol.

consistent_symbols27
Inconsistent symbols lead to confusion. (Source: Starbucks28) (View large version29)

While using multiple symbols for a drop-down menu is inconsistent, using arrows for anything other than a drop-down menu causes problems, too. As seen below, all options load a new page, rather than fly out or drop down a menu.

arrow30
Using a triangle or arrow for anything other than a drop-down or fly-out menu can cause confusion. (Source: Barista Prima31) (View large version32)

This leads to a couple of problems. First, using arrows for regular links — whether to create the illusion of space33 or for other reasons — puts pressure on you to consistently do the same for all links. Otherwise, users could be surprised, not knowing when to expect a link to load a simple menu or a new page altogether. Secondly, a single-level item, such as “Products”, could conceivably be expanded with subcategories in the future. A triangle could then be added to indicate this and distinguish it from single-level entries, such as the “About” item.

Users generally interpret an arrow to indicate a drop-down or fly-out menu. And they don’t have any problem following a link with no arrow, as long as it looks clickable. It is best not to mix these two concepts.

Target Areas Link

A simple yet important rule is that links in a navigation menu should be easy to read, large and consistently located. The area in the interface that is assigned to and activates a link is typically referred to as the target area.

Legibility Link

Before clicking a target, a user will obviously want to read its label. Therefore, consider the font’s size and the legibility of the label and description accordingly. Notice below that the link labels in the center (“Laptops,” “Desktops,” etc.) are large and contrast with the background, enabling the user to comfortably read and distinguish between them, unlike the labels in the drop-down menu.

target_areas34
Links should be easy to read and allow for comfortable navigation. (Source: Toshiba35) (View large version36)

Also, consider how a font performs in dim lighting, which is especially an issue on mobile. While many recommendations about font settings37 can be followed, still test your settings because individual preferences will vary.

Size Link

The larger and closer a target is, the easier and faster it is to hit. This simple rule predates the digital era and is one that Paul Fitts tried to quantify38 in human-computer interaction.

One common suggestion is to use every available pixel by extending the clickable area of a link to the entire space reserved for it. As a result, less precision will be required to click the link, which will speed up navigation. Below, notice how the target area on the left lets a few pixels go to waste. The target area on the right is larger and quicker to click because it occupies every pixel at its disposal.

target areas39
Fitts Law tells us to exploit every available pixel. (Source: left:Philly40, right: Apple41) (View large version42)

Similarly, make the images in mega-menus and separate pages into target areas as well, not only their labels.

The downside of large targets is that they can break the balance of an interface and quickly eat up screen space. However, even with plenty of space to spare, enlarging the target areas to be as big as possible is not necessary because there is not a one-to-one correlation between the size of a target and its usability.

usability progression43
The relationship between the size and usability of a target is not linear. (View large version44)

Thus, if a small target is made 10% larger, it will become much more usable, but if an already big target is made 10% larger, it will not gain much more in usability.

Consistency of Location Link

Apart from being large enough and easy to read, target areas should be consistently located. This builds muscle memory in the user, further facilitating navigation.

One type of multi-level navigation that creates inconsistent target areas is the nested menu. In a nested menu, a subcategory appears directly under its parent category, which constantly pushes the items below into new locations.

nested_menus45
Nested menus create inconsistently positioned target areas. (Source: “Big Menus, Small Screens: Responsive, Multi-Level Navigation46,” Tessa Thornton, Tuts+) (View large version47)

A better way to display multiple levels is to fly out or slide to the submenus, as we’ll discuss in more detail below.

However, single-level navigation menus can have inconsistent target areas as well, especially when the user is trying to close the menu. When some menus are opened, the clickable area moves to a different location. Below, the “close” button is pushed down whenever a menu or submenu is opened.

inconsistent_trigger48
A repositioned button makes it more difficult to close the menu. (Source: ELC49) (View large version50)

This requires the user to look for the “close” and then move their cursor or hand to the new spot. Reserving the same spot for opening and closing a menu is easier. In addition, the user should be able to click any non-linked spot outside of the menu to close it.

consistent_menu51
Consistent clickable areas and generous targets make it easier to close the menu. (Source: Starbucks52) (View large version53)

Interaction Event Link

The interaction event describes the type of input that users have to perform to interact with an interface. The four most common interaction events in navigation menus are:

  • hovering,
  • clicking,
  • scrolling,
  • typing.

Hovering Link

Hovering (or mousing over) is the most common interaction event in navigation menus. The problem with hovering, however, is that accidentally moving the cursor just inside or outside the target area will immediately activate or close the menu. One workaround that is often suggested is to use a delay54.

timeout_delay55
A delay is often used to account for accidental hovering. (Source: ZealousWeb56) (View large version57)

Of course, if the delay is too long, interaction will become sluggish and annoying. There is no “correct” value for the delay because proficiency in moving the cursor varies not only by individual, but by fatigue level and the user’ familiarity with the menu.

A second workaround is to create temporary invisible target areas based on predicted path of the cursor’s movement. The blue overlay in the screenshot below depicts such an invisible area, where users can access the contents of a submenu without accidentally opening another menu in the process.

cursor_path58
Invisible target areas minimize mistakes and facilitate navigation based on predicted cursor paths. (Source: “Breaking Down Amazon’s Mega Dropdown59,” Ben Kamens) (View large version60)

However, this workaround has its own problems. Because the user has no way of knowing that the invisible areas exist in the first place, they will still try to carefully move the cursor along visible paths. Even if they do know, invisible areas invariably produce their own share of mistakes. Finally, because the areas are temporary, the issues related to variations in cursor movement speed still hold true.

Another problem is tooltips. Some authors suggest using tooltips in navigation menus61 to explain the options.

tooltips62
Tooltips do not work well in navigation menus. (Source: Mini63) (View large version64)

However, because tooltips require hovering, users encounter the following problems, in this order:

  1. Because tooltips appear on hover, users might not know that they exist and, thus, not discover them. If tooltips are important for explain the options, this is rather unfavorable.
  2. Tooltips could obstruct adjacent items.
  3. The delay problem strikes again. If the delay is too short, the tooltip will flicker. If it is too long, then getting the tooltip for each item will be slow and annoying.
  4. As a consequence, comparing items will be more difficult.
  5. Hovering does not work on touchscreens, thus inhibiting a consistent cross-device experience.

Note, however, that link titles65 that appear in the body of text are not bad at all because the context is different. A body of text is meant mainly for reading, not navigation, so many users will just want to read the article and won’t care much about the links. However, if they do care, the hypertext and its context are often sufficient clues about the link’s target. In case they are not, a link title can be indeed very useful, especially because it probably will not cover other hyperlinks in the article.

tooltip66
Link titles can be useful additions to hyperlinks. (Source: Six Revisions67) (View large version68)

However, a navigation menu is a different story, as explained above. So, if descriptions are necessary to explain the options, then use regular text, rather than tooltips.

All in all, hovering is not a good technique for enabling interaction with menus, and the workarounds do not alleviate the problems.

Clicking Link

Clicking to open a drop-down menu and its submenus should become the standard, not hovering. This would yield the following benefits:

  • Individual proficiencies would be better accounted for. High-proficiency users would still be the fastest.
  • Mistakes would amount to virtually zero, thus reducing stress.
  • This would allow for multi-tasking. Users could pause navigation in any state, switch to another tab or application and then resume where they left off.
  • Hovering does not work on touchscreens. Clicking would make for a consistent, unified experience.

The increasing prevalence of clicking as the interaction pattern for navigation menus is a positive trend.

69
Opening and closing menus should be done by clicking, not hovering. (Source: Media Temple70) (View large version71)

Scrolling Link

While users do not mind a certain amount of scrolling, avoid excessive or unnecessary scrolling.

Having users scroll to see all options is sometimes inevitable, especially when you’re using a separate page for a navigation menu. However, reserve scrolling only for browsing categories, not for navigating between categories. Below, users have to scroll to the bottom of the page to see all categories.

72
Scrolling should be used to browse categories, not to navigate between categories. (Source: ABC73) (View large version74)

The design above forces the user to scroll through a lot of undesired content to get to the category they want. A better solution would be to present the categories at the top of the page. This would allow users to skip unwanted sections. I’ve mocked this up to illustrate:

mockup_levels75
Linking to categories at the top of the page enables users to go directly to their desired categories. (View large version76)

Apart from that, be aware that including labels, images and descriptions is a better way to explain media content such as TV shows.

Typing Link

A fourth type of interaction event is typing. The two common techniques here are search and typing to filter. The difference between them is that search does not require a navigation menu. Whereas, when users type to filter, they have already navigated to a content category and are typing a term to dynamically narrow down a list of already visible entries. The app below shows the latter technique, although the designers labeled it “search”. Still, this is unlikely to cause confusion as “search” and “filter” are, indeed, very similar concepts.

22-preview-500px-opt77
Typing to filter is similar to search but is used to navigate within, rather than to, content categories. (Source: Pocket8178) (View large version79)

The purpose of typing to filter is to spare users from having to scroll through and read a long list. However, it does come with the same problems of uncertainty and the heavy cognitive load that we mentioned with search. However, it is somewhat alleviated by the fact that the user has already navigated to a content category. Therefore, if a list is very long, it is worth breaking down the content category into subcategories or offering dynamic filters, as the app shown below does.

23-preview-opt80
Subcategories and dynamic filters help to break down long lists. (Source: Pocket8178) (View large version82)

Be aware, though, that typing to filter, like search, works better with large personal databases in applications, such as file managers and email clients, rather than for websites, because the user would more likely know the particular string they are looking for related to the item they want.

Levels Link

Designing a single-level navigation menu is hard enough as it is. Incorporating multiple levels complicates the matter, especially on small screens.

Removing Navigation Levels Link

To reduce the complexity of multiple levels, some authors suggest reducing the number of navigation levels, especially for mobile screens83. The rationale is to spare users from having to navigate many levels. However, removing levels could have an adverse effect. Below, the category “Products” consists of two levels.

levels84
Some websites display more levels in their desktop view than in their mobile view. (Source: Microsoft8885) (View large version86)

In its menu for mobile screens, Microsoft removes the first level (“Windows”, “Office”, “Devices”, etc.). The result is a very long list that lacks structure and requires the user to work more to find and navigate to the product they are looking for.

long_lists87
Removing levels creates long lists and obscures entries. (Source: Microsoft8885) (View large version89)

By contrast, keeping the additional level makes for shorter, more informative lists. I mocked up this solution to illustrate:

levels_mockup90
Subcategories make for lists that are shorter, more descriptive and easier to interact with. (View large version91)

Of course, even with the right number of levels, multiple-level navigation remains a tricky affair and requires careful design and implementation — on all types of devices.

Levels And Mobiles Link

Large, wide screens offer space for fly-out submenus.

fly-out92
Large screens can get fly-out submenus. (Source: Intel93) (View large version94)

Mobile devices are not wide enough for fly-out menus. There are two ways to deal with this limitation.

As soon as the user selects a menu option, you could slide them right to a separate screen that displays the content of the submenu.

28-preview-opt95
Sliding to submenus on a separate screen is the mobile equivalent of a fly-out submenu. (Source: Sony Pictures96) (View large version97)

Above, the submenu’s title is displayed in a heading, along with a “<” button that enables users to slide back to the parent category. Two things to note about sliding menus. First, the symbol should be relevant to the type of animation. Sony correctly uses the “<” symbol to slide users to the left, but why it uses “+” to do the opposite is not clear. The sliding menu below uses symbols that are more in line with their animations.

sliding_symbols98
Symbols should be relevant to the type of animation. (Source: Asus99) (View large version100)

Secondly, consider the fold. I cropped the screenshot above to highlight this problem. The “Commercial” category actually has five entries, but users might miss the bottom one.

A second way to display multiple levels is to nest them. Nested menus are stacked, and the levels are visually distinguishable with the help of gradients or indentation.

nest101
The levels of nested menus are stacked. (Source: “MooTools: Nested Accordion102” (standard demo with MooTools 1.11), Media Notions Blog) (View large version103)

However, because the items are stacked, not only are the target areas inconsistent, but they also take up vertical space, which can push entries out of the viewport and require users to scroll. Sliding menus are a simpler, more space-efficient way to navigate to a content category.

Levels And Mega-Menus Link

A mega-menu, which structures options into panels and subareas104, is another way to display multiple categories. Nonetheless, displaying the contents of no more than a single category at a time is recommended. The menu pictured below displays the contents of eight categories. Obviously, users will be interested in the contents of only one particular category at any time. Consequently, the space taken up by the other seven categories goes to waste, cluttering the menu as well.

31-preview-opt105
Displaying the contents of multiple categories clutters the menu and is redundant. (Source: Target106) (View large version107)

A better solution is to organize subcategories into tabs. Best Buy, pictured below, has to accommodate similar types and numbers of products. However, it has chosen to tab its menu. As a result, the user sees only the contents of the category that they have explicitly selected. Also, because the tabs reduce the number of items displayed, the menu looks much cleaner, allowing space for pictures and icons with the items.

32-preview-opt108
A tabbed mega-menu reduces the number of items displayed and frees up space for pictures. (Source: Best Buy109) (View large version110)

Dynamic Filters Link

Websites with many items and, thus, many levels often employ a dynamic filter but, interestingly, always implement the dynamic filter on the same level.

Dynamic filters can be implemented in one of several ways. Below, the filters are implemented as nested menus. The problem with nested menus, however, is that just one or two open filters will likely push the other filters below out of the viewport, requiring users to scroll. Also, unless the user closes the nested menus after selecting the values they need, a lot of the menus will be cluttering the interface.

33-preview-opt111
Nested menus can clutter the interface with unneeded options and require a lot of scrolling. (Source: Sears112) (View large version113)

An alternative is to use drop-down menus, which keep the interface clean and the interaction consistent.

34-preview-opt114
Implementing dynamic filters as drop-down menus keeps the interface clean and the interaction consistent. (Source: Omega115) (View large version116)

The downside is that users have to open a drop-down menu each time to view and select its values.

If you go with drop-down menus for the filters, consider their placement carefully. Shown above, Omega places its filters above the products. On a tablet held in portrait orientation, this would be the best arrangement. However, on a wide screen, multiple lines of filters would take away space from the products and visually emphasize the filters, rather than the products.

Placing the filters beside the items, as mocked up below, has the opposite effect. It slightly transfers space and emphasis from the filters to the products.

35-preview-opt117
Placing the filters beside the products on a wide screen emphasizes the products rather than the filters. (View large version118)

On mobile, the user almost necessarily has to toggle one screen to select and confirm the values and another to display the results, which is what the website shown below does.

36-preview-opt119
Dynamic filters often require two screens on mobiles, one for the filters and another for the results. (Source: Lowes120) (View large version121)

Another possibility is to place the filters in a drop-down menu or overlay box.

37-preview-opt122
Placing dynamic filters in a drop-down menu or overlay box keeps the context of the products page. (Source: Zappos123) (View large version124)

The benefit of the latter approach is that it keeps the context of the product page, rather than sending users to a separate screen. However, a separate screen remains the better choice if the filters do not fit on a single screen and users are, thus, required to scroll in order to interact with them.

After choosing a widget and positioning the filters, the next step is to visualize the values. A few simple rules will help with this:

  • If the filter values are mutually exclusive, then use radio buttons or tabs or display the values as plain entries in a drop-down menu.
  • If the values are independent, then display them along with a checkbox.
  • If the values increment in consistent intervals (weight, duration, price, distance, etc.), then use a slider, as shown below.

filters125
Consistently incrementing values are best represented by a slider. (Source: Free Time126) (View large version127)

Of course, being able to deselect values is also important. Radio buttons, for example, cannot be returned to their default state once a value has been selected. A reset button would, therefore, come in handy.

Finally, consider whether to implement a separate bar that displays the selected values. The website below lists selected values at the top of the page, along with a “close” button that enables users to remove the values again.

39-preview-opt128
In many interfaces with dynamic filters, a separate bar displays the selected values. (Source: Food) (View large version129)

This separate bar provides feedback about the selected values. But it takes up space, which is especially an issue on small screens. Also, the dynamic filters already display the selected values, albeit not as elegantly. A separate bar would, therefore, require users to look at and work with two areas instead of one to basically do the same thing.

So, not repeating the values in a separate area should not be much of a usability issue.

An interesting topic that often comes up in discussions on navigation systems with multiple levels is breadcrumbs. A breadcrumb trail visualizes the user’s current location in the website.

40-preview-opt130
Breadcrumbs visualize the user’s current location relative to the website. (Source: Home Depot131) (View large version132)

Users rarely interact with breadcrumbs. They occasionally access parent categories in the breadcrumb trail, but if they start navigating from the home page, they will usually only click their way from one category to the next. Likewise, if they land from an external link, then they would not need breadcrumbs. Nonetheless, breadcrumbs have many small benefits133 that make them worth implementing, the most important one being that they impart a sense of structure and orientation.

Imagine that using a search engine is like parachuting134 into an unknown forest. If the user only wants some wood, that that would get the job done. But imagine a sign in the forest that says Hoosier Forest > in Monroe County > in the state of Indiana > in the US > on the North American continent. Immediately, users would gain a important sense of orientation.

This is also why breadcrumbs help users who are lost. The first step in knowing where to go is knowing where one is.

Even developers who opt not to use breadcrumbs still implicitly follow its logic by constructing their URLs as a breadcrumb trail, with the domain name as the starting point, followed by a common classification scheme, such as topic or date, and with the levels divided by a forward slash, /.

41-preview-opt135
URLs are typically written as a breadcrumb trail. (Source: top: “Design Cop-Out #2: Breadcrumbs136,” Jared Spool, User Interface Engineering, bottom: “The Problem With Breadcrumb Trails137,” Tom Scott) (View large version138)

The example below shows one problem with implementing breadcrumbs. On the desktop, you have enough space, and following best practices139 is not too difficult. However, breadcrumbs sometimes duplicate the information in the URL bar. The website below has a meaningful and consistent URL architecture. However, because the breadcrumb trail is identical, it seems redundant.

42-preview-opt140
Breadcrumbs sometimes duplicate the information in the URL. (Source: Area 17141) (View large version142)

Nonetheless, many users expect a dedicated breadcrumb trail, not just a consistent URL architecture. If, however, your navigation system has no more than two levels, and especially if you have tabbed navigation, as below, then a breadcrumb trail is not necessary.

43-preview-opt143
Breadcrumbs are unnecessary in navigation systems with one or two levels. (Source: Express144) (View large version145)

On mobile, the situation is even trickier. The website shown below demonstrates a good solution. Rather than implementing an entire breadcrumb trail, the designers display only the current category in the center and then show the parent category with a < in the top-left corner.

44-preview-opt146
On mobile, showing only the current and parent category in the path will suffice. (Source: Lowes147) (View large version148)

While this solution does not show the entire path, it will have to do on mobile. The only problem is that Lowes’ designers use up two lines, instead of one. Admittedly, placing both a long label for the parent category and a centered header on one line on a small screen is difficult, but with carefully planning, keeping the labels short, possibly abbreviating the parent category with an ellipses (), it can be achieved.

Mega-Sites Link

Finally, a type of website that features many levels is the so-called mega-site.

Mega-sites typically belong to large organizations with many large sub-departments, such as universities, broadcast networks, media conglomerates and governments. The difference, however, is that each sub-department is considered not just the next level in the navigation menu, but a separate, independent mini-site, with its own, distinct audience and image.

First, be aware that mini-websites are not as independent as they may seem. If they were, they would have their own domain. It is not unlikely that users would want to explore other departments, especially if they like the mini-site.

One rule can help you achieve the goal of balancing a unique mini-site with easy-to-use navigation: While the visual design for individual departments can be as unique as you like, keep the interaction across departments as consistent as possible.

In the mega-site shown below, each department has its own visual style, but the interaction across departments is fairly consistent.

45-preview-opt149
Consistency facilitates navigation in other departments. (Source: Ard150) (View large version151)

The mega-site pictured below has less consistent navigation, which makes it more difficult to explore departments.

46-preview-opt152
Varying navigation can impede exploration of other departments. (Source: BBC153) (View large version154)

The reason for distinguishing between visual and interaction design is simple. The user knows that a medical school will look different from a law school and so will expect a unique visual design. But there is no reason why the medical school should put its contact information in the bottom-left corner and the law school in the top-right corner.

Layout Link

Layout in web design refers to the arrangement of elements in a meaningful, aesthetically pleasing way. However, laying out elements for reading is different than layout out items in a navigation menu.

A piece of content can be complex and unique. Laying out its elements in a specific, sophisticated way might be necessary to explain it. Navigation is different. A menu is made up of categories and subcategories. The items in a category should all match the category’s description, as simple as that. Users do not expect anything else in a navigation menu. Thus, the goal of layout is not to explain items, but merely to sort them.

Sorting Items Link

Some people suggest not sorting alphabetically155, but instead looking for other ways. Be aware, though, that alphabetical sorting is very logical in most cases. The menu pictured below does not use alphabetical sorting.

47-preview-opt156
If the sorting logic is not immediately clear, then browsing and finding items can be difficult. (Source: Verious157) (View large version158)

The items seem to be arranged arbitrarily. But even if there is a sorting logic, it does not really matter. If users are not able to figure it out immediately, then browsing and finding items will be more difficult. The advantage of alphabetical sorting is that users will figure it out immediately. Also, if the user knows the name of the option they are looking for in that category, they will find it very quickly.

Nonetheless, a sorting logic other than alphabetical can be more helpful to users on occasion. Take the “News” category. The title itself is a clue to an alternative sorting logic. News items are best sorted by publication date, not alphabetically.

48-preview-opt159
Sometimes, a sorting logic other than alphabetical is more appropriate. (Source: The Week160) (View large version161)

Finally, some websites offer a widget that enables users to choose how to sort items in a navigation menu. A sorting widget is often added to interfaces with dynamic filters.

49-preview-opt162
A sorting widget enables users to choose how to sort items in a navigation menu. (Source: Costco163) (View large version164)

Be aware that users use sorting widgets not so much to sort and then comprehensively browse results as they do to filter out undesired items165. For example, if a user sorts items by rating, then they are obviously more interested in higher-rated items than lower-rated ones.

Nonetheless, a sorting widget can be a useful addition. Users will know immediately what it does and how to use it. Also, if implemented as a drop-down menu, it won’t take up too much space. However, as with the more powerful dynamic filters, a widget is only necessary if the menu has more than a few items and if breaking down a long list into subcategories is not called for.

How Users Scan Information Link

Correctly sorting items can be tricky. And laying out options in that order is not without pitfalls either.

The three most common layouts for a navigation menu are lists, columns and grids. There are additional, more sophisticated layouts, as we’ll see, but keep things as simple and familiar as possible. In the three aforementioned layouts, the user will scan through the items as shown below.

50-preview-opt166
Users typically scan information according to the layout. (View large version167)

In addition, the navigation items should be left-aligned, not centered, which is more familiar and easier to read.

51-preview-opt168
Items in the navigation menu should be left-aligned. (Source: Aritzia169) (View large version170)

Be aware, though, that the way users scan information is not written in stone, but culturally conditioned.

Choosing the Right Layout Link

The next question, of course, is when to use which layout. The type and amount of your content is a good guide:

  • Labels only
    In this case, a list or set of columns is the best choice. Whichever you choose will depend on the available screen space of the device.
  • Labels and pictures
    Here, a grid is the best choice.
  • Labels, pictures and descriptions
    In this case, anything but a list would not be feasible. Even if there is enough space for a grid, a list is still the best choice.

To better understand the subtleties of grids and lists, examine the website below, which enables users to switch between a list and grid. First, look at the grid view.

52-preview-opt171
The grid mode is space-efficient and emphasizes the pictures, which helps users quickly spot items they want. (Source: USA Today175172) (View large version173)

The main focus is the pictures, not the labels or, in this case, the titles. The labels could be displayed over top of the picture, which would slightly compromise the pictures, or above and beneath it, which would slightly compromise the space efficiency. A grid is still the most space-efficient view, as well as the best for quickly spotting items — that is, if pictures are sufficient for explaining the options. By contrast, consider the list view:

53-preview-opt174
A list takes up more space and emphasizes descriptions. (Source: USA Today175172) (View large version176)

The focus is on the titles and descriptions, which are centered. The pictures take a supporting role. A list takes up more space than a grid; however, reading is more comfortable in a list.

For news, a list is best. Pictures are not sufficient to explain the options; titles and descriptions, which are missing in the grid view, are required. If the items were not news articles but clothes, paintings or cars, products whose point of interest can be conveyed by a picture, then a grid would be suitable.

These rules apply to all traditional navigation menus. Interestingly, with dynamic filters, the rules change.

First, consider what would be the best view in a regular menu for electronic products, such as mobile phones, computers or cameras. A grid view might seem to be the best choice. After all, users typically want a stylish product, and a grid emphasizes pictures. The pictures below are cropped to emphasize this.

54-preview-500px-opt177
A grid view emphasizes pictures of products. (Source: P.C. Richard & Son178) (View large version179)

However, users also look for certain features in electronic devices, be it number of pixels, wireless connectivity, CPU speed, etc. So, a list, which is better suited to displaying technical information, would work best for these type of items.

55-preview-500px-opt180
A list is best suited to displaying technical information. (Source: P.C. Richard & Son181) (View large version182)

Dynamic filters change the equation. Their very purpose is to capture and display meta data. Therefore, displaying the same data in a list would be unnecessary. The better choice would be a grid that only displays the three elements that dynamic filters cannot properly show: the name of the product, a picture and the exact price. The screenshot below demonstrates this, showing the same menu as above but this time with dynamic filters.

56-preview-opt183
A grid is best suited if dynamic filters can accommodate the desired meta data. (Source: P.C. Richard & Son184) (View large version185)

Of course, if the dynamic filters cannot display the required information properly (for example, descriptions of articles), then a list remains the best view.

57-preview-opt186
If dynamic filters cannot properly accommodate crucial information, then a list is the best choice. (Source: New York Times187) (View large version188)

Home Pages Link

A fourth way to lay out items is often encountered on “Home” or “Featured Items” pages. First, notice that the “US” section in the screenshot below displays items in a simple, traditional list.

58-preview-500px-opt189
Subsections often have simple, traditional layouts. (Source: Al Jazeera America190) (View large version191)

All sections of Al Jazeera’s website have the same layout. However, the home page has a different, more sophisticated layout.

59-preview-500px-opt192
Home pages contain featured items that users would otherwise have to access by going to the corresponding subsections. (Source: Al Jazeera America193) (View large version194)

The latest news article is given center stage and the largest picture. Links to related articles are next to it. A bar underneath horizontally lists recent items from various subsections. And a vertical list further below shows past articles.

There are a few reasons why “Home” and “Featured Items” pages look the way they do, with their more complex layouts. Users can access featured articles by visiting the corresponding subsection, whereas the home page displays those featured articles from the subsections, making them directly visible and accessible. However, because the home page lacks the descriptive precision of subcategories, the designers highlighted and prioritized the articles through layout.

There are three things to note about the layout of the “Home” and “Featured Items” pages. First, as important as the home page is, users should be able to easily see and access subsections as well. Secondly, the home page is still essentially one big navigation menu, not a page for consumption per se, so the layout should be simple. Thirdly, many large websites have multiple big sections that are designed as “home” pages; keeping their layouts consistent will make it easier for users to find their way around.

Tag Clouds Link

Finally, a fifth type of layout for navigating to content is the tag cloud. A tag cloud uses gradients, font size and positioning to show the relative importance or recurrence of items in a category.

60-preview-opt195
Tag clouds are a complex visualization of weighted navigation choices. (Source: Professional on the Web196) (View large version197)

Interestingly, tag clouds enable users to visualize items both alphabetically and by importance at the same time. Nonetheless, sorting by name or frequency makes items easier to understand and faster to scan. Apart from that, a tag cloud hardly works with anything but labels.

Functional Context Link

Functional context refers to the function that a user performs in a particular situation — in this case, whether they are navigating to or consuming content. These functions, however, play different roles in the user’s experience. As mentioned, navigation is merely a means to consuming content, so users expect navigation and consumption to contrast with each other.

Duplicate Navigation Menus Link

The content of a website could be pictures, videos or statistical data. After adding the main content itself, many developers will add options for the content, such as additional data, a chart view or an option to darken the surrounding page while a video is playing. They do so to make the available content more appealing to consume. However, the situation is the opposite with navigation. While users might want to view the same set of data in different chart types, they need only one type of menu to navigate to the data.

One wrong solution that is all too common is that clicking a navigation link drops down a submenu first.

61-preview-opt198
Clicking a menu link often drops down a submenu. (Source: Maplin199) (View large version200)

However, clicking the same link twice takes users to a separate page, which is for the same content category.

62-preview-opt201
Clicking the same link again will often open a separate page for the same content category. (Source: Maplin202) (View large version203)

In some cases, as with Maplin, two different navigation menus are even on the same page.

We’d be dealing with one of two scenarios:

  • The drop-down menu and the separate page contain the same items, with the separate page usually displaying the items in more detail and with additional information.
  • The drop-down menu contains a few featured items, while the separate page contains the same featured items as well as all other items that match that category.

Unfortunately in both scenarios, effort is duplicated for both users and designers, yet without benefit.

In the first scenario, the user will probably compare the menus first. “Why are there two navigation menus? Do they offer different options? If so, which is better suited to my navigation needs?” What’s more, returning visitors might repeat the process when new content is added. This is time they could have spent navigating to and consuming content from a single menu.

The second scenario has additional problems. If the user does not like the featured items in the drop-down menu, they might be reluctant to see the other options, especially because that would entail loading a new page and finding their way around again.

Again, instead of offering two types of menus, a mega-menu and a separate page, that both navigate to content, ask yourself which would do a better job of it, and then put all your effort into properly designing that one.

Visual Design In Navigation Menus Link

Another factor in the balance of navigation and consumption of content is visual design.

Mega-menus and separate pages offer ample space for pictures, but pictures should be used merely to explain options, not to present users with a degree of detail that would make them stop and “consume” the menu itself. Below, the car is presented in great detail, both in the large impressive picture and in the information below it.

63-preview-opt208
Large pictures and detailed information can create problems in navigation menus. (Source: Porsche209) (View large version210)

While the menu might look exciting at first, it actually creates a few problems in its interaction and efficiency of space.

First, the large picture and text take up so much space that only one item can be displayed. So, to compare their options, the user has to constantly move their cursor between the small submenu entries in the middle. Secondly, the content page shown below is rightly designed to put the product into the spotlight and to give the user a lot of information about it. However, because the navigation has a similar style, the effect of transitioning to the main content is not as impressive as it could be.

64-preview-opt211
If the navigation is similar in design to the product page, then the latter will look less impressive. (Source: Porsche212) (View large version213)

By contrast, in the example below, the designs of the navigation and main content are distinct. The pictures in the menu are large and detailed enough for the user to be able to easily distinguish between models but small enough to be lined up horizontally. Also, the text is restricted to helping users decide which model to explore in detail.

65-preview-opt214
Pictures in navigation menus are best used to explain options, not to present in detail. (Source: Lexus215) (View large version216)

Then, once users pick a model, they are taken to a dedicated page that presents the product in as detailed and spectacular a fashion as possible.

66-preview-opt217
The best way to present a product in detail is on a separate dedicated page. (Source: Lexus218) (View large version219)

Animation And Navigation Link

Another reason to make navigation and content distinct has to do with animation.

Some responsive websites have advanced animation, such as off-canvas navigation220 and flexible navigation221. In general, content is moved down or to the side to reveal the navigation. The website pictured below slides in the menu from the left, pushing content to the right.

offcanvas222
Some websites animate content to reveal the navigation. (Source: Mashable223) (View large version224)

Animation, if purposefully deployed, can be a useful way to explain transitions on the screen. Left and right sliding animations, for example, visualize the moving back and forth between navigation levels. However, sliding animation should be used only to explain navigation and nothing else.

With the techniques mentioned above, by contrast, both content and navigation are animated. While other developers might be impressed by the effect because they know how technically difficult it is to do, users might think different. Users might ask why the content is moving if they’ve only requested the menu. Building and maintaining such an effect take time and resources, yet the result could be perceived as confusing.

The traditional way to animate navigation is to slide it over top of the content, as mocked up below, which is a simpler, more efficient solution for both developers and users.

mockupmenu225
Sliding the navigation menu over top of the content is a simpler, more efficient way to present navigation. (View large version226)

Immersing the User in the Functional Context Link

A final point concerns immersing the user in one function by fading out the other.

Many websites that have drop-down navigation also have media such as videos and slideshows that play either automatically or manually, the latter being favorable because it puts the user in control. In either case, be considerate and pause media in the background as soon as the menu is opened to allow the user to assess their navigation options without distraction.

69-preview-opt227
When the user opens the menu, pause carousels and other media to allow for undisturbed navigation. (Source: Forever 21) (View large version228)

Summary Link

The recommendations in this article can be summed up as follows:

  • Symbols
    Indicate drop-down menus with a symbol; a text label with a triangle is the most reliable indicator. Consistent use of symbols throughout the website will minimize confusion.
  • Target areas
    Target areas in navigation should be large, easy to read and consistently positioned to make interaction comfortable.
  • Interaction event
    Interaction with navigation should be based on clicking, not hovering or typing. Scrolling should be allowed only for navigating within, not between, categories.
  • Layout
    Alphabetical sorting is good, but don’t overlook alternative sorting methods. Lists, columns and grids are the most familiar types of layouts for menus. If short text is sufficient to explain the options, then go for a list or columns. If pictures are best, then choose a grid. If longer descriptions are necessary, then a list is the best choice. If dynamic filters can accommodate crucial information, then use a grid; otherwise, a list.
  • Levels
    Display the content of no more than a single category at a time. Tabbed mega-menus and sliding menus are the most efficient solutions for mobile. Also, too few levels can complicate navigation by creating long lists that are hard to digest. If you have more than a couple of levels, consider a breadcrumb trail. On a mega-site, give each sub-department a unique visual design, but keep the interaction consistent across departments.
  • Functional context
    Use only one type of navigation for a website, and use pictures merely to explain the options, not to present in detail. Also, once users activate the menu, pause any distractions, such as video or slideshows.

Final Thoughts Link

The gist of designing a navigation system that is easy to use is to restrict and follow up the navigation options for your target audience as well as to keep the information in the menu to a minimum.

However, these two steps make up only half the story. Because the users have to interact with the navigation, two more steps are required — namely, to choose and then design the right type of navigation.

As for choosing the right type, the less information that is necessary to explain the options and the less it amounts to, the simpler the navigation will be. Finally, the menu should be designed to be as simple, predictable and comfortable as possible.

Simplicity means using only one type of navigation menu and displaying the contents of a single category at a time. Predictability comes from following consistent and familiar patterns. And comfort follows from reducing mistakes and stress by making the interaction forgiving and inclusive.

These four steps might sound like common sense, but mistakes that break or compromise the user’s experience often happen along the way. Hopefully, this series of articles has helped you avoid mistakes and improve your navigation for users as a result.

Further Reading Link

Here are some resources you might be interested in:

(al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
  2. 2 https://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/
  3. 3 https://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
  4. 4 https://www.smashingmagazine.com/2012/03/the-elements-of-navigation/
  5. 5 https://www.smashingmagazine.com/2012/06/responsive-menus-enhancing-navigation-on-mobile-websites/
  6. 6 https://www.smashingmagazine.com/2012/03/an-analysis-navigation-portfolio-websites/
  7. 7 https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  9. 9 http://www.cbs.com/shows/bad-teacher/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  12. 12 http://www.currys.co.uk/gbuk/index.html
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  17. 17 http://nokia.com
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2013/08/grid.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2013/08/bullet_list.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  22. 22 http://2012.dconstruct.org
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  25. 25 http://kiwibank.co.nz/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  28. 28 http://www.starbucks.com/menu/catalog/product?drink=bottled-drinks#view_control=product
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  31. 31 http://www.baristaprima.ca/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  33. 33 http://baymard.com/blog/ux-illusion-of-space
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2014/08/9-large-opt.jpg
  35. 35 http://www.toshiba.com/tai/products_consumer.jsp
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2014/08/9-large-opt.jpg
  37. 37 https://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/
  38. 38
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-large-opt.jpg
  40. 40 http://philly.com
  41. 41 http://apple.com
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-large-opt.jpg
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-large-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-large-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2013/08/nested-menus11.jpg
  46. 46 http://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2013/08/nested-menus11.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-large-opt.png
  49. 49 http://elc-eu.org
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-large-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-large-opt.png
  52. 52 http://starbucks.com
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-large-opt.png
  54. 54 http://www.mackido.com/Interface/hysteresis.html
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2014/08/15-large-opt.png
  56. 56 http://zealousweb.co.uk
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2014/08/15-large-opt.png
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2014/08/16-large-opt.png
  59. 59 http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2014/08/16-large-opt.png
  61. 61 http://www.nngroup.com/articles/mega-menus-work-well/
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2014/08/17-large-opt.png
  63. 63 http://www.miniusa.com/content/miniusa/en.html
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2014/08/17-large-opt.png
  65. 65 http://www.nngroup.com/articles/using-link-titles-to-help-users-predict-where-they-are-going/
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2014/08/18-large-opt.png
  67. 67 http://sixrevisions.com/usability/data-visualization-gestalt-laws/
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2014/08/18-large-opt.png
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2014/08/19-large-opt.jpg
  70. 70 http://mediatemple.net/
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2014/08/19-large-opt.jpg
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2014/08/20-large-opt.jpg
  73. 73 http://abc.go.com/shows
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2014/08/20-large-opt.jpg
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2014/08/21-large-opt.jpg
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2014/08/21-large-opt.jpg
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2014/09/22-large-preview-opt.jpg
  78. 78 http://getpocket.com/
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2014/09/22-large-preview-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2014/09/23-large-opt.jpg
  81. 81 http://getpocket.com/
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2014/08/23-large-opt.png
  83. 83 http://ux.stackexchange.com/questions/28825/how-to-solve-overly-deep-hierarchy-navigation-on-mobile-device
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2014/08/24-large-opt.png
  85. 85 http://microsoft.com
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2014/08/24-large-opt.png
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/2014/08/25-large-opt.png
  88. 88 http://microsoft.com
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2014/08/25-large-opt.png
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2014/08/26-large-opt.png
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2014/08/26-large-opt.png
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2014/08/27-large-opt.jpg
  93. 93 http://www.intel.com/content/www/us/en/homepage.html
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2014/08/27-large-opt.jpg
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2014/09/28-large-opt.jpg
  96. 96 http://www.sonypictures.com/movies/
  97. 97 https://www.smashingmagazine.com/wp-content/uploads/2014/09/28-large-opt.jpg
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2013/08/sliding_symbols1.jpg
  99. 99 http://asus.com/us
  100. 100 https://www.smashingmagazine.com/wp-content/uploads/2013/08/sliding_symbols1.jpg
  101. 101 https://www.smashingmagazine.com/wp-content/uploads/2013/08/nest1.jpg
  102. 102 http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2013/08/nest1.jpg
  104. 104 http://www.nngroup.com/articles/mega-menus-gone-wrong/
  105. 105 https://www.smashingmagazine.com/wp-content/uploads/2014/09/31-large-opt.jpg
  106. 106 http://target.com
  107. 107 https://www.smashingmagazine.com/wp-content/uploads/2014/09/31-large-opt.jpg
  108. 108 https://www.smashingmagazine.com/wp-content/uploads/2014/09/32-large-opt.jpg
  109. 109 http://www.bestbuy.ca/en-CA/home.aspx#
  110. 110 https://www.smashingmagazine.com/wp-content/uploads/2014/09/32-large-opt.jpg
  111. 111 https://www.smashingmagazine.com/wp-content/uploads/2014/09/33-large-opt.jpg
  112. 112 http://www.sears.com/shoes-mens-shoes-mens-casual-shoes/b-1253483662
  113. 113 https://www.smashingmagazine.com/wp-content/uploads/2014/09/33-large-opt.jpg
  114. 114 https://www.smashingmagazine.com/wp-content/uploads/2014/09/34-large-opt.jpg
  115. 115 http://www.omegawatches.com/watchfinder
  116. 116 https://www.smashingmagazine.com/wp-content/uploads/2014/09/34-large-opt.jpg
  117. 117 https://www.smashingmagazine.com/wp-content/uploads/2014/09/35-large-opt.jpg
  118. 118 https://www.smashingmagazine.com/wp-content/uploads/2014/09/35-large-opt.jpg
  119. 119 https://www.smashingmagazine.com/wp-content/uploads/2014/09/36-large-opt.jpg
  120. 120 http://m.lowes.com/category?langId=-1&storeId=10702&catalogId=10051&nValue=4294857973&store=595
  121. 121 https://www.smashingmagazine.com/wp-content/uploads/2014/09/36-large-opt.jpg
  122. 122 https://www.smashingmagazine.com/wp-content/uploads/2014/09/37-large-opt.jpg
  123. 123 http://m.zappos.com/women-shirts-tops/CKvXARDL1wHAAQHiAgMBGAI.zso
  124. 124 https://www.smashingmagazine.com/wp-content/uploads/2014/09/37-large-opt.jpg
  125. 125 https://www.smashingmagazine.com/wp-content/uploads/2013/10/gradual_sliders.jpg
  126. 126 http://freetimeapp.com
  127. 127 https://www.smashingmagazine.com/wp-content/uploads/2013/10/gradual_sliders.jpg
  128. 128 https://www.smashingmagazine.com/wp-content/uploads/2014/09/39-large-opt.jpg
  129. 129 https://www.smashingmagazine.com/wp-content/uploads/2014/09/39-large-opt.jpg
  130. 130 https://www.smashingmagazine.com/wp-content/uploads/2014/09/40-large-opt.jpg
  131. 131 http://www.homedepot.com/b/Appliances-Cooking-Microwaves-Built-In-Microwaves/N-c3q3Z5yc1v#./N-c3q3Z5yc1v?&_suid=1385830414682015189466296192966
  132. 132 https://www.smashingmagazine.com/wp-content/uploads/2014/09/40-large-opt.jpg
  133. 133 http://usabilitygeek.com/12-effective-guidelines-for-breadcrumb-usability-and-seo/
  134. 134 http://www.nngroup.com/articles/breadcrumb-navigation-useful/
  135. 135 https://www.smashingmagazine.com/wp-content/uploads/2014/09/41-large-opt.jpg
  136. 136 http://www.uie.com/articles/breadcrumbs/
  137. 137 http://derivadow.com/2010/02/18/the-problem-with-breadcrumb-trails/
  138. 138 https://www.smashingmagazine.com/wp-content/uploads/2014/09/41-large-opt.jpg
  139. 139 https://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  140. 140 https://www.smashingmagazine.com/wp-content/uploads/2014/09/42-large-opt.jpg
  141. 141 http://www.area17.com/work/wythe-hotel-website
  142. 142 https://www.smashingmagazine.com/wp-content/uploads/2014/09/42-large-opt.jpg
  143. 143 https://www.smashingmagazine.com/wp-content/uploads/2014/09/43-large-opt.jpg
  144. 144 http://www.express.co.uk/entertainment/books
  145. 145 https://www.smashingmagazine.com/wp-content/uploads/2014/09/43-large-opt.jpg
  146. 146 https://www.smashingmagazine.com/wp-content/uploads/2014/09/44-large-opt.jpg
  147. 147 http://m.lowes.com/category?langId=-1&storeId=10702&catalogId=10051&nValue=4294857647&store=595
  148. 148 https://www.smashingmagazine.com/wp-content/uploads/2014/09/44-large-opt.jpg
  149. 149 https://www.smashingmagazine.com/wp-content/uploads/2014/09/45-large-preview.jpg
  150. 150 http://www.ard.de/home/ard/ARD_Startseite/21920/index.html
  151. 151 https://www.smashingmagazine.com/wp-content/uploads/2014/09/45-large-preview.jpg
  152. 152 https://www.smashingmagazine.com/wp-content/uploads/2014/09/46-large-opt.jpg
  153. 153 http://www.bbc.com/
  154. 154 https://www.smashingmagazine.com/wp-content/uploads/2014/09/46-large-opt.jpg
  155. 155 http://www.nngroup.com/articles/alphabetical-sorting-must-mostly-die/
  156. 156 https://www.smashingmagazine.com/wp-content/uploads/2014/09/47-large-opt.jpg
  157. 157 http://verious.com
  158. 158 https://www.smashingmagazine.com/wp-content/uploads/2014/09/47-large-opt.jpg
  159. 159 https://www.smashingmagazine.com/wp-content/uploads/2014/09/48-large-opt.jpg
  160. 160 http://theweek.com/section/index/politics
  161. 161 https://www.smashingmagazine.com/wp-content/uploads/2014/09/48-large-opt.jpg
  162. 162 https://www.smashingmagazine.com/wp-content/uploads/2014/09/49-large-opt.jpg
  163. 163 http://www.costco.com/all-tvs.html
  164. 164 https://www.smashingmagazine.com/wp-content/uploads/2014/09/49-large-opt.jpg
  165. 165 http://www.uxmatters.com/mt/archives/2009/07/the-mystery-of-filtering-by-sorting.php
  166. 166 https://www.smashingmagazine.com/wp-content/uploads/2014/09/50-large-opt.jpg
  167. 167 https://www.smashingmagazine.com/wp-content/uploads/2014/09/50-large-opt.jpg
  168. 168 https://www.smashingmagazine.com/wp-content/uploads/2014/09/51-large-opt.jpg
  169. 169 http://aritzia.com/
  170. 170 https://www.smashingmagazine.com/wp-content/uploads/2014/09/51-large-opt.jpg
  171. 171 https://www.smashingmagazine.com/wp-content/uploads/2014/09/52-large-opt.jpg
  172. 172 http://usatoday.com/money
  173. 173 https://www.smashingmagazine.com/wp-content/uploads/2014/09/52-large-opt.jpg
  174. 174 https://www.smashingmagazine.com/wp-content/uploads/2014/09/53-large-opt.jpg
  175. 175 http://usatoday.com/money
  176. 176 https://www.smashingmagazine.com/wp-content/uploads/2014/09/53-large-opt.jpg
  177. 177 https://www.smashingmagazine.com/wp-content/uploads/2014/09/54-large-preview-opt.jpg
  178. 178 http://www.pcrichard.com/Computers-Tablets/Computers-Notebooks/Laptop-Computers/703020.pcrc?view=grid&trail=
  179. 179 https://www.smashingmagazine.com/wp-content/uploads/2014/09/54-large-preview-opt.jpg
  180. 180 https://www.smashingmagazine.com/wp-content/uploads/2014/09/55-large-preview-opt.jpg
  181. 181 http://www.pcrichard.com/Computers-Tablets/Computers-Notebooks/Laptop-Computers/703020.pcrc?view=list&trail=
  182. 182 https://www.smashingmagazine.com/wp-content/uploads/2014/09/55-large-preview-opt.jpg
  183. 183 https://www.smashingmagazine.com/wp-content/uploads/2014/09/56-large-opt.jpg
  184. 184 http://www.pcrichard.com/Computers-Tablets/Computers-Notebooks/Laptop-Computers/703020.pcrc?pageNum=0&view=grid&trail=1135%3AApple|Asus|Samsung%3A1137%3A250.00-500.00|500.00-1000.00|1000.00-2500.00
  185. 185 https://www.smashingmagazine.com/wp-content/uploads/2014/09/56-large-opt.jpg
  186. 186 https://www.smashingmagazine.com/wp-content/uploads/2014/09/57-large-opt.jpg
  187. 187 http://query.nytimes.com/search/sitesearch/#/U.S.+foreign+policy/
  188. 188 https://www.smashingmagazine.com/wp-content/uploads/2014/09/57-large-opt.jpg
  189. 189 https://www.smashingmagazine.com/wp-content/uploads/2014/09/58-large-preview-opt.jpg
  190. 190 http://america.aljazeera.com/topics/topic/categories/us.html
  191. 191 https://www.smashingmagazine.com/wp-content/uploads/2014/09/58-large-preview-opt.jpg
  192. 192 https://www.smashingmagazine.com/wp-content/uploads/2014/09/59-large-preview-opt.jpg
  193. 193 http://america.aljazeera.com/
  194. 194 https://www.smashingmagazine.com/wp-content/uploads/2014/09/59-large-preview-opt.jpg
  195. 195 https://www.smashingmagazine.com/wp-content/uploads/2014/09/60-large-opt.jpg
  196. 196 http://www.professionalontheweb.com/
  197. 197 https://www.smashingmagazine.com/wp-content/uploads/2014/09/60-large-opt.jpg
  198. 198 https://www.smashingmagazine.com/wp-content/uploads/2014/09/61-large-opt.jpg
  199. 199 http://www.maplin.co.uk/
  200. 200 https://www.smashingmagazine.com/wp-content/uploads/2014/09/61-large-opt.jpg
  201. 201 https://www.smashingmagazine.com/wp-content/uploads/2014/09/62-large-opt.jpg
  202. 202 http://www.maplin.co.uk/c/computing-and-office
  203. 203 https://www.smashingmagazine.com/wp-content/uploads/2014/09/62-large-opt.jpg
  204. 204 http://tigerdirect.com
  205. 205 http://bestbuy.ca
  206. 206 http://www.bostonglobe.com
  207. 207 http://time.com
  208. 208 https://www.smashingmagazine.com/wp-content/uploads/2014/09/63-large-opt.jpg
  209. 209 http://porsche.com/usa
  210. 210 https://www.smashingmagazine.com/wp-content/uploads/2014/09/63-large-opt.jpg
  211. 211 https://www.smashingmagazine.com/wp-content/uploads/2014/09/64-large-opt.jpg
  212. 212 http://porsche.com/usa/models/boxster/boxster-s
  213. 213 https://www.smashingmagazine.com/wp-content/uploads/2014/09/64-large-opt.jpg
  214. 214 https://www.smashingmagazine.com/wp-content/uploads/2014/09/65-large-opt.jpg
  215. 215 http://lexus.com
  216. 216 https://www.smashingmagazine.com/wp-content/uploads/2014/09/65-large-opt.jpg
  217. 217 https://www.smashingmagazine.com/wp-content/uploads/2014/09/66-large-opt.jpg
  218. 218 http://lexus.com/models/IS
  219. 219 https://www.smashingmagazine.com/wp-content/uploads/2014/09/66-large-opt.jpg
  220. 220 https://www.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
  221. 221 http://filamentgroup.com/lab/responsive_design_approach_for_navigation/
  222. 222 https://www.smashingmagazine.com/wp-content/uploads/2013/08/offcanvas1.jpg
  223. 223 http://mashable.com
  224. 224 https://www.smashingmagazine.com/wp-content/uploads/2013/08/offcanvas1.jpg
  225. 225 https://www.smashingmagazine.com/wp-content/uploads/2013/08/mockup_menu1.jpg
  226. 226 https://www.smashingmagazine.com/wp-content/uploads/2013/08/mockup_menu1.jpg
  227. 227 https://www.smashingmagazine.com/wp-content/uploads/2014/09/69-large-opt.jpg
  228. 228 https://www.smashingmagazine.com/wp-content/uploads/2014/09/69-large-opt.jpg
  229. 229 http://sixrevisions.com/user-interface/navigation-design-patterns/
  230. 230 http://www.welie.com/
  231. 231 http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
  232. 232 http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  233. 233 http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
  234. 234 http://www.slideshare.net/theresaneil/mobile-retail-navigation-patterns

↑ Back to top Tweet itShare on Facebook

I am a freelance user interface designer based in Greece. Having studied Social Sciences and Philosophy, I believe that a proper philosophy of language is crucial to any well-designed social or digital information system. My main areas of expertise are: Interaction Design, Information Architecture, Empathy, Usability, Nomenclature.

  1. 1

    I don’t think I completely agree with your thoughts on the now infamous burger icon, in as much as that I believe what has been attempted is a new symbol which denotes access to some form of navigation – it is not directly referring to the construct of said menu.

    In itself, there are, as you’ve pointed out some major flaws with the design, it has been synonymous with a bullet list, or justified text since the icon development set for Microsoft Word. But it’s at least a good start, and face it, that icon has now been in circulation for a good 5 years and become recognisable lexicon.

    3
    • 2

      Hi Andy,

      I would argue that many users are not as familiar with the three lines as, for example, web designers. Also, I would not say that it is as old as responsive web design or even as established.

      http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design

      Apart from that, consider that the downward triangle has been around and known to drop down navigation menus in both web sites and especially applications for a few decades now, not just five years. So, users already know what a triangle does. No need to learn something new.

      But you are right that it is becoming more and more established as a navigation icon. And it is a good thing that responsive web designers try to establish standards in interaction design. I agree, for example, with clicking as an interaction event, which is currently a trend. The three lines as a standard icon, however, never looked good to me.

      4
      • 3

        Completely true about that “hamburger” icon. Some of us take it for a given, but I’d like to remind you the “my mother” rule.

        “Can my mother handle this without me explaining how it works?”

        If the answer is “no” … then we’re back to the drawing board :)

        9
        • 4

          Don’t forget though, that even mothers have access to Facebook, Google Chrome, and various other news apps (on their tablets and/or mobile devices) that heavily rely on the hamburger. A sideways triangle (pointing left) is universally known as a “play” icon…a square = Stop. That’s not inherent knowledge, it’s taught and learned over time.

          It’s great to keep a contrasting ‘voice’ or perspective in the back of your mind, however the point of the article is that many of these symbols have simply become the norm. Pluses, minuses, triangles and lines now indicate interaction. We all know this from experiencing it.

          People may not inherently understand what’s going on, but you can almost guarantee they’ll be able to use another site/app/device just because they’ve understood this new wave of UI/UX trends. Sometimes It’s about conditioning them (users) to understand as much as it’s about them figuring it out.

          If we tried to implement and design a baseline for ALL levels of understanding we’d never have bothered with HTML5, or CSS3. Some users will just have to adapt and learn or get left behind…. Or you can spend an extra few months trying to code to accommodate everyone, all the time.

          0
      • 6

        Web navigation should always be visible to a user (as outlined by Neilsen). The 3 line burger hides the menu, resulting in a ‘click to show’ by the user. This works for mobile as it optimises for the screen but it’s not needed for web as screen sizes are large enough to show navigation.

        0
  2. 7

    Absolutely right about the issue with proximity. Look at that Starbucks example with the navigation and menu icon.

    0
  3. 8

    Evert Albers (@evert_)

    September 18, 2014 4:05 pm

    Not that I’m a hardcore breadcrumb fan, but it should be noted that more and more browsers don’t show the url anymore.

    2
  4. 10

    It would be great for my user experience if there was a printable version of all five pages of this article.

    2
  5. 12

    I’ve read the whole article, then I felt a little betrayed because the summary with fewer examples would have been a better worth of my time.

    This post looked like a very serious case study at least because of the fact that it is five pages, but it is nothing but a check list of what some people do and others don’t.

    I didn’t find any of the simplifying and interaction design points to be well discussed and backed up by real data (obviously you can’t have user data for all the web sites mentioned).

    I see you’ve done a lot of work there, and I don’t argue that. Yet there isn’t any single point of data that would prove one thing you say is better than another one and how it would affect conversion and user behavior.

    11
    • 13

      Hi Martin,

      actually, I would argue it is the other way around. At first glance, the article may look like a checklist with a few pictures but at a second look, it is actually a most detailed discussion of virtually every aspect of interacting with navigation menus.

      The reason the article is not even longer is that I try to be as succinct and to the point as possible. That is, of course, without sacrificing crucial arguments in the process.

      Take, for example, my discussion about hovering and clicking. Instead of reiterating the history of interaction events, I get straight to listing and discussing the benefits and problems of hovering and clicking, even in the form of bullet points. And in the end I make a clear recommendation as to what is the best thing to do.

      If you read the passage again, you will notice that every sentence is stripped of any unnecessary bloat to just give you the pure essence of an argument. But, of course, if you have found a more detailed discussion about hovering and clicking as an interaction event, with more points and counter points than I have, then, honestly, it would be great if you could post a link to it.

      It may be just my style that makes my article look like a checklist but not my actual content. In fact, I claim you will not find a single statement or recommendation that is just an assumption without at least one clear argument, probably more, and one or more examples to back it up.

      The fact that you mention quantified data is understandable but I have explained elsewhere why having all this data not only may not be feasible, as you mention yourself, but that it could also be misleading:

      https://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/#comment-201925

      So, instead I try to convince by using clear arguments and pictures. Take, for example, my statement that removing levels in navigation menus can hurt rather than help users. There is no data that will tell you how many exact entries a menu should have. But at some point it becomes too many.

      So, I use a picture comparison to raise awareness for this. First, by showing the Microsoft menu with all levels, then the very same menu without the last level and then even a mock-up, which is unusual, to make my point. I use the same technique in other sections as well. The fact that I sometimes even use mock-ups proves that this is not just a list of what people do but that I always say and show what should be done.

      And finally, just to illustrate that a clear argument can be worth more than quantified data, consider mega-sites. There is no data that will tell you how to design a mega-site. In fact, mega-sites are such huge and complex buildings that statisticians would be reluctant to gather and process any data related to them.

      So, instead, I offer a simple rule of thumb: “While the interaction should be as consistent as possible, the visual design can be as unique as you like.” And to back this up I just use a simple argument: “Everybody knows a medical school looks different from a law school. But there is no reason why the contact details should be in a different corner for each department.”

      I would argue that this is more helpful than pretending any given number can solve your problems with mega-sites.

      Hope this helps.

      0
      • 14

        Hi,

        while I agree with you regarding everything you say and point as common sense – I am strongly against making decisions based solely on it.

        I do design sites getting into the category of “mega-sites”. Most of my work is based around sports betting and how it would work/look on all kinds of devices. The sheer amount of dynamic data there is even frightening sometimes. In the context of this I must say the designing for user interaction must always be backed up by UAT and processed data showing you how people find their way around your software.

        In that sense when I say the article looks more like a check list – I mean that no matter if I agree or no, there is no data on the efficiency of the design patterns you discuss.

        This is more like a personal opinion + common sense than the case study I hoped it would be. Don’t get me wrong, the article is not bad, and it is very well written. My case is that it was looking like something else to me and I was disappointed after I read it.


        “And finally, just to illustrate that a clear argument can be worth more than quantified data, consider mega-sites. There is no data that will tell you how to design a mega-site. In fact, mega-sites are such huge and complex buildings that statisticians would be reluctant to gather and process any data related to them.”
        -> I have 11 years worth of data to work with. What do you mean there is no data?

        Thank you for the comment!

        0
        • 15

          Hi Martin,

          I meant there is no study that evaluates several mega-sites, each of which typically have their very own navigation philosophies, in a way that allows an even remotely meaningful comparison. But even if I just take the data from your own mega-site, it basically comes down to what I responded in another comment, see link above.

          Statistics should always be taken with a grain a salt and what worked for you need not work for someone else. Common sense, however, beats testing. Just one example, to be short.

          We can agree that user annoyance can worsen conversion rates. Now, I made the statement that hovering creates more user mistakes than clicking. Quite frankly, I would never recommend a client to test that, simply, because it would be a waste of money. In what kind of world and interface does clicking create more mistakes than hovering? Indeed, this is something I would just check off my list and move on.

          But I am not saying that testing does not make sense and, indeed, in certain situations it can and has provided invaluable information. It is just that, personally, I would be very careful with testing results, and I would rather base a decision on common sense. That is all.

          1
  6. 16

    Thank you for this great overview! As mentionne before, there is a lack of data but I assume it’s hard to collect and analyze them massively. So I’m gonna bookmark this article as a perfect reminder to experiment things rather than a strict guide about do’s and don’ts. But what I appreciate above all is how such an article arouses questions and drives tests. And that is very good.

    About breadcrumbs, as people don’t all behave the same way, I guess this is the reason why Express has combined breadcrumbs with a two-level navigation system.

    Sometimes usability is not how to bring the best experience for everyone but for each one of them.

    1
  7. 17

    I say approach dropdown menus with multi-levels of flyouts with caution.
    It entirely depends on the context. It can work well for ‘catalogue’ websites, yet it’s not easy to scale down to smaller screen resolutions!

    For existing non-catalogue style websites, for instance, a corporate site, the first port of call should be the analytics. Where are people currently going? Why are they going there? Where would you like them to go?

    My experience is that, for many sites, no more than 10% of the content gets 99% of the traffic. This either means your complex dropdown/flyout menus are redundant OR you are not flagging up user journeys correctly.

    It’s all about the journey, the ‘narrative’ – and multi-level menus are generally only useful for users familiar with a site.

    So often, I’ve worked with stakeholders when building websites who assume that because multi-tiered taxonomy works for *them*, as they’ve *designed* it, it will work for everyone. You have to put yourself in the position of a visitor/customer – get your pitch correct. Get a user to that point of sale or contact intuitively. Complex multi-level dropdown menus are rarely intuitive and are more often than not, a taxonomy hack job.

    As for the infamous ‘burger’ icon, I see no reason to put the word ‘Menu’ on it. Rather, it needs to be in a logical place – never assume the user is clueless.

    0
    • 18

      Hi Matthew,

      some good points but I would actually suggest to assume your users are clueless. Not that they are – but it is a better strategy. As you mentioned yourself, just because you and your clients understand a certain icon or taxonomy, does not mean the users will. And unless the other buttons in your navigation bar, such as home, account, cart, etc…, occupy too much space, which is unlikely, there is nothing wrong with adding the label “Menu” to your navigation icon.

      Secondly, I would not advice to determine the users journey but to make it easy for them to reach any part of your content. The figure you mentioned does make sense to me as some products and services on a site can be more popular than others. But this can also be due to how the designers, with or without the clients suggestion, constructed the menu to lead them to certain items.

      Instead, if you want to emphasize certain items, be aware that the first thing users notice, before they even consider the navigation menu, is the home or landing page they arrive on. It is the most spacious and prominent place to offer shortcuts to items you want your users to see. If, however, they do not care about these items, they will access the navigation menu, in which case the menu should not again lead them to the same items but allow to easily access other content as well.

      And lastly, your concerns about complex multi-level dropdowns are understandable. But I would argue the culprit is the information architecture or taxonomy hack job, as you called it, not the dropdowns. The main reason users get lost in a navigation system is that the category they selected does not contain the information they were expecting. A problem that is aggravated when users have to go through multiple levels to find what they want.

      This is why your statement – to put oneself in the users position – is spot on. As a result, designers should work hard to find out what their targeted users would expect to find in a certain category and, if necessary, rearrange the content or add pictures and descriptions to the category labels in order to minimize misunderstandings.

      0
  8. 19

    First of all: Amazing article covering all these aspects! Hats off for that.

    There’s one particular thing (or flaw) that grabbed my attention though when it comes to ‘Clicking to open a drop-down menu’ which you think should be the default interaction event. There are many sites where the top menu item of a dropdown list is a page in itself as well. Ofcourse you can sometimes solve this by restructuring the sites content to get rid of that often unnecessary toplevel contentpage, but this is often not possible or something the client insists on having. Also, many times the user also expects that menu item to be a page and is surprised that clicking on it doesn’t bring him to a certain page even if a triangle is clearly visible. This dilemma is a real pain in the ass on many occasions.

    1
    • 20

      Hi Pieter,

      I assume you mean when to use index pages, which show all items within a category. Their usage depends on the amount of items within a category and whether the category is crucial to the target audience or not.

      For example, it is unlikely users want to see all 10.000 products of a retailer at a glance. So, you categorize the items into the crucial category “type of products”, such as computers, clothes, furniture, etc… However, this may still not be enough as there are different types of computers, such as laptops, tablets, desktops, etc… and chances are users will not want any type of computer but a specific one. Of course, if the site has no more than a dozen computers, you can drop the subcategories and just show all computers right away.

      Now, if you are not sure whether to use an index page, there are two options: One, when users click on “Computers”, the subcategories are shown but also an entry called “All Computers”. This way, users understand they are given the option of an index page, in case they do not care about subcategories.

      And two, you can drop the subcategories altogether and only offer an index page “Computers” but with dynamic filters to allow users to narrow down their choices.

      I discuss these points in more detail in the first part of this article series. If you do not want to read the entire article, you can read the summary at the end called “Structuring The Content”.

      Hope this helps.

      0
  9. 21

    Going awesome so far. Up for next.

    0

↑ Back to top