User Interfaces at User Interfaces at PrincetonPrinceton

By Ryan Walsh ’06By Ryan Walsh ’06

PSY 322PSY 322

Spring 2004Spring 2004

User Interface Design User Interface Design HeuristicsHeuristics

Your possible audiencesYour possible audiences Remember that some people are blind or Remember that some people are blind or

hard of hearing, 10% of males cannot hard of hearing, 10% of males cannot distinguish colors well, people come in distinguish colors well, people come in different sizes, etc.different sizes, etc.

In general, do not ignore accessibility issues; In general, do not ignore accessibility issues; handicapped and elderly people matter too.handicapped and elderly people matter too.

Visibility of system statusVisibility of system status Always keep the user aware of what the Always keep the user aware of what the

system is doing.system is doing. Notify the user of expected delays (with a Notify the user of expected delays (with a

specific length of time).specific length of time).

Simple and natural dialogSimple 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-Present information in a natural, easy-to-

follow order.follow order. Consistency and standardsConsistency and standards

input syntaxinput syntax language and graphicslanguage and graphics effectseffects

Mistakes and errorsMistakes and errors Always provide easy-to-find exits. (Ensure Always provide easy-to-find exits. (Ensure

user freedom.)user freedom.) Allow “undo” and “redo” functions when Allow “undo” and “redo” functions when

possible.possible. Make the system robust so that user errors Make the system robust so that user errors

are impossible.are impossible.

Recognition rather than recallRecognition rather than recall Use icons and other visible objects that are Use icons and other visible objects that are

easily-identifiable.easily-identifiable. Clarify desired input format, provide example, Clarify desired input format, provide example,

and provide default.and provide default. Flexibility and efficiency of useFlexibility and efficiency of use

Provide shortcuts. Allow creation of more Provide shortcuts. Allow creation of more shortcuts.shortcuts.

Enable “type-ahead” and any other forms of Enable “type-ahead” and any other forms of prediction / anticipation to decrease time.prediction / anticipation to decrease time.

Navigation should always be visible, clear, and Navigation should always be visible, clear, and “jumpable.”“jumpable.”

History should be logged, and users should be History should be logged, and users should be able to revisit past locations.able to revisit past locations.

Fitts’s LawFitts’s Law The time to acquire a target is a The time to acquire a target is a

function of the distance to and function of the distance to and size of the target.size of the target.

As an example, on a computer As an example, on a computer screen, the 5 easiest places for screen, the 5 easiest places for a mouse pointer to reach are: a mouse pointer to reach are: where it is currently located, or where it is currently located, or any of the 4 infinitely-deep any of the 4 infinitely-deep corners of the screen.corners of the screen.

User’s precious time (more User’s precious time (more expensive than most machines’)expensive than most machines’) Keep the user busy. If a lot of Keep the user busy. If a lot of

processing / computations needs to be processing / computations needs to be done, get done, get allall the possible user input the possible user input first, then notify the user that he/she first, then notify the user that he/she can leave, and can leave, and thenthen process everything process everything at once.at once.

Enable multithreading so that Enable multithreading so that computations can be performed in the computations can be performed in the background.background.

User’s precious time (continued…)User’s precious time (continued…) Aim for zero learning curve, where the user can Aim for zero learning curve, where the user can

walk up and instantly know how to achieve walk up and instantly know how to achieve success with the system. Employ familiar success with the system. Employ familiar metaphors if necessary.metaphors if necessary.

Cherish / secure / save the user’s work. Time Cherish / secure / save the user’s work. Time and money have been spent on it, so do not and money have been spent on it, so do not allow it to be lost through mistakes.allow it to be lost through mistakes.

Explore how the user could be happier (and Explore how the user could be happier (and therefore more productive) through methods of therefore more productive) through methods of customization or personal layout changes.customization or personal layout changes.

Less is moreLess is more aesthetic and minimalist design: too aesthetic and minimalist design: too

much information diminishes the much information diminishes the relative visibility (and hence, perceived relative visibility (and hence, perceived importance) of key featuresimportance) of key features

less to learn, get wrong, or distractless to learn, get wrong, or distract

ControlsControls 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 objectives should be obvious based on

their locations.their locations. Optional remote controls provide freedom.Optional remote controls provide freedom. Protect against their accidental use Protect against their accidental use

(especially if severe consequences).(especially if severe consequences). Use combos logically (e.g. CTRL + ALT only if Use combos logically (e.g. CTRL + ALT only if

you want that keystroke to be more difficult you want that keystroke to be more difficult than normal).than normal).

Dual controls (e.g. two switches for same Dual controls (e.g. two switches for same lightbulb) need to be used carefully, if at all.lightbulb) need to be used carefully, if at all.

Help and documentationHelp and documentation Make the system as if you were not to offer Make the system as if you were not to offer

any help (but then include thorough Help any help (but then include thorough Help sections anyway).sections anyway).

should be friendly, should be friendly, positive, positive, searchable, searchable, concreteconcrete

should be available in different forms (e.g. for should be available in different forms (e.g. for users who are just beginning, for users who users who are just beginning, for users who are in a panic, or for users who want to are in a panic, or for users who want to become more advanced)become more advanced)

PicturesPictures

ConclusionsConclusions

Testers reported some UIs at Princeton as Testers reported some UIs at Princeton as better (and more acceptable) than I would better (and more acceptable) than I would have guessedhave guessed

Still, we were able to make amateur Still, we were able to make amateur suggestions for improvements of these suggestions for improvements of these professionally-designed systemsprofessionally-designed systems

It does not matter that the tiny changes in It does not matter that the tiny changes in themselves are negligible: ergonomics is themselves are negligible: ergonomics is about cumulative attention to detail with the about cumulative attention to detail with the goal of improving goal of improving overalloverall happiness and happiness and productivityproductivity