blink design library

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

Usable 'Fly Out' Menus

I like this example of "flyout" menus because the global navigation bar is visually tied to the submenu by using the same color (which also helps visually separate it from the page in the background). There is good visual feedback as well as to which item is selected and a large target area for each menu item.

From: Circuit City