2. 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.
21. 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.
Editor's Notes
This is an opportunity to recover any aspects that people found difficult last session. Point out that we are moving from the scope section to the structure section of the diagram.
Talk to students about shopping, as looking for a product is akin to looking for information. In the session on content and SEO, we talked about getting people to the site. We are now concentrating on what they do when they’re there.
Talk with the students about signage in shops, how they find what they want and the cues and systems they use to get around.
Scale – we can tell how big a shop is by looking at it. A website could be any size but look similar. Direction. We use terms like “going to” a page and browsing or surfing but there’s no real sense of left, right or up and down. When we discuss up and down, we generally mean moving through a hierarchy. Location, in physical spaces we can use our sense of location to find things. If we saw the book section we were looking for was right next to the children’s play area, we would use that to navigate our way there.
Something to hold on to - Good navigation stops a person feeling lost and makes them feel that they will be able to get around without much trouble. What’s here – If there’s a visible hierarchy (which there should be) navigation will naturally tell us what the site contains. How to use the site – Navigation should tell you where to begin and what your options are, it should be all the instructions you need. Confidence – Have you ever looked at a site and felt you don’t trust what’s there? People use your design to decide whether or not you are competent. Good navigation is a quick way of making a positive first impression.
This diagram is self explanatory and is from a large site but gets the main points across well.
This is an opportunity to explain to students how vital good navigation is. Although the navigation does take up a fair bit of space, it makes the site easy to use. A very short glance tells us what we’re looking, what site we’re on and what section we’re in. Utilities are links to important elements that aren’t really part of the hierarchy such as help, contact or a shopping cart. There are two exceptions to this rule. The home page, which we will cover later. Forms, full navigation can get in the way and so a minimised version is more suitable.
Discuss how by just looking at this navigation section, we can tell who’s site we’re on, whereabouts we are in the grand scheme of things and can quickly jump to other sections that may be of interest to us or to other sections of the site. This is a huge site but the navigation doesn’t make us feel overwhelmed.
Many users go straight to search so it’s an important element to include. Standard elements like this should be straightforward and quickly spotted by a user. Small sites don’t need a search tool.
The Page Name needs to be exactly what was clicked, there are few examples where this is not the case but if I press a link marked “washers” I don’t want to end up on a page called fixings, I will feel lost and confused.
The Eurostar example is very effective and is more likely to keep customers online. A person is more likely to wait in a queue if they can see the end.
Tabs are less fashionable than they used to be and are to be used with care.
This is a good opportunity for a continuity break, apologies for it being later than usual. Ask students to take 5 minutes to discuss what a metaphor is and how it can be used on the web. You may ask them to open Photoshop and look at the set of tools, these are particularly metaphorical.
The concept of files and folders is meaningless to a computer but has large significance for us. Ask students if they can think of any other office terms used in operating systems. The desktop is the most obvious. Also mention windows. Open a browser and show students the forward and back buttons, the stop and refresh buttons and the use of a “home” page. All these things are used to make humans more comfortable with the technology they are using.
A well used metaphor is that of a house with pages being different rooms. Charles Kriel successfully uses a book metaphor for his biography site http://www.kriel.tv/ Metaphors design company try to include a pictorial metaphor on every page of their site http://www.metaphors.co.uk/about/index.html
This highly metaphorical home page was used for almost 4 years. Ask students if it works. Their reaction is likely to be negative but challenge them and ask if their taste is dictated by fashion, when this was launched it was considered “de rigeur.”
Facebook is a large metaphor in itself. There are many concepts that students will be familiar with such as high fiving, giving a drink to a friend etc. Facebook works because it is easy and quick to grasp. Metaphors fall down when they are overblown and complicated.
Discuss why this works and is such a popular metaphor. It works because it is simple, most people have direct experience of using a shopping basket in the real world. The metaphor is well placed, you only use a shopping basket before you have finished shopping, if it was a shopping bag, the metaphor wouldn’t work.
Metaphors can be inflexible, once you are trapped inside the metaphor, everything you design then has to relate to it.
This is a great example of an assumption made in interface design. It’s a fact that people can understand what a home icon is but it may not be intuitive. Metaphors are steadily going out of fashion although they have their place. Make it clear to students that whether they use them or not is entirely their own decision
