1 / 41

Information architecture

Information architecture. Information architecture. A systematic approach to the design of: Information organisation what goes where Information indexing how to find it Labelling what to call it Navigation systems how to get to it

paki-parker
Download Presentation

Information architecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Information architecture WUCM1

  2. Information architecture • A systematic approach to the design of: • Information organisation • what goes where • Information indexing • how to find it • Labelling • what to call it • Navigation systems • how to get to it • To support browsing and searching throughout the web site (IA material after Paterson) WUCM1

  3. Website structure • This is the technical mirror of the Information Architecture • The server directory structure to support the Information Architecture • The code structure to support the interaction design • The security structure to protect your design WUCM1

  4. Web (in)consistency • The KISS principle • Some common barriers to Web consistency • different users • different browsers • slow connections • problems with servers WUCM1

  5. Plan the Website Information Structure Organisation schemes and structures Audience Creative Vision Site Goal Knowledge?Equipment? Sell?Inform?Entertain? Content Message? WUCM1

  6. Stages of web design • Information gathering • Focus on content, how organised, and plan basic navigational links • Diagram/Plan • Decide controls, detail all navigation links, user interactions • Storyboard • Visual design for style, layout, colours etc. WUCM1

  7. Information organisation schemes • Exact • Alphabetical, chronological, geographical • Category-based • Arranged by topic or subject, task, audience or metaphor • Ambiguous: depending on language and organisation • Hybrid • A mixture of schemes WUCM1

  8. Labelling • Labels should mean something obvious • Don't waste the visitor's time • Be consistent • Labelling systems • Navigation: e.g. Home, Main Page, FAQs • Indexing: e.g. to classify content • Links: natural e.g. "... the Annual Report states …" • Headings: consistent terminology and granularity • Icons: beware ambiguities WUCM1

  9. Information organisation exercise:a toyshop Brainstorm it! • List all possible content categories • Don't worry about redundancy or size of category • Start to group things by topic • From master list to sub-list • Create only one level of sub-lists • Refine the topic groups • Move topics around the sub-lists until they work • Produce content map (see later) WUCM1

  10. Organisation structures • Information is organised in modular chunks • Hierarchy • top-down approach • Hypertext • chunks and links; hierarchical or non-hierarchical • Database-oriented model • bottom-up; entity-relationship diagrams reveal structure of information WUCM1

  11. Hierarchy • Is the foundation of all good information architectures! • Rules of thumb • Mutually exclusive hierarchical categories • Balance breadth v depth (3-5-7 rule - see later discussion) • Don’t become trapped in the hierarchy - use hypertext and database structures if relevant WUCM1

  12. A A B Narrow and deep vs broad and shallow B Ten main page options to reach limited content Six clicks to reach Page B WUCM1

  13. Hypertext Content chunks connected by a loose web of relationships WUCM1

  14. Database model • Supports powerful field-specific searching • Makes content management much easier • Enables re-purposing of same content for different users • Multiple forms and formats • Limitations: • Records must follow rigid rules • Not easy to store free text, graphics and the hypertext links of every page WUCM1

  15. Content map • Gives a very abstract view of entire web site • Shows: • Proposed content • Content hierarchy/flow • Relationships between content • Does NOT show: • Actual pages of site WUCM1

  16. Content Map - example Home Page Simple introduction About This Site Explain: Theme1 Theme2 Theme3 Theme 3 Conclusion - Conc. Camps - Gen. Info Theme 1 Persecution of the Jews Theme 2 Into the Annexe Links to Other Sites A.F. Center Virtual House Books Auschwitz Gas Chambers Book Search Part of the Information Content MapDiary of Anne Frankhttp://userweb.port.ac.uk/~kingt/cal97/sb/frame.htm WUCM1

  17. Architecture map • Adds greater structural detail • Shows and labels ALL the pages on the site • Uses colour to distinguish • Structural levels • Page types • Static, dynamic, temporary, Java-based, HTML-based ... • Link types / destinations • Grouped to enable design and placing of navigation bars • Is ESSENTIAL when a large team is working WUCM1

  18. Navigation • A site map is a navigation aid for visitors to a web site • It may be • An index • A table of contents • An overview • A diagram WUCM1

  19. Plan the navigation • Pre-production • Make a basic content map/series of maps • Outline or hand-drawn flowcharts • Keep content elements (images, text etc) in their own, dedicated holders • Use lists, folders, wallets for paper-based resources • Use clearly labelled directories for electronic-based resources • (Impact here on the web server organisation) WUCM1

  20. Content Map (1) Home Page Simple introduction About This Site Explain: Theme1 Theme2 Theme3 Theme 3 Conclusion - Conc. Camps - Gen. Info Theme 1 Persecution of the Jews Theme 2 Into the Annexe Links to Other Sites A.F. Center Virtual House Books Auschwitz Gas Chambers Book Search Part of the Information Content Map for Diary of Anne Frank WUCM1

  21. Content Map (2) Theme 1 Persecution of the Jews History 1. Hitler comes to power 2. Occupation of the Netherlands Quiz M/c questions Activity Write a letter to Ann Frank Diary Page Letters from children Nazi party Westerbork Information Content Map for Theme 1 Anti-semitism Invasion WUCM1

  22. Building context • No natural landmarks - not like a book • You never know where a visitor will arrive • Rules of thumb: • Organisation's name on all pages (link back to home page) • Present the information hierarchy structure clearly and consistently • "You are here" is always useful! WUCM1

  23. Visual strategies for a site map • Hierarchical lists organised in horizontal and / or vertical relationships • Important but limiting • Progressive disclosure • An unfolding presentation of hierarchy • Global / circular • Metaphor • Diagrams that employ a metaphorical / pictorial relationship to the information presented WUCM1

  24. Hierarchical lists (1) WUCM1

  25. Hierarchical lists (2) WUCM1

  26. Progressive disclosure (1) WUCM1

  27. Progressive disclosure (2) WUCM1

  28. Circular – www.merck.com WUCM1

  29. Circular – www.mindjet.com WUCM1

  30. Metaphorical www.israel.org/ WUCM1

  31. Metaphorical www.jamdesign.com WUCM1

  32. Good navigation • Carry out navigation with the minimum number of jumps • 3-5-7 Rule • 3 hops max to important information • 5 hops max to 80% of the site • 7 hops max to any document on site WUCM1

  33. Integrated navigation elements • Navigation bars • Group of links /graphics etc. • Top or bottom (or both) better than side • Frames? Obsolete • Vertical bar • Pull down / pop up menus WUCM1

  34. Existing browser navigation features • Open page URL on File menu or elsewhere • Back, forward, home buttons • History menu • Bookmark list • Prospective view - destination URL • Trail of "used links" by colour-coding WUCM1

  35. Don’t meddle! One last Content point! “Of all the graphic design elements we looked at, the only one that is strongly tied to user success was the use of browser-default link colour… Our theory is that the use of default colours is helpful because users don’t have to relearn every time they go to a new site.” Jared Spool et al, (1997) Web Site Usability. User Interface Engineering. Andover, MA. WUCM1

  36. Web server structure • Information Architecture discussed so far views the data from the outside • Web server structure is the internal view (implementation) of the same data space (design) • It needs to mirror the outside view of the data • Be easy to maintain and extend • Be easy and obvious to ‘learn’ for new members of the team • Relate well to the code required to support the interaction WUCM1

  37. Server file organisation issues 1 • How many ‘sites’ on the server? • Should each site be regarded as in its own tree? • How many distinct ‘author groups’? • What is the ‘interaction’ between groups? • What is the interaction between content authors and programmers? • How rigid should your file structure rules be? • How far down the tree should the rigid rules go? • Should there be a naming convention? WUCM1

  38. Server file organisation issues 2 • Relationship between the different information organisations and the sever file organisation? • Relationship between the navigation structures and the server file organisation? WUCM1

  39. Information design conclusions Step 1 - Information content FIRST! Step 2 - Interactions NEXT! Step 3 - Visual design with colours … and all the "interesting" bits …. LAST! If you “Storyboard” with coloured pens,it can give an idea of visual design in Step 2 WUCM1

  40. Review In this session, we have looked at: • How to plan and design websites • Information organisation schemes and structures • Content maps, architectural maps and site maps • Navigation systems and elements • Web server structures to support the data space Anyquestions? WUCM1

  41. References • Louis Rosenfeld and Peter Morville, (1998), Information Architecture for the World Wide Web, O’Reilly, ISBN: 1565922824 • Chapters 2, 3, 4 • Paul Kahn and Krzysztof Lenk. (2001), Mapping Web Sites, RotoVision, ISBN: 2880464641 • Chapter 4 • Steve Krug (2000), Don't make me think, New Riders, ISBN: 0789723107 WUCM1

More Related