12. Graphic Design for Usable GUIs

Full Day / Beginning

This course explains what user interfaces are and how to design them well. Lectures reveal principles of effective visual communication for developing high-quality user interfaces for productivity tools, multimedia, and online services. Case studies and short design exercises show how to develop user-centered, task-oriented metaphors, mental models, navigation, appearance, and interaction that dramatically improve the usability and appeal of advanced products.

Who Should Attend
Users of user interface construction or multimedia/online authoring tools, programmers, and their managers, who are responsible for researching new tools or for ensuring the market success of applications, products, or services, and who want to acquire an understanding of user interfaces and techniques for designing them well.

Aaron Marcus
Aaron Marcus and Associates, Inc.

John Armitage
Volker Frank
Pamela Tien
Aaron Marcus and Associates, Inc.


8:30 am: Visual Communication Principles - Marcus

What is a User Interface?
- Metaphors
- Mental Models
- Navigation
- Look
- Feel

What is Graphic Design?
How can Graphic Design Help User Interface Design?
Graphical User Interfaces
Design Considerations for Successful User Interfaces
Development Factors
Usability Factors
Acceptance Factors
User Interface Design Objectives

Visible language
- Typography
- Imagery: Signs, Icons, Symbols
- Layout
- Color and Texture
- Animation
- Sound
- Sequencing

Principle 1: Organization
- Consistency
- Layout
- Perceptual, Cognitive Relationships
- Navigation

Principle 2: Economy
- Simplicity
- Clarity
- Distinctiveness
- Emphasis

Principle 3: Communication
- Legibility
- Readability
- Typography
- Symbolism
- Multiple Views
- Color and Texture

9:30 am: Grid Systems in User Interface Design - All

Why are Grids Needed?
How are Grids Used?
Algorithm for Grid Development
Goals for Screen Layout
Algorithm for Screen Layout
Examples: Demonstrations from design projects

10:00 am: Break

10:15 am: Semiotics, Icon Design - All

Visual Semiotics

Semiotic Dimensions
- Lexical: Production
- Syntactic: Combination
- Semantic: Reference
- Pragmatic: Consumption

Case Study: the Dollar Bill
Visual Attributes of Icons
Syntactic Design Principles

Semantic Design Principles
- Icon Rhetorical Techniques

Pragmatic Design Principles
Grid-Based Icon Design: Case Study
Algorithm for Designing an Icon Set
Examples: Demonstrations from design projects and video case studies

11:00 am: Icon Design Project - All

Project Description: Design a set of four icons for the terms provided, for a user group and product identity of your choosing

12:00 noon: Break

1:30 pm: Graphic Design of Dialogue - All

Dialogue Design
- Enables navigation of mental model
- Enables command and control
- Achieved through menus
- Achieved through dialogue boxes

Goals for Menu Layout
Location Trade-off for Tool Palettes and Pop-Up Menus
Rules for Menu Presentation
Algorithm for Menu Arrangement
Goals for Dialogue Box Layout
Dialogue Box Analysis Process
Algorithm for Dialogue Box Design
Examples: Demonstrations from design projects and video case studies

2:30 pm: Dialogue Design Project - All

Project Description: Design a dialogue box for the functions and data provided, for a user group and product identity of your choosing

3:00 pm: Break

3:15 pm: Future UI's, Metaphor Design - Marcus

Fundamentals of Future User Interfaces

Future User Interface Design Issues
- Market
- Compatibility
- Industry standards
- Corporate Identity
- Development environment
- User-centered design and usability
- Productivity

Video and Multimedia
Dialogue Box Design
Expert Assistance

- Technology offers new media
- Design challenge: harmonizing powerful tools
- Development of multi-disciplinary teams
- New metaphors
- Need for clip libraries, templates, training

Examples: Demonstrations from design projects and video case studies
Metaphor Management
Dimensions of Pure and Applied Visual Semiotics

Rhetorical Tropes
- Hyperbole
- Metaphor
- Metonymy
- Synecdoche

User Interface Metaphors
- Character
- Graphical
- Pen-Based
- Virtual Reality

Noun Metaphors of Collection
- Desk
- Books, Newspapers
- Photographs
- Television
- Slides, Phonograph Record
- Cards, Boxes
- Rolls, Trays, Reels
- Trees

Verb Metaphors of Action
Example: User Interface as Movies
Example: Desktop Metaphor Spatial Allusions
Cultural Diversity of Metaphors

Culturally Diverse User Interfaces: Examples of Dialogue Boxes
- Geography-specific: European
- Gender-specific: Women
- Consumer market-specific: African-American
- Age-specific: Children
- Profession-specific: Designer

New Computer Metaphors
- Personal Assistant
- Wallet, Pocket Pal
- Cloth, Clothing, Gloves
- Pens, Wands
- Cards
- Multimedia
- Internet

4:00 pm: Metaphor Design Project - All

Project Description: Assuming that users have easy access to one million images, how can one communicate the essential nouns and verbs of retrieval and editing environments for a user group and product identity of your choosing.

Courses Main Page ACM SIGGRAPH Contact us about:
Courses | This Web Site

Final SIGGRAPH 96 Web site update: 25 October 1996.
For complete information on the next conference and exhibition, see: http/