Guidelines for Interface Design:
A comparison of multimedia products

Published in conjunction with the presentation delivered at the 1995 National Convention of the Association for Educational Communications and Technology, Anaheim, California, by Sonny Kirkley and Elizabeth Boling of Indiana University, and Larry Johnson of Southern Indiana University at Evansville.

Introduction

Gallery of examples

Guidelines


Introduction

Expectations of production value in developing media rise at the high end of the technology scale ... and at the low end of the scale. Technology users expect that professional productions will meet higher and higher standards, and they expect that non-professional products will meet rising standards. As an example, consider that the standard for resumes is rising as page layout and printing technology improves. At the high end we may expect color images on resumes in addition to 300dpi or better text resolution; at the low end it is no longer acceptable to submit a resume produced with a typewriter or a dot-matrix printer.

The tools and capabilities available to designers of multimedia products have evolved rapidly since affordable storage space has allowed delivery of sufficient data to make complex designs a realistic option.


Gallery of examples for selected interface components

Navigation
Representations of all functions designed to move the user from one display to another, one state of display to another, or one conceptual location in the program to another conceptual location.

CD Access ... buttons

CD Access ... map

Alice to Ocean ... map

Feedback
Indications to the user that the program is responding to an action, that the action has had a desired or undesired result, that the program is initiating an action, or that the user must perform an action.

Sports Illustrated ... color and animation and sound

Sports Illustrated ... animation

Tools
General functions the user may invoke and use to create new data, operate on existing data, or accomplish specific objectives within the program.

Assorted tool sets ... pictorial symbols

Point of View ... graphical tool

Jump Raven ... interaction tool

Program functions
Representations of functions related to overall control of the program.

The Virtual Museum ... metaphor

How Computers Work ... pictorial icons

Controls
Mechanisms by which the user changes settings or views, selects from multiple options, turns functions on or off.

Point of View ... slider and push button controls

Sports Illustrated ... direct manipulation controls


Function and form of interface components are separate. A given function may be represented by a wide range of forms.

Both function and form are subject to design guidelines and to user's expectations within the context of a program's use .


Design guidelines

Consistency ...
like functions are represented by like forms

interface components appear in standard locations throughout the program

Grouping ...
related elements appear in close proximity and unrelated elements are separated by space and visual treatment

Concrete/abstract ...
concrete functions may be represented by pictorial images

abstract functions and actions should be labeled

Cultural conventions and conventions of use ...
respect conventions of the user's culture

capitalize on prior learning by employing standard functions and forms

Perception ...
forms must be sufficiently distinctive to be recognized as representative of functions

forms must be visible or discoverable

forms must offer affordance


User's expectations within the context of a program's use

No principles or guidelines can guarantee a perfect design. User's expectations change with the context of their work, and within the context of the programs created for them. Every interface should be tested with the users who will use the program under the same conditions in which they will use it.

For more references on the topic of testing designs in the context of use, see the Links section of IIRG!


References
     Boling, E., Johnson, L., & Kirkley, S. (1994). 
A quick and dirty dozen: guidelines for using icons. 
HyperNEXUS, 4(2), 5-7.

Norman, D. The Design of Everyday Things. Doubleday: New York, 1990.


| IIRG! | Articles | Research | Links | References |

last update 4 July 1996 ... questions and suggestions to eboling@indiana.edu
Instructional Systems Technology, Indiana University, Bloomington, Indiana
URL = http://www.indiana.edu/~iirg/ARTICLES/multimedia/vsmm.html