Information Architecture and Usability by aP68V1sd

VIEWS: 2 PAGES: 92

									Information Architecture and
          Usability
     Introductory Lecture

          David Rashty
        User Interface Domain
       What is the Lecture About ?
                 User Centric Design

Information
Architecture                      Usability


  Design and                           Testing and
                                       Evaluation
Implementation
                      User
                    Interface
   User Interface Domain - Terms

• MMI (Man Machine Interface)
• GUI (Graphical User Interface)
• CHI (Computer User Interface)
• CHI (Computer Human
Interaction)
Information
   overload
Disinformation
      overload
Information
   overload
Information
   overload
                                             How much
                                          Information ?


Over 93 percent of the information
produced in 1999 was in digital format.
                                      How much
                                   Information ?


Worldwide PC hard drive capacity
shipped
Culture Diff 1


                 N
   News
Culture Diff 2
 Shopping




 Shopping
                3
Culture DiffChina
        Siemens
        Diff 4
Culture Siemens Germany
                5
Culture DiffCanada
        Siemens
         Diff Arabia
CultureSiemens Saudia6
Which
design
makes it
easier ?
Is this
usable?
Terrible
designs!
Confusing
designs!
This is hard to read. In fact, many people have gone stone
blind from reading horrible pages on Web sites. You
could be next! Well, that's a bit of an exaggeration.
Please, please, never do this.

This is easier to read. The colors may not be very pretty,
but they sure are easier to read than the example above.
Also avoid colors that look ugly together.

                                 Color
                                 Problems !
Cognitive Problems !
Eye Tracking
 Problem !
 Unusable
Metaphors !
How bad can it be?
                                                           Definitions


                      Definition
• Information Architecture is the process of
  organizing and presenting information in an
  intuitive and clear manner.
• Richard Saul Wurman – “The building of
  information structures that allow others to
  understand”
• When architects design a house they need to:
   – Learn about the client’s wishes;
   – Organize those wishes into a coherent pattern;
   – Design a house that will meet the occupants’ needs.
                                                     Definitions


               More Definitions

• The information architect must understand what
  users are trying to accomplish; he must learn the
  users’ goals/tasks. This means including users in
  the design process
• The information architect must answer the
  question: “what will people do on the site”; not
  just “what content should be on the site.”
                                                                 Definitions


            Why is IA important?
• Wasted expense: most sites will waste
  between $1.5M and $2.1M on redesigns next
  year.
• Forfeited revenue: poorly architect retailing
  sites are underselling by as much as 50%.
• Lost customers: the sites we tested are driving
  away up to 40% of repeat traffic.
• Eroded brand: people who have a bad
  experience, typically tell 10 others.
                     Forrester Research – Why Most Web Sites Fail (Sept 98)
                                             Definitions


The role of the Information Architect

• Clarify the mission and vision for the
  website;
• Determines the information structure and
  functionality of the website;
• Defines the navigation, labeling and
  searching systems;
• Defines how the website is will
  accommodate to future changes.
                                       Definitions


    Disciplinary background
               Graphic
               Design
Management
& Marketing                  Usability
                             Engineering
Technical
Writing



 Computer
 Science

                         Information
            Cognitive    Science
            psychology
                        Building an Information Architecture


Building an Information Architecture

Information             Labeling
Organization           Systems &
& Clustering           Metaphors

  Searching            Navigation
   Systems              Systems
                                 Building an Information Architecture

Information Architecture work
           process
• Plan
• Research
                                               Why ?
• Analyze
• Design (Functional Design)
• Evaluate (Usability)
                                                    How ?
• Implement (Visual Design and Templates)
• Evaluate (Usability)
• Document (Design Guide)
                                                     Maintain
• Train
                                           Building an Information Architecture


Information Architecture metrics

 • Cost     of finding (time, clicks, frustration,
 precision).

 • Cost     of not finding (success, recall, frustration,
 alternatives).

 • Cost     of development (time, budget, staff,
 frustration).

 • Value         of learning (related products, services,
 projects, people).
                      Building an Information Architecture

Information Architecture metrics
       Log file analysis
                Building an Information Architecture


Visual approach to IA
                                                          approach > Overview

           Overview of Method

• Seven step methodology for defining the
  needs of customers and for building an
  appropriate information structure:



Research    Whiteboard   Clustering   Highlighting   Focusing        Labeling   Functional
                                                                                structure




                                           Interaction          User
                                           Design               Experience
                   Building an Information Architecture > Information organization


Organize information in accordance with the users…
Information Architecture

  Information Organization &
          Clustering
                      Building an Information Architecture > Information organization


          Information organization

•   The most important step in planning your
    website is organizing your information.
•   Steps to build a usable information structure:
    –   Divide the content into logical units;
    –   Chunk the information into sections and subsections
        (clusters);
    –   Think about which sections are more important;
    –   Think about how the sections relate to one another;
    –   Build links between related sections.
                 Building an Information Architecture > Information organization


            Why is it difficult?

• Ambiguity – Language is ambiguous. Is a
  tomatoes a fruit, a vegetable, or a berry?
• Heterogeneity – The web is a heterogeneous
  media and this makes it difficult to impose a
  rigid information structure to websites.
• Differences in perspective – Different users
  approach your website differently (culture,
  age, language).
Download                         Authorware attain     F.A.Q.
              Developers centers             Flash
About                            Director
                                             Freehand Ordering
Help
              Technologies       Dreamweaver         Online store
                                                       options
              Tech support                   Generator
  Test                           Fireworks
  Licensing
                      Support                Pathware Software
                   Magic program            Search
  Advertising                                                      Help
ShockwaveBeta programs                      Webmaster feedback
                   Training                 Advertising       About the company
         Sites                    Jukebox
              Home Page                                       Contact us
                                  Flash leading edge
 French       Shockwave                                       Press room
                                  Director leading edge
 German       Japanese                                        Press releases
                                                       Investors
 Canada                  Shocked site of the day
 DHTML Zone              Gallery guide                 Jobs About us
                         Arcade                        Events
                     Shockzone
                                                       Education
Information Architecture

Labeling Systems & Metaphors
                           Building an Information Architecture > Labeling


                   Labeling

• Labels are concepts that represent chunks of
  information.
• The About us page of a website, for
  instance, may include:
  – background information;
  – Relevant addresses;
  – Other contact information.
• Labels must be clear and intuitive to be
  effective.
             Building an Information Architecture > Labeling


Labels are not definite
                       The menus in this
                       slide are all from
                       consulting companies.
                       Pay attention to the
                       differences…
                          Building an Information Architecture > Labeling


            Some conventions
• Main, Main page, Home, Home page;
• Search, Find, Browse, Search/Browse, Site map,
  Contents, Table of contents, Index;
• Contact, Contact us, Feedback;
• Our work, Expertise, Solutions, Company X
  solutions, What we do, Process;
• News, What’s new, News and events;
• About; About us, About company X, Who we are,
  Our Company, Company info.
                          Building an Information Architecture > Labeling


          Labeling problems…

• The Web site of Richard “Dick” Armey is a
  victim of many of the software solutions
  which he advocates. All of them filter his site
  because it contains the word “dick”.
• The Navy’s censorware blocked a user from
  accessing the A+ Exam site. The site was
  blocked because its URL,
  www.aplusexam.com, contained the word
  “sex”.
                          Building an Information Architecture > Labeling


                 Metaphors

• When choosing a label we often make use
  of metaphors – a word denoting one kind of
  idea is used in place of another to suggest
  an analogy between them.
• For example:
  – someone that is drowning on money is not
    really drowning…
  – food for thought is not food…
  – time is not really money.
           Building an Information Architecture > Labeling


Metaphors – example
                         Building an Information Architecture > Labeling


          Metaphors – example

• The VCR metaphor to
  control the printer
  doesn’t make sense:
  what does the rewind
  button means?
Information Architecture

    Searching Systems
                            Building an Information Architecture > Searching


                   Searching

• When designing a searching system for a
  website, the information architect have to
  consider the following points:
  –   The level of searching expertise users have;
  –   The kind of information users want;
  –   The type/format of information being searched;
  –   How much information is being search, i.e.,
      what is granularity of the information.
                                       Building an Information Architecture > Searching


           Searching (searching stinks)
•      “Using an on-site search engine
    actually reduced the chances of success.”
                         Percent of Successful Tasks

            60%
                          53%
            50%

            40%
                                                       30%
            30%

            20%

            10%

            0%
                      Without Search               With Search




                  •   1998 Usability Study by User Interface Engineering
                           • http://world.std.com/~uieweb/searchar.htm
             Building an Information Architecture > Searching


Bookshops – simple search
             Building an Information Architecture > Searching


What is the best option?
                                 Building an Information Architecture > Searching


                       The Brain
• The visual element in this browser facilitates navigation
  and gives a sense of direction that helps the user to find
  the information he is looking for.
                                Building an Information Architecture > Searching


                        Spotfire
• A visual approach to information retrieval and presentation.
  The graph represents a huge amount of data that would be
  difficult to
  conceptualize
  in other ways.
    Building an Information Architecture > Searching


Gartner
Usability testing

Usability laboratory
                       Testing methods

      Method                         Short description
Usability laboratory     A room with computer equipment, a place for
                         an observer to sit and a special observation area.
Web-based                Online evaluation with live feedback from
                         users.
Thinking aloud           A test subject thinks aloud while navigating the
                         site.
Observation              Visiting the users and observing them work.

Questionnaires           Site or email questionnaires are an effective
                         way of measuring user satisfaction.
                       Testing methods

      Method                         Short description
Interviews               Well suited to exploratory studies where one
                         does not know yet what one is looking for.
Focus groups             Users are brought together to discuss new
                         concepts and identify important issues.
Heuristic evaluation     Looking at an interface and trying to come up
                         with an opinion about pros and cons about it.
Log file analysis        The computer automatically collect statistics
                         about the detailed use of the system.
User feedback            Shows the immediate and pressing concerns, is
                         an ongoing process and is adapts quickly.
Observation room
Usability test video (cost of finding)




       ‫המשימה: לבצע חיפוש טלפון באתר סטארט‬
Usability test video (cost of not
             finding)




    ‫המשימה: לבצע התאמה אישית לאתר סטארט‬
     3%




7%   11%        33%




           6%



     5%
                  19%
Information Architecture

        Products
                            The design process


Tree Structure with Correlate
                            The design process


Tree Structure with Visio
Functional Design Span
Examples of good IA
Examples of bad IA
What happens if you don’t do it?
 Good Architecture Vs. Bad
        Architecture
                     Conclusion
• The information architect should be someone who
  can
   – think as an outsider (from the user perspective);
   – be sensitive to the needs of users;
   – and pay attention to details.
• At the same time,
   – he is enough of an insider to have a clear picture of the
     organization’s mission;
   – and have a strong multidisciplinary background that
     allows him to ignore unimportant details.
There is a great satisfaction in building good tools for
  other people to use.
            Freeman Dyson, Disturbing the Universe, 1979




Through even the smallest window the eye can reach the
  most distant horizon.
                        A. Bergman, Visual Realities, 1992
        References – Websites

• www.argus-acia.com - Peter Morville and
  Louis Rosenfeld company’s website
• www.jjg.net/ia - Information Architecture
  resources
• www.useit.com - Jakob Nielsen website
• www.usableweb.com - Mainly about
  usability but contains lots of info on IA
Thank you!

								
To top