Transcript source

Components of information architecture
I. Information organization
II. Information access
• Labeling
• Navigation
III. Design
• Page layout
• Site design
• Interface design
L571: Information Architecture for the Web
I. Information organization
In general, we “organize to understand, to explain, and to
control.”
Our classification systems reflect our social and
organizational worlds
IAs organize information so that people can find what
they need to meet their needs
The scheme should support directed searching and
casual browsing
It should also make sense to the person using the site
Rosenfeld and Moreville, 2002; 50
L571: Information Architecture for the Web
I. Information organization
Organizing, labeling, and providing access to information
is a basic IA function
Classification is based on language which is ambiguous
Heterogeneity
A collection of unrelated elements with different
levels of granularity
Web content tends to be heterogeneous
Mixed content should not be at the same level of a
hierarchy
Idiosyncrasy
People have unique ways to organize information
L571: Information Architecture for the Web
I. Information organization
Organizational scheme defines shared characteristics of
content
Influences logical groupings of content
We routinely use a range of schemes
Organizational structure is the explicit definition of
relationships among content groups
Types of schemes
Exact schemes
Well defined and mutually exclusive sections
Good for known-item searching if you are looking for
the item around which the scheme is organized
L571: Information Architecture for the Web
I. Information organization
Exact schemes
Examples of exact schemes
Alphabetical, chronological,
geographical
Ambiguous schemes
Divided into categories that are not easy to define as
mutually exclusive
Sections that may overlap
Goal is to organize the information in intellectually
meaningful ways
Useful when you are not sure what you are looking for
http://gallery.hd.org/_exhibits/toilets/toilet-paper-in-supermarket-1-DHD.jpg
L571: Information Architecture for the Web
I. Organizational systems
Ambiguous schemes
Topic
Important to cover the breadth of content
Should represent the major subject headings
Task
Focus is processes, functions, and tasks
Useful when the purpose is to do something
Audience
Divide the content into smaller audience-specific areas
May be open or closed
http://philo.zm3.net/visuals/Ambiguous/Faces-Vases.gif
L571: Information Architecture for the Web
http://www.cs.toronto.edu/ ~moraes/illusion.html
L571: Information Architecture for the Web
I. Information organization
Organizational schemes
Metaphor (risky)
Hybrids
Risky because it can be confusing
Organizational structure
Constrains the ways people can navigate the site
Top down hierarchy
Taxonomy: a hierarchical arrangement of categories
Mutually exclusive subdivisions
Clear parent-child relationships
http://www.labschool.org/honda
site/images/taxonomy%203.jpg
L571: Information Architecture for the Web
I. Information organization
Hierarchies
Balancing relationship between exclusivity
and inclusiveness
Cross listing can be useful
Listing items in more than one category
Balancing breadth and depth in the taxonomy
There are three main options
http://www.franadvisors.com/
Hierarchy.jpg
Narrow and deep, broad and shallow, hub and spokes
The choice should be determined by the needs of the
major stakeholders
L571: Information Architecture for the Web
I. Information organization
Narrow and deep
L571: Information Architecture for the Web
I. Information organization
Broad and shallow
L571: Information Architecture for the Web
I. Information organization
Hub and spokes
L571: Information Architecture for the Web
I. Information organization
Database driven
A bottom up approach used in dynamically generated
sites
The use of relational databases means that metadata
becomes more important
Metadata supports browsing and searching
A structured metadata scheme involves working with
entity relationship diagrams (ERD)
Define entities, attributes, and relations among them
Allows automatic index generation
Searching through specific fields
L571: Information Architecture for the Web
I. Information organization
An example of a
database-driven site
http://www.smartdraw.com/resources/examples/softw
are/images/database_web_site_full.gif
L571: Information Architecture for the Web
Components of information architecture
I. Information organization
II. Information access
• Labeling
• Navigation
III. Design
• Page layout
• Site design
• Interface design
L571: Information Architecture for the Web
II. Information access
Labels
A label is a shorthand representation of the site’s
organization and content
Challenge: use terms meaningful to the audience that
accurately reflect the site’s content
Labels should represent and clearly differentiate among
major content and functional categories
They should avoid jargon
They should make a good impression on the audience
since they represent the site owners
Good labeling is a major component in the site’s usability
L571: Information Architecture for the Web
II. Information access
What labels are in use here? Are they effective?
L571: Information Architecture for the Web
II. Information access
Within navigation systems
Consistency is important here
The same label can sometimes be used to represent
different types of information
News can refer to site updates here and press releases
there
Scope notes are useful to clarify the particular use
Index terms
Making use of keywords, metadata, or controlled
vocabularies as labels
Supports browsing and provides an overview, especially
when used in a site index
L571: Information Architecture for the Web
II. Information access
Iconic labels
Graphics must be used carefully
Conveying meaning may be difficult with a cross-cultural
audience
Designing labels
Consider the site’s content, audience, and context when
creating a labeling system
Try to keep the scope narrow
Make sure that the system is consistent
Predictability helps it to become invisible
Try not to mix levels of granularity
L571: Information Architecture for the Web
II. Information access
Here are
iconic labels
Do they work?
http://www.slope7.com/
L571: Information Architecture for the Web
II. Information access
Navigation
What we know about information seeking on the web will
aid in the design of usable navigation
We know it’s more complex than the standard model of IR
Document
Surrogate
System
Query
Need
Output
Relevance judgment
This model has been criticized
Kalbach, J. (2001). Designing for information foragers: A behavioral
model for information seeking on the world wide web. Internetworking
3(3).
http://www.internettg.org/newsletter/dec00/article_information_foragers
.html
L571: Information Architecture for the Web
II. Information access
Many people say that one advantage of the Web (and
other forms of hypermedia) over traditional print books
is that the Web provides users with more navigational
freedom.
But how can this be? I can open any book to any page at
any time. Nothing can be faster or easier.
On the Web, I can only follow links that the designer has
created, unless I use the Search feature—which takes
time and does not always lead to success.
As I see it, printed books offer greater navigational
freedom than the Web.
L571: Information Architecture for the Web
II. Information access
The research tells us that:
Failures are due more often to poor system design, rather
than user error
Online search strategies change rapidly and searches
evolve as we learn more about what is available
User must be able to interact and negotiate effectively
with systems to meet their information needs
Searchers weigh the potential information gained against
cost of task necessary to find information
An important design challenge is saving time for users
Web information seeking has unique attributes, but can
be explained by traditional models of behavior
L571: Information Architecture for the Web
II. Information access
Bates’ berry picking model:
We traverse information space in a non-linear way
We move from resource to resource, varying search
strategies rapidly
Browsing and searching complementary activities
As we move, our information need may change based on
what we learn
We are involved in a negotiation with the system
This means that flexibility and user control are critical
Users must be able to interact naturally and intuitively
with a system
L571: Information Architecture for the Web
II. Information access
Pirolli and Card’s information foraging
This is based on foraging theories in biology and
anthropology
It emphasizes ability to calculate the value of searching
on the fly
We trade-off the value of information gained against the
cost of the task necessary to find information
Foraging refers to strategies we use in searching for
information
It focuses on situational adaptation to environments
The design challenges are to facilitate finding and
retrieving while minimizing time on task
L571: Information Architecture for the Web
II. Information access
Spool’s “scent of information”
To forage efficiently we need to have a sense of where
we are going and why
Typically we can’t articulate these reasons
The design of a navigation system should provide us
with an accurate “scent” so that we can follow it to our
destination
These are cure that we use to decide whether
something is interesting
Images, hyperlinks and bibliographic citations related
to the information needed
If the scent is strong we continue to follow the trail
L571: Information Architecture for the Web
II. Information access
Ellis’ model of information seeking
Starting: identifying relevant sources of interest
Chaining: following and connecting new leads found in
an initial source
Browsing: scanning contents of identified sources for
subject affinity
Differentiating: filtering and assessing sources for
usefulness
Monitoring: keeping up in a given subject area
Extracting: systematically working through a source for
material of interest
L571: Information Architecture for the Web
II. Information access
So what does this work tell us about navigation?
We use navigation tools help us determine where we
came from, where we are going and where we are going
Navigation should support the site’s organizational
structure
Tools should support users’ information seeking
behaviors
“Embedded” tools provide context and flexibility in the
site (links)
“Supplemental” tools are external to the content of the
site (site map)
L571: Information Architecture for the Web
II. Information access
Navigation that works should:
Be easily learned and equire an economy of action and
time
Remain consistent and provide feedback
Appear in context
Offer alternatives
Provide clear visual messages
Use clear and understandable label
Be appropriate to the site’s purposes
Support users’ goals and behaviors
L571: Information Architecture for the Web
II. Information access
IBSTOCK Brick’s site map
http://www.ibstock.uk.com/ibstockpages/site-map/map-images/main-map2.gif
L571: Information Architecture for the Web
II. Information access
One important purpose is to provide context
This is important because of the nature of linking
People often enter a site without coming through the
home page
Goal: people should know where they are at all times
They should have a sense of the site
If they enter at random, can they figure out where they
are in relation to the rest of the site?
Will they know how to get to the home page?
Do they know where the next pages will lead?
What can serve as landmarks?
L571: Information Architecture for the Web
II. Information access
Three levels of “embedded” systems
Global
Present on every page on the site
Allows access to all key areas on the site
Local
Provides access to smaller sections of the site
These areas may be self-contained (subsites)
More common in large sites since these areas may be
controlled by different groups
Each section may have a different form of navigation
L571: Information Architecture for the Web
II. Information access
Contextual
These may be unique to a page or set of pages
Can be used to support associative learning and
directed exploration
Often represented with inline links
Should be done with care since people tend to scan
large blocks of text and may miss them
When implementing embedded navigation systems the
challenge is to minimize the real estate they use
Can use textual or iconic links
Very important to test these tools
L571: Information Architecture for the Web
II. Information access
Supplemental navigation systems
External to the basic site hierarchy
Can be critical to usability
Sitemaps
Provides an overview of the entire site’s structure
Should represent the site hierarchy
Site index
Typically a flat alphabetical listing of major sections
on the site
Supports known item searching
Put some thought into the level of granularity
L571: Information Architecture for the Web
II. Information access
Site index
Large sites use a controlled vocabulary
“See also” references
Term rotation (permutation)
site map - map, site
Logs can be useful to find terms that are typically used
Guides
A restricted way to learn about the site’s structure
Tour or tutorial
Can focus on a specific topic or task
L571: Information Architecture for the Web
II. Information access
Guides
Can be used to preview restricted areas
Typically uses linear navigation mixed with graphics
Advanced navigation
Personalization
Dynamically generated pages based on user profiling
Different for different types of users
Customization
User controls presentation, navigation, and content
Takes effort to select and organize the options
L571: Information Architecture for the Web
Components of information architecture
I. Information organization
II. Information access
• Labeling
• Navigation
III. Design
• Page layout
• Site design
• Interface design
L571: Information Architecture for the Web
III. Design
Page layout
This will depend on the type of site
Informational: news services, catalogues, newsletters
Interactive: games and social networking (registration)
Transaction: shopping, banking
Workflow: planning, scheduling
What should be on every page?
What parts of every page can change?
This leads to a page template
L571: Information Architecture for the Web
III. Design
One way to begin is with the “layout grid”
Determine generic pages to be used in major sections
The content data is useful here
Develop generic page elements using content and
navigation data
What should be on every page (globally and locally)
Draw generic template pages with major elements in
place
Consider: branding, advertising and sponsorship info,
company info, contact info, navigation, page titles,
header graphics, footers, and copyrights and privacy
statements
L571: Information Architecture for the Web
III. Design
A layout grid
Schiple, J. (2000). Information Architecture Tutorial. WebMonkey.
http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=de
sign
L571: Information Architecture for the Web
III. Design
Another layout grid
http://www.donald-firesmith.com/index.html?Components/WorkProducts/DesignSet/
HumanInterfaceDesignDocument/HumanInterfaceDesignDocument.html~Contents
L571: Information Architecture for the Web
A complex layout grid
III. Design
http://www.webstyleguide.com/site/graphics/3.33.gif
L571: Information Architecture for the Web
III. Design
The next step is to mock up pages
This is the job of the graphic designer
The general structure and layout grids set parameters
within which designers can develop the pages
This is also a point of tension
The result is the initial prototype
This can be developed as a series of graphic files or
HTML pages
Eventually the prototype will be mounted on a
development server and tested
L571: Information Architecture for the Web
III. Design
Two important questions:
What is the range of content that the key stakeholders
want to see on the site?
Categories of content include
Static
Dynamic
Functional
Transactional
Have key informants generate a similar list
L571: Information Architecture for the Web
III. Design
What are the key functions that should be on the site?
Categories include
Logon page
Sign-up or registration pages
Purchasing pages
Interaction pages
Help pages
Have key informants develop similar lists then combine
the lists and ask for feedback
These lists form the basis for the organization and
interactivity of the site (and information architecture)
L571: Information Architecture for the Web
III. Design
Site design
Organization: content areas have to be named (labeled)
and placed in relation to each other
This can be done with paper prototyping
Develop a schematic for the site
1. Home (URL)
2.1 Who we are (URL)
2.1.1 Job opportunities (URL)
2.1.2 How to contact us (URL)
2.2 What we do (URL)
2.2.1 What we sell (URL)
L571: Information Architecture for the Web
III. Design
Provide more detail in the schematic
2.2 What we do (URL)
Content type: (from your controlled vocabulary of types)
Purpose of the page:
Page topic:
Functionalities:
Management: producer, owner, audience, updated, outdated
Problems:
Recommendations:
L571: Information Architecture for the Web
III. Design
Use this as a basis for the first attempt at structure
Can get very detailed depending on the size of the site
Begin with the major content areas and sketch out the
relationships among them
Home
Who we are
What we do
Job opportunities
What we sell
How to contact us
L571: Information Architecture for the Web
III. Design
Metaphors are useful to site design:
Organizational metaphors: rely on the existing structure of
a group, system, or organization
Use with caution
Functional metaphors: relate tasks you can do on the site
with tasks you can do in another environment
The list of functionalities will be useful here
Visual metaphors: based on common graphic elements
familiar to most people in our culture
Risky to use in a global environment
L571: Information Architecture for the Web
III. Design
Putting the structure, general content categories and
metaphors together provides a high-level view of the site
Thinking about the user experience helps you develop
the navigation scheme for the site
The major content categories can be used for the global
navigation scheme
Then local schemes can be created for subsections of
the site
Testing these schemes is important
L571: Information Architecture for the Web
III. Design
Home page usability
A homepage is an important feature of an working site
“The homepage is the most valuable real estate in the
world”
Nielsen and Tahir (2001). Homepage Usability. Preface.
It is the digital face of the company
This is the point of first impression
It receives the most visits although people typically do
not spend a lot of time there
It represents a very large investment
The average commercial web site costs ~$1,400,000.37
L571: Information Architecture for the Web
III. Design
What does a home page do?
It provides an overview of the company’s web space
It provides a high level view of the site’s information
architecture
It lays out the top level navigation scheme
The page has marketing functions as well
This is where branding begins
The groundwork for trust-formation occurs here
The basic messages of the organization are initially
presented here
L571: Information Architecture for the Web
III. Design
Design goals
How can you communicate the purpose of your site?
Make sure that your logo is visible and in a noticeable
location
Use a slogan that concisely explains what you do
Use it to differentiate yourself
Make sure that the home page is distinct in its design
This minimizes user confusion
Decide what the most important tasks are for your
patrons and display appropriate links prominently
Be sure to include contact information
L571: Information Architecture for the Web
III. Design
Use the page to inform the visitor about your company
Provide links to information about the company
This could include
About us
Employment
Investor relations
Groups these links together
Include a link to a page of press releases
This is important for journalists
Have a link to a page describing your privacy policy
Tell people what type of information you collect and
what it’s used for
Only include information relevant to external audiences
L571: Information Architecture for the Web
III. Design
Pay attention to the content of this page - writing matters
Use your customers’ language to describe the main
sections and categories
Find out what terms they use to describe your business
processes
Avoid the jargon of your particular specialty
Try to minimize redundant content
Use consistent style rules throughout the site
Use examples to clarify content
Provide links to further explanations (narrowing)
Provide links to more general information (expanding)
L571: Information Architecture for the Web
III. Design
Be judicious in your use of graphics and animation
Use graphics for content and not ornamentation
Label the image if it differs from the text it supports
Edit or crop images to fit the page
Be very careful about overlaying text on images
Be even more careful using animation
Don’t animate critical elements (they draw attention
away from critical content)
Use high contrast text and background
Have the most critical elements “above the fold”
Use “liquid layout”
L571: Information Architecture for the Web
III. Design
Working with contingency design
37Signals: designing for events when things go wrong
on a site
What options are available to people when they face
problems
Search results that are not useful
404 error pages
Dynamic pages not loading
Walk through a site design to check for possible trouble
spots
L571: Information Architecture for the Web
III. Design
Use language your customers understand
Treat customers with respect (be polite)
Offer an escape route
Have customized error pages
Don’t disable the back button
Use intelligent forms validation
Clearly identify trouble spots (with highlighting)
Don’t block content with ads
Use smart searching
Accept misspellings
L571: Information Architecture for the Web
III. Design
Restrict search return entries
Provide an email link to retrieve forgotten password
Have contextual FAQs (on the relevant pages)
Answer email quickly and effectively
Don’t force registration for assistance
Solicit customer feedback
Offer multiple communications channels
Learn from failures
Plan for failure
L571: Information Architecture for the Web