Lecture Topics in HCI, instructor:Sheelagh Carpendale
Contents for:		CPSC 481

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