Graphic Design for User Interfaces Location and date: 27 July 1992, Chicago, Illinois Author/contact information: Tutorial Leader: Mr. Aaron Marcus, Principal Assistants: N. Gregory Galle, Director, and Grant Letz, Designer Aaron Marcus and Associates 1144 65th Street, Suite F Emeryville, CA 94608-1109 510-601-0994, Fax:510-547-6125, Email: marcus3@violet.berkeley.edu Type of session: One-day session Objectives 1. Introduce participants to terminology, theory, case studies, and design process 2. Provide practical guidance for research and for commercial product development 3. Provide hands-on experience through simple pen-and-paper exercises Style Illustrated lectures Three half-hour hands-on exercises Content Description: Skillful graphic design for graphical user interfaces (GUIs) is crucial to the success of innovative computer-based products. Presented by a pioneer of graphic design for computer graphics and a leader in the field of user interface design, electronic document design, and knowledge visualization, this tutorial will give developers, graphic designers, and users valuable insight into key graphic design issues and show how to achieve effective visual communication. The tutorial will introduce terminology, principles, guidelines, and heuristics for using information-oriented, systematic graphic design in user interfaces, especially for the design of metaphors, icons, control panels and dialogue boxes, and navigational devices. Many current window manager and user interface design tools do not provide sufficient tools or guidance for these items, which constantly must be designed for both commercial products and research prototypes. Participants will learn practical principles that are immediately useful, become familiar with many existing techniques, and discover potential new research topics. They will observe and analyze techniques for making products and displays more intelligible, functional, aesthetic, and marketable. Extensively illustrated lectures and video examples will cover perceptual, conceptual, and communication issues in typography, symbol systems, diagrammatic imagery, color, spatial composition, animation, and sequencing. The principles, guidelines, and case studies will be relevant for all window manager paradigms such as Motif and Open Look, most applications, platforms, and input/output devices. The course will emphasize analyzing and designing metaphors, mental models, navigation in the model, appearance characteristics, and interaction techniques as well as the process for achieving innovative designs. Useful concepts and techniques will help participants to design the following more effectively: Metaphors: Easy recognition and memorability of fundamental images/ideas Mental models: Appropriate organization of data, functions, tasks, and roles Navigation of model: Efficient movement among data, functions, tasks, and roles Look: Quality appearance characteristics Feel: Effective interaction sequencing In addition, the following will be considered to make products that are easy to produce, sell, learn, use, and maintain: Market: Existing national and global products and customer bases Compatibility: Corporate clients with their own CHI concerns Industry standards: CHI management systems and platform constraints Corporate ID: Establishment of a strong product identity Development environment: Establishment and extensions of tool sets User-centered design: Customizability for developers and end users Productivity: Relation to documentation, training, and marketing Case studies will provide practical solutions to typical problems. The tutorial will provide specific recommendations for the following: Metaphors and models Type, tables, layout, color, graphics Icon and cursor design Dialogue box and control panel design Instructor biographies: Aaron Marcus is an internationally recognized authority on graphic design for computer graphics, especially chart, form, document, icon, and screen design. He has given knowledge visualization, user interface design, and document design tutorials at SIGCHI, SIGGRAPH, and NCGA conferences in addition to tutorials at companies and conferences in the USA, Australia, Canada, Europe, Israel, Singapore, and Japan. Mr. Marcus has written many articles on graphic design for computer graphics for technical and professional journals. He co-authored The Computer Image (1982), for which he wrote the essay "Color: A Tool for Computer Graphics Communication," co-authored with Ronald Baecker Human Factors and Typography for More Readable Programs (1990), and authored Graphic Design for Electronic Documents and User Interfaces (1992), all published by Addison-Wesley. He has taught computer graphics since 1970 and founded AM+A in 1982. In 1992 he received the NCGA Industry achievement award for contributions to computer graphics. Mr. Marcus and his staff have designed and evaluated user interfaces, knowledge visualization, and electronic publishing/presentations for Apple, Ashton-Tate, Computervision, DEC, DuPont, General Motors, Hewlett-Packard, IBM, Kodak, MCC, McDonnell-Douglas, Microsoft, Motorola, NCR, Pacific Bell, Reuters, Scitex, 3M, Wavefront, and many other organizations. Government clients have included the East-West Center, Lawrence Berkeley Laboratory, Lawrence Livermore National Laboratory, Los Alamos National Laboratory, National Endowment for the Arts, National Library of Medicine, New York Department of City Planning, US Department of Defense, and US Department of Labor. Greg Galle is a graduate of the Communication Design Program of the Otis/Parsons Art School, Los Angeles. He was Project Manager and Art Director at The Understanding Business, San Francisco, where he was responsible for the design of Pacific Bell's Smart Yellow Pages project before joining Aaron Marcus and Associates in 1989. At the firm he supervises all projects and works as a designer on many of them. Grant Letz is a graduate of the Graphic Design Department of the University of Washington/Seattle. After working as a graphic designer in the publications department of New Mexico State University, he joined the Understanding Business, San Franciso, where he worked on Pacific Bell's Smart Yellow Pages project. He joined Aaron Marcus and Associates in 1989 and has worked on most of the firm's user interface design projects since that time. Agenda: 60 minutes Lecture: Visual Communication Principles 60 minutes Lecture: Putting Principles into Practice: Screen Design, Icon Design, Semiotics 15 minutes Video: Case Studies 30 minutes Exercise: Icon/symbol design 60 minutes Lecture: GUIs, Controls, and Dialogue Design 30 minutes Exercise: Dialogue box design 60 minutes Lecture: Future Technology Developments of GUIs 15 minutes Video: Case Studies 30 minutes Exercise: Metaphor/mental model design Content outline: Visual communication principles User interface organization Development factors Visible language Typography Symbolism Layout Color Animation Sequencing Principle 1: Organization Consistency Layout Navigation Principle 2: Economy Simplicity Clarity Distinctiveness Emphasis Principle 3: Communication Legibility Readability Typography Symbolism Multiple views Color and texture Putting principles into practice Screen design Layout grids Usage Algorithm for screen design Icon design Visual semiotics dimensions Lexical Syntactic Semantic Pragmatic Syntactic design principles Semantic design principles Pragmatic design principles Layout grids Algorithm for icon design Video Case Studies Controls Comparison of graphical user interfaces (GUI) GUI components Windows Menus Controls Dialogue boxes Control panels Query/message boxes Mouse/keyboard interface Dialogue design Menu layout and presentation Algorithm for menu design Dialogue box and control panel design Algorithm for control panel design Videos Future Technology Developments of GUIs Agents Complexity masking Control panel design Expert assistance Multiple metaphors Sound Video/hypermedia Video case studies Additional Features Unique Features: This tutorial will be an updated and improved version of the tutorial presented to approximately 200 participants at SIGCHI-90, including new materials prepared by Aaron Marcus as the keynote lecture to the 1991 X-Consortium annual conference, and published in part in recent articles in Unix World and IEEE Computer. The tutorial will feature new case study examples, new video examples, and participants will be able to walk away with a copy of the recently published Graphic Design for Electronic Documents and User Interfaces, a primer for programmers and product developers, which will provide them with basic information on most of the subjects covered in the tutorial. Primary attendee benefit Professional/technical education and skill training Secondary benefit: problem-solving methodology Recommended background The course is recommended for those with some previous experience in designing graphical user interfaces for any reasonably complex application (Intermediate difficulty). Selected Publications by Aaron Marcus: Graphic Design for Computer Graphics Baecker, R. and A. Marcus, Human Factors in Typography for More Readable Programs, Addison-Wesley, Reading, 1990. Marcus, Aaron, Graphic Design for Electronic Documents and User Interfaces, Addison-Wesley, Reading, 1992. ----, "Graphic Designers and Computer Graphics: Users Vs. Builders," American Center for Design Statements, Vol. 5, No. 1 (Fall 1989) pp.2ff. ----, "User Interface Design," Proceedings, NCGA Conference (April 1989), Vol. 1, 1989, pp. 368-375. ----, "User Interface Design: Progress of the Profession," Proceedings, Twenty-Second Annual Hawaii International Conference on System Sciences: "Emerging Technologies and Applications Track" (January 1989), IEEE Computer Society , Vol. 4, 1989, pp.1ff. ----, "Know Business and Show Business," The American Institute of Graphic Design Journal, Vol. 6, No. 2, December 1988, pp. 28ff. ----, "New Roles for Graphic Designers: Aaron Marcus Speaks Out," Electronic Publishing & Printing, Vol. 3, No. 9, December 1988, pp. 28ff. ----, "Design Tips for Winning Forms," Computer Graphics Today, Vol. 5, No. 11, November 1988, pp. 27ff (no longer publishing). ----, "Corporate Graphic Standards," InterConsult's Corporate Publishing, Vol. 2, No. 29, 10 October 1988, p. 1. ----, "Graphic Design in Computer Graphics: A Review and Preview," Proceedings, Ausgraph (4-8 July 1988), The Australian Computer Graphics Association, Inc., 1988, pp. 333-336. ----, "Design Tips for Developing Good Form," Publish!, Vol. 3, No. 6, June 1988, p. 68. ----, "Designs on Disk," InterConsult's Corporate Publishing, Vol. 2, No. 9, 9 May 1988, p. 1. ----, "Forms by Design," InterConsult's Corporate Publishing, Vol. 2, No. 4, 4 April 1988, p. 1. ----, "Type, Legibility, and Readability," InterConsult's Corporate Publishing, Vol. 1, No. 49, 15 February 1988, p. 1. ----, "Spatial Displays and Tools in Computer Graphics," Computer Graphics Today, official publication of the National Computer Graphics Association, Vol. 5, No. 1, January 1988, pp. 26ff (no longer publishing). ----, "Exploring Three Faces of Graphics," InterConsult's Corporate Publishing, Vol. 1, No. 43, 21 December 1987, p. 1. ----, "Spatial Issues in User Interface Design from a Graphic Design Perspective,"Proceedings , NASA Conference: "Spatial Displays and Spatial Instruments" (31 August 1987), Publication 10032 , 1987, pp.22.1-22.7. ----, "A Good CAD/CAM User Interface is No Accident, " Computer Graphics Today, official publication of the National Computer Graphics Association, Vol. 4, No. 3, March 1987, pp. 30ff (no longer publishing). Petry, Kushner, Marcus, et al., "User Interface Style Guides," Proceedings, National Computer Graphics Association National Conference: Technical Sessions (22-26 March 1987), Vol. 3, 1987, pp. 471-479. Marcus, Aaron, "The User Interface Standards Manual: A Tool for Effective Management," Proceedings, National Computer Graphics Association National Conference: Technical Sessions (22-26 March 1987), Vol. 3, 1987, pp. 461-470.