Visualizing Interaction

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.

Powerpoint lectures

Part 1: Representations introduces the idea of representations and some basics of visualizing information.

Topics Covered

representations
information visualization
visual variables
metaphors
direct manipulation
dynamic queries
Optional: Methods for creating and developing interface ideas

In-Class Activities

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 many videos to illustrate novel and creative interface designs and metaphors. Students tend to be quite impressed by the ideas presented in the videos.

Additional Readings

Things that make us smart. Donald Norman (1993), Addison Wesley.
- Chapters 3 & 4 give an excellent background and engaging discussion on the value of representations.
Readings in Information Visualization, Card, Mackinaly and Shneiderman, Morgan Kauffman
- the definitive source book for information visualization techniques
Visual display of quantitative information. Tufte, E. Graphics Press, PO Box 430, Cheshire, Connectictut, 06410. (1983)
- If you want to visualize data, this is a must read book just full of examples. His other books are also good:
- Tufte, E. (1990) Envisioning information. Graphics Press, PO Box 430, Cheshire, Connectictut, 06410.
- Tufte, E. (1997) Visual explanations Graphics Press, PO Box 430, Cheshire, Connectictut, 06410.
Readings in Human Computer Interaction: Towards the Year 2000. Morgan-Kaufmann.
- Working with Interface Metaphors, p. 147-151, talks about the roles of metaphors in the interface, and how designers can come up with good ones.
- Visual Information Seeking, p. 450-456, introduces the notion of tight coupling of dynamic queries and starfield displays.
- Tools and Techniques for Creative Design, p. 128-141, describes how we can apply traditions in existing disciplines to creative interface design, how metaphors and user observation can influence creativity, and how ideas can be generated.
Interface metaphors and user interface design, Carrol, Mack and Kellog (1988),in Helander (ed.) Handbook of Human Computer Interaction, North Holland.
- another valuable description of the role of metaphors
Direct manipulation: A step beyond programming languages. Shneiderman, B. IEEE Computer 1992, 16(8).
- The original article that coined the term and the concept of direct manipulation

Major sources used to prepare lecture material

The collection Readings in Information Visualization by Card, Mackinaly and Shneiderman (Morgan Kauffman Press) is the definitive source book of relevant papers.
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.
Chapters 3 & 4 of Donald Norman's book Things that make us smart provide an excellent background to the cognitive role of representations.
Edward Tufte's brilliant book set including The visual display of quantitative information and Envisioning information are required reading for anyone designing visual displays.
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).
The reading Tools and Techniques for Creative Design supplied pretty well all the raw material for creativity.