Lecture Notes For Tutorial:

Graphic Design for

Usable User Interfaces

Aaron Marcus, President

Aaron Marcus and Associates, Inc.

John Armitage, Designer/Analyst

Aaron Marcus and Associates, Inc.

Volker Frank, Designer/Analyst

Aaron Marcus and Associates, Inc.

Andrew Thompson, Designer/Analyst

Aaron Marcus and Associates, Inc.

Pamela Tien, Designer/Analyst

Aaron Marcus and Associates, Inc.

SIGGRAPH ’97
Los Angeles, California
5 August 1997
© Copyright 1997 by Aaron Marcus and Associates, Inc.
All rights reserved.
For further information, please contact:

Mr. Aaron Marcus, President

Aaron Marcus and Associates, Inc.
1144 65th Street, Suite F
Emeryville, CA 94608-1053 USA
Telephone: 510-601-0994
Aaron Marcus Lecture Notes: Graphic Design for Section INTRO
and Associates, Inc. Usable User Interfaces Page 2

Table of Contents
Section/Page Item

INTRO/2 Table of Contents

INTRO/3 Tutorial Abstract

INTRO/4 Instructor Biographies

INTRO/5 Agenda

INTRO/6 Lecture Materials

PEVC/1 Lecture 1: Principles of Effective Visual Communication

GS/1 Lecture 2: Grid Systems in GUI Design

ID/1 Lecture 3: Icon Design, Semiotics

DD/1 Lecture 4: Dialogue Design

UIDMMOS/1 Lecture 5: UI Design for Multimedia and Online Services

MD/1 Lecture 6: Metaphor Design

APP/1 Appendices
Aaron Marcus Lecture Notes: Graphic Design for Section INTRO
and Associates, Inc. Usable User Interfaces Page 3

Tutorial Abstract
The tutorial will introduce terminology, principles, guidelines, and
heuristics for using information-oriented, systematic graphic design in
graphical user interfaces (GUIs), especially for the design of icons,
dialogue boxes and control panels, metaphors, mental models, and other
navigational devices that often are not prescribed by window
management systems.

Participants will be exposed to a wide body of existing knowledge and

practical advice that are immediately useful, as well as potential research
topics in user interface design. They will observe and analyze techniques
for making displays more intelligible, functional, aesthetic, and
marketable.

Extensively illustrated lectures and demo excerpts will cover perceptual,

conceptual, and communication issues in typography, symbol systems,
color, spatial composition, animation, and sequencing, including the
design of the following:

Metaphors Charts and diagrams

Mental models and navigation Icons and cursors
Look and feel Windows and menus
Proportion and composition: grids Dialogue boxes/control panels
Color selection Visual semiotics conventions
Tables and forms Style guides

Practical pen-and-paper design problems with critical review and

commentary by the instructor will give participants experience in
designing components of graphical user interfaces, such icons, dialogue
boxes, and metaphors.
 Aaron Marcus Lecture Notes: Graphic Design for Section INTRO
and Associates, Inc. Usable User Interfaces Page 4

Instructor Biographies
Aaron Marcus, Aaron Marcus received a BA in Physics from Princeton University (1965)
President and a BFA and MFA in Graphic Design from Yale University Art School
(1968). He is an internationally recognized authority on the design of
user interfaces, interactive multimedia, and printing/publishing
documents, including charts, forms, icons, and screens. Mr. Marcus has
given tutorials at SIGGRAPH, NCGA, and SIGCHI conferences in
addition to seminars at businesses and academic institutions in Australia,
Canada, Finland, Israel, Singapore, South Korea, the USA, and Japan.
He co-authored Human Factors and Typography for More Readable
Programs (1990), The Computer Image (1982), and authored Graphic
Design for Electronic Documents and User Interfaces (1992), all
published by Addison-Wesley.

Mr. Marcus was the world’s first professional graphic designer to be

involved full-time in computer graphics (1967), the first graphic designer
to program a desktop publishing system (for the AT+T Picturephone,
1969-71), the first graphic designer to design virtual realities (1971-73),
the first graphic designer to establish an independent computer-based
graphic design firm for the purpose of designing user interfaces,
electronic documents, and multimedia (1982), the only graphic designer
to be co-awarded a research grant ($500,000 for three years) by the US
Defense Department’s Advanced Research Projects Agency (DARPA) to
develop new document design standards for programming languages
(1982-85), and the only graphic designer to receive the National
Computer Graphics Association (NCGA/USA) Industry Achievement
Award for contributions to computer graphics (1992).

John Armitage, Mr. Armitage received his BFA in Graphic Design from Miami University
Designer/Analyst in 1985, and his MFA in Graphic Design from Rhode Island School of Design
(RISD) in 1989. His professional design experience includes information
graphics, signage, environments, publications, retail marketing, corporate
identity, packaging, advertising, and educational multimedia. He has held
design positions with The Procter & Gamble Company, Total Design BV in
The Netherlands, The Limited, and Times Mirror Multimedia.

Since joining AM+A, Mr. Armitage has directed cross-platform, multi-cultural

software application design projects for SABRE Travel Information Network;
Justsystem, a major Japanese business productivity software company; and
The Vantive Corporation, a leading customer asset management software
firm. Also for SABRE, he conceived, wrote, and directed the development of
Wayfinder, an interactive training tool/game for teaching travel agents how to
use graphical user interfaces. He also provided image and information
organization consulting for SABRE’s consumer travel booking Website,
Travelocity.com. Mr. Armitage has given user interface design presentations
for SIGGRAPH-96, International Interactive Communications Society (IICS),
and Web-97.

Volker Frank, Mr. Frank received his MA in Design in 1994 from the University of
Designer/Analyst Cincinnati. Earlier, he studied visual communication in Mainz, Germany,
where he also worked as a free-lance magazine designer and as a design
consultant for DTV, a major German publishing house.

At AM+A, Mr. Frank has worked extensively on conceptualizing, designing,

and managing the production of cross-platform computer-based training
(CBT) CD-ROMs and software-integrated online help for corporate training
 Aaron Marcus Lecture Notes: Graphic Design for Section INTRO
and Associates, Inc. Usable User Interfaces Page 5

and the consumer market. He worked on four projects for Oracle

Corporation, and currently is working on the development of three suites of
computer-based training (CBT) and educational CD-ROMs specializing in
technical subjects for Cogito Learning Media.
Among other AM+A projects, Mr. Frank has consulted on the user interface
design of a client/server productivity tool, a medical industry client/server
productivity software product for Kaiser Permanente, customer asset
management software for The Vantive Corporation, and a children’s
educational game for The Learning Company.

Andrew Thompson, Mr. Thompson received his MFA in Graphic Design from the Savannah
Designer/Analyst College of Art and Design in Savannah, Georgia, in 1994, where his thesis
involved a self-directed study of user-centered information design. Mr.
Thompson’s professional experience includes corporate and publication
design and the development of award-winning World Wide Web sites noted
for their clarity and usability.

At AM+A, Mr. Thompson worked on user interface design consulting for the
Web for Fujitsu Software Corporation and Zip2. Mr. Thompson currently is
working on user interface design projects for SABRE, ConsenSys Software,
and The Vantive Corporation. He also is managing the re-design and
maintenance of AM+A’s Website, and recently co-presented a tutorial on
user interface design for the Web at the Web-97 conference in San
Francisco.

Pamela Tien, Ms. Tien received her BFA in Graphic Design from the Rhode Island
Designer/Analyst School of Design. Ms. Tien has won awards for writing and design, including
the Honors Design Scholarship from the Women's Advertising Club of Rhode
Island.

At AM+A, Ms. Tien has worked as a designer, writer, production artist, and
project manager on several projects. She worked on the development of
multi-cultural user interfaces of productivity tools for American
Airlines/SABRE and has served as a user interface design consultant for
educational software development firms. Recently, she worked on
developing a computer-based training (CBT) CD-ROM for Oracle
Corporation and on user interface design consulting for the Web for Fujitsu
Software Corporation. Currently, Ms. Tien is working on the design and
production of two cross-platform CBT CD-ROMs on technical subjects for
Cogito Learning Media, and on the re-design and maintenance of AM+A’s
Website.
Aaron Marcus Lecture Notes: Graphic Design for Section INTRO
and Associates, Inc. Usable User Interfaces Page 6

Agenda for the Tutorial

Tutorial

5 August 1997

Time Topic

Morning Session

8:30-9:30 Lecture 1: Principles of Effective Visual Communication

9:30-10:15 Lecture 2: Grid Systems in GUI Design

10:15-10:30 Break

10:30-11:15 Lecture 3: Icon Design, Semiotics

11:15-12:00 Project 1: Icon Design

12:00-1:30 Lunch

Afternoon Session

1:30-2:00 Lecture 4: Dialogue Design

2:00-2:45 Project 2: Dialogue Design

2:45-3:00 Break

3:00-3:45 Lecture 5: UI Design for Multimedia and Services

3:45-4:15 Lecture 6: Metaphor Design

4:15-5:00 Project 3: Metaphor Design

Aaron Marcus Lecture Notes: Graphic Design for Section INTRO
and Associates, Inc. Usable User Interfaces Page 7

Lecture Materials
The following pages present materials for the lectures of the tutorial.
Supplementary information may be found in the Appendices of the
tutorial notes and in the accompanying text to the tutorial, Graphic
Design for Electronic Documents and User Interfaces .
Art.TRON.AM.1292 Proceedings of the Ninth TRON
Project Symposium (International)
The Future of Advanced User
Interfaces in Product Design
Date and Status December 1992, Reprint

Client IEEE Computer Society

Publication Proceedings of the Ninth TRON Project Symposium (International)

2-4 December 1992, Tokyo, Japan, pp. 14-21

Client Contact IEEE Computer Society Press

10662 Los Vaqueros Circle
P.O. Box 3014
Los Alamitos, CA 90720-1264
Tel: 714-821-8380

Author Aaron Marcus, President

Aaron Marcus and Associates, Inc.

Copyright Notice Text and figures © Copyright 1992 by the IEEE Computer Society

Summary Future industrial products will incorporate embedded micro-computers

that will require advanced graphical user interfaces (GUIs). These
GUIs will incorporate innovative input and display technologies, such
as gestural input, multimedia, three dimensional displays, as well as
new metaphors, and agents. These technology advances present
challenges and opportunities for designers of human-computer
communication and interaction.
Art.COMM.AM.0493 Communications of the ACM:
Human Communication Issues in
Advanced UIs
Date and Status April 1993, Reprint

Client Association for Computing Machinery (ACM)

Publication Communications of the ACM

Special Issue “Graphical User Interfaces: The Next Generation”
April 1993, Volume 36, Number 4, pp. 100-109

Client Contact Ms. Carolyn Lieberman, Editor

ACM Press
1515 Broadway Avenue
New York, NY 10036
Tel: 212-869-7440

Author Aaron Marcus, President

Aaron Marcus and Associates, Inc.

Copyright Notice Text and figures © Copyright 1993 by the Association for Computing
Machinery (ACM)

Summary This article reviews briefly some of the new technologies and discusses
communication issues that can impact the success of advanced UIs,
including semiotics, rhetoric, metaphors, and cultural diversity of user
groups.
Art.AVI.AM.0694 AVI-94 Conference Proceedings
Managing Metaphors for Advanced
User Interfaces
Date and Status June 1994, Preprint

Client Association for Computing Machinery

Publication AVI-94 Conference Proceedings

Advanced Visual Interfaces, 2nd International Workshop
1-4 June 1994, Bari , Italy

Client Contact Association for Computing Machinery (ACM)

Author Aaron Marcus, President

Aaron Marcus and Associates, Inc.

Copyright Notice Text and figures © Copyright 1994 by Aaron Marcus and Associates

Summary User interface design includes designing metaphors, the essential

terms, concepts, and images representing data functions, tasks,
roles, organizations, and people. Advanced user interfaces require
consideration of new metaphors and repurposing of older ones.
Awareness of semiotics principles can assist researchers in
developing more efficient and effective ways to communicate to
more diverse user groups.
Art.HCI2000.AM.0595 Readings in Human-Computer
Interactions: Toward the Year 2000:
Principles of Effective Visual
Communication for Graphical User
Interface Design
Date and Status 1995, Reprint

Client Morgan Kaufmann Publishers, Inc.

Palo Alto, CA

Publication Readings in Human-Computer Interactions: Toward the Year 2000:

Principles of Effective Visual Communication for Graphical User Interface
Design, pp. 425-441.
Edited by Ronald Baecker, Bill Buxton, et al

Client Contact Morgan Kaufmann Publishers, Inc.

Editorial and Sales Office
340 Pine Street, Sixth Floor
San Francisco, CA 94104-3205
Tel: 415-392-2665; Fax: 415-982-2665
email: [email protected]

Author Aaron Marcus, President

Aaron Marcus and Associates, Inc.

Copyright Notice Text and figures © Copyright 1995 by Aaron Marcus and Associates, Inc.
© 1995 by Morgan Kaufmann Publishers, Inc.

Summary This article reviews essential principles of information-oriented graphic

design useful for achieving effective communication in user interfaces and
in multimedia presentations and documents.
Art.WebDesign.AM.101096 Mastering Web Design:
User Interface Issues in Web Design
Date 1996

Client SYBEX, Inc.

Publication Mastering Web Design: “User Interface Issues in Web Design”

1996, pp. 315-330

Client Contact John McCoy, Senior Editor

SYBEX, Inc.
1151 Marina Village Parkway
Alameda, CA 94501

Author Aaron Marcus, President

Aaron Marcus and Associates, Inc.

Copyright Notice Text and Figures © Copyright 1996 by SYBEX, Inc.

Summary Aaron Marcus is a well-established and highly respected multimedia

designer. He and his firm are living proof of the value of a balance
between solid design skills and foresight of technical innovations in
the marketplace. He brings sveral yaers’ experience of human factors
and user interface design on the Web. This is an important
perspective, because many Web designers do not have solid
experience with the science of user interface design. They frequently
make fundamental mistakes by ignoring this knowledge. This factor
will be especially important in the next several years.