Week 3: Information Architecture - PowerPoint PPT Presentation

Loading...

PPT – Week 3: Information Architecture PowerPoint presentation | free to download - id: 2158f-OTI1Y



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Week 3: Information Architecture

Description:

Why CAN'T people who design these sites make it easy to find information. ... What do you cook when you are running a restaurant? Differences In Perspectives ... – PowerPoint PPT presentation

Number of Views:47
Avg rating:3.0/5.0
Slides: 59
Provided by: billcae
Learn more at: https://www.mercy.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Week 3: Information Architecture


1
Week 3 Information Architecture
  • How IA helps the team develop a web project
  • How Usability helps accomplish site goals
  • How users really use the web

2
Information Architecture
  • IA is the structure of the web site what goes
    where, how they connect, and how usable the site
    will be
  • Needs a Creative Brief or User Experience
    document to work from
  • Creates User Scenarios, Site Map, and Wireframes
    (or schematics)

3
(No Transcript)
4
Information Architecture a Definition
Information architecture involves the design of
organization, labeling, navigation, and searching
systems to help people find and manage
information more successfully.
5
Who is the Information Architect?
  • Specifies how users will find information in the
    site by defining its organization, navigation,
    labeling and searching systems
  • Determines what content and functionality the
    site will contain.
  • Clarifies the mission and vision for the site,
    balancing the needs of its sponsoring
    organization and the needs of its audiences.
  • Maps out the site

6
Monster.com, hotjobs.com
Search for an Information Architect
Agency.com Walt Disney
7
Information Architecture
  • Well-planned IA greatly benefit both consumers
    and producers.
  • Accessing a site for the first time, consumers
    can quickly understand it effortlessly
  • Producers of web sites and intranets benefit
    because they know where and how to place new
    content without disrupting the existing content
    and site structure.

8
Organizing Information
  • The beginning of all understanding is
    classification.
  • Hayden White
  • We organize information so that people can find
    the right answers to their questions. Our aim is
    to apply organization and labeling systems that
    make sense to users.
  • Why are many large web sites so difficult to
    navigate?
  • Why CANT people who design these sites make it
    easy to find information.

9
Organizational Challenges
  • People have struggled with the difficulties of
    Information Organization for centuries.
  • The field of librarianship has been largely
    devoted to the task of organizing and providing
    access to information.
  • We are all becoming librarians
  • Not long ago the responsibility for
    labeling,organizing and providing access to
    information fell in the labs of librarians.
  • The internet is forcing the responsibility for
    organizing information on more of us each day.

10
Language of Librarians
  • We unknowingly adopt the language of librarians.
  • How should we label that content?
  • Is there an existing classification system?
  • Who is going to catalog all that information?

11
(No Transcript)
12
The Value of IA
  • While discovery documents are verbal descriptions
    of the projects goals, the Site Map and
    Wireframes (aka Schematics) are a visual
    presentation of the web site
  • These blueprints are useful to client, PM,
    designers, technical team, QA team
  • A tangible document that gives everyone a common
    direction

13
Site Maps
  • Road map of site
  • Demonstrates surf path taken by visitor
  • Client/contractor collaboration
  • Purpose is to communicate
  • Many different formats, graphic tools to create
    them
  • Include site map on site??

14
Sample Site Maps
Architectural blueprints are visual
representations of the site structure. They are
diagrams showing how elements of the site are
grouped and how they link or relate to one
another.
15
Sample Site Maps
16
Sample Site Maps
17
IA as Blueprint aol.com
  • A real-world example of how AOL.com used their
    site maps to organize their project

18
(No Transcript)
19
Added Value of IA - Usability
  • Works with Usability Principles Usability
    Testing to create a design that helps site
    visitors accomplish their tasks
  • Happy visitors achieving business goals

20
Food for thought
  • What do you cook when you make dinner for
    yourself?
  • What do you cook when you make dinner for someone
    else?

21
Food for thought
  • What do you cook when you are running a
    restaurant?

22
Differences In Perspectives
  • Differences in perspectives
  • Have you ever tried to find a file on a coworkers
    desktop computer?
  • In some cases immediately or
  • You may have searched for hours.
  • The ways people organize and name files and
    directories on their computers can be illogical
  • When questioned their organization system makes
    perfect sense.
  • The fact is that labeling and organization
    systems are intensely affected by their creators
    perspectives.
  • To design usable organization systems, we need to
    escape from our own mental models of content
    labeling and organization.
  • One size does not fit all.

23
(No Transcript)
24
Usability Basics
  • From Usability.gov
  • http//www.usability.gov/basics/index.html

25
What Is Usability?
  • Usability is the measure of the quality of a
    user's experience when interacting with a product
    or system whether a Web site, a software
    application, mobile technology, or any
    user-operated device.
  • Usability is a combination of factors that affect
    the user's experience with the product or system,
    including

26
What is usability 2
  • Ease of learning
  • How fast can a user who has never seen the user
    interface before learn it sufficiently well to
    accomplish basic tasks?
  • Efficiency of use
  • Once an experienced user has learned to use the
    system, how fast can he or she accomplish tasks?
  • Memorability
  • If a user has used the system before, can he or
    she remember enough to use it effectively the
    next time or does the user have to start over
    again learning everything?
  • Error frequency and severity
  • How often do users make errors while using the
    system, how serious are these errors, and how do
    users recover from these errors?
  • Subjective satisfaction
  • How much does the user like using the system?

27
Why Is Usability Important?
  • Research by User Interface Engineering, Inc.,
    shows that people cannot find the information
    they seek on Web sites about 60 of the time.
    This can lead to wasted time, reduced
    productivity, increased frustration, and loss of
    repeat visits and money.

28
Other sources report
  • "There are about 43 million Web sites, and no one
    knows which ones are usable. The best sites we've
    found are usable only 42 percent of the time, and
    none that we have studied are usable a majority
    of the time ...."
  • Studies by Forrester Research estimate several
    costs of bad site design. The two most striking
    are
  • Losing approximately 50 of the potential
    sales from a site as people can't find what they
    need
  • Losing repeat visits from 40 of the users who
    do not return to a site when their first visit
    resulted in a negative experience

29
Site design guru Jakob Nielsen reports
  • "Studies of user behavior on the Web find a low
    tolerance for difficult designs or slow sites.
    People don't want to wait. And they don't want to
    learn how to use a home page. There's no such
    thing as a training class or a manual for a Web
    site. People have to be able to grasp the
    functioning of the site immediately after
    scanning the home page for a few seconds at
    most."

30
(No Transcript)
31
Approaches
  • Elements of User Experience Design, Ch. 5

32
Conceptual Models
  • How users think about interactive components
  • Is it an article to read? A place to visit? An
    object they acquire? A tool to use?
  • Use a conceptual model to make consistent design
    decisions (why?)

33
Shopping Cart or Order Form?
  • How do you use a shopping cart?
  • How do you use a catalog order form?
  • How would you design a system differently if it
    was a cart or a form?
  • How do conventions affect your design choices?

34
Top-Down vs. Bottom-Up Approaches
  • Ways to develop a structure for your site
  • Top-down approach
  • Typical hierarchy approach
  • Start with objectives needs at highest level
  • Divide into logical categories
  • Content goes into this empty shell
  • Bottom-up approach
  • Starts with the material (content) you have
  • Create a structure for the material

35
Be Adaptable
  • Top-down can miss important content
  • Bottom-up can be so precisely tuned to existing
    content that its not flexible
  • An adaptable approach will strike a balance
    between T-D and B-U

36
Architecture Approaches
  • These are ways to structure information to give
    the user a sense of what they are doing and where
    they are and give you the team a sense of
    what they are building
  • Hierarchy or Tree
  • Matrix or Facets
  • Organic (no structure)
  • Sequence

37
The Hierarchy
  • A top down approach
  • Well designed hierarchy is the foundation of
    almost all IAs
  • Simple
  • Familiar
  • Family trees are hierarchical
  • Organization charts are usually hierarchical
  • A good way of start the IA process

38
Hierarchy Structure
  • Aka Tree or hub-and-spoke structure
  • Nodes have parent-child relationship
  • Most common web site structure
  • See Yahoo.com as a Web Site Directory
  • Other hierarchical structures?

39
Designing Hierarchies
  • Rules of thumb
  • Categories should be mutually exclusive
  • Do tomatoes belong to Fruit, vegetable or berry
    category?
  • Balance between Breadth and Depth
  • Breadth, number of options in each level
  • Users are faced with too many options
  • Depth, number of levels in the hierarchy
  • Users have to click-through inordinate number of
    levels

40
Narrow and Deep
Users are faced with six clicks to reach the
deepest content If users are forced to click more
than four or five levels, they may simply give
up and leave your web site.
41
Broad and Shallow
  • Users must choose from ten options to reach a
    limited amount of content
  • Try to follow the seven - two rule
  • Web sites with more than ten options on the main
    menu can overwhelm
  • users

42
Adaptable Hierarchies
  • For new web sites and intranets that are expected
    to grow you should lean towards a broad and
    shallow rather than narrow and deep hierarchy.
  • This approach allows for the addition of content
    without major restructuring.

43
Matrix Structure aka Facet-based browsing
  • A facet is an aspect or dimension of an object or
    piece of information.
  • (Also the sides of an object, such as a gem)
  • You can access the information by starting with
    any of the facets available
  • (You can look through a gem from any angle)
  • Lets the user choose their own tree structure

44
Facet Based Browsing
45
See also(facets)
  • How does www.zagat.com use facets in their sites
    organization?

46
Organic Structure
  • No specific structure
  • Good for free-form exploration
  • Doesnt create a sense of where you are

47
Sequential Structure
  • When One thing leads to another
  • This class
  • Any book
  • Any movie
  • Real life
  • Fewer web examples, because the web is a
    hypertext system
  • (can you think of some?)

48
(No Transcript)
49
Organizing Principles
  • High-level concept to organize your site
  • or, what is the top level of your tree?
  • See
  • cnn.com
  • Dell.com
  • Zagat.com

50
(No Transcript)
51
Wireframes
  • Look at the sample wire frames document which is
    posted on the course web page.That document is a
    real life example of a wire frame. You will see
    that there is not much of a design issues but
    navigation.
  • Also, study the wire frame which is on the page
    12 of Evaluating Information Architecture.pdf
    document, (posted.)
  • Than go to the argus-acia.com and see the real
    web site. Does it look familiar?

52
Wireframes
  • Try drawing a wireframe for
  • Cnn.com homepage
  • Dell.com
  • Zagat.com

53
(No Transcript)
54
How People Read on the Web
  • Krug, Dont Make Me Think, Chapt. 2

55
Writing for the Web http//www.sun.com/980713/webw
riting/ by Jakob Nielsen, et al
  • by Jakob Nielsen, distinguished engineer PJ
    Schemenaur, technical editor and Jonathan Fox,
    editor-in-chief, www.sun.com
  • You can double the usability of your web site by
    following these guidelines for two sample sites
    studied in Sun's Science Office, we improved
    measured usability by 159 and 124 by rewriting
    the content according to the guidelines.
  • Writing for the Web is very different from
    writing for print
  • 79 of users scan the page instead of reading
    word-for-word
  • Reading from computer screens is 25 slower than
    from paper
  • Web content should have 50 of the word count of
    its paper equivalent

56
(No Transcript)
57
Information architecture is part...
  • Design
  • How do you design a site to accomplish goals?
  • How does architecture enable good teamwork?
  • Library Science
  • How do you classify information?
  • Cognitive Psychology
  • How do people use the web?

58
Next week
  • Why your web site needs to be smelly
  • The Scent of Information, and how people browse
  • We are all informavores
  • Usability testing
  • and other exciting topics!
About PowerShow.com