design principles - department of computer...

Design Principles

Oct 21, 2016

Questions

Fall 2016 Comp 3020 2

Overview of Today’s Lecture

More design principles

Fall 2016 3Comp 3020

Design Principles

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

Guidelines concerning what to include and what not to include in an interface

Derived from practice, theory, and research

Used later in heuristic evaluation and referred to then as usability principles

Conducted by experts (user involvement not required)

Very effective at catching design flaws early in design process

Fall 2016 Comp 3020 4

Design Principles

VisibilityConstraintsFeedbackMappingConsistencyAffordanceSimplicityMatchingMinimize memory loadDiagnose/recover from errorsControl and freedomFlexibilityProvide Help

Fall 2016 Comp 3020 5

Design Principle #7: Simplicity

“In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away”

Antoine de Saint Exupery

Fall 2011 COMP 3020 6


Common tasks should be easy to performE.g., minimize the number of steps

Use the minimum amount of visual information to effectively communicate design goals

Simplicity leads to quickly recognized and understood functionality

Less information == less time to process

Simplicity also promotes memorability

Less to remember

Fall 2011 COMP 3020 7


Minimize number of controls and graphical elements

Include only those that are necessary

Eliminate, or relegate others to secondary windows, etc.

Minimize clutter

Clutter hides important information

Fall 2011 COMP 3020 8


Fall 2011 COMP 3020 9

VS


When possible, use simple but meaningful images rather than text to convey instructions/information

Fall 2011 COMP 3020 10

Design Principle #8: Matching

Match between system and real world

Speak the user’s language

Any terminology should be based on user’s language for the task

Fall 2011 COMP 3020 11

VS.

Design Principle #8: Matching

Use meaningful mnemonics, icons, and abbreviations

e.g. File/Save

Ctrl + S (abbreviation)

Alt FS (mnemonic for menu action)

Disk (icon)

How meaningful is this now?

Fall 2011 COMP 302012

Design Principle #9: Minimize Memory Load

Computers are good at remembering things, people aren’t!

Leverage what we know about human memory. E.g.,

Promoting recognition over recall

Use chunking to reduce short-term memory load

Fall 2011 COMP 3020 13

Design Principle #10: Diagnose/Recover from Errors

No matter how good your design is, users will make errors

Fall 2011 COMP 3020 14

Types of Errors

Mistakes: 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

shows up frequently in skilled behavior

often arises from similarities of actions

Fall 2011 COMP 3020 15

Types of Slips

Capture error

Frequently done activity takes charge instead of one intended

occurs when common and rarer actions have same initial sequence

Telling someone your cell number when you intended to give your work number

Clicking “OK” in a delete file dialogue box when you don’t want to delete it

Fall 2011 COMP 3020 16

Types of Slips

Description error

Intended action has much in common with others that are possible

Usually occurs when right and wrong objects physically near each other

pour milk into bowl instead of glass

move file to trash instead of to folder

Fall 2011 COMP 3020 17

Types of Slips

Loss of activation

Forgetting what the goal is while undergoing the sequence of actions

start going to room and forget why you are going there

navigating menus/dialogs and can’t remember what you are looking for

but continue action to remember (or go back to beginning)

Fall 2011 COMP 3020 18

Types of Slips

Mode errors

People do actions in one mode thinking they are in another

refer to file that’s in a different directory

look for commands / menu options that are not relevant

Fall 2011 COMP 3020 19

Designing for Slips

General rules

Prevent slips before they occur

Detect and correct slips when they do occur

Allow for user correction through feedback and undo

Fall 2011 COMP 3020 20

Designing for Slips: Examples

mode errors

have as few modes as possible (preferably none)

make modes highly visible, e.g. edit/view modes

capture errors

on top of confirmations, make actions undoable

allows reconsideration of action by usere.g. Recycle bin can be opened and “deleted” file taken back out

Fall 2011 COMP 3020 21

Designing for Slips: Examples

loss of activation

if system knows goal, make it explicit

if not, allow person to see path taken

description errors

in icon-based interfaces, make sure icons are not too similar

check for reasonable input, etc.

Fall 2011 COMP 3020 22

Generic System Responses for Errors

Gag

deals with errors by preventing the user from continuing

E.g., can’t continue until correct password is entered

Warn

warn people that an unusual situation is occurring

when overused, becomes an irritant

Self-correct

system guesses legal action and does it instead

but incorrect guessing leads to trust issues

E.g., auto capitilization

Fall 2011 COMP 3020 23


Do nothingillegal action just doesn’t do anything

user must infer what happenedenter letter into a numeric-only field (key clicks ignored)

put a file icon on top of another file icon (returns it to original position)

Lets talk about itsystem initiates dialog with user to come up with solution to the problem

compile error brings up offending line in source code

Fall 2011 COMP 3020 24


Teach me

system asks user what the action was supposed to have meant

action then becomes a legal one

Learning systems

Fall 2011 COMP 3020 25

Error Messages

Be helpful with error messages

Fall 2011 COMP 3020 26

Error Messages

Fall 2011 COMP 3020 27

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

Put users in control: tell them what they should do to recover and continue

Use a consistent interface and comprehensible format

Audio warnings should not be embarrassing

Provide context-sensitive help, F1

Fall 2011 COMP 3020 28

Activity

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– INVALID DATA– DRIVE ERROR: ABORT, RETRY OR FAIL?

Fall 2011 COMP 3020 29

Activity

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.

Fall 2011 COMP 3020 30

Design Principle #11: 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 dialogues 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)

Ways to enable/disable automatic featurese.g., auto-correct

Fall 2011 COMP 3020 31

Design Principle #12: Flexibility

Shortcuts: Experienced users should be able to perform frequently used operations quickly

Strategies:

acceleratorsE.g., command completion, menu shortcuts, function keys

navigation jumpse.g., going to window/location/page directly, and avoiding intermediate nodes

type-ahead (entering input before the system is ready for it)

history systems WWW: ~60% of pages are revisits

Fall 2011 COMP 3020 32

Design Principle #12: Flexibility

If an application has a diverse user base, it is difficult (if not impossible) to design it to suit all needs

One solution: provide options for personalization

Application properties: font sizes, zoom settings, save locations

Interface control structures (e.g., toolbars)

Fall 2011 COMP 3020 33

Design Principle #13 –Provide Help

• Help is not a replacement for bad design

• Simple systems:

– walk up and use; minimal instructions required

• Most other systems:

– Feature rich

– Some users will want to become “experts” rather than “casual” users

– Intermediate users need reminding, plus a learning path

Fall 2011 COMP 3020 34

Types of Help

Tutorials and on-line tours

Short guides that typically describe how to complete specific tasks

People look for these online when they get “stuck” or want to expand their skill sets

Demonstrate very basic principles through working examples

Fall 2011 COMP 3020 35

Types of Help

Manuals

Used mostly for detailed lookup by experts

Rarely introduces concepts

Thematically arranged

Key features:

Search / find

Table of contents

Index

Fall 2011 COMP 3020 36

Types of Help

Reminders

E.g.,Tooltips (hints)

Text over graphical items indicates their meaning or purpose

Context-sensitive help

System provides help on the interface component the user is currently working with

Fall 2011 COMP 3020 37

Types of Help

Wizards

Walks user through typical tasks

But dangerous if user gets stuck or wants to deviate from the path

Tips

Migration path to learning system features

Also context-specific tips on being more efficient

Must be “smart”, otherwise boring and tedious

Fall 2011 COMP 3020 38

From Principles to GoalsDesign Guideline Usability Goal(s)

Visibility Efficiency, Learnability

Feedback Memorability

Constraints Efficiency, Safety

Mapping Effectiveness, Efficiency, Learnability, Memorability

Consistency Efficiency, Learnability, Memorability

Affordance Learnability

Simplicity Efficiency, Learnability, Memorability

Matching Efficiency, Learnability

Minimizing Memory Load Learnability, Memorability, Efficiency

Diagnose/Recover from Errors Safety

Control/Freedom Safety

Flexibility Efficiency, Memorability

Provide Help Safety, Efficiency, Learnability,

Fall 2011 COMP 3020 39

design principles - department of computer...

Documents