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.
Organizer
Aaron Marcus
Aaron Marcus and Associates, Inc.
Lecturers
John Armitage
Volker Frank
Pamela Tien
Aaron Marcus and Associates, Inc.
Schedule
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
Sound
Video and Multimedia
Three-Dimensions
Metaphors
Agents
Complexity
Dialogue Box Design
Expert Assistance
Conclusions
- 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.
| 
