Usability and Design Principles

Usability Goals
User Experience Goals
Generic Design Principles
Usability

▪ Usability is a quality attribute that assesses how easy user

interfaces are to use

▪ Some usability goals include:

- Effectiveness
- Efficiency
- Safety
- Utility
- Learnability
- Memorability

https://www.nngroup.com/articles/usability-101-introduction-to-usability/

Usability Goal 2
Usability Goals

▪ Effectiveness
- Is about whether users can complete their goals with the system
- Question: is the system doing what it is supposed to do?
e.g. payment system, word processors, e-commerce system

Usability Goal 3
Usability Goals

▪ Efficiency
- Effective, ok; but efficient?
- Considers how much time/number of steps it will take users to
perform their tasks
- Systems that require the least time/number of steps are usually
considered as being efficient
- Criteria: time to complete a task; # of operations to complete a
task

Usability Goal 4
Example

Usability Goal 5
Example

Usability Goal 6
Example

Usability Goal 7
Usability Goals

▪ Safety
- prevent making serious/unrecoverable errors
- provide means of recovering from errors
- undo options, confirmation dialogs
- Question: does it prevent users from making/recovering from
serious errors?
- Criteria: number of errors/time to recover from error
- e.g., Dropbox

Usability Goal 8
Usability Goals

▪ Utility
- sufficient functionality to accommodate range of users tasks
- Question: does it provide sufficient functionality for users to
carry out tasks as naturally as possible?
- Criteria: availability of core tasks
e.g. accounting packages, drawing tools

Usability Goal 9
Usability Goals

▪ Learnability
- important if system will be adopted by the user
- A more learnable system is one that reduces the time it takes to
complete tasks as users spend more time with a system faster
than others
- Question: can primary (core) and secondary tasks be learned
quickly and easily?
- Criteria: time to learn a task, errors made in learning a task
e.g. smartphone?

Usability Goal 10
Usability Goals

▪ Memorability
- concerned with how easy to remember once learned
- important goal to include if systems will be used infrequently
- Should the designer include meaningful icons, menu items, etc…
- Question: will users remember all the steps used for carrying out
a task?
- Criteria: time or errors made in carrying out a task after system
is learned

Usability Goal 11
Example

▪ How long should it take to learn to use the following products?

How long does it actually take? How memorable are they?

- Using an authoring tool to create a website

- Setting up a wireless router

Usability Goal 12
Example

▪ A user should be able to produce a basic web site in 20-30 mins.

Most packages do achieve this goal (e.g., allowing the user publish
content in web format). Some more complex operations will take
longer, but users can learn and remember basic functionality
relatively easily.

▪ Setting up a wireless router or access point is difficult to learn. It

typically requires completing many steps, with terminology that is
unfamiliar to most users. Many users are not able to do this at all
and have to call for help from the “Geek Squad”. If its memorable,
its because the user really wants to learn how to do it.

Usability Goal 13
User Experience Goals

▪ User experience goals are concerned with the quality of the user’s
experience with the system
▪ They should enhance the user’s experience

Usability Goal 14
User Experience Goals

▪ A set of user experience goals include:

- Aesthetically pleasing: subjective
- Satisfying: productive
- Motivating: did not feel like giving up
- Enjoyable: no frustrations were encountered
- Fun: excited about using it again
- Supportive of creativity: drawing tools
- Entertaining: games
- Rewarding: sense of productivity
- Helpful: clueless but still made it through

Usability Goal 15
 User Experience vs. Usability

▪ Usability goals could take primary importance but not always

▪ User experience goals are not easily measured
▪ In some cases less-usable systems increase the user experience,
indirect relationship (nintendo power pads for racing vs. hand
pads/joysticks)
▪ Have to balance the tradeoffs between user experience and
usability goals, i.e. be selective

Nintendo power pads: https://www.youtube.com/watch?v=JjS71YRCBw4

Usability Goal 16
Discussion

▪ What are the key usability and user experience goals of these
systems:
- a ticket dispenser
- a painting application

Usability Goal 17
Discussion

▪ The following are criteria for the usability goals of a ticket

dispenser:

- Learnability: can a user learn to use the system for the first time
in less than 2-3 minutes?

- Memorability: if a user of the ticket dispenser has not used the

dispenser in 2 months, will he/she be able to user it properly
again?

- Efficiency: will the user of the ticket dispenser be able to select,

purchase and get a ticket in less than a couple of minutes?

▪ User experience goals:

- Motivating, aesthetically pleasing, enjoyable

Usability Goal 18
Discussion

▪ The following are criteria for the usability goals of a paint

application:

- Learnability, efficient, memorable , utility

- Support creativity, aesthetically pleasing

Usability Goal 19
Discussion

▪ Think about one appliance/device at your home.

- What would be two important usability goals for the device?

- Translate the core goals outlined above into two criteria (specific
and measurable)
- Do you feel the designers of these appliances satisfied the goals
you outlined above?

Usability Goal 20
Question

▪ Provide an example of applications in which several user

experience goals were ‘sacrificed’ for the benefit of the overall
usability.

▪ And vice versa, think of a couple of applications in which the

usability goals may have not been met for the purpose of
enriching the user’s experience.

Usability Goal 21
Answer

▪ An example of the first: online e-transfer is not fun and enjoyable

but yet more efficient than driving the car to the bank, finding a
spot to park, waiting in line and making the transfer.

▪ An example of the second: a drawing utility used by artists, which

can support creativity (user experience goal) but will not provide
the same level of efficiency or even as effective as done
manually.

Usability Goal 22
Generic Design Principles

▪ Generic “rules of thumb” that describe features of “usable”

systems

▪ Guidelines of what to include and what not to include when

designing an interface

▪ Derived from practice, theory, and research

▪ Used later in heuristic evaluation

Usability Goal 23
Design Principles

▪ Design principles are used by interaction designers to aid their

thinking when designing for the user experience

▪ More specifically, they are intended to help designers explain and

improve their designs

▪ A number of design principles have been promoted

▪ We will briefly cover the most common ones

Usability Goal 24
Generic Design Principles

▪ Visibility ▪ Matching

▪ Feedback
▪ Minimizing memory load

▪ Constraints
▪ Diagnose/Recover errors
▪ Mapping

▪ Control and freedom

▪ Consistency

▪ Affordance ▪ Flexibility

▪ Simplicity ▪ Provide Help

Usability Goal 25
Design Principle - Visibility

▪ Visibility
- Visibility is the basic principle that the more visible an element is,
the more likely users will know about them and how to use them

- Advocates the use of making core user functions clearly

apparent, hides secondary user functions

- Visible properties guides users into what to do next

Usability Goal 26
Design Principle - Visibility

▪ Problems arise when we cannot “see” how to do use a device

▪ Sensor technology like auto faucets - not sure how to use - guess
where to put hands
▪ Visible knobs, dials and buttons have been replaced by invisible
and ambiguous “active zones”

Usability Goal 27
Windows 8

Usability Goal 28
Design Principle - Visibility

▪ From hamburger menus to tab-bar menus to improve the visibility

of their key experiences

Tab bar style

Hamburger
menu Usability Goal 29
Design Principle - Feedback

▪ Feedback
- continuously inform the user about the system’s state
- how it is interpreting the user’s input
- user should at all times be aware of what is going on

What’s it
> Doing it Time for
doing? > Doing it
This will take coffee.
5 minutes...

Usability Goal 30
Design Principle - Feedback

▪ Various kinds of feedback are available for interaction design

- Audio (Verbal, non-verbal)
- Tactile
- Visual
- And combinations of these

No indication of the files being

installed but still gives %
Multiple files being copied,
feedback is file by file.

Usability Goal 31
Design Principle - Feedback

Reduce users’ perception of time Usability Goal 32

Design Principle - Feedback

▪ Paint.net

What did I
select?

What mode
am I in now?

Usability Goal 33
Design Principle - Feedback

▪ Should be as specific as possible, based on user’s input

▪ Best within the context of the action

Usability Goal 34
Design Principle - Feedback

▪ Response time
- how users perceive delays
0.1 second max: perceived as ‘instantaneous’
0.7 second max: visual-motor reaction time to unexpected
events
10 seconds: limit for keeping user’s attention focused on the
dialog
> 10 seconds: user will want to perform other tasks while
waiting, i.e. get a cup of coffee

Usability Goal 35
Design Principle - Constraints

▪ Constraints
- restricts the kinds of user actions that can take place for any
given mode of interaction
- A common design practice in graphical user interfaces is to
deactivate certain menu options by shading them gray

Restricts user
actions

date picker date picker

Usability Goal 36
Design Principle - Constraints

Usability Goal 37
Design Principle - Constraints

Usability Goal 38
Design Principle - Mapping

▪ Mapping
- relate controls to the intuitive understanding of how they should
be used
e.g., mapping of down and up arrows on a scroll bar to the
movement of a document on a screen
- relationship to controls and their effect

Usability Goal 39
Design Principle - Mapping

Usability Goal 40
Design Principle - Consistency

▪ Designing interfaces to have similar operations and use similar

elements for achieving similar task
▪ Systems are usable and learnable when similar concepts are
expresses in similar ways
▪ Enables people to quickly transfer prior knowledge to new
contexts and focus on relevant tasks

Usability Goal 41
Design Principle - Consistency

▪ Consistency
- Consistent results
same words, commands, actions will always have the same
effect in equivalent situations - leads to predictability
- Consistent language and graphics
same information/controls in same location on all screens /
dialog boxes

Ok Cancel Cancel Ok Ok Done Never Mind Accept Dismiss

Cancel

- Consistent input
consistent syntax across complete system
“Ctrl+C”/“Ctrl+V” for Copy/Paste in Windows

Usability Goal 42
Design Principle - Consistency

▪ Aesthetic
- Style and appearance is repeated to enhance recognition,
communicates membership and sets emotional tone
- Mercedes Benz vehicles are instantly recognizable because the
company consistently feature its logo on all its vehicles
- Associated with quality and prestige; respected

Usability Goal 43
Design Principle - Consistency

▪ Functional
- Meaning and action are consistent to improve learnability and
understanding
- Consistent use of symbols to represent similar concepts,
leverages prior knowledge and makes new things easier to use
- Traffic always turns yellow before red

Usability Goal 44
Design Principle - Consistency

▪ Internal
- Is the consistency of elements within the same system (e.g. road
signs in Canada are consistent across different parts of the
country).
- Internal consistency helps cultivate trust and communicates that
a system is designed as a whole rather than a random collection
of pieces

Usability Goal 45
Design Principle - Consistency

▪ External
- consistent with other elements in the environment
- extends the benefit of internal consistencies across multiple,
independent systems
- more difficult to achieve because different systems rarely
observe the same design standards

Usability Goal 46
Design Principle - Affordance

▪ Affordance
- At a very simple level, to afford means "to give a clue"
- Perceived and actual properties of an object that give clues to its
operation

Usability Goal 47
Design Principle - Affordance

▪ Appearance indicates how the object should be used

- chair for sitting
- table for placing things on
- knobs for turning
- slots for inserting things into
- buttons for pushing

Usability Goal 48
 Perceived Affordances

Sliders for
sliding
Dials
for
turning
Buttons for
pressing (?)

Is this a
button?

Usability Goal 49
Design Principle - Affordance

One item can be selected

Multiple items can be selected

Usability Goal 50
Example of a Bad Affordance

▪ Handles are for lifting, but these are for scrolling

▪ from AudioRack 32, a multimedia application

Usability Goal 51
Design Principle - Simplicity

▪ Common tasks should be easy to perform

▪ Provide only the necessary, “less is more”

▪ Don’t give users extra problems to solve

▪ Remove or hide irrelevant or rarely needed information

- competes with important information on screen

Usability Goal 52
 Design Principle - Simplicity

Godaddy old website Usability Goal 53

 Design Principle - Simplicity

Godaddy new website Usability Goal 54

Usability Goal 55
Usability Goal 56
Design Principle - Matching

▪ Match between system and real world

- speak the user’s language

▪ Terminology based on users’ language for task

▪ e.g. withdrawing money from a bank machine

user’s language

Usability Goal 57
Design Principle - Matching

▪ Use meaningful mnemonics, icons, and abbreviations

Usability Goal 58
Design Principle - Minimizing memory load

▪ Build on existing mental models

▪ People already have mental models about how a system work,
based on their past experiences of using the system
▪ Promote recognition over recall

Usability Goal 59
Design Principle – Diagnose/Recover errors

▪ Errors are inevitable, users will make them!

▪ Errors we make
- Mistakes:
arise from conscious deliberations that lead to an error
instead of the correct solution

- Slips:
unconscious behavior that gets misdirected en route to
satisfying a goal, e.g. drive to store, end up in the office

Usability Goal 60
Slip vs. Mistake

▪ Imagine you are using a mapping

application wanted to find
something, and clicked this icon.

▪ Let’s pretend that in the

application, the icon meant to
magnify.

▪ Is this a slip or a mistake?

Usability Goal 61
General Guidelines

▪ Include helpful constraints

Usability Goal 62
General Guidelines

▪ Offer suggestions Choose good defaults

Usability Goal 63
General Guidelines

▪ Use forgiving formatting Confirm before destructive actions

Usability Goal 64
General Guidelines

▪ Warn before errors are made

▪ Example: twitter character count warning

Usability Goal 65
Provide Meaningful Error Messages

No other choices provided!

“This action will not save the game”

Usability Goal 66
Provide Meaningful Error Messages

Usability Goal 67
Guidelines for Error Messages

▪ Shneiderman’s guidelines for error messages include:

- Have a positive tone: avoid using terms like FATAL, INVALID,
BAD
- Be specific and address the problem in the user’s terms: avoid
obscure internal codes (Error code 102E: …)
- Put users in control: tell them what they should do to recover
and continue
- Use a consistent interface and comprehensible format
- Provide context-sensitive help

Usability Goal 68
Discussion

▪ Re-write the following common error messages using a friendlier

language. The message should explain the cause and suggest a
method for fixing the problem. For each message imagine a
context in which the problem will occur:

- SYNTAX ERROR
- INVALID FILE NAME
- INVALIDE DATA
- DRIVE ERROR: ABORT, RETRY OR FAIL?

Usability Goal 69
Activity - Answer

▪ There is a problem with the way you have written the command.
Check for typos.

▪ You cannot use ‘/’ or ‘?’ in a file name. Please choose another file
name.

▪ This field will only accept numeric data. Try again, checking that
only numbers are used.

▪ There is a problem with reading your disk. Try inserting it again.

SYNTAX ERROR
INVALID FILE NAME
INVALIDE DATA
DRIVE ERROR: ABORT, RETRY OR FAIL? Usability Goal 70
Design Principle - Control and freedom

▪ Use a clearly marked "emergency exit" to leave the unwanted

state without having to go through an extended dialogue

How do I
get out
of this?

Usability Goal 71
Design Principle - Control and freedom

▪ Users don’t like to feel trapped by the computer!

- should offer an easy way out of as many situations as possible

▪ Strategies:
- Cancel button (for dialogs waiting for user input)
- Undo (can get back to previous state)
- Interrupt (especially for lengthy operations)
- Quit (for leaving the program at any time)
- Defaults (for restoring a property sheet)
Core
Dump

Usability Goal 72
Design Principle - Flexibility

▪ The design accommodates a wide range of individual preferences

and abilities.
▪ Example: a museum that allows visitors to choose to read or listen
to the description of the contents of a display case.

Usability Goal 73
Design Principle - Flexibility

▪ Shortcuts: Experienced users should be able to perform

frequently used operations quickly

▪ Strategies:
- Provide keyboard and mouse accelerators (commands, function
key, double click)
- Support type-ahead (entering input before the system is ready
for it)

Usability Goal 74
Design Principle - Provide Help

▪ Tutorial and/or getting started manuals

▪ Reference manuals
▪ Reminders
▪ tooltips (hints)

▪ Context-sensitive help

Usability Goal 75
Types of help

▪ Wizards
- Walks user through typical tasks

Usability Goal 76
From Principles to Goals

Usability Goal 77
What did we cover

▪ Purpose for setting usability and user experience goals

▪ Types of usability and user experience goals
▪ Balance between choice of usability and user experience goals
▪ A set of design principles
▪ Adhering to the principles promotes designers’ usability goals

Usability Goal 78
Book (Optional Reading)

▪ The Design of Everyday Things - Don Norman

The Soul of a New Machine's cover

▪ The Soul of a New Machine - Tracy Kidder

Usability Goal 79
Question?

Usability Goal 80