information architecture 1wucm1. information architecture a systematic approach to the design of:...
Post on 22-Dec-2015
222 views
TRANSCRIPT
Information architecture
1WUCM1
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
WUCM1 5
Information
Structure
Site Goal Creative Vision
Audience
Content
Sell?Inform?
Entertain?
Message?
Knowledge?Equipment?
Organisation schemes and structures
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
WUCM1 12
B
A
Six clicks to reach Page B
A
Ten main page options to reach limited content
B
Hypertext
WUCM1 13
Content chunks connected by a loose web of relationships
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
WUCM1 16
Home Page
Simple introduction
About This Site
Explain:
Theme1
Theme2
Theme3
Theme 1
Persecution of the Jews
Theme 2
Into the Annexe
Theme 3
Conclusion
- Conc. Camps
- Gen. Info
Links to Other Sites
A.F. Center
Virtual House
Books
Auschwitz Gas Chambers
Part of the Information Content MapDiary of Anne Frank
http://userweb.port.ac.uk/~kingt/cal97/sb/frame.htm
Book Search
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– An index– A table of contents– An overview– A diagram
WUCM1 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
Content Map (1)
WUCM1 20
Home Page
Simple introduction
About This Site
Explain:
Theme1
Theme2
Theme3
Theme 1
Persecution of the Jews
Theme 2
Into the Annexe
Theme 3
Conclusion
- Conc. Camps
- Gen. Info
Links to Other Sites
A.F. Center
Virtual House
Books
Auschwitz Gas Chambers
Part of the Information Content Map for Diary of Anne Frank
Book Search
Content Map (2)
WUCM1 21
Theme 1
Persecution of the Jews
Diary Page History
1. Hitler comes to power
2. Occupation of the Netherlands
Quiz
M/c questions
Activity
Write a letter to Ann Frank
Nazi party
Anti-semitism Invasion
Westerbork
Letters from children
Information Content Map for Theme 1
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
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!
WUCM1 39
If you “Storyboard” with coloured pens,it can give an idea of visual design in Step 2
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