first principles of interaction design al larsen presentation notes for dms 546/dms 446. subject...

First Principles of Interaction Design

Al Larsen presentation notes for DMS 546/DMS 446. Subject headings and italicized statements are from “First Principles of Interaction Design” copyright Bruce Tognazzini see: http://www.asktog.com/basics/firstPrinciples.html

First Principles of Interaction Design 1 Anticipation2 Autonomy3 Color Blindness4 Consistency5 Defaults6 Efficiency of the User7 Explorable Interfaces8 Fitts' Law

9 Human-Interface Objects10 Latency Reduction11 Learnability12 Metaphors13 Protect the User's Work14 Readability15 Track State16 Visible Interfaces


Anticipation


Anticipation:The interface options should reflect the task that the user is trying to

accomplish, and anticipate their next moves.

for instance: When the user chooses the type tool, display the typeface and type

formatting options.

On a university website, when the user views the course catalog for a term, provide links for registration and to the academic calendar for that term.

Applications should attempt to anticipate the user’s wants and needs. Do not expect users to search for or gather information or evoke necessary tools. Bring to the user all the information and tools needed for each step of the process.


Autonomy


THIS IS SLIDE 6 OF 232 SLIDES.

First Principles of Interaction DesignAutonomy:Give users enough information that they know what the state of the system

is, or how much work remains or what stage of work they are at so that they can adjust their expectations and pace themselves accordingly.

Example: “You have completed page 2 of 5.”Example: “Notice: (null)(): [ALERT] Mailbox is at 90% of quota in Unknown

on line 0”Question: How could this warning message be better from a usability

standpoint?

Use status mechanisms to keep users aware and informed.

Keep status information up to date and within easy view.


Color Blindness


Color Blindness

Example: see Washington Center website

Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information...

Most people have color displays nowadays, but they are not universal. In addition, approximately 10% of human males, along with a rare sprinkling of females, have some form of color blindness.

Secondary cues can consist of anything from the subtlety of gray scale differentiation to having a different graphic or different text label associated with each color presented.


Consistency

Especially - consistency in how the interface work.

Inconsistency: [...] Make objects that act differently look different.

The most important consistency is consistency with user expectations.

The only way to ascertain user expectations is to do user testing.


Defaults


Defaults:User should be able to easily change default settings.

Use more descriptive language than “default” in messages to user.

Defaults should be easy to "blow away:"

Defaults should be "intelligent" and responsive.

Do not use the word "default" in an application or service. Replace with "Standard," "Use Customary Settings," "Restore Initial Settings," or some other more specific terms describing what will actually happen.


Efficiency of the User


Efficiency of the User:

Streamline the user's process: simplify operation of physical controls reduce confusion and mental effort.

Look at the user's productivity, not the computer's.

...which of the following takes less time? Heating water in a microwave for one minute and ten seconds or heating it for one minute and eleven seconds?

Don't make the user wait for the system. (see also: Latency) maximize everyone’s efficiency, not just the efficiency of a single group.


Efficiency of the User (continued):

Design with the efficiency of the whole organizational workflow in mind.

Interface design is about user productivity not the surface details. Interface design needs to be done in cooperation with the engineers.

Write help messages that are actually helpful to the user.

Label options so that the user can quickly scan them.

Menu and button labels should have the key word(s) first.


Explorable Interfaces


Explorable Interfaces: Open paths for experts and curious users. Direct paths for novice users.

Don’t trap users into a single path through a service, but do offer them a line of least resistance.

A single-use application for accomplishing an unknown task requires a far more directive interface than a habitual-use interface for experts.

When actions are reversible users are free to explore, make mistakes.


Fitts' Law


Fitts' Law: The time to acquire a target is a function of the distance to and size of the

target.

Use large objects for important functions (Big buttons are faster).

Question: Why is it easy to maneuver the mouse to the exact corners of the screen?


Human-Interface Objects


Human-Interface Objects ...include folders, documents, and the trashcan.

...can be seen, heard, touched, or otherwise perceived.

...that can be seen are quite familiar in graphic user interfaces. Objects that play to another sense such as hearing or touch are less familiar.

...have a standard way of interacting.

...have standard resulting behaviors.

...should be understandable, self-consistent, and stable.


Latency Reduction

First Principles of Interaction DesignLatency Reduction:Reduce latency by making the system faster – eliminating parts of the

system that are dragging down performance or programming differently (multi-threading).

Hide latency by allowing user to work on other tasks while one task processes.

Give immediate feedback on actions and dynamic status updates to reduce the user's perception of latency.

Examples of status updates that mitigate the perception of latency: button changes state and makes sound when clicked “loading...” or hourglass animation message stating how long of a wait, etc.

First Principles of Interaction Design (Bruce Tognazzini)

http://www.asktog.com/basics/firstPrinciples.html

Learnability

First Principles of Interaction Design (Bruce Tognazzini)

http://www.asktog.com/basics/firstPrinciples.html

Learnability:

Ideally, products would have no learning curve: users would walk up to them for the very first time and achieve instant mastery. In practice, all applications and services, no matter how simple, will display a learning curve.

Usability and learnability are not mutually exclusive. First, decide which is the most important; then attack both with vigor. Ease of learning automatically coming at the expense of ease of use is a myth.


Metaphors


Metaphors:Choose metaphors well, metaphors that will enable users to instantly grasp

the finest details of the conceptual model.

Good metaphors are stories, creating visible pictures in the mind.

Bring metaphors alive by appealing to people’s perceptions–sight, sound, touch, and kinesthesia–as well as triggering their memories.

Metaphors usually evoke the familiar, but often add a new twist. Question: What metaphors are employed in Microsoft Word?


Protect the User's Work


Protect the User's Work:Undo function, options to save, “save as...” and/or automatic continuous-

saving of work.

Ensure that users never lose their work as a result of error on their part, the vagaries of Internet transmission, or any other reason other than the completely unavoidable, such as sudden loss of power to the client computer.


Readability


Readability:Take into account contrast, size, type of information being displayed and the needs of older people.Instructions and standard labels can be less readable than data. Text can be less readable than numerical

data.

Use font sizes that are large enough to be readable on standard monitors.

Text that must be read should have high contrast. Favor black text on white or pale yellow backgrounds. Avoid gray backgrounds.

...the label, "Last Name," can afford to be somewhat small. Habitual users will learn that that two-word gray blob says "Last Name." Even new users, based on the context of the form on which it appears, will have a pretty good guess that it says "Last Name." The actual last name entered/displayed, however, must be clearly readable.

Numbers [...] unless they follow a very strict protocol, have no redundancy, so people need the ability to examine and comprehend every single character.


Readability:Take into account contrast, size, type of information being displayed, and

the needs of older people.

Instructions and standard labels can be less readable than data.

Text can be less readable than numerical data.

First Principles of Interaction DesignReadability (continued):Use font sizes that are large enough to be readable on standard monitors.

Text that must be read should have high contrast.

...the label, "Last Name," can afford to be somewhat small. Habitual users will learn that that two-word gray blob says "Last Name." Even new users, based on the context of the form on which it appears, will have a pretty good guess that it says "Last Name." The actual last name entered/displayed, however, must be clearly readable.

Numbers [...] unless they follow a very strict protocol, have no redundancy, so people need the ability to examine and comprehend every single character.


Track State

First Principles of Interaction DesignTrack State:To anticipate the user's needs and improve their productivity the system

should maintain information about their use of the application. Such as...

o Whether this is the first time the user has been in the system [...] o Where the user has been during this session o Where the user was when they left off in the last session

In addition to simply knowing where they’ve been, we can also make good use of what they’ve done.

Question: What is a stateless protocol? Examples? http? ftp?Question: How can we maintain state in a web application?

Users should be able to log off at work, go home, and take up exactly where they left off.


Visible Navigation


Visible Navigation:

When designing an application give the user a sense of stability. Make it simple and clear how the current screen connects to other parts of the application.

In contrast to the web...

Once users reach our applications, we must take care to reduce navigation to a minimum and make that navigation that is left clear and natural. Present the illusion that users are always in the same place, with the work brought to them. This not only eliminates the need for maps and other navigational aids, it offers users a greater sense of mastery and autonomy.

First Principles of Interaction Design 1 Anticipation2 Autonomy3 Color Blindness4 Consistency5 Defaults6 Efficiency of the User7 Explorable Interfaces8 Fitts' Law

9 Human-Interface Objects10 Latency Reduction11 Learnability12 Metaphors13 Protect the User's Work14 Readability15 Track State16 Visible Interfaces