blink design library

Sub-items in dynamic menus

Dynamic menus can be a handy shortcut, but what if you want to present sub-items in the menu?

The traditional method in desktop software menus is a horizontal fly-out, as shown below:

 

Many web sites use a similar approach, as in this example from Lands End:

 

Where there are relatively few top-level options, some sites organize sub-items in vertical columns, as in this example from REI.com:

 

One approach I've seen only on one site (Mygazines)  is a dynamic menu that extends vertically:

 

 

A downside with this implementation is that 1) it requires a click to open/close a submenu and 2) It can result in "pushing down" the top-level options so they are more difficult to scan.

Managing options in faceted navigation

Epicurious is one of my favorite web sites. But I've been mystified by their implementation of faceted navigation, which can result in an absurdly long left-hand navigation bar (click to see image full-sized):

In the page above, they've displayed all the values for the first facet (Main Ingredient), which pushes the remaining facets (Meal/Course, Type of Dish, Season/Occasion, Recipe Category, Preparation, Dietary Consideration) down to about 2800 pixels "below the fold."  That's a long way to scroll--and of course it significantly reduces the discoverability of these options.

How could Epicurious have avoided this? One option would be to initially present all the facets closed. This has the disadvantage of requiring two clicks to select a "refine by" option (one click for the facet, one click for the value).

Another option would be to initially display a facet that has relatively few values. My choice here would be Meal/Course:

Another approach is to use more/less links, as shown in this example from Buzzillions:

 

The top brands are shown initially, with the option to see "more":

Side tabs

Tabs across the top of the page are a commonly-found navigation element on the web.

Example from Best Buy

In testing, we've found that tabs are an effective visual treatment for navigation - they make options quickly discoverable.  One disadvantage of horizontal tabs, however, is limited screen real estate. If you have more than a handful of options, you can run out of space for the tabs.

In many situations, vertical tabs can work as well.

These have the advantage of giving significant visual weight to the navigation options while providing room for many more options.

Example from Jott

"Window shade" Wizard Navigation

The Adobe store uses a "window shade" navigation scheme for its check-out flow. Here is the initial  page state, with the first step active (click image to see full-sized version):

When I click continue to move to the next step, the current "window shade" closes and the second steps opens:

This particular interface is very responsive, and so the task flow feels much more compact compared to more traditional page-to-page navigation.

Practically, this approach works best where each step isn't too long - and there are just a few steps - so that the "next steps" listed below the current one are clearly visable.

Dynamic Side-Tabs

The "My eBay" area of eBay uses a system of dynamic side-tabs for navigation to child (subordinate) pages. Here are the tabs in the normal state:

Here is the "Saved Stuff" tab in the rollover state:

Once you click on a tab it stays open; closing the previously-active tab:

I think this is an interesting approach to help de-clutter a left navigation bar, which can sometimes  contain an overwhelming number of links. The key, however, would be clear groupings of links--with labels that convey a strong "information scent" of the underlying links.

Link back to home

Amazon has a treatment of its logo that I haven't seen before. When you roll over the logo, it indicates that it  links back to home:

Normal state


Rollover state

This would seem to be helpful, but I wonder if practically it really is. We've found in testing that while some users understand a site logo typically navigates back to home, many users don't make this association (and therefore never think of clicking or rolling their mouse over the logo). So, I suspect this design approach is helpful only as additional feedback for users who are inclined to click the logo to begin with.

The experience for new vs. returning users

A number of web services create two entirely separate site experiences for new vs. returning users. The new user experience is typically focused on the benefits of the service and getting people to sign up.

For example, compare the different home page presentations for new vs. existing users on Tastebook. New users are presented with clean, simple page with just three main options: How it Works, Look Inside (a product tour), and Get Started.

Below is the "logged in" version of the Tastebook home page--the starting point for actually using the service.

LinkedIn uses a similar approach, with a super-simple home page for new users:

The advantage of this approach is that it eliminates options that aren't functional for users who haven't yet signed up for the service.  It also makes a crisp distinction between the web site for the product and the product itself (a distinction that exists, of course, for desktop software).

Embedded Widget Functionality

The Pageflakes gmail widget allows me to perform basic email functions such as viewing a message, replying, forwarding, going to the next message, and composing a new message--all right within the within the widget. The command options are neatly laid-out in an uncluttered interface.

From: Pageflakes

As widgets proliferate (both on the web and on the desktop), designers will need to master intra-widget navigation.

'Filmstrip' Navigation

I've noticed a number of sites recently using "filmstrip" navigation, which allows users to page through items horizontally within a page.

From: YouTube

From: Amazon

Here, to help users understand there are more items available to view, there is a partial display of the next items on either end of the strip.

From: Wetpaint

'Top Items' Global Navigation

This site has a very narrow and deep structure. It handles this issue in the global navigation by providing "top items" in the dynamic sub-menu [1] with a clear "View All" link that takes the user the page listing all the occasion categories [2].

From: Gifts.com