AskTog: First Principles of Interaction Design

This link has been bookmarked by 107 people . It was first bookmarked on 22 May 2006, by Alex Ilyin.

02 Nov 09

Nagoya International School
design principles online
19 Sep 09

Hai Nguyen
untagged
18 Sep 09

Doria Liao
design usability
11 Jul 09

Edwin Chan
hci
09 Jul 09

koei kim
wwe
07 Apr 09

Glen Cassidy
siwd webdesign web2.0
29 Mar 09

Michael Misha
- First Principles of Interaction Design
- The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web. Of late, many web applications have reflected a lack of understanding of many of these principles of interaction design, to their great detriment.
- 54 more annotations...
- - Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work.
    
    Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time.
    
    Effective applications and services perform a maximum of work, while requiring a minimum of information from users.
  - Anticipation
  - Applications should attempt to anticipate the user’s wants and needs.
  - The computer, the interface, and the task environment all "belong" to the user, but user-autonomy doesn’t mean we abandon rules.
    
    Give users some breathing room. Users learn quickly and gain a fast sense of mastery when they are placed "in charge." Paradoxically, however, people do not feel free in the absence of all boundaries (Yallum, 1980).
  - Autonomy
  - Use status mechanisms to keep users aware and informed.
    
    No autonomy can exist in the absence of control, and control cannot be exerted in the absence of sufficient information. Status mechanisms are vital to supplying the information necessary for workers to respond appropriately to changing conditions.
  - Keep status information up to date and within easy view
  - Color Blindness
  - Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information
  - 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
  - The following list is ordered from those interface elements demanding the most faithful consistency effort to those demanding the least.
  - Interpretation of user behavior, e. g., shortcut keys maintain their meanings.
    
    Invisible structures.
    
    Small visible structures.
    
    The overall "look" of a single application or service--splash screens, design elements.
    
    A suite of products.
    
    In-house consistency.
    
    Platform-consistency.
  - "Invisible structures"
  - The secret, if you absolutely insist on one, should be crisp and clean, for example, "you can click and drag the edges of current Macintosh windows to size them," not, "You can click and drag various things sometimes, but not other things other times."
  - Inconsistency: It is just important to be visually inconsistent when things must act differently
  - Make objects that act differently look different.
  - Defaults
  - Defaults should be easy to "blow away:"
  - 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.
  - Look at the user's productivity, not the computer's.
  - Efficiency of the User
  - From the standpoint of the microwave, one minute and ten seconds is the obviously correct answer. From the standpoint of the user of the microwave, one minute and eleven seconds is faster. Why? Because in the first case, the user must press the one key twice, then visually locate the zero key, move the finger into place over it, and press it once. In the second case, the user just presses the same key–the one key–three times. It typically takes more than one second to acquire the zero key. Hence, the water is heated faster when it is "cooked" longer.
  - Keep the user occupied.
    
    Since, typically, the highest expense in a business is labor cost. Any time the user must wait for the system to respond before they can proceed, money is being lost.
  - Write help messages tightly and make them responsive to the problem: good writing pays off big in comprehension and efficiency.
  - Menu and button labels should have the key word(s) first.
  - Explorable Interfaces
  - Give users well-marked roads and landmarks
  - Sometimes, however, you have to provide deep ruts.
    
    The closer you get to the naive end of the experience curve, the more you have to rein in your users.
  - Make Actions reversible
  - Fitts' Law
  - The time to acquire a target is a function of the distance to and size of the target.
  - Fitts' law indicates that the most quickly accessed targets on any computer display are the four corners of the screen, because of their pinning action,
  - Use large objects for important functions
  - Use the pinning actions of the sides, bottom, top, and corners of your display: A single-row toolbar with tool icons that "bleed" into the edges of the display will be many times faster than a double row of icons
  - Human Interface Objects
  - Human-interface objects can be seen, heard, touched, or otherwise perceived.
    
    Human interface objects 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. Good work has been done in developing auditory icons (Gaver).
    
    Human-interface objects have a standard way of interacting.
    
    Human-interface objects have standard resulting behaviors.
    
    Human-interface objects should be understandable, self-consistent, and stable.
  - Latency Reduction
  - Latency can often be hidden from users through multi-tasking techniques, letting them continue with their work while transmission and computation take place in the background.
  - Reduce the user’s experience of latency.
    
    Acknowledge all button clicks by visual or aural feedback within 50 milliseconds.
    
    Display an hourglass for any action that will take from 1/2 to 2 seconds.
    
    Animate the hourglass so they know the system hasn't died.
    
    Display a message indicating the potential length of the wait for any action that will take longer than 2 seconds.
    
    Communicate the actual length through an animated progress indicator.
    
    Offer engaging text messages to users informed and entertained while they are waiting for long processes, such as server saves, to be completed.
    
    Make the client system beep and give a large visual indication upon return from lengthy (>10 seconds) processes, so that users know when to return to using the system.
    
    Trap multiple clicks of the same button or object. Because the Internet is slow, people tend to press the same button repeatedly, causing things to be even slower.
  - Learnability
  - Ideally, products would have no learning curve:
  - Metaphors, Use of
  - Choose metaphors well, metaphors that will enable users to instantly grasp the finest details of the conceptual model.
    
    Bring metaphors alive by appealing to people’s perceptions–sight, sound, touch, and kinesthesia–as well as triggering their memories.
  - Protect Users' Work
  - it has become completely inexcusable that today's computers and operating systems do not support and encourage continuous-save.
  - Text that must be read should have high contrast. Favor black text on white or pale yellow backgrounds. Avoid gray backgrounds.
    
    Use font sizes that are large enough to be readable on standard monitors. Favor particularly large characters for the actual data you intend to display, as opposed to labels and instructions.
  - Readability
  - Pay particular attention to the needs of older people. Presbyopia, the condition of hardened, less flexible lenses, coupled with reduced light transmission into the eye, affects most people over age 45. Do not trust your young eyes to make size and contrast decisions.
  - Track State
  - We may need to know:
    
    Whether this is the first time the user has been in the system
    
    Where the user is
    
    Where the user is going
    
    Where the user has been during this session
    
    Where the user was when they left off in the last session
  - State information should be held in a cookie on the client machine during a session with a transaction service, then stored on the server when they log off.
    
    Users should be able to log off at work, go home, and take up exactly where they left off.
  - Visible Navigation
  - Avoid invisible navigation.
    
    Most users cannot and will not build elaborate mental maps and will become lost or tired if expected to do so.
24 Mar 09

Laura Williams
design interaction hci software
- Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work
- Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time.
  
  Effective applications and services perform a maximum of work, while requiring a minimum of information from user
- 16 more annotations...
- - Applications should attempt to anticipate the user’s wants and needs
  - Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who won't be experiencing any color coding today
  - Interpretation of user behavior, e. g., shortcut keys maintain their meanings.
    
    Invisible structures.
    
    Small visible structures.
    
    The overall "look" of a single application or service--splash screens, design elements.
    
    A suite of products.
    
    In-house consistency.
    
    Platform-consistency
  - The most important consistency is consistency with user expectations
  - Look at the user's productivity, not the computer's
  - Keep the user occupied
  - Write help messages tightly and make them responsive to the problem: good writing pays off big in comprehension and efficiency.
    
    Menu and button labels should have the key word(s) first
  - Make Actions reversible
  - Always allow "Undo."
  - Reduce the user’s experience of latency
  - Make it faster
  - Usability and learnability are not mutually exclusive
  - 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
  - t has become completely inexcusable that today's computers and operating systems do not support and encourage continuous-save
  - Text that must be read should have high contrast
  - Human languages are highly redundant, enabling people to "heal" garbled messages. Numbers, however, unless they follow a very strict protocol, have no redundancy, so people need the ability to examine and comprehend every single character
08 Mar 09

Chris chris
userbility evaluation
13 Dec 08

dennis cruz
design interface principles reference usability web
12 Dec 08

M. Wesley Taylor
- Anticipation
- Autonomy
- 14 more annotations...
- - Color Blindness
  - Consistency
  - Defaults
  - Efficiency of the User
  - Explorable Interface
  - Fitts' Law
  - Human Interface Objects
  - Latency Reduction
  - Learnability
  - Metaphors, Use of
  - Readability
  - Track State
  - Visible Navigation
  - reduce navigation to a minimum and make that navigation that is left clear and natura
26 Nov 08

Alex White
interaction design usability interface
03 Nov 08

Allison Weiss
HCI_d
02 Oct 08

Rob Parsons
usability
04 Sep 08

Trisha Dionne
Basic principle of human-computer interaction, from AskTog, the Webzine for Computer Professionals, their Family, and Friends

SNHU Survey TLE Trish usability
27 Aug 08

Maja Kuna
e-learning design webdesign interface interactiondesign
31 Jul 08

Rob Schuler
webdev webdesign web ux usability ui
23 Jul 08

adan waters
sites 2 add onenote MIT Courses Human Interface Design
22 Jun 08

Mascha van de Weer
interface design
12 Jun 08

drayrev
UE usability guidelines
28 Apr 08

Filipe Barreira
Interaction Design
25 Apr 08

Allison Kipta
16 Apr 08

Kyungmin Kim
webdesign
26 Mar 08

Laurent Jacobs
usability design interaction hci interface ergonomie Tog reference ixd
22 Mar 08

Paula Prata
Basic principle of human-computer interaction, from AskTog, the Webzine for Computer Professionals, their Family, and Friends

imported Weblindo3IHC
21 Mar 08

n0s0ap
article articles development for:cantinflas83 for:ryanwaggoner howto learning research resource tips todo tools tutorial web webdev work
20 Mar 08

Darren Hood
IA-UX usability usability+guidelines IA UX UXD mydiigo
10 Mar 08

Little Wonder
article design gui hci interaction interface ui usability webdesign
20 Feb 08

Janne L
usability guidelines interaction
19 Feb 08

Joanne Moore
design list interaction
15 Feb 08

Sebastião Miraglia
Basic principle of human-computer interaction, from AskTog, the Webzine for Computer Professionals, their Family, and Friends

Bookmarks Toolbar Folder Webdev patterns
23 Jan 08

M Diametric
hci ui IxD article design usability interaction gui interface
13 Jan 08

Antti Kaihola
bookmarks imported
10 Jan 08

mrseoliveira
del.icio.us design imported interaction
06 Dec 07

Jon Aston
usability design interaction ui hci webdesign gui
26 Nov 07

cluzet
Usability
14 Sep 07

jonathan Belisle
blog communication creativity design for:jordiventurafabra for:winston_1984 form forms graphics gui hci human imported interaction ui usability web webdesign
01 Aug 07

Mats Svensson
design hci usability
10 May 07

Thomas Jakubowski
article gui ui design interaction usability communication
03 May 07

David Healy
design accessibility
10 Apr 07

Dan O'Brien Muzyka
Basic principle of human-computer interaction, from AskTog, the Webzine for Computer Professionals, their Family, and Friends

design usability interaction hci interface ui webdesign Ux guide
09 Apr 07

Ryan Done
design interaction ui web
- Since, typically, the highest expense in a business is labor cost. Any time the
  user must wait for the system to respond before they can proceed, money is being
  lost.
- Give users well-marked roads and landmarks, then let them shift into
  four-wheel drive.
  
  Mimic the safety, smoothness, and consistency of the natural landscape. Don’t
  trap users into a single path through a service, but do offer them a line of
  least resistance. This lets the new user and the user who just wants to get the
  job done in the quickest way possible and "no-brainer" way through, while still
  enabling those who want to explore and play what-if a means to wander farther
  afield.
- 9 more annotations...
- - Sometimes, however, you have to provide deep ruts.
    Offer users stable perceptual cues for a sense of "home."
    
    Stable visual elements not only enable people to navigate fast, they act as
    dependable landmarks, giving people a sense of "home."
  - Early software tended to make it difficult to leave. With the advent of the
    web, we've seen the advent of software that makes it difficult to stay. Web
    browsers still festoon their windows with objects and options that have nothing
    to do with our applications and services running within. Our task can become
    akin to designing a word process which, oh, by the way, will be using
    Photoshop's menu bar. Having 49 options on the screen that lead directly to
    destruction of the user's work, along with one or two that just might help is
    not an explorable interface, it is the interface from hell. If you are working
    with complex transactions using a standard web browser, turn off the menu bar
    and all of the other irrelevant options, then supply our own landmarks and
    options.
  - 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).
  - Trap multiple clicks of the same button or object. Because the Internet is slow,
    people tend to press the same button repeatedly, causing things to be even
    slower.
  - Make it faster
    
    Eliminate any element of the application that is not helping. Be
    ruthless.
  - The World Wide Web, for all its pretty screens and fancy buttons, is, in effect,
    an invisible navigation space. True, you can always see the specific page you
    are on, but you cannot see anything of the vast space between pages. 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.
  - 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.
  - 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.
27 Mar 07

sunilthaha
concepts design interface user
17 Mar 07

Steven Yamanaka
interaction design
28 Feb 07

eighteyes
imported informationdesign general design usability interaction ui HCI
18 Feb 07

Christopher Arnold
design reference interaction_design imported
20 Jan 07

Heather McIntosh
unfiled
22 Dec 06

indigo11
The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web.

article design howto interaction tips usability web
13 Dec 06

KMP
interface_design ui webdesign
30 Nov 06

Vikram Bhat
tech
13 Nov 06

Lisa Mullinaux
imported_ie Usability
05 Nov 06

Xia Lin
design Information_Architecture interaction hci article
26 Oct 06

Dennis
design design tips and reference links
25 Oct 06

Mattias Wirf
design tillgänglighet användbarhet gränssnitt
Thomas Buscher
Interaction
Sonny
imported
24 Oct 06

Vladislav Zlobin
articles ia usability
31 Aug 06

david
id
24 Aug 06

toxi
article design hci interaction patterns readme reference theory ui
22 Aug 06

jim turner
usablitiy
17 Aug 06

El leo
@bee _me _old _prive
14 Aug 06

Michael Hatscher
apple asktog cognitive design development ex experience fitts gui guidelines hci heuristics ia interaction interface mac macintosh principles programming prototyping reference software tog tutorial ui usability user_experience userexperience web webdesign
08 Aug 06

Bozo le Clown
advice architecture design information usability web
31 Jul 06

Kevin Wen
design hci ui
28 Jul 06

Bernardo Schepop
.toprint apple article centred computer design experience graphic human interaction interface software usability user
30 Jun 06

Haakon Leonsson
computing theory
12 Jun 06

stuart murdoch
Interface:design interactivity computers design
10 Jun 06

Alex Ilyin
ucd
28 Apr 06

Kevin O'Gorman
design
13 Apr 06

Alexander Kroon
interaction-design information-architecture
07 Apr 06

Andreas Lloyd
programming usability
31 Mar 06

Michael Montgomery
read design imported
21 Oct 05

furl_ed55
14 Sep 05

scree23
Interface Design
31 Jul 05

Jean-Marc Fontaine
27 Jul 05

Thom Cox
usability
23 May 05

pwhite1048
Programming
05 May 05

David Martland
Web Design
12 Apr 05

Donna Miller
Usability
- First Principles of Interaction Design
  The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web. Of late, many web applications have reflected a lack of understanding of many of these principles of interaction design, to their great detriment. Because an application or service appears on the web, the principles do not change. If anything, applying these principles become even more important.
08 Apr 05

tadej zontar
Computer
- First Principles of Interaction Design
  Jump to:
  
  Anticipation
  Autonomy
  Color Blindness
  Consistency
  Defaults
  Efficiency of the User
  Explorable Interfaces
  Fitts's Law
  Human-Interface Objects
  Latency Reduction
  Learnability
  Limit Tradeoffs
  Metaphors
  Protect the User's Work
  Readability
  Track State
  Visible Interfaces
  
  The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web. Of late, many web applications have reflected a lack of understanding of many of these principles of interaction design, to their great detriment. Because an application or service appears on the web, the principles do not change. If anything, applying these principles become even more important.
  
  • Deutsche (German) Version:
- First Principles of Interaction Design
  Jump to:
  
  Anticipation
  Autonomy
  Color Blindness
  Consistency
  Defaults
  Efficiency of the User
  Explorable Interfaces
  Fitts's Law
  Human-Interface Objects
  Latency Reduction
  Learnability
  Limit Tradeoffs
  Metaphors
  Protect the User's Work
  Readability
  Track State
  Visible Interfaces
  
  The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web. Of late, many web applications have reflected a lack of understanding of many of these principles of interaction design, to their great detriment. Because an application or service appears on the web, the principles do not change. If anything, applying these principles become even more important.
  
  • Deutsche (German) Version:
- 1 more annotations...
- - First Principles of Interaction Design
    Jump to:
    
    Anticipation
    Autonomy
    Color Blindness
    Consistency
    Defaults
    Efficiency of the User
    Explorable Interfaces
    Fitts's Law
    Human-Interface Objects
    Latency Reduction
    Learnability
    Limit Tradeoffs
    Metaphors
    Protect the User's Work
    Readability
    Track State
    Visible Interfaces
    
    The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web. Of late, many web applications have reflected a lack of understanding of many of these principles of interaction design, to their great detriment. Because an application or service appears on the web, the principles do not change. If anything, applying these principles become even more important.
    
    • Deutsche (German) Version: