User Interfaces at Princeton By Ryan Walsh ’06 PSY 322 Spring 2004

User Interface Design Heuristics Your possible audiences Your possible audiences Remember that some people are blind or hard of hearing, 10% of males cannot distinguish colors well, people come in different sizes, etc. Remember that some people are blind or hard of hearing, 10% of males cannot distinguish colors well, people come in different sizes, etc. In general, do not ignore accessibility issues; handicapped and elderly people matter too. In general, do not ignore accessibility issues; handicapped and elderly people matter too. Visibility of system status Visibility of system status Always keep the user aware of what the system is doing. Always keep the user aware of what the system is doing. Notify the user of expected delays (with a specific length of time). Notify the user of expected delays (with a specific length of time).

Simple and natural dialog Simple and natural dialog Follow real-world conventions. Follow real-world conventions. Speak the user’s language. Speak the user’s language. Present information in a natural, easy-to-follow order. Present information in a natural, easy-to-follow order. Consistency and standards Consistency and standards input syntax input syntax language and graphics language and graphics effects effects Mistakes and errors Mistakes and errors Always provide easy-to-find exits. (Ensure user freedom.) Always provide easy-to-find exits. (Ensure user freedom.) Allow “undo” and “redo” functions when possible. Allow “undo” and “redo” functions when possible. Make the system robust so that user errors are impossible. Make the system robust so that user errors are impossible.

Recognition rather than recall Recognition rather than recall Use icons and other visible objects that are easily- identifiable. Use icons and other visible objects that are easily- identifiable. Clarify desired input format, provide example, and provide default. Clarify desired input format, provide example, and provide default. Flexibility and efficiency of use Flexibility and efficiency of use Provide shortcuts. Allow creation of more shortcuts. Provide shortcuts. Allow creation of more shortcuts. Enable “type-ahead” and any other forms of prediction / anticipation to decrease time. Enable “type-ahead” and any other forms of prediction / anticipation to decrease time. Navigation should always be visible, clear, and “jumpable.” Navigation should always be visible, clear, and “jumpable.” History should be logged, and users should be able to revisit past locations. History should be logged, and users should be able to revisit past locations.

Fitts’s Law Fitts’s Law The time to acquire a target is a function of the distance to and size of the target. The time to acquire a target is a function of the distance to and size of the target. As an example, on a computer screen, the 5 easiest places for a mouse pointer to reach are: where it is currently located, or any of the 4 infinitely-deep corners of the screen. As an example, on a computer screen, the 5 easiest places for a mouse pointer to reach are: where it is currently located, or any of the 4 infinitely-deep corners of the screen.

User’s precious time (more expensive than most machines’) User’s precious time (more expensive than most machines’) Keep the user busy. If a lot of processing / computations needs to be done, get all the possible user input first, then notify the user that he/she can leave, and then process everything at once. Keep the user busy. If a lot of processing / computations needs to be done, get all the possible user input first, then notify the user that he/she can leave, and then process everything at once. Enable multithreading so that computations can be performed in the background. Enable multithreading so that computations can be performed in the background.

User’s precious time (continued…) User’s precious time (continued…) Aim for zero learning curve, where the user can walk up and instantly know how to achieve success with the system. Employ familiar metaphors if necessary. Aim for zero learning curve, where the user can walk up and instantly know how to achieve success with the system. Employ familiar metaphors if necessary. Cherish / secure / save the user’s work. Time and money have been spent on it, so do not allow it to be lost through mistakes. Cherish / secure / save the user’s work. Time and money have been spent on it, so do not allow it to be lost through mistakes. Explore how the user could be happier (and therefore more productive) through methods of customization or personal layout changes. Explore how the user could be happier (and therefore more productive) through methods of customization or personal layout changes.

Less is more Less is more aesthetic and minimalist design: too much information diminishes the relative visibility (and hence, perceived importance) of key features aesthetic and minimalist design: too much information diminishes the relative visibility (and hence, perceived importance) of key features less to learn, get wrong, or distract less to learn, get wrong, or distract

Controls Controls Make them distinguishable by touch. Make them distinguishable by touch. Allow them sufficient spacing. Allow them sufficient spacing. Place them well within reach. Place them well within reach. Their objectives should be obvious based on their locations. Their objectives should be obvious based on their locations. Optional remote controls provide freedom. Optional remote controls provide freedom. Protect against their accidental use (especially if severe consequences). Protect against their accidental use (especially if severe consequences). Use combos logically (e.g. CTRL + ALT only if you want that keystroke to be more difficult than normal). Use combos logically (e.g. CTRL + ALT only if you want that keystroke to be more difficult than normal). Dual controls (e.g. two switches for same lightbulb) need to be used carefully, if at all. Dual controls (e.g. two switches for same lightbulb) need to be used carefully, if at all.

Help and documentation Help and documentation Make the system as if you were not to offer any help (but then include thorough Help sections anyway). Make the system as if you were not to offer any help (but then include thorough Help sections anyway). should be friendly, positive, searchable, concrete should be friendly, positive, searchable, concrete should be available in different forms (e.g. for users who are just beginning, for users who are in a panic, or for users who want to become more advanced) should be available in different forms (e.g. for users who are just beginning, for users who are in a panic, or for users who want to become more advanced)

Pictures

Conclusions Testers reported some UIs at Princeton as better (and more acceptable) than I would have guessed Testers reported some UIs at Princeton as better (and more acceptable) than I would have guessed Still, we were able to make amateur suggestions for improvements of these professionally- designed systems Still, we were able to make amateur suggestions for improvements of these professionally- designed systems It does not matter that the tiny changes in themselves are negligible: ergonomics is about cumulative attention to detail with the goal of improving overall happiness and productivity It does not matter that the tiny changes in themselves are negligible: ergonomics is about cumulative attention to detail with the goal of improving overall happiness and productivity