Download to read offline
Uploaded byGraeme Smith
Interaction Design
This document discusses information architecture and interaction design for web design. It explains that information architecture is about organizing content so that users can easily find what they are looking for. Interaction design aims to make systems intuitive to use. The document then discusses site maps, different approaches to structuring information (top-down vs. bottom-up), flexibility in site structures, different types of structures (hierarchical, matrix, organic, sequential), sections and navigation, and the importance of using natural language for users. Formal documentation of site structure is recommended, especially for larger sites.
More Related Content
Interaction Design
- 1. IMD09117 and IMD09118 WebDesign and Development Interaction Design. Information Architecture.
- 2. The 5 PlanesModel Last session we looked at Functionality. By now we have used our skills to work out what we’re building and why we’re building it. This session will be looking how we’re going to organise our information and how our users will get to it.
- 3. The Structure Plane InteractionDesign is a software development term for creating a structured user experience. Information Architecture is a way of designing content so that users find what they’re looking for.
- 4. Interaction Design You needto design your system to accommodate and respond to the needs and demands of the person using it. It is no longer acceptable to expect users to adapt to your system.
- 5. Interaction Design This isa huge subject area and beyond the scope of this lecture. Succinctly Interaction Design aims to make systems intuitive to use. If a system is intuitive then users can get on with whatever they were trying to achieve without concentrating on how to use your system.
- 6. Ease of Use It’simportant to remember that people will view your site simply as a part of the Web, a destination they stop at. There are fewer new users every day and people have an expectation of how to use Web sites.
- 7. Errors This is knownas a 404 error.
- 8. Errors MIT has amuch more useful error page.
- 9. Information Architecture The wordarchitecture is very important. In the physical world we understand the purpose and use of an environment from clues within its structure.
- 10. Architecture and thewider world. Architecture is not simply about individual buildings but where the buildings are placed and how people get around. If you were dropped in most UK towns, you should be able to find the main shopping street and the station very quickly.
- 11. Information Architecture The structureof a website should be designed in such a way that people can find what they want quickly and without fuss. Information architecture is there to help build the pathways in a manner that is intuitive and second nature.
- 12. Site Map The bottomline of what we are producing is a site map. The map gives us a specific hierarchical understanding of the site and where information will be placed within it. The main aim is to produce a concrete diagram that is accessible and understandable to as many people as possible. For a large site, it is also a useful tool for splitting the site into sections where it is possible to delegate successive parts.
- 13. Top Down Approach Thesite architecture is constructed according to site objectives and user needs. Content This creates an empty shell into which the content is fitted.
- 14. Bottom Up Approach Contentanalysis and functional requirements drive the structure. Content
- 15. How many sections? Thenumber isn’t important, it needs to make sense to a user. You can measure the amount of steps to complete a task or the amount of clicks, but don’t waste people’s time.
- 16. Flexibility Site architecture shouldbe flexible enough to add new content into a section.
- 17. Flexibility Or entire newsections.
- 18. Nodes and structures Anode: any group or piece of information. Hierarchical structure. Formalised and common. Matrix structure, allows users to traverse the site along dimensions. Useful for browsing by colour or size.
- 19. Structures Organic structure. Good forexploring a set of topics without obvious relationships although it can be confusing for users. Sequential structure. Rare on the web, more suited to traditional media such as books.
- 20. Sections The clothes shop.Home Page. Men Women Children Tops Bottoms Outer The most important factor to consider is the language you use. You need to order your information in a way that seems natural to your user.
- 21. Formal Documentation We useformal documentation because it’s structure is reasonably intuitive. It is a useful method of explaining site structure to clients. With larger sites, it means that there is a specific document detailing each page’s relationship with every other page allowing for delegated development.
Editor's Notes
- #3 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.
- #4 Explain that it is at this point where we cross over from the abstract into the concrete. We are beginning to consider what we are actually building and how it will be presented. It is also important that students are not put off by the technical sounding names. This is about understanding people, how they work and the way they think.
- #5 In the old days, users were expected to learn how to use things. A user will get bored very quickly if they are expected to adapt to your site. It is worth, at this point playing the interview from Steve Rogers from BBCi. The interview is included on the DVD which comes with Designing Interactions by Bill Moggridge. The interview is also available on the web page http://www.designinginteractions.com/interviews/SteveRogers although the images are small.
- #6 As the internet has become ubiquitous, there are more conventions. This means that students should avoid making overcomplicated anti-intuitive interfaces. There will be a deeper discussion on metaphor in the next session.
- #7 Discuss that it is important that students become aware of their own habits, trying to understand sites they use frequently and what they like about them or what they think could be improved. The main problem with good design is that one doesn’t notice it, it’s simply fit for purpose.
- #8 Students should have come across these errors in their use of the internet. Explain that although it is impossible to stop errors from happening, there is a better way to deal with them. Point out that this error message has no way out. Different server technologies have different solutions but here’s a link to an apache solution http://www.yourhtmlsource.com/sitemanagement/custom404error.html
- #9 This error page follows the Neilson Norman group’s recommendations for a useful error page, including links and a search box. This site has links to some interesting 404s. http://www.sendcoffee.com/minorsage/404error.html
- #10 Discuss the fact that students will expect different things from different buildings, their relationships and expectations are dictated by the shapes around them. Even if a person is not an architecture aficionado they will be affected by decisions made by architects.
- #11 Start a discussion about this idea, try and get students to understand how finding your way around is something that has developed over time. Our society teaches us how to navigate the built environment because of specific rules. You may want to explain that this is not a lecture in architecture and this is as deep as we are going on the subject. This is also an opportunity for a continuity break, encourage students to discuss how they could adapt these principles to web design.
- #12 There is still a situation on the Web where many rules and conventions are still not established. Ask students what conventions they think are there already are .e.g. Clicking the logo takes you to the home page. HAVING a home page. About us pages and Contact us pages.
- #13 Explain to students that many web sites have a page called site map. Though similar in concept, this is a specifically different entity. The site map page on a website demonstrates the structure, making it easier for search engine spiders to index the site correctly. What we are building is a diagram of information flow.
- #14 This diagram is reasonably self explanatory, encourage students to ask questions, ask them to explain what is happening. This approach is useful if you don’t have much existing content and are starting from scratch.
- #15 This approach is useful if there is already content for the site, for example a portfolio site or video archive. Neither approach is better, it is up to the developer to decide which is more suitable. Top down can sometimes cause important content details to be overlooked and bottom up can produce architecture that is not flexible enough for change.
- #16 At this point go to http://www.easyjet.com/en/book/index.asp and go through the process of booking a flight, you want to get to a page that shows you are at step 2 of 5. Now go onto http://www.directline-flights.co.uk/flight_search.cfm and try to book the same flight. The point is that directline holidays charge more for the flight but you can book in much fewer clicks. This is an important example for marketing.
- #17 This slide is self explanatory and 1 of 2, we will shortly discuss formal site architecture documentation.
- #18 Slide 2 of 2. It is rare that you will be aware in advance that you need to change the site this drastically. The very nature of the medium means that it is constantly changing and updating. It is important that this flexibility is built in.
- #19 A node can be a number or an entire library of photographs, by dealing with nodes we can abstract our problems to any collection of data, whatever the size.
- #20 Organic structures are useful for entertainment or or to encourage free-form exploration but it can be hard finding your way back to a useful section. Sequential structures are useful for such things as instructions and step by step tutorials.
- #21 Discuss the fact that what may be obvious to the developer may not be so to the user. The structure above would be reasonable for a retail clothing operation but may not be suitable for someone who is looking to buy large amounts of trousers for a work force in a range of sizes. The structure of the site and the language used needs to fit with the user not the site.
- #22 This structure is similar to the site diagram in Dreamweaver. It is unlikely that students will go beyond the structure on the left but it is extremely useful if they become aware of the language and tools used. There will be a tutorial session on site structure and site diagrams.