Archive for the 'Menus' Category

Designing Different Ways of Website Navigation

Users tend to navigate websites in different ways, some like searching for an specific item or product, some like to navigate through product pages. A website should help users to get their goal, to find something they want to buy, through different paths.

"It is very important to place all those navigation options always in the same location…"

Place different navigation options in your website, like search, menus and pagination. It is very important to place all those navigation options always in the same location, that way you avoid confusing users.

A good example of this usability pattern is 1800flowers.com, the online flower shop. They give users many navigation options, search, a way to narrow the search, a top menu and pagination. Notice that navigation options stay in the same place through the whole site. Good design.

 

1800flowers Navigation Options

 

Navigation options stay in the same place…

 

1800flowers Navigation Options Stay the Same

Popularity: 17% [?]

Designing Jump Menus, Examples

Jump menus are a way of saving space on large websites, specially when there is not enough real estate to place links to every section or category. They hide links to other sections, when clicked they display the list of links.

"make the jump menu obvious and give some context…"

The website design should make the jump menu obvious and give some context, so users could easily understand what is that menu about. Jump menus could be made of simple HTML or more complicated, like the Yahoo! Shopping one.

HTML Jump Menu

HTML Jump Menu

 

Yahoo! Shopping Jump Menu

Yahoo! Shopping Jump Menu

 

For example Yahoo! Shopping places the jump menu as part of the category menu on top of the page, it’s called "more" and it is located after top categories like computers and electronics.


(I use the Yahoo Shopping menu tabs as an example, but it has some usability problems, read here the article I wrote before).

 

Popularity: 11% [?]