Fundamental principles of Usability and User Centred Design

Fundamental principles
Of Usability and
User Centered Design.

Specification and Analysis of Information Systems Spring 2005 1

Agenda
• Introduction
• User Interface Design
– GUI building blocks
– GUI structures
• Usability
– Good design / bad design
– Usability levels
• User-centered design
– Principles and ideals
– The process

Intro | UI Design | Usability | User-centered 2

What is Usability?

The effectiveness, efficiency, and
satisfaction with which specified users
can achieve specified goals in particular
environments.

ISO 9241 usability definition


Why is Usability Important?

1. The fate of 2. The Apple
the world iPhone


1. The Fate of the World

The 2001 Florida Ballot Incident

Bush won Florida by a 537-vote margin in official results


The Florida Ballot

• 5,330 Palm Beach County residents invalidated their ballots by
punching for Gore and Reform Party candidate Pat Buchanan.
• Almost half of them were 65 or older and Democrats.


2. The Apple iPhone


Focus on Usability and Design


The implications of usability


Usability vs. Specification
Initiation

Requirement We design the user
interface here
Specification
We test them here
Design

Implementation

Testing Is it too late?


User Centered Design
Initiation • Therefore, we need a crush
course in:
Requirement – UI Design
– Usability principles
UI Design + Testing
Specification – User-centered design
• Note, these issues will be
Design discussed in a very shallow
manner.
Implementation • Each of these issues
deserve a course (actually,
Testing in our faculty, there are two
courses on these issues).
Take them!


Agenda
• Introduction
• User interface design
– GUI structures
• Usability
– The process

12

Basic Model of HCI

Computation

input

Computer
output


Types of User Interfaces

Graphical User Command Line Voice activated
Interface (GUI) interfaces


GUI Model

input
Computation
Keyboard : {I∈{A..Z, 1..0,...}}

Mouse : {x∈0..1024, y∈0..768}

Computer

output

Screen : {(x,y)∈Z2}


GUI Components: Simple Input

Text field Button

Enter Text Click to Submit

Text area Link
Enter Lots of text Link 1, link 2, link 3

• What is the type of information received by each input field?
• What’s the effect?


Simple GUI components: Choosers
Combo box Slider

Choose one

Radio button Checkbox
Option 1 Option 1

Option 2 Option 2

• What is the difference between a radio button and a check
box?
• What is the choice domain and the choice range of each
component?


Larger Constructs

Pages
(in Web-based systems)
Windows
(in Desktop-based systems)


Composing components

Tabs

Areas of
reference

List


Actions

Task

Context

Consequences


Designing Interface Elements (top-down)
1. User flow: take the user
Use Case aspect with the use-
case model
2. Storyboard:
• Find compositions of
actions / information
• Find relations between
compositions
1. Detailed view:
• Refine each composition to
the component level
1. Check and integrate


The use case model


User flow

• Integrate use-case scenarios from the user
perspective


Storyboard
Login Page

Welcome Text Login Fields
Blah blah blah Blah blah
email
blah Blah blah blah Blah
blah blah Blah blah blah
Blah blah blah Blah blah password
blah Blah blah blah Blah
blah blah Blah blah blah
Blah blah blah Blah blah Submit
blah

Registration Links
Sign in
Marketing Text

Conversations Page

LOGO Sign-out

Messages Pane
Message Managing page

Show Folders Message
folder Info: from, when, subject, has attachment?
Actions: read, reply, replay, archive, delete

Message
show Label
Filters
labeled
Message


Detailed View


Agenda
• Introduction
– GUI structures
• Usability
– The process

26

Good UI design vs. bad design

• What makes a good design different from a bad
design?
• In order to answer this question we will define the
concept of usability.


Which of these apps is easy to use?


Good design
• Recognizable
• Simple
• Clear purpose
• Learnable
• Safe
• Flexible
• Robust
• Good Metaphors
• ...


Recognizable interfaces

Pretty, or smart, is not
necessarily Usable


Patterns
• Design patterns in HCI are a good way to explore
suggestions for good design
• We would look at some patterns:
– Wizard (for simplicity)
– Contextual help (for learnable interface)
– Go back to a safe place
– Shortcuts (for flexible)
– Undo (for robustness)


Wizard
• Problem:
– The user wants to
achieve a single goal but
several decisions need to
be made.
• Solution:
– Take the user through the
entire task one step at
the time.


Contextual Help
• Problem:
– Users may need help
regarding specific tasks,
but would spend a lot of
energy searching for it.
• Solution:
– Place help in the context of
the given task.


Computers can be SCARY
Sometimes an innocent user gets into a state
she don’t want to be in…
And then, the terror!!!


Solution
• Provide a way to go back to a checkpoint of the
user's choice.

The "Home" button Clicking the Logo in
and the “Back” Web sites


Shortcuts
• Problem:
– Power users need faster ways
to execute operations than
novice users
• Solution:
– Create shortcuts for power
operations, using keyboard,
combinations, icons, special
menus etc...


Undo
• Problem:
– The user might regret executing some operation.
– Asking the user for confirmation after executing each
operation will make the interaction unusable.

• Solution:
– Enable the user to undo her operations, after they were
executed.


Usability levels

Component

Application

Project


Component Level
• Familiar to use
• Gives feedback
• Reduces errors
• Satisfies a given task
• Readable
• Self explaining


Application Level
• Accessible
• Gives sense of place
• Easy to navigate in
• Handles errors
• Realistic Scenarios
• Personalized


Project Level
• Answers real needs
• Answers current needs
• Generates value
• Communicate with all organization's units


Agenda
• Introduction
– GUI structures
• Usability
– The process

42

User Centered Design
• The objective is to create
a design process that Initiation
would increase the UCD:
usability of the product Requirement User is
involved here
• Three principles:
Specification
– Finding the user’s context of
the product
– Iterative process, including Design
ongoing tests and revisions
– Participatory Design - Users Implementation
become members of the Classic:
User is
design team Testing involved here


Where are the differences
• Requirements gathering stage:
– Talk / view users
– Identifying personas
• Specification stage:
– Interface prototyping
– Usability expert analysis
– Heuristic Evaluation
• Design / Implementation
– Usability Lab
– Log Analysis


Requirements stage
• Talk to users
– Interview them in order to
discover user’s culture,
requirements, expectations,
etc.

• Watch the users
– At work
– See how they use their
existing systems
– See what they do not use


Identifying Personas
• Personas are
hypothetical archetypes
of actual users
• By identifying a small set
of personas, we can:
– make the users seem more
real
– Judge the importance of
features
– Look at the:
• Usage frequency
• Competency
Taken from
• ... http://www.w3.org/WAI/redesign/personas


Evaluation at the requirements stage

Focus Group
The ideas of the new system are
presented to a group of potential
users.

Cognitive Walkthrough
The user “imagines” the system,
by going with the interviewer
through its stages and actions


Prototyping
• Brainstorm
Specification
• Rough interface design
• Application walkthrough

Low fidelity paper prototypes

Prototyping – Intermediate Stages
• Fine tune interface design
• Screen design
• Heuristic evaluation and redesign
Design

Medium fidelity prototypes

Evaluation at the specification / design

Usability Lab
Testing the prototypes by actual
users. Good for: finding
unexpected problems and process
refinement.

Guided Walkthrough
Guiding and questioning the users
while they perform specific tasks.


Evaluation with the actual system
• Log analysis may be
used to:
– Identifying actual usage
patterns
– Effectiveness of processes,
and components

• Benefits:
– Real statistical information
– Real-time information

Taken from
http://www.clickdensity.com


Summary
 Usability is important:
– Changing the registration interface at eBay had increased
success rate from 16% to 68%. Sales went up in 84M$.
 User interface design
– Components, storyboard, maps
 Usability
– Familiar, rules, patterns
 User-centered design
– Involve the users
– Evaluate early and often

52

References
• Bad design:
– http://homepage.mac.com/bradster/iarchitect/shame.htm
• Patterns:
– http://www.welie.com/patterns/index.php
– COMMON GROUND: A Pattern Language for Human-
Computer Interface Design, Jenifer Tidwell,
http://www.mit.edu/~jtidwell/common_ground_onefile.html
• Interaction Design:
– User Interface Design, Prototyping, and Evaluation (UC
Berkeley Extension Summer Engineering Institute)
http://guir.berkeley.edu/courses/SummerHCI02/
– http://www.interaction-design.org/
– http://www.useit.com/

53

Fundamental principles of Usability and User Centred Design

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Fundamental principles of Usability and User Centred Design

Semelhante a Fundamental principles of Usability and User Centred Design (20)

Mais de BART RADKA

Mais de BART RADKA (11)

Fundamental principles of Usability and User Centred Design