Lecture Topics in HCI, by Saul Greenberg
Contents for:	All Topics	CPSC 481	SENG 609.05	Industrial Course

Graphical Screen Design

One small but still essential component of graphical user interface design concerns the actual layout of elements on the screen. This is the realm of graphical design, and this topic presents students with some (but by no means all!) rudiments of screen layout.

Overheads

• Graphical screen design: [Adobe PDF]

Handouts

• Exercise: Graphical redesign

Topics covered

• What a graphical user interface must account for
• Components of visible language
• Visual consistency
• Screen layout and grids
• Relationships between screen elements
• Navigational cues
• Economy of visual elements
• Legibility and readability
• Imagery
• Choosing between widgets, and reducing complexity

Required Readings

• Principles of Effective Visual Communication for GUI design, p.425-441, provides much of the raw material in this topic.

Optional Readings from Baecker Grudin Buxton and Greenberg

• Color graphics---Blessing or Ballyhoo, p.442-443, gives a very brief introduction to colour in the interface.
• A comparison of graphical user interfaces, p.457-468, compares the look and feel of widgets between several major vendors.

Videos

• Optional video: All the Widgets, by Myers (1990, SVGR 57) contains many (animated) examples of widget elements and how they work within screens.

In-class teaching tips

I use many examples of actual screen snapshots to illustrate the graphical design ideas of this topic. While most come from the sources below, virtually any screen can be analyzed and even re-designed during class time. I also ask the students to redesign the interface given in the exercise above both before and after this module. 

Major sources used to prepare lecture material

• I use many concepts and examples from the book Designing visual interfaces, by Mullet & Sano, Prentice Hall, to illustrate problems and solutions in graphical screen design. This is a must read.
• The Principles of effective visual communication reading also supplied many discussion points.