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
UI Design - Georgia Tech 3
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?
UI Design - Georgia Tech 4
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?
UI Design - Georgia Tech 5
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?
UI Design - Georgia Tech 6
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
UI Design - Georgia Tech 7
(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
UI Design - Georgia Tech 8
(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
UI Design - Georgia Tech 10
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 - ???
UI Design - Georgia Tech 11
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
UI Design - Georgia Tech 12
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
UI Design - Georgia Tech 13
UI Design - Georgia Tech 14
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
UI Design - Georgia Tech 15
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???
UI Design - Georgia Tech 16
Flexibility: Customizability
• Ability of user to modify interface By user - adaptability
– Is this a good thing?
By system - adaptivity– Is this a good thing?
UI Design - Georgia Tech 17
Customizing Toolbars in Powerpoint
• Pros and cons of using?
UI Design - Georgia Tech 18
End Part 2 of 3
Top Related