Gabriel Spitz1

Gabriel Spitz2

Light Switch Issues

• Consistency – The switch design is inconsistent with common light switches

• Visibility – No visible cue regarding on/off operation

• Affordance – The switch design does not suggest how should it be operated

User Characteristics & Design Principles

Gabriel Spitz3

Lecture # 4

Objective of this lecture

• Describe a set of important UI design principles

• Place these principles within the context of human characteristics and show how they contribute to usability

Gabriel Spitz4

Achieving Usability

• A key approach to achieving good usability is to continuously iterate our design with users • But iterations consume resources

• To minimize the number of iterations we capitalize on our collective past experience to create as usable design as we can already on our first design cycle

• Usability principles are our collective past experience and can help us maximize usability early in the design

Gabriel Spitz5

Usability and Product Success

Gabri

el Spit

z

6

MS BOB Renault 4 circa 1970

Users rejected anthropomorphisms Negative transfer of training resulting in many errors

• Ignoring usability can impact the bottom line and safety

Quality of the Interaction - Usability

Efficiency Effectiveness Acceptance

Learnability Error/Safety Satisfaction

PerformanceSpeed Memorability Task completion

Usability of anapplication

UsabilityIndicators

Gabriel Spitz7

• Effective interaction is determined by the goodness of fit between interface design and user’s characteristics, needs, task requirements

Martijn van Welie (2001)

What is a UI Design Principle

• Knowledge gained from past design experience and usability studies about how to impact the usability indicators

• It’s a guide post pointing the way to a usable design

• It is not by itself an end or a rule

• One should try and follow it when it makes sense, and deviate from it when needed

Gabriel Spitz8

UI Design Principles

• Know your user

• Let the user control the interaction

• Capitalize on what the user already knows

• Maintain consistency at the interface

• Provide effective feedback

• Expose the interaction to the user

• Minimize reliance on user memory

• Minimize the impact of user error

• Aesthetic matters

• Always test your interface with users

Gabriel Spitz9

1) Know Your User

• S/he is not you

• Effective user interface is one that is compatible with and focuses on the users and their tasks. It considers:• General human characteristics • Characteristics of our application’s users

• Domain specific vocabulary• Computer literacy• General education

• Task specific characteristics of your users• Touch typists

• Frequency of task performance

Gabriel Spitz10

Self Check-In Kiosk

Gabriel Spitz11

Designed for the general traveling population –

What can you assume about the users of this system?

2) Let the User Control the Interaction

• People want to control their environment

• Software applications should be designed to support the users, their task, and their interaction style

• Constraining users’ action is fine

• Controlling users’ action should be avoided

• Controllability can impact user satisfaction

Gabriel Spitz12

Ways to Increase User Control

• Don’t force users to perform a task in a predetermined way• Allow Select & than create an account or vice

versa

• Always allow users to change their mind cancel out

• Allow users to save partial work such as forms

Gabriel Spitz13

3) Capitalize on what Users Know

• Using metaphors or familiar idioms (cut & paste) at the interface will enable users to instantly understand the details of the application

• Reusing knowledge will significantly reduce the amount of learning needed to achieve proficiency

Gabriel Spitz14

Using Metaphor– CD Control

Gabriel Spitz15

Using Metaphor - PIM

Gabriel Spitz16

4) Maintain Consistency

• Consistency enables users to anticipate events and reuse learned behaviors -Positive Transfer

• It is achieved by reusing UI design patterns within and between applications• Complying with standards or guidelines for

example

• Reuse of knowledge reduces learning and enhances performance

Gabriel Spitz17

Consistent Menu and Tool Bars

Gabriel Spitz18

Consistency is not Always Good

Gabriel Spitz19

Usability is maximized by reusing usable elements – Duplicating bad design will result in a consistently bad design

This is a poor design for water temperature control and rinsing soapy hands

When Inconsistency is Good

• Inconsistent pattern or design can be used to attract user attention and prevent an automated response e.g., The delete dialog box

Gabriel Spitz20

5) Provide Effective Feedback

• Feedback closes the action loop and “enables” the user to continue with his/her task or sequence of actions

• Effective feedback is feedback that is provided to users:• Immediately following their action• At an appropriate level

• E.g., Action, Context, System state level

• At an appropriate place• E.g., at the locus of attention

• Feedback improves performance and learning

Gabriel Spitz21

Effective Feedback

Gabriel Spitz22

6) “Expose” the Interaction to the User

• Let the user see clearly the functions that are available at the interface

• Exposing the interaction facilitates learning and performance

• Recall the action Model by D. Norman

Gabriel Spitz23

Poor Visibility

Gabriel Spitz24

7) Minimize Reliance on Memory

• Ability of users to recall commands, object names, sequence of actions, etc. is limited

• Make the interface visual with limited reliance on recall

• Allow selection rather than relying on users to remember a command or object name

• Exceeding memory limits hinders performance-errors and speed

Gabriel Spitz25

Supporting Memory Limitation

Gabriel Spitz26

One way of supporting memory limitation is to use name recognition

Supporting Memory Limitation

Gabriel Spitz27

A better way of supporting memory limitation is to capitalize on both name recognition and visual recognition

Supporting Memory Limitation

Gabriel Spitz28

Another way of supporting memory limitation with both name recognition and visual recognition

8) Minimize the Impact of Error

• Cost of errors impacts user performance• We are all afraid to err or loose our work

• When possible enable users to reverse their actions• Undo• Confirm delete

• Else, limit the cost of error • Auto Save

• But don’t over protect the user

• Easy recovery from errors enhances user satisfaction and performance

Gabriel Spitz29

9) Aesthetics Matter

• Consider function first, form later• But don’t ignore form

• Form or presentation often sets the moods of the user which in turns impacts users’ experience

• Form or presentation facilitates:• Visual scanning of a dialog box, window, page• Location or detection of objects

• Aesthetics enhances user satisfaction and performance

Gabriel Spitz30

Poor Aesthetics

Gabriel Spitz31

Poor alignment

Inconsistent use of colors

Also poor task flow

Use of color to convey information in the interface should be accompanied with clear secondary cues

If red vs. green is the only way to tell which section is within bounds, about 6% of all users will have trouble telling the difference (9% Male, 2% Female)

Everyone is colorblind in low light

Gabriel Spitz32

Use Colors carefully

10) Always Test Your Interface

• We don’t have strong models of the human operator/user

• We can not predict (but can anticipate) how certain design attributes will effect performance or satisfaction

• We use testing to assess and refine our designs

Gabriel Spitz33

Main Points

• Effective interaction design is built on understanding how human act and the factors that impact human activity within a given context

• Many of these factors have been captured by UI design principles

• Adhering to these design principles will significantly enhance the usability of an interface

Gabriel Spitz34