Archive for the 'Navigation' Category

Good Bread Crumbs, Bad Bread Crumbs

Location bread crumbs tell users where they are, they give orientation and provide links to easily go back to an already visited page. What are location bread crumbs? A good design example I found was at Alexa.com.

Alexa Location Bread Crumbs

 

Alexa’s approach is a very good one that improves the overall website usability. Nothing weird, they stick to the standard. This bread crumbs are an ordered collection of visited pages, they are separated by ‘ > ‘ and every word is a link. These give orientation to users and a way to go back to others sections. I was surprise seeing that was difficult to find good design examples to put into this article.

Overstock, the online outlet, includes check boxes into the bread crumbs. Horrible solution, please don’t do it.

Overstock Location Bread Crumbs

 

AllPosters.com, the poster store, developed bread crumbs that look like a windows directory tree. This is a developer structure that not always represent users’ mental model. This option works most of the times, I guess, but I would not use it.

AllPosters Location Bread Crumbs

 

IKEA.com does not have bread crumbs at all. As a user, if you navigate to a product, for example a sofa, you will notice how useful bread crumbs could be.

IKEA Location Bread Crumbs

Popularity: 14% [?]

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% [?]

Next Page »