User Interface Design Principles

Gabriel Spitz

1

Lecture # 4

Today

Why do we need UI design principles

List of UI design Principle

And - Show how they contribute to usability

Gabriel Spitz

2

What is a usable Product

A product that meet the 5 S of usable product Easy to learn – no need for special instructions or lots

of manuals Efficient – minimal number of steps to complete a task Effective – ability to complete tasks with no errors Engaging – fun to use Error tolerant – easy to recover from errors

Gabriel Spitz

3

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 Spitz

4

Usability and Product Success

Gab

riel S

pit

z

5

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

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 Spitz

6

Key UI Design Principles

Gabriel Spitz

7

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 Spitz

8

1) Know Your User

S/he is not you

Effective user interface is one that is compatible with and focuses on 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 Spitz

9

Self Check-In Kiosk

Gabriel Spitz

10

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 Spitz

11

Gabriel Spitz

12

Let the user decide whether to continue or logout

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 Spitz

13

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 Spitz

14

Using Metaphor– CD Control

Gabriel Spitz

15

Using Metaphor - PIM

Gabriel Spitz

16

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 Spitz

17

Consistent Menu and Tool Bars

Gabriel Spitz

18

Consistency is not Always Good

Gabriel Spitz

19

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 Spitz

20

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 Spitz

21

Effective Feedback

Gabriel Spitz

22

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 Spitz

23

Poor Visibility

Gabriel Spitz

24

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 Spitz

25

Supporting Memory Limitation

Gabriel Spitz

26

One way of supporting memory limitation is to use name recognition

Supporting Memory Limitation

Gabriel Spitz

27

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

Supporting Memory Limitation

Gabriel Spitz

28

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 Spitz

29

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 Spitz

30

Poor Aesthetics

Gabriel Spitz

31

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 Spitz

32

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 Spitz

33

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 Spitz

34

Summary

UI design principles are important design-aid

Don’t sign off on a design without verifying that your design meets the above UI design principles

Different UI designers have their own set of key design principles, but more often than not there is an overlap among the various sets

Gabriel Spitz

35