Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Information architecture WUCM1 1 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 2 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 3 Web (in)consistency • The KISS principle • Some common barriers to Web consistency – different users – different browsers – slow connections – problems with servers WUCM1 4 Plan the Website Information Structure Site Goal Sell? Inform? Entertain? Creative Vision Organisation schemes and structures Audience Knowledge? Equipment? Content Message? WUCM1 5 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 6 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 7 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 8 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 9 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 10 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 11 Narrow and deep vs broad and shallow A A B Ten main page options to reach limited content B Six clicks to reach Page B WUCM1 12 Hypertext Content chunks connected by a loose web of relationships WUCM1 13 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 14 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 15 Content Map - example Home Page Simple introduction About This Site Theme 1 Theme 2 Theme 3 Explain: Persecution of the Jews Into the Annexe Conclusion Theme1 - Conc. Camps Theme2 - Gen. Info Links to Other Sites A.F. Center Virtual House Books Theme3 Auschwitz Gas Chambers Book Search Part of the Information Content Map Diary of Anne Frank http://userweb.port.ac.uk/~kingt/cal97/sb/frame.htm WUCM1 16 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 17 Navigation • A site map is a navigation aid for visitors to a web site • It may be – – – – WUCM1 An index A table of contents An overview A diagram 18 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 19 Home Page Content Map (1) Simple introduction About This Site Theme 1 Theme 2 Theme 3 Explain: Persecution of the Jews Into the Annexe Conclusion Theme1 - Conc. Camps Theme2 - Gen. Info Links to Other Sites A.F. Center Virtual House Books Theme3 Auschwitz Gas Chambers Book Search Part of the Information Content Map for Diary of Anne Frank WUCM1 20 Theme 1 Persecution of the Jews Diary Page Content Map (2) History Quiz Activity 1. Hitler comes to power M/c questions Write a letter to Ann Frank 2. Occupation of the Netherlands Nazi party Anti-semitism Letters from children Westerbork Information Content Map for Theme 1 Invasion WUCM1 21 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 22 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 23 Hierarchical lists (1) WUCM1 24 Hierarchical lists (2) WUCM1 25 Progressive disclosure (1) WUCM1 26 Progressive disclosure (2) WUCM1 27 Circular – www.merck.com WUCM1 28 Circular – www.mindjet.com WUCM1 29 Metaphorical www.israel.org/ WUCM1 30 Metaphorical www.jamdesign.com WUCM1 31 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 32 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 33 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 34 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 35 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 36 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 37 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 38 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 39 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 Any questions? WUCM1 40 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 41