Beyond Simple Screen Design

Creating good interfaces requires designers to think really hard about how they want to visualize the essence of the interface. In essence the interface becomes a visual language which in turn is created from several concepts: the basic visual representation, how data is visualized (information visualization and visual variables) , choosing appropriate metaphors, and providing good interaction techniques such as direct manipulation  and dynamic queries.


Topics covered

Required Readings

  1. Chapter 3: The Power of Representations. Norman, D. (1993) . In Things that Make Us Smart, 43-76, Addison-Wesley.
  2. Chapter 15: Information Search and Visualization. Shneiderman, B. (1998) 509-549. In Designing the User Interface, Addison Wesley.

In-class teaching tips

The presentation is fairly straight-forward. However, it is difficult to show a "recipe" for crafting good representations without seeing specific examples. To this purpose, I choose from the above videos to illustrate novel and creative interface designs and metaphors. Students tend to be quite impressed by the ideas presented in the videos.


The visualization videos demonstrate excellent examples of information visualization through animation, fisheye views, visual changes in large overviews of the data, and dynamic queries. The metaphor videos illustrate different metaphors and approaches to representations. These videos change year by year because there are so many good ones to choose from!



Additional Readings

  1. Things that make us smart.  Donald Norman (1993), Addison Wesley.
  2. Readings in Information Visualization, Card, Mackinaly and Shneiderman, Morgan Kauffman
  3. Readings in Human Computer Interaction: Towards the Year 2000. Morgan-Kaufmann.
  4. Interface metaphors and user interface design, Carrol, Mack and Kellog (1988),in Helander (ed.) Handbook of Human Computer Interaction, North Holland.
  5. Tufte, E. (1983) Visual display of quantitative information. Graphics Press, PO Box 430, Cheshire, Connectictut, 06410.
  6. Direct manipulation: A step beyond programming languages. Shneiderman, B. IEEE Computer 1992, 16(8).

Major sources used to prepare lecture material

  1. The collection Readings in Information Visualization by Card, Mackinaly and Shneiderman (Morgan Kauffman Press) is the definitive source book of relevant papers.
  2. The discussion about metaphors is taken both from the reading Working with Interface Metaphors, and from Interface metaphors and user interface design, by Carrol, Mack and Kellog 1988, in Helander (ed.) Handbook of Human Computer Interaction, North Holland.
  3. Chapters 3 & 4 of Donald Norman's book Things that make us smart provide an excellent background to the cognitive role of representations.
  4. Edward Tufte's brilliant book set including The visual display of quantitative information and Envisioning information are required reading for anyone designing visual displays.
  5. Direct manipulation was coined by Ben Shneiderman, and some of the discussion of it is inspired from his paper Direct manipulation: A step beyond programming languages, IEEE Computer 1992, 16(8).
  6. The reading Tools and Techniques for Creative Design supplied pretty well all the raw material for creativity.