Human-Computer Interface Design

What do these things have in common?




A Computer Mouse

A Touch Screen

A program on your Mac or Windows machine that includes a trashcan, icons of disk drives, and folders
Pull-down menus





Give up? These are all examples of advances in human-computer interface design which were designed to make it easier to accomplish things with a computer. Do you remember the first days of desktop computers? I do. I remember when I had to remember long strings of commands in order to do the simplest things like copy or format a disk or move to a new directory. I don't miss those days! Thank you, human-computer interface designers. (If you want to read about some of the pioneers of human-computer interface design, check out information about Douglas Englebart and Alan Kay.)


Human-Computer Interface Design seeks to discover the most efficient way to design understandable electronic messages [1, 2]. Research in this area is voluminous; a complete branch of computer science is devoted to this topic, with recommendations for the proper design of menus, icons, forms, as well as data display and entry screens. This browser you are using now is a result of interface design - the buttons and menus have been designed to make it easy for you to access the web. Some recommendations from this research are discussed below.


Note: Many of these recommendations concern the design of computer interfaces like Windows or the Mac Finder or how to make programs easier to use. Some of these recommendations are not so relevant to web design. Still, it is an important area of research, and some of the recommendations relate to any kind of communication between user and computer. Wherever possible, I have included examples more directly related to web design.


Shneiderman's Principles of Human-Computer Interface Design:

Recognize Diversity - In order to recognize diversity, you, the designer, must take into account the type of user frequenting your system, ranging from novice user, knowledgeable but intermittent user and expert frequent user. Each type of user expects the screen layout to accommodate their desires, novices needing extensive help, experts wanting to get where they want to go as quickly as possible. Accommodating both styles on the same page can be quite challenging. You can address the differences in users by including both menu or icon choices as well as commands (ie. Command or Control P for Print as well as an icon or menu entry), or providing an option for both full descriptive menus and single letter commands.

You Should Use the Eight Golden Rules of Interface Design:


Strive for consistency

consistent sequences of actions should be required in similar situations

identical terminology should be used in prompts, menus, and help screens

consistent color, layout, capitalization, fonts, and so on should be employed throughout.

Enable frequent users to use shortcuts

to increase the pace of interaction use abbreviations, special keys, hidden commands, and macros

Offer informative feedback

for every user action, the system should respond in some way (in web design, this can be accomplished by DHTML - for example, a button will make a clicking sound or change color when clicked to show the user something has happened)
Design dialogs to yield closure

Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions shows the user their activity has completed successfully

Offer error prevention and simple error handling

design the form so that users cannot make a serious error; for example, prefer menu selection to form fill-in and do not allow alphabetic characters in numeric entry fields

if users make an error, instructions should be written to detect the error and offer simple, constructive, and specific instructions for recovery

segment long forms and send sections separately so that the user is not penalized by having to fill the form in again - but make sure you inform the user that multiple sections are coming up
Permit easy reversal of actions

Support internal locus of control

Experienced users want to be in charge. Surprising system actions, tedious sequences of data entries, inability or difficulty in obtaining necessary information, and inability to produce the action desired all build anxiety and dissatisfaction

Reduce short-term memory load

A famous study suggests that humans can store only 7 (plus or minus 2) pieces of information in their short term memory. You can reduce short term memory load by designing screens where options are clearly visible, or using pull-down menus and icons

Prevent Errors - The third principle is to prevent errors whenever possible. Steps can be taken to design so that errors are less likely to occur, using methods such as organizing screens and menus functionally, designing screens to be distinctive and making it difficult for users to commit irreversible actions. Expect users to make errors, try to anticipate where they will go wrong and design with those actions in mind.


Norman's Research

One researcher who has contributed extensively to the field of human-computer interface design is Donald Norman. This psychologist has taken insights from the field of industrial product design and applied them to the design of user interfaces. According to Norman, design should:


use both knowledge in the world and knowledge in the head. Knowledge in the world is overt - we don't have to overload our short term memory by having to remember too many things (icons, buttons and menus provide us with knowledge in the world - we don't have to remember the command for printing, it's there in front of us). On the other hand, while knowledge in the head may be harder to retrieve and involves learning, it is more efficient for tasks which are used over and over again (providing a command key sequence like Control P for Print is an example of this).

"make it easy to determine what actions are possible at any moment (make use of constraints)" ([1] p. 188). For example:

well-designed things can only be put together certain ways (the trapezoidal SCSI cable is an example of good design - I can only plug it in one way)

menus only display the actions which can be carried out at that time (other options are dimmed).

"Make things visible, including the conceptual model of the system, the alternative actions and the results of actions" ([1] p. 188). You can provide an overview map of your site so that your user can design their own mental map of how things work.


"Make it easy to evaluate the current state of the system" ([1] p. 188). You can do that by providing feedback in the form of messages or flashing buttons.


"Follow natural mappings between intentions and the required actions, between actions and the resulting effect; and between the information that is visible and the interpretation of the system state" ([1] p. 188). For example:


It should be obvious what the function of a button or menu is - use conventions already established for the web, don't try to design something which changes what people are familiar with.

The underlined phrase on a web page is a well-known clue that a link is present. From past experience, users understand that clicking on an underlined phrase should take them somewhere else.

"In other words, make sure that (1) the user can figure out what to do, and (2) the user can tell what is going on." ([1] p. 188)


Norman's information comes from a book called "The Design of Everyday Things." There is a particularly interesting section on designing telephones which is almost hilarious. He has written a new book called "The Invisible Computer". If you want to read excerpts from this new book, go to: http://www.jnd.org/cv.html#Invisible_Computer


Summary

How can we relate the recommendations from human-computer interface design research directly to web design?


Recognize Diversity

make your main navigation area fast loading for repeat users

provide a detailed explanation of your topics, symbols, and navigation options for new users

provide a text index for quick access to all pages of the site

ensure your pages are readable in many formats, to accommodate users who are blind or deaf, users with old versions of browsers, lynx users, users on slow modems or those with graphics turned off

Strive for consistency in:

menus

help screens

color

layout

capitalization

fonts

sequences of actions

Offer informative feedback - rollover buttons, sounds when clicked

Build in error prevention in online forms

Give users control as much as possible

Reduce short term memory load by providing menus, buttons or icons. If you use icons, make sure you have a section which explains what they mean. Make things obvious by using constraints - grayed out items in menus for options not available in that page

Make use of web conventions such as underlined links, color change in links for visited pages, common terminology
Provide a conceptual model of your site using a site map or an index





--------------------------------------------------------------------------------

[1] Norman, D. (1988) The design of everyday things. New York, NY: Doubleday.


[2] Shneiderman, B. (1998). Designing the user interface: Strategies for effective human-computer interaction (3rd ed.) . Reading, MA: Addison-Wesley Publishing.