TH6204

Advanced User Interface

Topic 2
Design and Usability Principles

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Usability Goals

Effective to use
Efficient to use
Safe to use
Have good utility
Easy to learn
Easy to remember how to use

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Effectiveness
Refers to how good a product is at doing
what it is supposed to do
Question :
Is the product capable of allowing people to
learn, carry out their work efficiently, access
the information they need, or buy the goods
they want?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Efficiency
Refers to the way a product supports users
in carrying out their work their task
Question:
Once users learn have learned how to use a
product to carry out their tasks, can they
sustain a high level of productivity?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Safety
Involves protecting the user from
dangerous condition and undesirable
situations
Question:
What is the range of errors that are possible
using the product and what measures are
there to permit users to recover easily from
them?

tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Utility
Refers to the extent to which the product
provides the right kind of functionality so
that users can do what they need or want
to do.
Question:
Does the product provide an appropriate set of
functions that will enable users to carry out all
their tasks in the way they want to do them?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Learnability
Refers to how easy a system is to learn to
use
Question:
Is it possible for the user to work out how to
use the product by exploring the interface and
trying out certain actions?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Memorability
Refers to how easy a product is to
remember how to use, once learned
Question:
What kinds of interface support have been
provided to help users remember how to carry
out tasks, especially for products and
operations they use infrequently?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

User experience goals

satisfying
aesthetically pleasing
enjoyable
supportive of creativity
engaging
supportive of creativity
pleasurable
rewarding
exciting
fun
entertaining
provocative
helpful
surprising
motivating
enhancing sociability
emotionally fulfilling
challenging

boring
frustrating

annoying
cutsey

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

BACKGROUND THEORIES

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Background Theories

Human Memory
Human Processor Model
Motor Behaviour Model
Mental Model
Normans Interaction Model

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Human Memory
Encoding is first stage of memory
determines which information is attended to
in the environment and how it is interpreted

The more attention paid to something,

and the more it is processed in terms of
thinking about it and comparing it with
other knowledge
the more likely it is to be
remembered
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Human Memory
Sensory memory
Attention

Short-term memory or working

memory
Rehearsal

Long-term memory
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Human Memory - retrieving

recall
information reproduced from memory can
be assisted by cues, e.g. categories,
imagery

recognition
information gives knowledge that it has
been seen before
less complex than recall - information is
provided as cue
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Memory and Context

Context affects the extent to which
information can be subsequently
retrieved
Sometimes it can be difficult for
people to recall information that
was encoded in a different context

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Memory and Context

Example:
You are on a train and someone comes up to
you and says hello. You dont recognise him for
a few moment but then realise it is one of your
neighbours. You are only used to seeing your
neighbour in the hallway of your apartment
block and seeing him out of context makes him
difficult to recognise initially

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Millers 7 + 2 Theory (1956)

Short-term memory (STM) capacity is limited
by the number of chunks or meaningful units
of information
Example of chunks:
0, 1, 7, 6, 7, 6, 9, 1, 5, 3 10 chunks
pile, gate, road, pump, bell, lime 6
chunks
There is an apple on the table ??
Based on experiments by George Miller
(1965), STM can only store 7+2 chunks
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

What some designers get up

to

Present only 7 options on a menu

Display only 7 icons on a tool bar
Have no more than 7 bullets in a list
Place only 7 items on a pull down menu
Place only 7 tabs on the top of a website
page
But this is wrong! Why?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Why?
Inappropriate application of the theory
People can scan lists of bullets, tabs, menu
items for the one they want
They dont have to recall them from memory
having only briefly heard or seen them
Sometimes a small number of items is good
But depends on task and available screen
estate

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Human Processor Model

(Card et al, 1983)

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Human Information Processing

System
External world
Human
Information
processor

Receptors
(perception)

Working
Memory

Effectors
(motor actions)

Processor

Long-Term Memory

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Motor Behaviour Model Fitts Law

Fitts' Law describes the movement time to hit a
screen target as:
Mt = a + b log2(D/S + 1)
where:
Mt is time to move the hand to a target
a and b are empirically determined constants
D is Distance between hand and target
S is Size of target

targets as large as possible distances as small

as possible

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Motor Behaviour Model Fitts Law

The bigger the target, the quicker it is to reach it

interfaces that have big buttons are easier to
use than interfaces with lots of tiny buttons
crammed together

The most quickly accessed target are the four

corners of a screen (due to thepinningaction)

Fitts law was used to predict expert text entry

rates on a 12-key Nokia mobile phone

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Mental Model

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Mental Model
Craik (1943) described mental models as
internal constructions of some aspect of the
external world enabling predictions to be
made
Involves unconscious and conscious
processes, where images and analogies are
activated
Deep versus shallow models (e.g. how to
drive a car and how it works)

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Mental Model
Users develop an understanding of a
system through learning and using it
Knowledge is often described as a
mental model
How to use the system (what to do next)
What to do with unfamiliar systems or
unexpected situations (how the system
works)

People make inferences using mental

models of how to carry out tasks
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Erroneous Mental Model

Many people have erroneous mental
models (Kempton, 1996)

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Erroneous Mental Model

You arrive home from being out all night,
starving hungry. You look in the fridge and
find all that is left is an uncooked pizza. The
instructions on the packet say heat the oven
to 375oF and then place the pizza in the
oven for 20 minutes. Your oven is electric.
How do you heat up?
Do you turn it up to the specified
temperature, or higher ?
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Erroneous Mental Model

Why?
General valve theory, where more is more
principle is generalised to different settings
(e.g. gas pedal, gas cooker, tap, radio
volume)
Thermostats based on model of on-off
switch model
Electric ovens work like a thermostat
when the switch is on, it keeps heating at a
constant speed until the desired
temperature set is reached, at which point
it stops heating
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Erroneous Mental Model

Same is often true for understanding
how interactive devices and computers
work:
Poor, often incomplete, easily confusable,
based on inappropriate analogies and
superstition (Norman, 1983)
e.g. elevators and pedestrian crossings - lot
of people hit the button at least twice
Why? Think it will make the lights change
faster or ensure the elevator arrives!

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Normans Interaction Model

Seven stages
1. user establishes the goal
2. formulates intention
3. specifies actions at interface
4. executes action
5. perceives system state
6. interprets system state
7. evaluates system state with respect
to goal
Normans model concentrates on users
view of the interface
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

execution/evaluation loop
goal
execution

evaluation

system
user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

execution/evaluation loop
goal
execution

evaluation

system
user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

execution/evaluation loop
goal
execution

evaluation

system
user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

execution/evaluation loop
goal
execution

evaluation

system
user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

How realistic?
Human activity does not proceed in such an
orderly and sequential manner
More usual for stages to be missed, repeated
or out of order
Do not always have a clear goal in mind but
react to the world
Theory is only approximation of what happens
and is greatly simplified
Help designers think about how to help users
monitor their actions

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

The gulfs
The gulfs explicate the gaps that exist
between the user and the interface
The gulf of execution
the distance from the user to the physical system while the
second one
users formulation of actions actions allowed by the
system

The gulf of evaluation

the distance from the physical system to the user

users expectation of changed system state

actual presentation of this state

Need to bridge the gulfs in order to reduce the

cognitive effort required
to perform a task
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Bridging the gulfs

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

DESIGN PRINCIPLES

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Design Principles
1.Form follows function
2.Visibility
3.Mapping
4.Feedback
5.Affordance
6.Forgiveness
7.Constraints
8.Consistency
9.Minimalism

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Form Follows Function

An objects or entitys form (shape or appearance)

emerges from its purpose or reason for being
Shape follows function, not function follows shape
Eg. Passenger jets

Passenger jets the shape is designed to fly

Door knobs/handles to be held and turn
Cups to be held and contain liquid
Chairs

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility

Describes how easily the user can find

the functions that the program or
website offers

Examples of poor visibility:

Function is accessible only from a single
screen/page
User has to remember the exact path to that
screen/page
Too many elements are presented to the user
at once
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility
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!
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility
you need to insert your room
card in the slot by the buttons
to get the elevator to work!
How would you make this
action more visible?
make the card reader more
obvious
provide an auditory message,
that says what to do (which
language?)
provide a big label next to the
card reader that flashes when
someone enters

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility
What do I do if I am
wearing black?
Invisible automatic
controls can make it
more difficult to use

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility
Some

designers try to ease visibility

problems by limiting views of menus to
most-often used items / recently selected
Users are confused with the changes
solving one visibility problem can
cause another
Eg. Tab control
A tab control should only contain one
row of tabs
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Visibility

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Mapping

The relationship between a control, the thing it

affects, and the outcome that results when the
control is operated

Eg. Kitchen stove,

Eg. Buttons that clearly and simply indicate their
function icons

Sometimes the icon chosen can seem silly

Controls that require text labels to convey
meaning of them indicate poor mapping
combination of icons and labels offers the best
combination of clarity
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Mapping
Poor mapping

Good mapping

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

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

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Feedback

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Affordance
Describes

the perceived function of an

object based on our cultural
understanding of that object
Refers to an attribute of an object that
allows people to know how to use it
e.g. a mouse button invites pushing, a door handle
affords pulling
A

well-designed control gives clues

about its purpose
Eg.: different shapes of door knobs
indicate different ways to operate them
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Perceived Affordance
Interfaces are virtual and do not have
affordances like physical objects
Norman argues it does not make sense to
talk about interfaces in terms of real
affordances
Instead interfaces are better
conceptualized as perceived affordances
Learned conventions of arbitrary
mappings between action and effect at
the interface
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my
Some mappings
are better than others

Affordance
Physical affordances:
How do the following physical objects
afford? Are they obvious?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Affordance
Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Forgiveness

To err is human . But I forgive you .

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Forgiveness

Software should be designed to help

keep users from making serious
mistakes, and help them recover from
the mistakes they make

Eg:
Auto-saving documents
Palm combines the features of computers and
paper & pencil
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Constraints
Restricting the possible actions that can be
performed
Helps prevent user from selecting incorrect
options
Physical objects can be designed to constrain
things
Examples:
only one way you can insert a key into a lock
Vertical and horizontal scroll bar

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

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
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

When consistency breaks down

What happens if there is more than one
command starting with the same letter?
e.g. save, spelling, select, style

Have to find other initials or combinations of

keys, thereby breaking the consistency rule
e.g. ctrl+S, ctrl+Sp, ctrl+shift+L

Increases learning burden on user, making

them more prone to errors
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

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
designers preference

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Internal and external

consistency
A case of external inconsistency
(a) phones, remote controls
1

(b) calculators, computer keypads

8

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Minimalism
A deliberate reduction in complexity for
users benefit
Eg:

Minimise the number of clicks

Reduce the amount of distance the mouse
must move to access the most often-used
controls

Reduce decorative embellishments

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Duelling Principles
Design principles often conflict with one
another
Consider the needs of the user first
Eg. Visibility vs minimalism

Visibility keep all controls visible on the

same page
Minimalism only display most frequently
used controls

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

USABILITY PRINCIPLES

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Principles to Support
Usability
Can be divided into 3 categories
1. Learnability
2. Flexibility
3. Robustness

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Principles of learnability

the ease with which new users can begin

effective interaction and achieve maximal
performance
1. Synthesizability
2. Predictability
3. Familiarity
4. Generalizability
5. Consistency
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Synthesizability
Learnability

Users ability to assess the consequences of

previous interactions in order to formulate a
model of behaviour of the system
Important for building correct mental model
Eg. Copying a file from into another directory

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Predictability Learnability

Users ability to determine the effect of future

interactions with the system (using the mental
model built)
Deals with users ability to:
Determine the effect of operation on the
system
Know which operations can be performed

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Familiarity Learnability

Measures the correlation between the users

existing knowledge and the knowledge required
for effective interaction
Users first impression of the system
Supported by:
Affordance
Metaphor

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Metaphor
A

description of a certain new concept or

understanding based on existing
knowledge of a similar concept or
understanding
An analogy
Represented visually or verbally
Examples of metaphors in user interface:
Desktop for operating environment
Travel for browsing web documents
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Desktop Metaphor
Analogy of file management and office tasks, which is
represented visually like a table top in the office, which
contains:
folders
documents in folders
folder
recycle bin for unused documents
Recycle bin

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Digital Skeuomorphs
Skeuomorph - "a physical ornament
or design on an object made to
resemble another material or
technique
it makes it easier for those familiar
with the original device to use the
digital emulation and that it is
visually appealing
Eg.
tsmeriam@ukm.edu.my;
Audio processing
software packages
nsa@ukm.edu.my

Digital Skeuomorphs

Contacts
in iOS 6

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Digital Skeuomorphs

iBooks in
iOS 6

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Digital Skeuomorphs

Notes in
iOS 6

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Arguments Against
Skeuomorphism
skeuomorphic interface elements use metaphors
that are more difficult to operate and take up
more screen space than standard interface
elements
breaks operating system interface design
standards
causes an inconsistent look and feel
between applications

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Consistency Learnability

Likeness in input/output behaviour arising from

similar situations or task objectives

Increase users comfort, allowing them to focus on

their work rather than the interface

Aspects:
Controls and contents Same location and look
(fonts and shapes/symbols)
Softwares operation
Language (terms, instructions, commands)

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Generalizability
Learnability

Allow users extend their specific interaction

knowledge to new situations that are similar by
previously not encountered

Can be seen as consistency

Eg. (within application)

Drawing a circle as a constrained form of ellipse
drawing a square as a constrained form of rectangle

Eg. (across application)

Cut/paste/copy operations in multi-windowing systems
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Principles of flexibility

the multiplicity of ways in which the

user and system exchange
information
1. Dialog Initiative
2. Multi-threading
3. Task Migratability
4. Substitutivity
tsmeriam@ukm.edu.my;
5. Customizability
nsa@ukm.edu.my

Dialog Initiative Flexibility

Allowing the user freedom from
artificial constraints on the input
dialog imposed by the system
System-driven vs. user-driven
User-driven users are entirely free
to initiate any desired communication
System-driven needed for safety
reasons or during critical tasks:
Eg: during installations

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Multithreading Flexibility
ability of system to support user
interaction for more than one task at a
time
concurrent vs. interleaving;
multimodality
Eg:
To open a window, the user can choose between
a double click on an icon, a keyboard shortcut,
or menu open window
Overlapping tasks
on a windowing system
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Task Migratability
Flexibility
Ability to pass control for the execution of a given
task so that it becomes either internalised by the
user or the system or shared between them
Control of executions can be transferred between
users and system
Eg. Spell-checker
Computer can check words automatically
Users can distinguish between correct and unintentional
duplications or error

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Substitutivity Flexibility
allowing equivalent values to be substituted for
each other
Eg.
To set margin for a letter, you can either :
input the value explicitly, eg. 6.5
Or, you can put a fraction, eg. 2/3, which is equivalent
to the range of (8.5 6.5 inches)
In a spreadsheet program, the values in the cells produced
by calculation of the program (output) can be used as
input values for other calculations

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Customizability Flexibility
modifiability of the user interface by user
(adaptability) or system (adaptivity)
Adaptability users ability to adjust the format of
I/O (very limited)
Eg.: Position of buttons, redefine command names
Adaptivity automatic customization of the user
interface by the system, based on observed
repetitions of the sequence
Eg.: suggestions of words or phrases
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Principles of robustness

the level of support provided to the

user in determining successful
achievement and assessment of goals
1. Observability
2. Recoverability
3. Responsiveness
4. Task conformance
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Observability Robustness
ability of user to evaluate the internal
state of the system from its
perceivable representation
Relates to operation visibility

tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Recoverability
Robustness
ability of user to take corrective action once an error
has been recognized
forward/backward recovery
Forward recovery acceptance of the current state
and negotiation from that state towards the desired
state
Backward recovery an attempt to undo the effect of
previous interaction
Eg: undo when users mistyped
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Responsiveness Robustness
measures the rate of communication between the
user and the system response time
Favourable response time:
Instant user perceives the system reactions
immediate
Stable duration for identical or similar actions
does not vary much
Eg :
pull-down menus are expected to pop up
instantaneously as soon as a mouse button is
pressed
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my

Task Conformance
Robustness
degree to which system services
support all of the user's tasks the user
wishes to perform and in the way the
user understands them
Deals with task completeness and task
adequacy
Task completeness the coverage
Task adequacy users understanding
of the tasks
tsmeriam@ukm.edu.my;
nsa@ukm.edu.my