Navigation Vertical

Definition of objectif

The user needs to navigate through a site to locate information and features and have a clear view of their current position in the site. The navigation can have few or a lot of categories.
Why use more than 1 level of navigation

The question here is not if the navigation has to been horizontal or vertical. The tabular metaphor is well-known in user interface and facilitates easy navigation between groups of information. By showing the current position in the two topmost levels the users know where they are and can also jump to other categories.

Use When

• Tabs provide context. They offer the ability to give visual indication of a user’s location within a body of information.
• Tabs provide navigation. They provide the ability to navigate the site.
• The number of elements in the toplevel and in the second level each are less than 10.
• The category titles are relatively short.
• Users want to see where they are now.
• You need to indicate the user’s current location in the set of available options.
• Users want to know how to get back to the main page

Solution

• Present a single-line row of tabs in a horizontal bar under the site branding and header.
• The first tab in the top-level is reserved for the home page if there is not any other “Home” destination.
• When the list of categories becomes too long, consider using a vertical navigation.
• The selected tab should come forward in terms of prominence from the other tabs. Unselected tabs should sit back visually to reinforce the notion of where the user is via the selected tab.
• The page that is delivered by selection of the tab should be visually connected to the tab via design cues: color, brackets, borders etc. Selection of another tab redraws the entire page and presents the new information tied to the new selection.
• Never stack multiple rows of tabs as this leads to confusion about the selected layer versus inactive layer.
• The topmost tabular is always visible while the other tabular changes depending on the current top-level selection.

This pattern from other collections

http://developer.yahoo.com/ypatterns/pattern.php?pattern=navigationtabs
http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/pattern.php?id=11
http://www.welie.com/patterns/showPattern.php?patternID=doubletab

Search Results - List of product

Definition of objectif

Users have done some for of search or click on menu navigation of a product kind e.g. using a product navigation or Search Box or Advanced Search or Booking.
For more convineance we will speak about a “product” but this can be also news, travels…
Now the users need to find the needed product. The page should give as much accurate information as possible (depending on product type and website), so the user should be able to know wich product he wants without looking to detail page. (comparaison is an other topic)

Solution

Results must to be relevant and give has much info is needed to generate a user decision

Always think that users need to see the results so make them as clear as possible and give as space as you can.

The list will often be too long to be read so you need a paging system (1-10 results/page). The list should be list in a relevant order starting with the most relevant (can be price, location, most buy …). Most likely the only first page will be read by users (like on Google).

What topics should be shown

You need (depending but in general) :

- description

- pictures

- clear product naming

- category

- main criteria’s

- link to the product on pictures, description, name

- Direct access to tools (comparison, buy, feedback, sorting, filters…)

Nice to have : feedback/quote
Others: find similar results

This is of course product oriented (if is a page search or word search the title with a link on it is to be first shown)

The description should be to the point/appropriate but has to be short 1-3 lines.

The page must also have the following organization:

- A top/header saying something like “Search Results” with the topics information like the product category or other

- search tools have to remain (normal and link to advance)

- site navigation, site map, FAQ, tips

- search navigation (evolution in the search)

- filter on top is the best

- sorting tools

- the results with paging system

“Linked” Filtering and sorting

Those two are crucial! Users will need them to find/play with the results in a user friendly way (ex : users wants to see the cheapest product, the product with the feedbacks.., users want to have a filter on only “that type of products”…). Like on www.pixmania.com.

One extra idea is to make them link filters, I mean when clicking on the filter the filtering is process without have to validate it, use extra drop boxes or buttons.

Filters should be on the main topics (categories, prices,…)

Sorting should be also on the main topics, it can be on the same and/or on others.

Think also how navigate in those filter tools (how to go back, how to show the users the evolution..) like on www.kelkoo.com

Categories

This of course to be thought before creating the page, this will give the main structure and will help users to focus when searching. This can also be use on search page, Advanced Search…

Icon’s

Don’t forget to use them wisely. Sometime is easier to use an icon some time a word… The can help you to win place but words will help you to be indexed by search engines..

Users experience enhances the search - Tag’s – popularity of search

Feedbacks, quotation, most searched topics, similar search … Those users information will give tools to the users. I can this users experience because thanks to the others user the actual users will have more information to decide. This will often give more subjectivity to your site and surely more weight to it.

So show the feedback, quotation on the result page. Make a sorting on it, use the most popular search to have a place like on www.kelkoo.com or http://del.icio.us/ . It’s a list of words who have be searched by other users and the most search the word have the bigger he is.

Definitions:

Tag : http://del.icio.us/help/tags

Examples