Transcript Document

Usability &
User Interface Design
What is Usability? More than...
Being ‘user-friendly’
 Specifying fonts
 Specifying colour
schemes
 ‘User testing’.

Finding Information

Users can only find information 42% of the time
– Jared Spool

62% of web shoppers give up looking for the item they want to buy
online
– Zona Research

50% of the potential sales from a site are lost because people
cannot find the item they are looking for
– Forrester Research
Reasons for Failure

49% of sites do not comply with simple usability
principles
– Forrester Research

Only 24% of internet companies conduct usability testing
– Forrester Research

90% of sites have poor usability
– Jakob Nielsen
So - What is Usability?







ISO defines usability in terms of supporting users in carrying out tasks
efficiently, effectively, and satisfactorily.
Efficiency - an appropriate level of resources is required
Effectiveness - the task is completed to an appropriate quality
Satisfaction - the user experiences satisfaction in doing the work
If users can’t complete their tasks efficiently and effectively, the system is
faulty
‘If I can’t use it, it’s broken’
In the Internet arena, usability is crucial. Many potential customers are
simply unable to complete purchasing decisions because the process is
too complex.
User Experience Goals
Fun
Satisfying
Emotionally
fullfilling
Efficient to
use
enjoyable
Effective
to use
Easy to
remember
Rewarding
Usability
Goals
Entertaining
Easy to
learn
Safe to
use
Supportive of
creativity
Have good
utility
Aesthetically
pleasing
helpful
Motivating
Software Quality & Usability

Software Quality: The extent to which a software product
exhibits these characteristics






Functionality
Reliability
Usability
Efficiency
Maintainability
Portability
Some usability principles (‘heuristics’)









Navigation – I can find my way around
Functionality – I can do what I need to
Control – I’m in charge
Language – I understand the terminology
Help & support – I can get help when I need it
Feedback – I know what the system is doing
Consistency – I don’t have to learn new tricks
Errors – Mistakes are hard to make, easy to correct
Visual clarity – I can recognize things and the design is clear and
appealing.
Benefits



Like any quality activity, benefits are hard to quantify
for an individual project
There is ample research that supports incorporation
of usability activities as a cost-reduction mechanism
Typical figures quoted are a benefit of between 10:1
and 100:1 (that is, a saving of between $10 and $100
for every dollar spent).
What benefits can usability
provide?






Increased productivity for users
Increased usage levels
Reduced training and documentation costs
Reduced support costs
Reduced development time and cost
Minimisation of re-development and other postrelease work.
Costs
Conducting usability activities does
represent a cost
 Many organisations:

 overestimate
the cost of usability
 underestimate their own capability in the area
 underestimate the risks associated with
usability problems.
Barriers to embracing usability







Lack of knowledge about what usability means
Lack of knowledge about usability techniques
Tight delivery schedules
A feeling that ‘We already know what users want’ and that ‘Our
system is intuitive’
Perception that usability is expensive
Perception that usability activities are too hard to conduct
The optional nature of usability activities.
The trouble with Users




Any developer can tell you that users are lazy,
demanding, careless and incompetent
In particular, developers are often frustrated that so
many users apparently lack ‘computer literacy’
Some day we’ll hook up all the machines and eliminate
the middle-man
What can we do in the meantime? There are some
common strategies...
First strategy - Wait for them to
die
Strategy flaws
New ‘bad’ users will replace them
 There will always be some users who are
new to the current generation of
technology.

Second strategy - Wait for the superuser to
evolve
Strategy flaws
No noticeable recent evolutionary leaps
 Expert users are even less forgiving of
usability problems than novices...
 … so we have to deal with the users we’ve
got.

Third strategy - Educate them
Strategy flaw
Designing usable systems - 3
phases
Analysis - Understand the users and their
tasks
 Design - Apply this understanding during
design activities
 Evaluate - Validate design decisions to
see whether people can actually use the
system.

Analysis
Analysis - Understanding the
User
Who will use the system?
 What are their characteristics - age,
education, language, motivation, domain
knowledge, knowledge of computers?
 It is important that the development team
have a realistic view of the users.

Analysis - Understanding the
user’s tasks
How do people currently conduct the task?
 What is the context of use?
 What issues exist?
 What changes would users like?

Questions to Ask

Do you understand your users?

Do you understand the medium?

Do you understand technologies?

Do you have commitment?
Personas

“Hypothetical Archetypes”
 Archetype: (American Heritage Dictionary)
 An original model or type after which other similar things are
patterned; a prototype
 An ideal example of a type; quintessence

A precise description of a user and what they
want to accomplish
 Imaginary,
but precise
 Specific, but stereotyped

Real people have non-representative quirks
The Essence of Personas

Describe a person in terms of their



Goals in life (especially relating to this project)
Capabilities, inclinations, and background
People have a “intuitive” ability to generalize about real
and fictional people


We can have detailed discussions about what Harry Potter,
Imran Khan, or a shopkeeper will think or do.
They won’t be 100% accurate, but it feels natural to think about
people this way
Mental Model

Human (uses) understanding (conceptual model) of the way



Objects work
Events take place
People behave
Mental
Model
User
Uses object
Object
Perceive
Conceptual
Model
Design
Designer
Design object
Design





Ensure that the design is focused on meeting the users’
requirements
Use ‘personas’ or user profiles to ensure the
development team has a good knowledge of the users
Use scenarios to describe typical interactions, and base
the design on those scenarios
Use participatory design techniques
Design on paper.
Visibility

Correct parts must be visible

More visible functions are, more likely users will be able to know what to do
next

“Out of sight” functions make them difficult to use and find

Make relevant parts visible

This critical principle violated again and again in everyday things

Crucial parts carefully hidden away
Visibility – Good Example

Controls on a car

Controls for
different
operations




Indicators
Headlights
Horn
Hazard lights
Visibility Example

Modern Telephone
This is a control panel for an elevator.
• How does it work?
• Push a button for the floor you want?
• Nothing happens. Push any other
button? Still nothing. What do you
need to do?
It is not visible as to what to do!
Visibility Example

Many do not have large enough display

Forget sequence of steps, what was
entered before, and what to do next

Better to have television on-screen
programming
Other Examples


Song title for CDs
 Names of Television Programs
 Cooking information for foods on food
containers
Affordance

The presence and actual properties of a thing

These properties determine how the things could be used

Attribute of an object that allows people to know how to use it

To Afford - to give a clue

If affordances of a physical object are perceptually obvious, it is
easy to know how to interact with it.
Affordance - Examples
Sitting
pushing
pulling
Affordance - Examples
Bouncing
Solidity, Support
Inserting
Turning
Affordance in UI

Interface elements design
 Icons
 Scroll
bars
 Button
Affordance in UI

Hyperlinks – underlined (web)

Button – 3D (software, web)
Constraints

“Restricting the kind of user interaction
that can take place at a given moment in
time”

Prevents user from taking the wrong
actions
Types of Constraints

Physical

Logical

Cultural
Physical Constraints

Refer to the way physical objects restrict the movement of things

E.g. only one way you can insert a key into a lock

How many ways can you insert a CD or DVD disk into a computer?

How physically constraining is this action?

How does it differ from the insertion of a floppy disk into a computer
Designing them More Logically
(i) A provides direct adjacent
mapping between icon and
connector
(ii) B provides colour coding to
associate the connectors with
the labels
Mapping

Relationship between controls and their
effects in the world
Mapping

Why is this a better mapping?

The control buttons are mapped better onto the sequence of actions
of fast rewind, rewind, play and fast forward

Map configuration onto directionality of actions
Activity on Mappings

Which controls go with which rings
(burners)?
A
B
C
D
Why is this a Better Design?
Consistency

Design interfaces to have similar operations and use similar
elements for similar tasks

For example:


always use ctrl key plus first initial of the command for an operation –
ctrl+C, ctrl+S, ctrl+O
Main benefit is consistent interfaces are easier to learn and use
When Consistency Breaks
Down

What happens if there is more than one command starting with the
same letter?


Have to find other initials or combinations of keys, thereby breaking
the consistency rule


e.g. save, spelling, select, style
E.g. ctrl+S, ctrl+Sp, ctrl+shift+L
Increases learning burden on user, making them more prone to
errors
Internal and External
Consistency

Internal consistency refers to designing operations to behave the
same within an application


Difficult to achieve with complex interfaces
External consistency refers to designing operations, interfaces, etc.,
to be the same across applications and devices

Very rarely the case, based on different designer’s preference
Feedback

Sending information back to the user about what has been done

Includes sound, highlighting, animation and combinations of these

e.g. when screen button clicked on provides sound or red highlight
feedback:
“ccclichhk”
Heuristics and Usability Principles
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Help users recognize, diagnose, and recover from errors
Error prevention
Recognition rather recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation
(Nielsen)
Scene from a Shopping Mall
Saturday afternoon
 Head for shopping mall
 Want to buy a chainsaw


You may decide to ask someone instead
 This
depends on
Familiarity with store
 Your trust in the store’s ability to organize sensibly
 How much hurry you’re in
 How sociable you are

Web Navigation 101

You go through a similar process when
you enter a Web site:
 You
are trying to find something
 You
decide whether to ask first of browse first
Web Navigation 101

Search-dominant users
 Look
for search box as soon as they enter a
site

Link-dominant users
 Browse
first
 Search only if browsing fails
Problems with the Web Experience

Web experience similar to physical
experiences in the real world
 Moving
around in a space
 “Cruising”, “Browsing”, “Surfing”

Web experience misses many of the cues
we’ve relied on all our lives to negotiate
spaces
Problems with the Web Experience

No sense of scale
1
page? 100 pages? 50,000 pages?
 Have I missed something?

c/w magazine, museum, department store
 How

do I know when to stop looking
Coloring visited links
Problems with the Web Experience

No sense of direction
 No

left, right, up, down
No sense of location
 In
physical spaces, we accumulate knowledge
 Develop a sense of where things are
 Develop shortcuts
In the physical world …
On the Web …

No physical sense

Reliance on remembering conceptual hierarchy

Bookmarks


Back button


stored personal shortcuts
Accounts for 30-40% of Web clicks
Home Pages

Akin to North Star
Lack of Web’s Physicality
Plus side
 Sense of
weightlessness
 Easy to lose track of
time
Negative side
 Figuring out where
you are
 Figuring out how to
go from one place to
another
Definition of Navigation

It’s about doing two things
 Getting
from one place to another
 Figuring out where you are
Significance of Web Navigation

We don’t talk about “Department Store
Navigation” or “Library Navigation”

Navigation embodies the site’s hierarchy
creating a sense of space
Purpose of Web Navigation

Helps us find what we’re looking for

Tells us where we are
Purpose of Web Navigation

Tells us what’s here


Tells us how to use the site




Reveals content
Implicitly gives instructions
Where to begin
What options are available
Gives user confidence in builders

Good navigation creates good impression
Conventions for Navigating the
Physical World

Cities and Buildings
 Street

signs
Books and Magazines
 Page
numbers, chapter titles
Conventions for Navigation
Elements

Put them in a standard place

Standardize appearance
Web Navigation Conventions

Evolved from print media

Consist of ...
Global Navigation



A.k.a. Persistent Navigation
Should be consistent
Should consist of:
 Site
ID
 Sections
 Utilities
 Home
 Search
Global Navigation

Exceptions in consistency
 Home
Page
 Forms

e.g., e-commerce site
 Printable

pages
Exceptions can have minimal versions
Site ID (or Logo)

Building name for a Web site

Only need to see it once on a building

Need to see it on every page on the Web
 Why?
Primary mode of transportation is teleportation
Site ID (or Logo)

Placement
 Top

of page
Represents whole site
 Highest
thing in logical hierarchy of the site
Site ID (or Logo)

Two ways of getting primacy of site ID
across
 Most
prominent thing
 Make it frame everything else
Site ID (or Logo)

Two ways of getting primacy of site ID
across
 Most
prominent thing
 Make it frame everything else
Site ID (or Logo)

Should have certain attributes
 Distinctive
typeface
 Graphic recognizable at any size
Sections


A.k.a. ‘Primary
Navigation’
Links to main sections
of the site (top level)
Sub-sections
A.k.a. ‘Secondary Navigation’
 Links to sub-sections of a site (2nd level)

Utilities
Important elements
 Not part of site content
 Provide help or info about publisher

Utilities

Should be less prominent than sections
Utilities

Utilities will vary for different types of sites
Utilities

‘Home’ button provides reassurance

Site ID has dual role
 Provides
link to home page
Low-Level Navigation
Low-Level Navigation
Page Names

I love driving in LA
Page Names

Page Names are the street signs of the
Web

Need them as soon as something starts
going wrong

4 things about page names
“You are Here” Indicators

Where am I in the scheme of things
“You are Here” Indicators
“You are Here” Indicators
Breadcrumbs
Evaluation
Evaluation
The process of systematically collecting data
that informs us about what it is like for a
particular or group of users to use a
product for a particular task in a certain
type of environment
Trunk Test
Trunk Test

Imagine yourself:
 Blindfolded
 Locked
in trunk of car
 Driven around for a while
 And then ….
Trunk Test



Acid test for good Web navigation
True test isn’t if you can figure out given enough
time and close scrutiny
Elements should pop off the page
 Whether

looking closely or not
Reliance should be on overall appearance rather
than details
Trunk Test






What site is this? (Site ID)
What page am I on? (Page Name)
What are the major sections of this site? (Sections)
What are my options at this level? (Local navigation)
Where am I on the scheme of things? (“You are here”
indicators)
How can I search?
Trunk Test

Step 1
 Choose

Step 2
 Position

a page anywhere in the site (print)
yourself so you can study the page
Step 3
 Quickly
find and circle each item
Other Evaluation Techniques

Without Users
 Cognitive

Walkthroughs
With Users
 Thinkalouds
Evaluation
Every product undergoes usability testing but in many cases it happens in the field
where failure is costliest
 Evaluate early
 Evaluate often
 You must evaluate with real users
 Evaluation does not have to be expensive.

Conclusion





Usability can reduce costs
Usability activities can be conducted in-house
Embracing usability can impart a competitive advantage
Usability should be central to the design process
Usability is about Quality - you do your organisation and
your customers a disservice if you fail to design usercentred systems.
References
Special thanks to Mr. Imran Hussain of
UMT who provided me some of these
slides.
 Task Centered User Interface design

 http://hcibib.org/tcuid/

usability.gov