Top 5:

Usability Principles

1

PrinciplesErik Ralston

BIS BoF

April 15, 2010

What is Usability?

A subjective evaluation of how easily users achieve goals

Minimize user error and maximize user satisfaction

Learning in the short-term and efficiency in the long-termLearning in the short-term and efficiency in the long-term

2

What is Usability?

Communicated by user’s emotional response

Users either “love” or “hate” the application

“Mental Model” – A User’s internal understanding and expectations on how the system worksexpectations on how the system works

Often very different than the real system internals

“Intuitive” – Resonant with a user’s mental model

Easy to Learn

Familiar to Users

3

Understanding the User

“Intuition” is built from emotionally rooted expectations and beliefs (biases resulting from previous experiences)

Intuition is considered before reason

Everyone's intuition is different; you must ask the user!Everyone's intuition is different; you must ask the user!

Humans with neurologically hindered emotions often suffer from indecision and lack of motivation (Aboulia)

Not evoking emotion makes the user unmotivated

4

Understanding the User

Spock uses only

Vulcan logic

5

Understanding the User

Stephen uses only his gut

6

Understanding Errors

“Slip” – A temporary malfunction of the user

Typing an extra letter

Missing a click

“Mistake” – A mismatch between user’s mental model “Mistake” – A mismatch between user’s mental model and the real behavior of the system

Gulf of Execution

Gulf of Evaluation

More a continuum than absolute categories

Misspelling a word can be caused by either

7

Understanding Errors

8

Gulf of Execution

“I don’t know what to do???”

User can’t connect their goal to a decision in the interface

Users are unaware of a decision that affects their goal

9

Gulf of Evaluation

“What does that mean???”

“What did I just do???”, “Where am I???”

User can’t match current state to mental model

User can’t connect a previous decision with a new state

User was unaware they just made a decision that changed stateUser was unaware they just made a decision that changed state

The user just feels…

10

Gulf of Evaluation

11

What is an interface really?

An abstraction of the system for user interaction

Enables user to act on the system

Provides feedback from the system to the user

A purposeful barrier between the user and the systemA purposeful barrier between the user and the system

Protects user from complexity

Obfuscates even simple aspects of system

12

What is an interface really?

Decisions – Actions the user may perform on the system

Information – System data relevant to user

Instructions – Description of decisions or informationInstructions – Description of decisions or information

13

What is an interface really?

14

What is an interface really?

15

Engineering “Intuitive”

Suggestions for connecting interface to mental models

Managing presentation of information, decisions, and instructions

NOT infallible laws or requirements

Embody the fundamentals of all good designEmbody the fundamentals of all good design

Simplicity

Consistency

Clarity

Principles extend to some everyday items as well

16

#5: Progressive Disclosure

Maintain user focus by initially showing simple and relevant items; hiding advanced and rarely used items.items; hiding advanced and rarely used items.

17

Recognition

18

Recognition

19

Recognition

20

Recognition

21

Progressive Disclosure

22

Progressive Disclosure

Show the most common items and hide the rest

20% of the interface provides 80% of the functionality

Users can only read in a small radius; think 1 inch

If an item is uncommon or very complicated, hide it

Show users “their” information first (personalization)

If a task is recent, then show it first

23

#4: No Dead Ends(or Death Traps)

At no time should a conspicuously valid decision lead to At no time should a conspicuously valid decision lead to obstruction of the user goal, or even worse harm

24

No Dead Ends

25

No Dead Ends

26

No Dead Ends

27

No Dead Ends

28

No Dead Ends In Detail

If a user decision would cause a system error or invalid state, then that decision should be inaccessible

Hidden or disabled

If a user decision is ambiguous, then accept ambiguityIf a user decision is ambiguous, then accept ambiguity

Error messages should guide the users on how to re-establish a path to their goals

29

#3: Recognition Over Recall

Economize user memory by offering options instead of Economize user memory by offering options instead of forcing recall of previous information

30

Recognition Over Recall

Miller’s Law – Working memory is 7± 2 Items

31

Recognition Over Recall In Detail

If the user must remember something to make a decision, then provide them options to choose amongst

Essay or multiple choice?

If it’s a small idea, connect it to a large idea (Hierarchy!)If it’s a small idea, connect it to a large idea (Hierarchy!)

If it’s the same idea, give it the same name everywhere

32

#2: Fitt’s LawEase of reaching a goal is a function of size and distance

33

Fitt’s Law

34

Fitt’s Law in Detail

Size implies importance

If it’s used often, it should be big

Proximity implies relationships

If two elements are related, they should be close together

If two elements are unrelated, they should be far apart

Related elements elements should be adjacentRelated elements elements should be adjacent

Order implies path

Think about a visual and logical “path” for the user to follow

If a user must make a series of decisions, then they must be in a predictable order (ex: left-to-right or top-to-bottom)

35

#1: AffordanceThe possible actions for an object should be presented

obviously and consistentlyobviously and consistently

36

Affordance

Very Non-Standard Buttons

Interaction that is really distraction

Buttons that hide their destinationButtons that hide their destination

37

Affordance In Detail

Different combinations between possibility and reality

“Perceptible” visible and implemented decisions

“Hidden” invisible and implemented decisions

“False” visible and unimplemented decisions

Do not require interaction to understand the possibilities

Hovering shouldn’t be necessary, but perhaps clarifying

If it looks the same, it should behave the same

If it looks different, it should behave differently

38

Top 5 Usability Principles

#5: Progressive Disclosure – 80-20 Rule for Interfaces

#4: No Dead Ends – Remove invalid decisions

#3: Recognition Over Recall – Choice not memory#3: Recognition Over Recall – Choice not memory

#2: Fitt’s Law – Ease of use is distance and size

#1: Affordance – Action possibilities

39

#0: Ask the User!None of the principles are more useful than user opinion

Usability is about making the user happy

Only the user can decide when they are happy

You can’t make them happy if you don’t ask themYou can’t make them happy if you don’t ask them

Use the principles to guide the user

They can’t understand code, but they understand Usability

Use the principles to take the lead and most users will follow

40

Your Principles?

41

Other Places of Insight

Usability.gov

The guide to making government website “usable & useful”

OK/Cancel

A blog/web-comic on usability designA blog/web-comic on usability design

Windows User Experience Interaction Guidelines

Microsoft’s wisdom on User Experience

42

Questions?

43

Thank You!

44