Fundamentals of Information Architecture and Usability Engineering

1
Fundamentals of Information Architectureand
Usability Engineering

• Introductory Lecture
• david.rashty_at_gmail.com

2
Issues covered

• Introduction to Information Architecture and
  Usability
• Metrics for Usability evaluation and ROI
• Defining users and tasks
• Information Clustering, Labeling and Taxonomies
• Usability testing methods
• Heuristic Evaluation Usability Labs
• Information Architecture lifecycle
• Research in the area of CHI and IA
• Bibliography for further study

3
Introduction and Short History
4
Computer Human Interface Domain
User Centered Design (UCD) (new term)
Information Architecture (IA)
Usability
Testing and Evaluation
Design and Implementation
Computer Human Interface (UI/CHI)
5
Computer Human Interface - Terms

• MMI (Man Machine Interface)
• GUI (Graphical User Interface)
• CHI (Computer Human Interface)
• CHI (Computer Human Interaction)
• UCD (User Centered Design)
• IA Information Architecture
• PUI Perceptual User Interface

6
Harvard Mark I, 1945

• Harvard Mark I
• Picture from http//www.maxmon.com/1939ad.htm
• 18 meters, 5 tons

7
1961

• Stretch
• http//www.brouhaha.com/eric/retrocomputing/ibm/s
  tretch/

8
1968
9
1970-1980
10
First GUI 1984, Apple
11
Windows 2.0 1987
12
Windows 3.0/1 1990 -1992
13
Microsoft Bob 1995
14
Web Mosaic and Netscape 1994-5
15
Today (1)
Wap / XHTML
Windows
Web
Palm
16
Today (2)
Wearable Technology
3D
Visual Interfaces
17
Perceptual User Interface

• Multimedia- Use of audio, video, sound (one way
  only)
• Multimodal- Communication is done in all senses
• Perceptive- Computer Interface recognize Human
  emotions and language

18
Evolution of CHI

• 50s - Interface at the hardware level for
  engineers - switch panels
• 60-70s - Interface at the programming level -
  COBOL, FORTRAN
• 70-90s - Interface at the terminal level -
  command languages
• 80s - Interface at the interaction dialogue level
  - GUIs, multimedia
• 90s - Interface at the work setting - networked
  systems, groupware
• 00s - Interface becomes pervasive
• RF tags, Bluetooth technology, mobile devices,
  consumer electronics, interactive screens,
  embedded technology

19
Trends in CHI

• B W / Monochrome -gt Color
• Two Dimensions -gt 3D
• Textual Interface -gt Visual Interface
• Single Input -gt Multi Perceptual Interface
• Machine Language -gt Natural Language
• Single Screen -gt Multi Screen
• Big -gt Small

20
Examples
21
Basic Example
22
Basic Solution
23
Information overload
24
Information overload
25
Disinformation overload
26
Information overload
27
Information overload
28
Culture Diff 1
News
News
29
Culture Diff 2
Shopping
Shopping
30
Culture Diff 3
Siemens China
31
Culture Diff 4
Siemens Germany
32
Culture Diff 5
Siemens Canada
33
Culture Diff 6
Siemens Saudia Arabia
34
Terrible designs!
35
Confusing designs!
36
Missing Information!
37
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 !
38
Cognitive Problems !
39

• Eye Tracking Problem !

40

• Focus !

41

• Where the eye goes ?

42
Inconsistency
43
Memory
44
How bad can it be?
45
Definitions
46
AI 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 clients wishes
• Organize those wishes into a coherent pattern
• Design a house that will meet the occupants
  needs.

47
CHI Definitions

• Computer Human interaction (CHI) is
• concerned with the design, evaluation and
  implementation of interactive computing systems
  for human use and with the study of major
  phenomena surrounding them (ACM SIGCHI, 1992,
  p.6)
• Usability is
• That quality of a system that makes it easy to
  learn, easy to use and encourages the user to
  regard the system as a positive help in getting
  the job done. User A person who uses a system to
  perform a business function
• The ease with which a user can learn to
  operate, prepare inputs for, and interpret
  outputs of a system or component.

48
Metrics
49
Usability 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).

50
User experience goals

• Satisfying - rewarding
• Fun - support creativity
• Enjoyable - emotionally fulfilling
• Entertaining and more
• Helpful
• Motivating
• Aesthetically pleasing
• Motivating

51
Log file analysis (Tools)
52
Visual approach to metrics of IA
53
Defining Users and Tasks
54
Why do we need to understand users?

• Interacting with technology is cognitive
• We need to take into account cognitive processes
  involved and cognitive limitations of users
• We can provide knowledge about what users can and
  cannot be expected to do
• Identify and explain the nature and causes of
  problems users encounter
• Supply theories, modelling tools, guidance and
  methods that can lead to the design of better
  interactive products

55
Core cognitive aspects

• Attention
• Perception and recognition
• Memory
• Reading, speaking and listening
• Problem-solving, planning, reasoning and
  decision-making, learning
• Here we focus on attention, perception
  recognition, memory

56
Different kinds of requirements

• Users Who are they?
• Characteristics ability, background, attitude
  to computers
• System use novice, expert, casual, frequent
• Novice step-by-step (prompted), constrained,
  clear information
• Expert flexibility, access/power
• Frequent short cuts
• Casual/infrequent clear instructions, e.g. menu
  paths

57
Who are the users?

• Not as obvious as you think
• those who interact directly with the product
• those who manage direct users
• those who receive output from the product
• those who make the purchasing decision
• those who use competitors products ???
• Three categories of user
• primary frequent hands-on
• secondary occasional or via someone else
• tertiary affected by its introduction, or will
  influence its purchase.
• Wider term stakeholders

58
Who are the users? (contd)

• What are their capabilities? Humans vary in many
  dimensions!
• Some examples are
• size of hands may affect the size and positioning
  of input buttons
• motor abilities may affect the suitability of
  certain input and output devices
• height if designing a physical kiosk
• strength - a childs toy requires little strength
  to operate, but greater strength to change
  batteries

59
What are needs?

• Users rarely know what is possible
• Users cant tell you what they need to help
  them achieve their goals
• Instead, look at existing tasks
• their context
• what information do they require?
• who collaborates to achieve the task?
• why is the task achieved the way it is?
• Envisioned tasks
• can be rooted in existing behaviour
• can be described as future scenarios

60

• Information Organization Clustering

61
Information organization

• The most important step in planning your
  interface 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.

62
Building an Information Architecture
Information Organization Clustering
Labeling Systems Metaphors
Navigation Systems
Searching Systems
63
7 Step Process
Research
Whiteboard
Clustering
Highlighting
Focusing
Labeling
Functional structure
Interaction Design
User Experience
64
Download About Help
Authorware attain Director Dreamweaver Fireworks
F.A.Q. Ordering options
Flash Freehand Generator Pathware
Developers centers Technologies Tech support
Online store
Test Licensing Advertising
Support
Software
Magic program Beta programs Training
Search Webmaster feedback Advertising
Help
Shockwave
About the company Contact us Press room Press
releases
Sites
Jukebox Flash leading edge Director leading edge
Home Page Shockwave Japanese
French German Canada DHTML Zone
Investors Jobs Events Education
Shocked site of the day Gallery guide Arcade
About us
Shockzone
65
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.

66
Labels are not definite
The menus in this slide are all from consulting
companies. Pay attention to the differences
67
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.

68
Metaphors example
69
Metaphors example

• The VCR metaphor to control the printer doesnt
  make sense what does the rewind button means?

70
Navigation
Building an Information Architecture gt Navigation

• Navigation refers to the way users find their way
  through information spaces
• When driving in a new neighborhood drivers expect
  to meet the traditional traffic signs.
• When visiting a new house people do not expect to
  go through the kitchen in their way to the
  toilette.

Meeting room
Kitchen
Bedroom
Toilette
71
Example Amazon
Building an Information Architecture gt Navigation
72
Building an Information Architecture gt Navigation
A menu with too many options
73
Usability Testing Methods
74
Testing methods
Short description Method
A room with computer equipment, a place for an observer to sit and a special observation area. Usability laboratory
Online evaluation with live feedback from users. Web-based
A test subject thinks aloud while navigating the site. Thinking aloud
Visiting the users and observing them work. Observation
Site or email questionnaires are an effective way of measuring user satisfaction. Questionnaires
75
Testing methods
Short description Method
Well suited to exploratory studies where one does not know yet what one is looking for. Interviews
Users are brought together to discuss new concepts and identify important issues. Focus groups
Looking at an interface and trying to come up with an opinion about pros and cons about it. Heuristic evaluation
The computer automatically collect statistics about the detailed use of the system. Log file analysis
Shows the immediate and pressing concerns, is an ongoing process and is adapts quickly. User feedback
76
Iterative Design
77
(No Transcript)
78
(No Transcript)
79
Observation room
80
(No Transcript)
81
(No Transcript)
82
(No Transcript)
83
Heuristic Evaluation
84
Discount Usability Engineering

• Cheap
• no special labs or equipment needed
• the more careful you are, the better it gets
• Fast
• on order of 1 day to apply
• standard usability testing may take a week
• Easy to use
• can be taught in 2-4 hours

85
Heuristic Evaluation

• Developed by Jakob Nielsen
• Helps find usability problems in a UI design
• Small set (3-5) of evaluators examine UI
• independently check for compliance with usability
  principles (heuristics)
• different evaluators will find different problems
• evaluators only communicate afterwards
• findings are then aggregated
• Can perform on working UI or on sketches
• Ive found in this class it works better on
  working UI

86
Why Multiple Evaluators?

• Every evaluator doesnt find every problem
• Good evaluators find both easy hard ones

87
Heuristic Evaluation Process

• Evaluators go through UI several times
• inspect various dialogue elements
• compare with list of usability principles
• consider other principles/results that come to
  mind
• Usability principles
• Nielsens heuristics
• supplementary list of category-specific
  heuristics
• competitive analysis user testing of existing
  products
• Use violations to redesign/fix problems

88
Nilsens 10 Heuristics (original)

• H1-1 Simple natural dialog
• H1-2 Speak the users language
• H1-3 Minimize users memory load
• H1-4 Consistency
• H1-5 Feedback

• H1-6 Clearly marked exits
• H1-7 Shortcuts
• H1-8 Precise constructive error messages
• H1-9 Prevent errors
• H1-10 Help and documentation

89
Heuristics (revised set)

• H2-1 Visibility of system status
• keep users informed about what is going on
• example pay attention to response time
• 0.1 sec no special indicators needed, why?
• 1.0 sec user tends to lose track of data
• 10 sec max. duration if user to stay focused on
  action
• for longer delays, use percent-done progress bars

90
Heuristics (cont.)

• Bad example Mac desktop
• Dragging disk to trash
• should delete it, not eject it
• H2-2 Match between system real world
• speak the users language
• follow real world conventions

91
Heuristic Evaluation vs. Usability Lab

• HE is much faster
• 1-2 hours each evaluator vs. days-weeks
• HE doesnt require interpreting users actions
• Usability lab is far more accurate (by def.)
• takes into account actual users and tasks
• HE may miss problems find false positives
• Good to alternate between HE Usability lab
• find different problems
• dont waste participants

92
Information Architecture Lifecycle
93
Information Architecture work process

• Plan
• Research
• Analyze
• Design (Functional Design)
• Evaluate (Usability)
• Implement (Visual Design and Templates)
• Document (Design Guide)
• Train

Why ?
How ?
Maintain
94
Information Architecture Lifecycle
Plan
Prototype
Evaluate
95
IA Products
Research report
Taxonomy
Functional Design
Prototype
96
Taxonomy using Correlate
97
Taxonomy using MS Visio
98
Functional Design Span
99
IA Evolution in Macromedia.com
1996
1998
2001
2002
100
Macromedia.com 2004
101
Macromedia.com 2005
102
Examples of good IA
103
(No Transcript)
104
(No Transcript)
105
(No Transcript)
106
(No Transcript)
107
(No Transcript)
108
Examples of bad IA
109
(No Transcript)
110
Research in the Area of IA and CHI
111
Who is Doing Research

• Universities
• Microsoft / IBM / Sun
• Auto / Aviation industries
• Army
• Specialized research institutes

112
Examples of Research Areas

• Wearable interfaces
• Visualization
• Information scent
• Automatic usability testing
• Input devices

113
Wearable Interface
114
Wearable Interface
Good bye keyboard, so long mouse. Hello smart
rooms and clothes that recognize acquaintances,
understand speech, and communicate by
gesture. And thats just the beginning
Alex Pentland
http//www.media.mit.edu/wearables/
115
Visualization
http//www.cs.umd.edu/hcil/research/visualization.
shtml
116
Visualization
http//www.visualthesaurus.com/?vt
117
Information Scent
http//www2.parc.com/istl/projects/uir/publication
s/project/index.html
118
Automatic Usability Testing
119
Input Devices and Sensors
120
Understanding Human Language
121
Bibliography
122
References Research

• http//www.cs.umd.edu/hcil/ - University of
  Maryland man-Computer Interaction Lab
• http//www2.parc.com/istl/projects/uir/ - User
  Interface Research _at_ PARC
• http//guir.berkeley.edu/ - Group of User
  Interface Research at Barkley
• http//research.microsoft.com/ui/ - Microsoft
  research group
• http//www.acm.org/sigchi/ - ACM CHI

123
References Websites

• www.argus-acia.com - Peter Morville and Louis
  Rosenfeld companys 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

124
References Books
Information Architecture for the World Wide Web
Designing Large-Scale Web Sitesby Louis
Rosenfeld, Peter Morville
Information Architecture Blueprints for the
Webby Christina Wodtke
125
References Books (cont)
The Usability Engineering Lifecycle A
Practitioner's Handbook for User Interface
Design by Deborah J. Mayhew
Usability Engineer by Jakob Nielsen
126
References Books (cont)
Designing the User Interface Strategies for
Effective Human-Computer Interaction Ben
Shneiderman, University of MarylandCatherine
Plaisant, University of Maryland
127
References Also Recommended

• Designing Web Usability / Jacob Nielsen
• Dont make me think / Steve Krug
• About Face / Alan Cooper
• The design of everyday things / Don Norman

128
Thank you!