1. Design Principles – Part 2 of 3 Learnability Principles Flexibility Principles Last revised 9/2010

2. UI Design - Georgia Tech2 Learnability: Predictability Determining effect of future actions based on past interaction history Operation visibility  Can see avail actions –menus vs. command shell  Grayed out menu items

3. UI Design - Georgia Tech3 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?

4. UI Design - Georgia Tech4 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?

5. UI Design - Georgia Tech5 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?

6. UI Design - Georgia Tech6 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

7. UI Design - Georgia Tech7 (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

8. UI Design - Georgia Tech8 (In)Consistency Example - Macintosh Drag a file icon to: Folder on same physical disk Folder on another physical disk Different disk Trash can Result: File is moved to folder File is copied there File is discarded

9. FSM’s can Reveal Inconsistencies 9UI Design - Georgia Tech

10. 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 - ???

11. UI Design - Georgia Tech11 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

12. UI Design - Georgia Tech12 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

13. Example – PPt Spell Check UI Design - Georgia Tech13

14. UI Design - Georgia Tech14 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

15. UI Design - Georgia Tech15 Flexibility: Substitutivity Drafting & page layout systems  Indicate positions with cursor or  By typing in coordinates Point at spreadsheet cell vs enter name Give temperature via slider or by typing Other examples???

16. UI Design - Georgia Tech16 Flexibility: Customizability Ability of user to modify interface  By user - adaptability –Is this a good thing?  By system - adaptivity –Is this a good thing?

17. UI Design - Georgia Tech17 Customizing Toolbars in Powerpoint Pros and cons of using?

18. UI Design - Georgia Tech18 End Part 2 of 3