design principles – part 2 of 3 learnability principles flexibility principles last revised 9/2010

Design Principles – Part 2 of 3

Learnability PrinciplesFlexibility Principles

Last revised 9/2010

UI Design - Georgia Tech 2

Learnability: Predictability• Determining effect of future actions

based on past interaction history

• Operation visibility Can see avail actions

– menus vs.command shell

Grayed out menuitems


Mental Models - Aid Predictability• Mental models are not always right• May be too superficial

Functional model– Stimulus - response– “Press the accelerator once, then turn the key”– At surface or superficial level

Structural model– Deeper sense of why it happens, not just what happens– “Press the accelerator to engage the automatic choke

on a carburetor”• Do you have a perfect mental model of

Microsoft Word?


Learnability: Familiarity

• Does UI task leverage existing real-world or domain knowledge? Guessability Familiar affordances Use of metaphors

– Potential pitfalls

Are there limitations on familiarity?


Learnability: Consistency• Likeness in behavior between similar

tasks/operations/situations/terminology Interaction sequences

– Quicken on Mac – Option-P prints check, not current document

Output– Dialogue box always has a close button

Screen layout– Menu items always in same place - leverage “muscle

memory”• Is this always desirable for all systems, all

users?


Consistency (cont’d)• Avoid special cases and special rules• Supports generalization by user,

avoids frustration• For command line systems - consistent

syntax• Find consistency between commands,

unify them - as in Unix pipes for file I/O and for process inter-communications


(In)Consistency Example

• For a graphics program that uses a CSO (Currently-Selected Object) Create a new primitive, it becomes the

CSO Duplicate a primitive, the old primitive

remains as CSO


(In)Consistency Example - MacintoshDrag a file icon to:

Folder on same physical diskFolder on another physical diskDifferent disk

Trash can

Result:File is moved to folder

File is copied there

File is copied there

File is discarded

FSM’s can Reveal InconsistenciesMove command

Select and drag object Object repositioned

Return to neutral

Select objectEnter rotation angle

Perform rotation Prompt user to confirm

User accepts rotation Rotation becomes permanent

User rejects rotation rotation undone

Delete command

Select object Object deleted

Return to neutral

Help

Done with help

Help on move command

N E U T R A L S T A T E

Move state

Object selected

State diagram of a user interface with an inconsistent syntax.

9UI Design - Georgia Tech


Flexibility: Dialog Initiative• Not hampering the user by placing

constraints on how dialog is done User drives - preferred

– User initiates actions– More flexible, generally more desirable

System drives– System does all prompts, user responds

• A strict sequence is needed– Sometimes necessary

• Example – installing new software• Example - ???


Flexibility: Multithreading

• Allowing user to perform more than one task at a time A big complaint about iPhone and iPad

• Windows and Mac OS support


Flexibility: Task Migratability• Ability to move performance of task to

the entity (user or system) that can do it better Dynamic ‘function allocatoin’• For what kinds of tasks should the user be

in control?• What happens if system does things the

user is not expecting?• First time a word-processor did auto formatting?

• Example - Spell-checking DWIM – Do What I Mean

Example – PPt Spell Check



Flexibility: Substitutivity• Flexibility in how actions are specified

Allow user to choose suitable interaction methods; accelerators

Allow different ways to – perform actions, specify data, configure

Allow different ways of presenting output– to suit task

& user


Flexibility: Substitutivity• Drafting & page layout systems

Indicate positions with cursoror

By typing in coordinates• Point at spreadsheet cell vs enter name• Give temperature via slider or by typing• Other examples???


Flexibility: Customizability

• Ability of user to modify interface By user - adaptability

– Is this a good thing?

By system - adaptivity– Is this a good thing?


Customizing Toolbars in Powerpoint

• Pros and cons of using?


End Part 2 of 3

design principles – part 2 of 3 learnability principles flexibility principles last revised 9/2010

Documents