Information architecture: A “how-to”

Donna Maurer – Maadmob Interaction
Design
About me
• Freelance information architect/interaction designer
 I design structures & interfaces for complex information...
About this talk
• How to work through an IA
project
 Where the core is about
organising content
 So people can discover
...
A project overview

Web Directions South
Information architecture: A ‘how-to’
User research

Web Directions South
Information architecture: A ‘how-to’
User research – tips
• Go to people, don’t
have them come to you
• Watch them
• Talk to them
• Audio-record sessions
• Tak...
User research methods
• Methods for collecting rich information






Interviews
Card sorting
Contextual enquiry, obs...
Analyse user research

Web Directions South
Information architecture: A ‘how-to’
Affinity diagramming example

Web Directions South
Information architecture: A ‘how-to’
Dimensional analysis example

Web Directions South
Information architecture: A ‘how-to’
Think about information behaviours
• Information modes
 Known-item
 Exploratory
 Don’t know what you need to
know
 Ref...
Card sorting
• A simple technique to
learn about how people
perceive content groups
• Content items are
written on index c...
Card sorting - planning
• Planning






Participants - end users, in small groups or individually
Method - manual or...
Card sorting - analysis

Web Directions South
Information architecture: A ‘how-to’
Analysis spreadsheet

Web Directions South
Information architecture: A ‘how-to’
Dendrogram

Web Directions South
Information architecture: A ‘how-to’
Content analysis

Web Directions South
Information architecture: A ‘how-to’
Content analysis
• Content analysis is the process of
 Understanding content by analysing it
 Identifying patterns and c...
Content analysis
• Think about
 format
 document type
(publications, reports,
how to, 'stuff’)
 topic
 audience
 sour...
Designing information structure

Web Directions South
Information architecture: A ‘how-to’
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose classification schemes
•
•
•
•
•
•
•

Date
Alphabetical
Geography
Task
Audience
Tag-based
Topic
 formal, existing ...
Choose type of structure
•
•
•
•

Hierarchy
Database
Faceted
Organic

•

•

•

Web Directions South
Information architectu...
Choose type of structure
•
•
•
•

Hierarchy
Database
Faceted
Organic

Web Directions South
Information architecture: A ‘ho...
Choose type of structure
•
•
•
•

Hierarchy
Database
Faceted
Organic

Web Directions South
Information architecture: A ‘ho...
Choose type of structure
•
•
•
•

Hierarchy
Database
Faceted
Organic

•
•
•

•

Web Directions South
Information architect...
Choose type of structure
•
•
•
•

Hierarchy
Database
Faceted
Organic

Web Directions South
Information architecture: A ‘ho...
• At this point we know a lot about our users, have
figured out what classification schemes are
appropriate, have chosen t...
Design conceptual structure

Web Directions South
Information architecture: A ‘how-to’
Design conceptual structure

Web Directions South
Information architecture: A ‘how-to’
Design categories, groups or facets
• Input - user research,
business goals, content
analysis
• Create draft groupings
• S...
Design labels
• Labeling ideas:






User research
Card sorting
Search terms
Referrer terms
Tags

• Good labels
 Ma...
Characteristics of a good IA
•
•
•
•
•
•
•

Balances business & user goals
Balances breadth & depth
Allows people to easil...
Design browsing structures &
page layouts

Web Directions South
Information architecture: A ‘how-to’
Don't design in front of the computer!!!

Web Directions South
Information architecture: A ‘how-to’
Many browse methods

Web Directions South
Information architecture: A ‘how-to’
Design browsing structures
• Start at a content page, not the home page
 The content page is the hardest working page on ...
Good browsing structures
• Provides more than one method to get to content
 Main, supplemental, contextual, search

• Exp...
Link-rich pages

Web Directions South
Information architecture: A ‘how-to’
Link-rich pages

Web Directions South
Information architecture: A ‘how-to’
Document it

Web Directions South
Information architecture: A ‘how-to’
Site maps

Web Directions South
Information architecture: A ‘how-to’
Site maps

Web Directions South
Information architecture: A ‘how-to’
Wireframes

Web Directions South
Information architecture: A ‘how-to’
Wireframes

Web Directions South
Information architecture: A ‘how-to’
Questions & thanks

• http://maadmob.net/
• 0409-778-693
• donna@maadmob.net

Web Directions South
Information architectur...
Upcoming SlideShare
Loading in …5
×

Information architecture-a-how-to-19917

387 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
387
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Proposal: There are 2 aspects to making IA work in a project - an understanding of the key principles of information architecture and a knowledge of activities to put them into practice. This presentation will examine the "how to’s" of information architecture. We’ll look at how to take a content inventory, analyse content, conduct card sorting, analyse user research, choose the right structure, create an information architecture and test it. These activities drive an informed design process so you can be confident in your decisions and communicate them to other people.
  • This talk, being a ‘how to’ will examine how you would go about working through the design stage of an IA project (not the development stage).
    An IA project is one in which the core of the project is about organising information so people can discover what they need, make decisions, learn etc. May have interaction design elements, but the core is about the content and organising it.
    More importantly, I will discuss how to think like an IA – a much more useful skill than a set of processes. Will highlight elements of a project that are different between IA and interaction design projects.
    Some of this will be dependent on the complexity and type of project so don’t expect it to all be completely relevant.
    IA has traditionally been described as the intersection of context (or business), content and users.
  • My stock standard IA (website or intranet) project looks like this:
    Context - identify business goals, technical issues, internal politics, team skills, previous work
    User research - use more than one method to learn about users. For a big website, I usually analyse web stats, search logs, current feedback, email messages, run a survey, conduct face-to-face or telephone interviews. I usually run a card sort (into which content is a key input)
    Identify content - conduct a thorough content inventory and wishlist
    Analysis of research - concurrent analysis of user research, what we've learned about context issues and a detailed analysis of content
    Designing IA - the structure of the content and relationships between content elements. This is where metadata starts to become important
    Designing navigation and page layouts - I look at the conceptual information structure before I attempt to design the navigation. There is a connection between the navigation and the structure, but I keep these as separate steps to focus first on the content relationships, then on how to get people around the site.
    Usability testing - structure and page layouts. Often tested separately, to make sure the structure is sound before trying to put it on the page
  • User research is a set of techniques to allow you to learn about the users of your product.
    Conduct at the beginning of a project, and continue throughout the early stages of a project
    Can be done formally or less formally
    It forms the basis on which you will make most of your decisions about functionality and design
    Why use more than one method – it reduces bias from each
    Why conduct user research?
    Users are not like you! They have different:
    experience with computers
    understanding of the domain
    working patterns & arrangements
    ways of describing concepts
    contexts
    goals
    A fundamental underlying principle of user research is that we observe rather than ask
    People are unable to fully articulate what they do or what they need
    Observing ensures we collect better, richer information
    If we ask directly ‘what do you need’, answers are limited to:
    Things people have previously seen
    Things people think are technically possible
    Small changes, not large ones
    This doesn't mean we should never ask, but user research supports and extends direct collection of requirements
  • For simple projects: identify most interesting issues
    For complex projects, more detailed analysis
    Explore the data
    Affinity diagramming
    Dimensional analysis
    Analysis of text
    Verify findings against data
  • 10 Information Retrieval Patterns. Joe Lamantia: http://www.joelamantia.com/blog/archives/information_architecture/10_information_retrieval_patterns_1.html
    Discovering User Goals / IR Goal Definitions. Joe Lamantia: http://www.joelamantia.com/blog/archives/user_experience_ux/discovering_user_goals.html
    Four Modes of Seeking Information and How to Design for Them. Boxes and arrows: http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them
  • Photo from http://flickr.com/photos/lloydy/151733945/
  • This step is most appropriate when redesigning an existing set of content. For new content, it may be harder to know the detailed structural chunks.
  • I design structure – categories, groups, relationships – before I put them on the page via navigation. This step involves thinking about relationships and underlying patterns first and get those sorted out, then figure out how to put them on a page
  • At this point we know a lot about our users, have figured out what classification schemes are appropriate, have chosen the correct structure and know what the business is trying to achieve.
    Now we have to take a creative leap and turn that all into a solution
  • The first example is from a travel site I worked on last year and shows the conceptual relationships between content chunks. It does not show all the pages on the site, just the relationships. The second is an example from
    Sometimes it is not necessary to design a conceptual structure, particularly for small sites and simple hierarchies
  • Or from the men’s room at the Grace Hotel
  • Example of balancing business & user goals – allows people to find what they need, while highlighting things the organisation wants to emphasise
  • Documentation represents your ideas to others
    The key deliverable is the idea, not the paperwork
    Design before drawing
  • Time to get the concepts represented on the page
    Types of browsing structures:
    Navigation bars
    Related links
    Indexes – often A-Z indexes for various uses
    In-line linking
    Tag clouds?
  • Support site structure – if you have a 4-level hierarchy, your navigation should support it – I’ve seen this happen on a lot of site and the navigation method turns to mush
  • Two primary diagram types for information architects: site maps and wireframes
  • A site map can show
    High level of a hierarchy
    Detail of a hierarchy
    Conceptual structure of a site
    Detail of a site
    Relationship between content elements and functionality
    No one way to do it - depends on your site
    May be visual (diagram) or textual (spreadsheet)
  • A site map can show
    High level of a hierarchy
    Detail of a hierarchy
    Conceptual structure of a site
    Detail of a site
    Relationship between content elements and functionality
    No one way to do it - depends on your site
    May be visual (diagram) or textual (spreadsheet)
  • Wireframes are page layouts with no visual treatment
    Shows placement of items and relationship between them
    A wireframe page will represent all pages of its type
    May or may not include content
  • Wireframes are page layouts with no visual treatment
    Shows placement of items and relationship between them
    A wireframe page will represent all pages of its type
    May or may not include content
  • Information architecture-a-how-to-19917

    1. 1. Information architecture: A “how-to” Donna Maurer – Maadmob Interaction Design
    2. 2. About me • Freelance information architect/interaction designer  I design structures & interfaces for complex informational & interactive systems  6+ years pro experience, as an innie, outie & freelancer  Designed business applications, websites, intranets • Practice, teach and write about IA and IxD • Chair for next year's IA Summit • Board member for the Information Architecture Institute • Writing a book about card sorting - due Jan 2007 Web Directions South Information architecture: A ‘how-to’
    3. 3. About this talk • How to work through an IA project  Where the core is about organising content  So people can discover what they need • How to think like an IA • References  http://del.icio.us/donnam/IAworkshopNZ  Speaker notes on the slides  Some images have been removed, so the recording may sound strange in a couple of spots Web Directions South Information architecture: A ‘how-to’
    4. 4. A project overview Web Directions South Information architecture: A ‘how-to’
    5. 5. User research Web Directions South Information architecture: A ‘how-to’
    6. 6. User research – tips • Go to people, don’t have them come to you • Watch them • Talk to them • Audio-record sessions • Take good notes • Transcribe sessions • Use more than one method Web Directions South Information architecture: A ‘how-to’
    7. 7. User research methods • Methods for collecting rich information      Interviews Card sorting Contextual enquiry, observation, shadowing Task analysis Probes • Methods for collecting a lot of information  Surveys  Diary studies • ...and then there’s focus groups Web Directions South Information architecture: A ‘how-to’
    8. 8. Analyse user research Web Directions South Information architecture: A ‘how-to’
    9. 9. Affinity diagramming example Web Directions South Information architecture: A ‘how-to’
    10. 10. Dimensional analysis example Web Directions South Information architecture: A ‘how-to’
    11. 11. Think about information behaviours • Information modes  Known-item  Exploratory  Don’t know what you need to know  Refinding • Information behaviours           Web Directions South Information architecture: A ‘how-to’ Reviewing summaries of items Examining details Comparing multiples Understanding contexts and situations Learning about people in the environment Perceiving trends Predicting implications Monitoring status or activity Identifying by criteria Establishing similarity
    12. 12. Card sorting • A simple technique to learn about how people perceive content groups • Content items are written on index cards • People group the cards in ways that make sense for them • Results are used as an input into a new IA Web Directions South Information architecture: A ‘how-to’
    13. 13. Card sorting - planning • Planning      Participants - end users, in small groups or individually Method - manual or tool-based Place - for groups, room with a large table Content - select items for the cards Cards - create cards, assemble post-its and pens • Content selection (the important but tricky part)  Too granular and you may end up with too many cards  Too broad and you may lead the exercise too much  You do not have to do the whole site at once Web Directions South Information architecture: A ‘how-to’
    14. 14. Card sorting - analysis Web Directions South Information architecture: A ‘how-to’
    15. 15. Analysis spreadsheet Web Directions South Information architecture: A ‘how-to’
    16. 16. Dendrogram Web Directions South Information architecture: A ‘how-to’
    17. 17. Content analysis Web Directions South Information architecture: A ‘how-to’
    18. 18. Content analysis • Content analysis is the process of  Understanding content by analysing it  Identifying patterns and content relationships  Focusing not on 'pages' but content elements • Start with a content inventory or wishlist Web Directions South Information architecture: A ‘how-to’
    19. 19. Content analysis • Think about  format  document type (publications, reports, how to, 'stuff’)  topic  audience  source  structure  accuracy  page elements Web Directions South Information architecture: A ‘how-to’
    20. 20. Designing information structure Web Directions South Information architecture: A ‘how-to’
    21. 21. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones - dewey, LOC, commodity  informal, developed for the purpose Web Directions South Information architecture: A ‘how-to’  Date is a natural organisation scheme for anything that happened, or will happen at a point in time. It works best when people are looking at the site frequently. If this is not the case, alternate organisation schemes will be necessary so people can easily find relevant historical content.
    22. 22. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones dewey, LOC, commodity  informal, developed for the purpose Web Directions South Information architecture: A ‘how-to’ • An alphabetical scheme suits content arranged by name (such as author or artist), where the name is clear and it is likely people will look for the content by the name. • Few sites use alphabetical as the primary organisation scheme. A-Z indexes, as supplemental navigation, provide a terrific alternate method for finding content as long as the index uses labels that are sensible for site readers.
    23. 23. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones dewey, LOC, commodity  informal, developed for the purpose Web Directions South Information architecture: A ‘how-to’ • A geographical organisation scheme is perfect for anything relating to physical geography, particularly travel sites. Some sites still make you choose your country before letting you in, but this practice is less common than it once was.
    24. 24. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones - dewey, LOC, commodity  informal, developed for the purpose Web Directions South Information architecture: A ‘how-to’ • Task-based schemes are an interesting challenge. In order for them to work, the tasks must be clear and unambiguous. I often use them on internal business systems for data processing tasks.
    25. 25. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones - dewey, LOC, commodity  informal, developed for the purpose. Web Directions South Information architecture: A ‘how-to’ • Audience-based schemes are also an interesting challenge. In order for them to work, people must be able to clearly associate with one of the audiences. People are often tempted to implement role-based systems for intranets - these often fail as it is difficult to determine what your role actually is.
    26. 26. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones - dewey, LOC, commodity  informal, developed for the purpose Web Directions South Information architecture: A ‘how-to’
    27. 27. Choose classification schemes • • • • • • • Date Alphabetical Geography Task Audience Tag-based Topic  formal, existing ones - dewey, LOC, commodity  informal, developed for the purpose Web Directions South Information architecture: A ‘how-to’ • The majority of sites have a topicbased organisation scheme, usually determined by the design team. • Most websites use topic-based schemes • Content analysis will tell you what types could be used • User research will give you ideas about how people may like to approach the content
    28. 28. Choose type of structure • • • • Hierarchy Database Faceted Organic • • • Web Directions South Information architecture: A ‘how-to’ Strict hierarchies are an ideal - they rarely match the real world or content we are trying to organise. It is very common for an item to truly belong in more than one place or for users to look in more than one place for the item. Unfortunately, file systems and many content management systems enforce a strict hierarchy. When this is the case, we have to use navigation aids like related links to manage the fact that content can't be in more than one place at a time. A site can use more than one complete hierarchy. For example, a site could have a complete topic-based hierarchy, and a document type hierarchy. This allows all content to be accessed by more than one method.
    29. 29. Choose type of structure • • • • Hierarchy Database Faceted Organic Web Directions South Information architecture: A ‘how-to’ • One of the key advantages of using a database structure is so the information can be made available in a number of ways. Each Digital Web article is stored only once in the database, but you can get to it by topic, date, author, title and type. The index pages are generated automatically, so they don't need to be updated whenever an article is added
    30. 30. Choose type of structure • • • • Hierarchy Database Faceted Organic Web Directions South Information architecture: A ‘how-to’
    31. 31. Choose type of structure • • • • Hierarchy Database Faceted Organic • • • • Web Directions South Information architecture: A ‘how-to’ Faceted classification uses a database structure Facets are metadata elements Using facets in browse:  Start at whatever facet you like  No keyword necessary  Never get a null result  Suits - where users may wish to explore from any starting point Using facets in search:  Start with a keyword search  Refine based on characteristics present in the results  Suits - where search returns many results and users want to refine
    32. 32. Choose type of structure • • • • Hierarchy Database Faceted Organic Web Directions South Information architecture: A ‘how-to’
    33. 33. • At this point we know a lot about our users, have figured out what classification schemes are appropriate, have chosen the correct structure and know what the business is trying to achieve. • Now we have to take a creative leap and turn that all into a solution Web Directions South Information architecture: A ‘how-to’
    34. 34. Design conceptual structure Web Directions South Information architecture: A ‘how-to’
    35. 35. Design conceptual structure Web Directions South Information architecture: A ‘how-to’
    36. 36. Design categories, groups or facets • Input - user research, business goals, content analysis • Create draft groupings • See if it suits the content  Slot content into categories  Apply metadata • Modify until content fits • Create sub-groups • Keep it user-focused Web Directions South Information architecture: A ‘how-to’
    37. 37. Design labels • Labeling ideas:      User research Card sorting Search terms Referrer terms Tags • Good labels  Match concepts & word usage of readers  Are used consistently  Accurately describe the destination or content • Web Directions South be long - better trigger words Link labels can Information architecture: A ‘how-to’
    38. 38. Characteristics of a good IA • • • • • • • Balances business & user goals Balances breadth & depth Allows people to easily find what they need Provides more than one way to content Represents the content Has a coherent underlying concept Exposes information as needed Web Directions South Information architecture: A ‘how-to’
    39. 39. Design browsing structures & page layouts Web Directions South Information architecture: A ‘how-to’
    40. 40. Don't design in front of the computer!!! Web Directions South Information architecture: A ‘how-to’
    41. 41. Many browse methods Web Directions South Information architecture: A ‘how-to’
    42. 42. Design browsing structures • Start at a content page, not the home page  The content page is the hardest working page on the site  Figure out what navigation a representative content page needs (and its readers need) • Design browse structures for index pages • Design the home page last Web Directions South Information architecture: A ‘how-to’
    43. 43. Good browsing structures • Provides more than one method to get to content  Main, supplemental, contextual, search • Exposes relevant other content as needed • Each step a person takes is clear and result is as anticipated • Supports the site structure well Web Directions South Information architecture: A ‘how-to’
    44. 44. Link-rich pages Web Directions South Information architecture: A ‘how-to’
    45. 45. Link-rich pages Web Directions South Information architecture: A ‘how-to’
    46. 46. Document it Web Directions South Information architecture: A ‘how-to’
    47. 47. Site maps Web Directions South Information architecture: A ‘how-to’
    48. 48. Site maps Web Directions South Information architecture: A ‘how-to’
    49. 49. Wireframes Web Directions South Information architecture: A ‘how-to’
    50. 50. Wireframes Web Directions South Information architecture: A ‘how-to’
    51. 51. Questions & thanks • http://maadmob.net/ • 0409-778-693 • donna@maadmob.net Web Directions South Information architecture: A ‘how-to’

    ×