2. The 5 Planes Model Last session we looked at Navigation and Metaphor. We have learnt some of the rules for navigation. This session we will be looking at Information Design and how it links to navigation and interface design.
3. The Skeleton Plane These three sections are inherently linked and this session is about considering these different aspects as a whole. Interface Design is about allowing users to do things. Navigation Design is about allowing users to go places. Information Design is about communicating ideas.
7. Home Page Most customers go somewhere here. Alternative locations for other requests. There’s more information if you scroll down.
8.
9. Common objects For inputting text. Dropdowns are more compact than radio buttons and take up less space. List boxes are also compact because they scroll. Buttons are usually used to send the filled in form.
10. Within limits “ Design is the art of gradually applying constraints until only one solution remains.” —Unknown By working with rather than against standard forms Oki-ni keep the continuity of their overall design and the interface seems to compliment their site.
20. Wayfinding Successful wayfinding allows users to quickly ascertain. Where they are Where they can go What choices to make to get closer to their objectives.
This is an opportunity to recover any aspects that people found difficult last session. Point out that we have moved from the structure section to the skeleton section of the diagram.
Talk about the need for navigation to link to the other two disciplines. Although the rules of navigation were discussed last session, we did not discuss how it combines with the overall design.
Web sites should be designed around the majority user. It’s true that we have to design for unusual requests but that doesn’t mean we need to compromise. The next slide uses the Google homepage as an example.
This is slide 1 of 2, the point is made on the next one but talk about how sparsely populated the page is, the amount of white space and the appearance of there only being one thing you can do.
Of course these two pages don’t begin to describe the myriad of services Google offer. Go through the links on the top left and ask students if they have experienced any other Google products. For a comprehensive list, navigate to http://www.google.co.uk/intl/en/options/
This is the home page of Oki-ni, a specialist supplier of small run designer clothing who only sell their products over the internet. As a Website they have to be successful as there is no other way for them to turn a profit. Many of their customers visit regularly (as often as once a week) and so they have to ensure the site is exciting, interesting and appealing on each visit. Point out the white space.
Although these constraints limit us as to what we can use they mean that the same tools are common across the web and mean that users are used to the conventions provided by these tools.
These slides are self explanatory but useful for students to consider how they display choices on forms. The format for these elements tend to be controlled by the browser and operating system but a quick google search will provide options for making tailored elements.
Discuss the quote above and ask the students if they can think of similar areas. The fact is that just about every area of design or art is the application of constraints. The tools and products available to us shape what we make. If we only have stone tools to work with that applies specific limits to what we can make and how it turns out.
This is a demonstration of how apple use the elements. Point out the use of radio buttons to configure the purchase.
This is the continuity break. If the students have acces to their own machines, get them to go to the URL themselves, otherwise in front of the class, go to the URL and try to buy some art, discuss how students think the site works together. A little history of POW. This website is the sale site for several famous graffiti artists, most famously Banksy. The site has suffered from being more popular than expected from the outset and tends to have a piecemeal thrown together look. The important question is that, considering their market and the fact that it is extremely popular and profitable – does it matter? The point to make here is one of context, a slick overtly technical site would actually detract from the home made laissez fare attitude put across by the site. It is worth also looking at the sister site http://www.picturesofwalls.com (warning- contains strong language)
Global and persistent navigation are not necessarily the same thing. This diagram shows that when we are deep in the site, we don’t need to be able to link to every page but by giving a link to each section we allow the user a fairly intuitive method of getting to any page. The darker blue spot is where we are and the lighter spots are where we can navigate to.
Local navigation provides access to content that is “nearby” in the architecture. If the site architecture is designed in the way users think about the site then this is the structure that will be most common.
This is from The Guardian and is clearly designed to keep you on the site and stay interested.
Point out the enormous amount of links. Wikipedia is designed to provide information on pretty much anything and tries to make that information as accessible as possible.
Ask students to look at this list of information. Why does it seem incorrect? It is simply ordering and convention. For a computer, having this information in this order makes as much sense as any other order.
This makes sense to us because of convention and if users expect to find information in this way, we should give it to them.
Humans like information ordered and categorised, it makes them feel comfortable and one aspect we are trying to encourage is a sense of trust in our site.
Wayfinding comes from architecture, describe examples like the coloured lines on hospital floors and sign posts in colours.
This shows how The Guardian uses a colour scheme to help us understand which area we are in and how deep we are in that area.
A wireframe is a document that spells out what is contained on the page. This document is a vision of what the architecture diagram will look like. We have finally described the size, shape, content, structure and organisation of the site. We are now ready to work on the visual side.
