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
Navigation and Metaphor
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 <ul><li>If you go to a shop to buy a book. How do you find that book ? </li></ul><ul><li>You may know exactly which book you want. </li></ul><ul><li>You may have an idea of what you like and what. </li></ul>
Find the book <ul><li>Assume your looking for the latest Steven King book. </li></ul><ul><li>It might be in the “best-seller” section. </li></ul><ul><li>It might be in the “horror” section. </li></ul><ul><li>It might be in the “popular american authors” section. </li></ul><ul><li>Any well laid out shop would have it in all 3. </li></ul>
Missing cues <ul><li>On the web, there are certain things we can’t grasp. </li></ul><ul><li>Sense of scale </li></ul><ul><li>Sense of direction </li></ul><ul><li>Sense of location </li></ul>
What Navigation Does <ul><li>It gives us something to hold on to. </li></ul><ul><li>It tells us what’s here. </li></ul><ul><li>It tells us how to use the site. </li></ul><ul><li>It gives us confidence in the people who built it. </li></ul>
Basic Web Conventions. Picture From Don’t Make Me Think. Krug (2006)
Persistent Navigation <ul><li>The set of elements that appear throughout the site. Steve Krug lists five elements that need to always be there. </li></ul>Site ID A Way Home A Way To Search Utilities Sections
Sections <ul><li>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. </li></ul>Primary Navigation (Sections) Secondary Navigation (Sub Sections)
Search <ul><li>With a site of any reasonable size, it is essential to have a search tool. </li></ul>Using the word search makes it easy to spot. Make it clear what area they’re searching.
Page Name <ul><li>The name needs to be in the right place. </li></ul><ul><li>The name needs to be prominent. </li></ul><ul><li>The name needs to match what was clicked. </li></ul>
Breadcrumbs <ul><li>Named after the crumbs Hansel used in Hansel and Gretel to find their way out of the forest. </li></ul><ul><li>Breadcrumbs tell you where you are on a site. </li></ul>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 <ul><li>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. </li></ul>
Metaphors <ul><li>What is a metaphor? </li></ul><ul><li>A conceptual framework used to describe a concept in terms of another, unrelated familiar idea. </li></ul>
Office <ul><li>The most familiar metaphor, particularly in computing terms is the office metaphor used by most operating systems. </li></ul>I keep my documents in a folder
Familiarity <ul><li>If you decide to use a metaphor, be confident that most people will have experience of the framework concept. </li></ul><ul><li>If you use a metaphor of a library, you can be confident that a large portion of your users will understand the concepts. </li></ul>
Shopping Basket <ul><li>A common metaphor in online stores </li></ul>
Trouble with metaphors <ul><li>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. </li></ul><ul><li>You are relying on other people understanding what you mean. </li></ul>
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.