IMD09117 and IMD09118 Web Design and Development

Navigation and Metaphor.

The 5 Planes Model

Last session we looked at Information Architecture and Interaction Design.

We now know:What we’re building.Why we’re building.How it’s going to be structured.

This session we will be looking at navigation and how to help users find their way around the site.

Shopping

If you go to a shop to buy a book. How do you find that book ?

You may know exactly which book you want.

You may have an idea of what you like and what.

Find the book

Assume your looking for the latest Steven King book.

It might be in the “best-seller” section.It might be in the “horror” section.It might be in the “popular american

authors” section.Any well laid out shop would have it in

all 3.

Missing cues

On the web, there are certain things we can’t grasp.

Sense of scaleSense of directionSense of location

What Navigation Does

It gives us something to hold on to.

It tells us what’s here.

It tells us how to use the site.

It gives us confidence in the people who built it.

Basic Web Conventions.

Picture From Don’t Make Me Think. Krug (2006)

Persistent Navigation

The set of elements that appear throughout the site. Steve Krug lists five elements that need to always be there.

Site ID A Way Home A Way To Search

Utilities

Sections

Sections

Here, we can see how Guardian Media is broken down in terms of sections. The highlights let us know we are in the news section and which part of the news we are looking at.

Primary Navigation (Sections)

Secondary Navigation (Sub Sections)

Search

With a site of any reasonable size, it is essential to have a search tool.

Using the word search makes it easy to spot.

Make it clear what area they’re searching.Make it clear what area they’re searching.

Page Name

The name needs to be in the right place.

The name needs to be prominent.The name needs to match what was

clicked.

Breadcrumbs

Named after the crumbs Hansel used in Hansel and Gretel to find their way out of the forest.

Breadcrumbs tell you where you are on a site.

Eurostar use breadcrumbs here to show where I am in the booking process and give me an idea of how long it will take.

Tabs

Used correctly, tabs can be very effective. Gap and Banana Republic are part of the same company, the tab examples below demonstrate how the sites can be linked and still have their own identity.

Metaphors

What is a metaphor?

A conceptual framework used to describe a concept in terms of another, unrelated familiar idea.

Office

The most familiar metaphor, particularly in computing terms is the office metaphor used by most operating systems.I keep my documents in a folder

Familiarity

If you decide to use a metaphor, be confident that most people will have experience of the framework concept.

If you use a metaphor of a library, you can be confident that a large portion of your users will understand the concepts.

Southwest Airlines 1995

Facebook

Shopping Basket

A common metaphor in online stores

Trouble with metaphors

Metaphors often don’t scale well. Your metaphor may be perfect but suddenly the scope and size of the site change and instead of just having to make a new section, you have to redesign the site.

You are relying on other people understanding what you mean.

Home

A classic metaphorical icon. We are all familiar with the meaning and it has become ubiquitous. Just by looking at it we know what it means.

That’s because we live in houses.