Fundamentals of Information Architecture Workshop

Information Architecture: Exploring the Fundamentals

Information Architecture:
Exploring the Fundamentals

1
© Kate Simpson 2009


Cognitive Science Ethnography
Sociology Industrial Design
Instructional Design
Organisational Behaviour
Ergonomics
Cognitive Psychology
Anthropology Human Computer Interaction
Computer Science Usability & UX
Software Engineering Interface Design
Programming
Marketing & PR
Technical Communication
Artificial Intelligence
Graphic Design Branding
Object Modelling Writing & Editing
Data Modelling Journalism
Publishing
Information Science Film & Media
Data Management
Indexing Librarianship
Architecture
Business Intelligence Knowledge Management
Merchandising
Business Analysis Teaching
Abstracting
Other:
Project Management
Linguistics
Administration Law
© Kate Simpson 2009 Management 2


The Day’s Plan...
 What is IA?
 Homepages
 Audiences & Users
 Heuristics
 Tea/Coffee Break
 Navigation & Labelling
 Information-Seeking Methods & Behaviours
 Heuristics
 Lunch
 Search & Search Results
 Heuristics
 Tea/Coffee Break
 Facets & Filters
 Metadata & Taxonomies

3


Introduction to IA
n. information architecture
1. The structural design of shared information environments

2. The combination of organisation, labelling, search and navigation
systems within websites and intranets

3. The art and science of shaping information products and experiences to
support usability and findability

4. An emerging discipline and community of practice focused on bringing
principles of design and architecture to the digital landscape
: Information Architecture for the World Wide Web - Peter Morville & Louis Rosenfeld (O’Reilly 3rd Edition 2007)
‘The Polar Bear Book’

4


Introduction to IA
document/data types,
content objects, volume,
structure
content

users context
audience, tasks, needs,
information seeking business goals, politics,
behaviour, experience culture, technology,
resources & constraints

5


Introduction to IA
What Does That Mean?

searching systems Go

broader term

Global Navigation language variant
synonym
Local Navigation

node acronym
Contextual
Navigation
related term
related term
narrower term
Utility Navigation

navigation systems semantic networks

6


Introduction to IA
To Produce...

Home | Your Account | Site Map | Help

blueprints/site structures

wireframes

metadata schema &
controlled vocabs

7


Introduction to IA
Where Does IA Fit : IA vs Usability?

They are interdependent; one cannot happen
without the other...

Your system isn’t “usable” if the information within it isn’t “findable”

and

Your information can’t be “findable” if the system isn’t “usable”

8


Introduction to IA
Where Does IA Fit : IA + Usability vs UX?

 Peter Morville’s UX Honeycomb

 Jesse James Garrett’s Elements & Planes

 Richard Dalton’s Rainbow

 The Ultimate User Experience: Louis Rosenfeld & Jess
McMullin’s Radial Disciplines

9


Introduction to IA
Where Does IA Fit in the Organisation?

 Louis Rosenfeld’s Enterprise IA Roadmap

 But really it’s just about:

10


Introduction to IA
Why Is It Important?

1. The cost of finding information
2. The cost of not finding information
3. The cost of build and re-build
4. The cost of training
5. Business intelligence/reporting
6. Cross-selling/integration

11


Front-End IA : Part I
A. Homepages

 Point of Homepages?

 What does this site do?
Where should I start?
Why am I here?
Does it meet my needs?

 Exercise One: understanding the purpose of
homepages

12


A. Homepages

What do you remember about the page?

 words you remember
 images you saw
 anything else that struck you

13


B. Audience/User Analysis

 Why do people come to your site in the first place?

 Exercise Two: understanding your users

14


B. Audience/User Analysis

 Exercise Two: understanding your users

 Creating Personas...

15


C. Webpage Evaluation & Heuristics
“Don’t Make Me Think!”
: Steve Krug (New Riders 2nd Edition 2006)

<- obvious obscure ->

16



17


 Is it clear what the site is about, what you can do and what the organisation does?
Circle what you find
 Is there a clear starting point - does it emphasise highest priority tasks? Are there direct
links (to help new vs frequent visitors?) Circle what you find
 Is it easy to spot where the About/Contact Us section is? Circle what you find
 Is it easy to scan or is there a lot of ‘clutter’? Circle an example of the ‘clutter’
 Do the headings and labels make sense? Are they consistent in format, tense, meaning,
size and design? Circle a bad example
 Is it clear what’s ‘clickable’ (ie. the hypertext links) on the page? Circle what you’re not
sure is a link
 Do the images/photos have a purpose and are somehow connected to the site? Find a
good & bad image example
 What feelings do the images give you when you look at them? Note them down for each
website
 What words do you think of when you look at each of these websites? Note them down
for each website
18



Break: 11.15 - 11.30am

19


Front-End IA : Part II
A. Navigation & Labelling

 Where Am I? What’s Here? Where Can I Go From
Here?

 Global, Local, Contextual & Utility

 Process for creating a new structure

 Exercise Four: Navigation Stress Test

20



courtesy of Flickr: http://www.flickr.com/photos/liesje/179184909/
21



22


 Exercise Four: Navigation Stress Test

23


24


B. Re-architecting a website

content

users context

25


context

1. Context Analysis
 business goals?
 funding?
 politics?
 culture?
 technology?
 intended audiences/target markets?
 why do we want them to come?
 what worked in the past? what didn’t?
26


users

2. User Analysis
 usage statistics & clickstreams
 search log analysis
 who is our audience & why are they coming?
 user surveys & questionnaires
 focus groups
 contextual enquiry/field studies
 persona development
 card sorting & user testing
27


content

3. Content Analysis
 content inventory/full audit
 content needs analysis
 document types & structure?
 metadata analysis
 taxonomies in use?
 labels used?
 groupings used?
 how will content be created & managed?
28



Home | Your Account | Site Map | Help

blueprints
wireframes

metadata schema &
controlled vocabs

29


C. Information Seeking Methods
1. Users tend to use keyword searching to retrieve the: example:
A12345 Go...
• Things you know you know, and
• Things you know you don’t know

example:
Pensions
2. Users tend to browse an information space to retrieve the: State Old Age Pension (SOAP)
Additional Pension
• Things you don’t know you know (ie. that which you’ve forgotten), and Graduated Pension
State Earnings-Related Pension Scheme (SERPS)
• Things you don’t know you don’t know Contracting Out
Calculations
State Second Pension
Other State Provision

3. A final information seeking behaviour is to ask another user/expert:
• As a last resort after trying a search or after browsing, or
• When the user is pushed for time

30


C. Information Seeking Behaviours
It is rarely as simple as:

User asks a question MAGIC! User receives answer

It is more likely to be:
Reformulate
Query Query
Search System

Information Formulate Navigate
Need Query Browse System Scan Success
Results

Ask A Person Examine Failure
Documents

31


D. Navigation & Labelling Heuristics

 Exercise Five: ‘Click Fatigue’

 Exercise Six: Consistent Labelling

 Exercise Seven: Chunking Decisions

 More on Labelling...

32


D. Navigation & Labelling Heuristics

33



Lunch: 1pm - 1.45pm

34


Front-End IA : Part III
A. Search
searching systems Go

35


A. Search
 Simple vs Advanced Screens

36


A. Search

37


A. Search

38


A. Search
 Query Builders & Search Clarifying Features
- type-ahead
- spell-checkers
- ‘Did You Mean...?’
- ‘Other People Searched For...’ or ‘Most Popular Searches...’
- ‘More Like This...’
- ‘Our Editors Suggest...’
- phonetic tools
- stemming
- natural language
- controlled vocabularies
39


A. Search
 Type-ahead, eg:

40


A. Search
 Spell-checkers, eg:

41


A. Search
 Most Popular Searches, eg:

42


A. Search
 ‘More Like This...’ eg:

43


A. Search
 ‘Our Editors Suggest...’ (Best Bets) eg:

44


A. Search
 Stemming, eg:

45


B. Search Results

Reformulate
Query Query
Search System

Information Formulate Navigate
Need Query Browse System Scan Success
Results

Ask A Person Examine Failure
Documents

46


B. Search Results

 Which content components to display?
 How many to display?
 Sorting
 Clustering
 Facets & Filters (more later)
 Best Bets

47


C. Search Heuristics

48



49



50


C. Search Heuristics & Exercise Eight

51


C. Search Heuristics & Exercise Eight

 Is it clear how many results have been returned? Circle the best examples
 Are 'Best Bets' used and are they helpful/accurate to the search entered? Circle the best
example
 Is there a feature available that allows you to find similar or related documents? If so, is
it helpful and offer good suggestions? Circle good examples
 Are useful components displayed for each search 'hit' that help users scan and select
the most appropriate result for them? Circle a good and bad example
 Are the results listed in a useful way? Can the user sort them differently? Circle the best
sorting options
 Is it clear how recent or up to date the returned results are? Circle an example

 Is it possible to filter or narrow your results using any categories? Circle a good example

52


Back-end IA : Content & Classification
A. Fundamentals

 Metadata
 Taxonomies
 Facets & Filters
 Why back-end IA is fundamental to front-end IA

53


B. Metadata

 What is it?
 ‘Data about data’
 ie. The stuff that describes a piece of data

54


B. Metadata

55


B. Metadata

56


B. Metadata

 : A Document
Whether Microsoft or Apple - certain metadata is
captured at the time of creation

57


B. Metadata

 UK
 Sales
 HR
 IT
 Operations
 Procedures
 Projects
 Intranet Replacement
 Project Initiation Document
intranetPID08.doc

58


B. Metadata

http://www.flickr.com/photos/daphnecys/780929870/

59


B. Metadata

60


B. Metadata

61


B. Metadata

62


B. Metadata

63


B. Metadata

http://www.ﬂickr.com/photos/kishimoto/273501270/
http://www.ﬂickr.com/photos/pickard/90251635/ 64


C. Controlled Vocabularies

65


folksonomies &
free tagging
Simple

Equivalent Terms Synonym Rings

Authority Files
Hierarchical
“Taxonomies”

Thesauri
Associative Terms
Ontologies

Complex

66


 Synonym Rings

from The Polar Bear Book

67


 Authority Files

Preferred Term

from The Polar Bear Book

68


 Taxonomies

69


 Thesaurus

70


 Ontology

71


D. Folksonomies & Free Tagging

72



73



74



Break: 3 - 3.15pm

75


E. Taxonomies

What do we want our taxonomies to do?
 Findability: aid information retrieval

76


E. Facets & Filters

77


E. Facets & Filters

78


E. Facets & Filters

79



80



81



82



83


E. Facets & Filters
To support the multiple information-seeking behaviours of users, websites have begun to
invest in ‘faceted classification’ providing multiple paths to and from content; allowing users to
“slice-and-dice” the content in as many ways as they need
A very simplified example:

Multicoloured
Heel Height
Brown
High (over 3”)
Black

Colour Flat (under 1”)

Mid (1” - 3”)

All <black> boots, that are
<mid-calf> with any <heel
height>

All <over-knee> boots, with a
Mid-Calf Ankle Over-Knee heel height of <Mid (1”-3”)> in
Boot Length any <colour>

84


E. Facets & Filters
Another way of visualising facets is through the use of venn diagrams (again, using a very
simplified example) of just three facets...

All <black> boots, that are
<mid-calf> and have a heel
height of <Mid (1”-3”)>

Colour
<black>
<Mid (1”-3”)> Heel Height

All <black> boots, that are All <mid-calf> boots, with a heel
<mid-calf> but with any <mid-calf> height of <Mid (1”-3”)> but in
<heel height> any <colour>

Boot Length
85


E. Facets & Filters
Trees vs Buckets:

86


E. Facets & Filters
Buckets:

Digital Cameras
 Brand
 Canon
 Under £100
 £100 - £200
 3 to 4 Megapixels

 4 to 5 Megapixels
 Sony
 ...
87


E. Facets & Filters

Facets:

Digital Cameras
Brand
Canon
Sony
...
Price
Under £100
£100 - £200
...
Quality
3 to 4 Megapixels
4 to 5 Megapixels
...

88


E. Facets & Filters

89


E. Facets & Filters
 S.R. Ranganathan
 Five Laws of Library Science:
1. Books are for use
2. Every reader his/her books
3. Every book its readers
4. Save the time of the reader; save the time of the library staff
5. The library is a growing organism

 Colon Classification
 Who : Personality (ie. Subject or Topic)
 What : Matter (ie. Form or Physical Properties)
 How : Energy (ie. Process)
 Where : Space (ie. Location)
 When : Time (ie. Date)
90


E. Facets & Filters

who
when

where
when

how
where

how

what

how
what
91


E. Facets & Filters

Faceted Categories Google-like UI

Easiest to Use 23 8
Most Flexible 24 6
Helped You Learn More 31 1
Overall Preference 29 2
92


F. Taxonomies


 Findability: browse & navigation structures

93


F. Taxonomies


 Organise & Structure: distribute content

94


F. Taxonomies


 Classify: auto-classification

 Author: Jane Bloggs



Department:  Marketing?

 Date: 22 Sept 2008
 Document Type:  Press Release?  News Article?

Subject:  Environment?  Climate Change?  Recycling?

95


F. Taxonomies


 See Patterns: infer relationships

96


F. Taxonomies


 See Patterns: business intelligence / risk & opportunities

97


F. Taxonomies


 Sense-Making: understand a domain / find common ground

98


F. Taxonomies


 Governance & Use: storage and management

http://www.ﬂickr.com/photos/girlleastlikelyto/378967564/

99


Information Architecture:
Exploring the Fundamentals

Questions & Discussion:
Taking this back to your organisation?

Contact: kate@tangledom.com

100

Fundamentals of Information Architecture Workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Fundamentals of Information Architecture Workshop

Similar to Fundamentals of Information Architecture Workshop (20)

Recently uploaded

Recently uploaded (20)

Fundamentals of Information Architecture Workshop