information architecture and navigation
DESCRIPTION
Information Architecture and Navigation. Introduction to a spatial metaphor . Many user interfaces are essentially tools for finding, collecting, consuming, and producing information We can think of these untamed hordes of data as information spaces - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/1.jpg)
INFORMATION ARCHITECTURE AND NAVIGATION
![Page 2: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/2.jpg)
Introduction to a spatial metaphor • Many user interfaces are essentially tools for finding,
collecting, consuming, and producing information • We can think of these untamed hordes of data as
information spaces • Information architecture is the art/science of designing
information spaces
![Page 3: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/3.jpg)
Expanding the spatial metaphor • When architecting physical spaces, things are by default
visible; you have to work to hide something• When architecting information spaces, things are by
default invisible
You can see through a doorway…
…but the only way to know what that link leads to is to click it.
![Page 4: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/4.jpg)
Wayfinding in information spaces• Just like a first-year trying to find a stairwell in the CIT, a
computer user needs to learn how to navigate an interface• How a user will do so depends on how much information
they already have• They may know exactly what they are looking for• They may know a keyword associated with what they are looking
for • Or they may not know what they are looking for until they find it
• A successful user experience is in part based on how well an interface supports wayfinding, i.e. browsing and searching
![Page 5: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/5.jpg)
INFORMATION ARCHITECTURE
![Page 6: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/6.jpg)
Visualizing information spaces: A datum
![Page 7: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/7.jpg)
Two data
![Page 8: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/8.jpg)
Relationships between data
![Page 9: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/9.jpg)
More data means more complexity
![Page 10: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/10.jpg)
But soon, patterns emerge
![Page 11: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/11.jpg)
You are an information architect • Seeing patterns is what the human brain is optimized for
• Sometimes, it seems to be a little too optimized• Apophenia: the experience of seeing meaningful patterns or connections
in meaningless or random data• Logical fallacies such as mixing up correlation and causation
• If you have ever written an essay or made a deck of slides, you have architected information!
![Page 12: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/12.jpg)
Organization schemes• How do we organize information into categories? How
order information within a category?
![Page 13: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/13.jpg)
Exact organization schemes• These schemes divide information into well-defined,
mutually exclusive sections which typically have a standard order
• Standard ordering systems include: alphabetical, chronological, geographical, etc.
![Page 14: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/14.jpg)
Exact example: OCRA
![Page 15: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/15.jpg)
Exact example: flickr
![Page 16: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/16.jpg)
Ambiguous organization schemes• These schemes categorize information by common
associations• They are not inherent or natural • They are, however, very useful • Canonical examples include ordering by topics, tasks,
audience, etc.
![Page 17: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/17.jpg)
Ambiguous example: The Boston Globe
![Page 18: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/18.jpg)
Ambiguous example: Delicious
![Page 19: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/19.jpg)
Ambiguous example: Brown.edu
![Page 20: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/20.jpg)
Ambiguous example: Hybrid navigation
![Page 21: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/21.jpg)
Going from organization to architecture
• Now we have an idea of how we might categorize and order information.
• How can we build a system which enables users to access this information?
![Page 22: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/22.jpg)
Implicit architectures • These architectures consist of the relationships inferred
by the user • They are often unintentional • They are often caused by juxtaposition
![Page 23: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/23.jpg)
Explicit architectures • These architectures are made apparent to the user• Common example: navigation bar • Note that “explicit” does not necessarily mean “clear”
Unless preceded by “homework”, this word never belongs in a navigation
bar
![Page 24: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/24.jpg)
Random access architectures
Examples: CDs, magazines, dictionaries
![Page 25: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/25.jpg)
Non-random access architectures Linear (traditional
narrative)Nonlinear (hypertext) House of Leaves
![Page 26: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/26.jpg)
A note on organization and architecture
• Clearly, these two concepts are closely related • Both are very important • However, if you are building a system which includes
massive amounts of information, even the most comprehensive organization scheme will fail if the system is not architected in such a way that users’ needs are supported• Prioritize common use cases • How many times have you searched for a book by title? By author?
By subject? By ISBN?
![Page 27: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/27.jpg)
NAVIGATION
![Page 28: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/28.jpg)
From Point A to Point B• Navigation is how users locate themselves and move
around within the context of a system • It can be free-form or goal-oriented • It can be accomplished through browsing or queried
search • How easily a user can navigate will be determined largely
by how well you organized and architected your information space
![Page 29: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/29.jpg)
Modes of information seeking• Sometimes, users just want to check out a system
• They may be forming an initial impression or testing its limits• Or they may be killing time by consuming content indiscriminately
• But often, users have a goal or set of goals in mind • These situations can be described as follows
![Page 30: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/30.jpg)
Known-Item information seeking • In this case, the user
• Knows what they want• Knows what words to use to describe it• May have a fairly good understanding of where to start
• Examples: • A Brown student wants to know when reading period begins• Someone is looking for the website of a local Chinese restaurant • A traveler needs to know how to say “train station” in Japanese
![Page 31: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/31.jpg)
Queried search
![Page 32: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/32.jpg)
A-Z indices and site maps
![Page 33: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/33.jpg)
Fat footers
![Page 34: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/34.jpg)
Exploratory information seeking• In this case, the user
• May have some idea of what they want to know • Does not know precisely what words to use to describe it• May not know where to start
• Examples: • A user who wants to plan a site-seeing trip to France, but who has
never been there before and isn’t familiar with the area • A first-year CS student who is looking for an internship or research
opportunity for the summer, but who doesn’t know what jobs they are qualified for
![Page 35: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/35.jpg)
Recommendations
![Page 36: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/36.jpg)
“See also” links
![Page 37: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/37.jpg)
Semantic webs
![Page 38: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/38.jpg)
Re-finding • In this case, the user wishes to find information they have
previously accessed • This behavior can be supported with active features
(which require user input) or passive features (which track information access automatically)
![Page 39: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/39.jpg)
Bookmarks
![Page 40: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/40.jpg)
History
![Page 41: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/41.jpg)
The Awesome Bar
![Page 42: Information Architecture and Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816753550346895ddc04ea/html5/thumbnails/42.jpg)
For further investigation:• Information Architecture Institute: Library• The Information Architecture of Everyday Things• Four Modes of Seeking Information and How to Design for
Them• Search User Interfaces by Marti A. Hearst