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
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
