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.
- information visualization
- visual variables
- direct manipulation
- dynamic queries
- Optional: Methods for creating and developing interface ideas
- Chapter 3: The Power of Representations. Norman, D. (1993) .
that Make Us Smart, 43-76, Addison-Wesley.
- Chapter 15: Information Search and
Visualization. Shneiderman, B. (1998) 509-549. In Designing the User Interface, Addison
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
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!
- Information Visualization using 3D Interactive Animation, by Xerox PARC (1991, SVGR 63)
- Browsing Graphs Using a Fisheye View, by DEC and Brown University (1993, SVGR 88)
- High Interaction Data Visualization (1993, SVGR 88)
- Dynamic Queries, by Shneiderman (1992, SVGR 77)
- Visual information seeking using FilmFinder (1994, SVGR 97)
- Hierarchical visualization with TreeMaps, by U Maryland(1994, SVGR 97)
- Exploring large tables with the Table Lens, by Xerox Parc (1995, ACM CHI Video)
- DragMag Image Magnifier, by Ware (1995, ACM CHI Video)
- Toolglass and magic lenses: the see through interface by Bier (1994, SVGR 97)
- A Taxonomy of See-through tools: the Video, by Bier (1995, ACM CHI Video)
- The movable filter as an interface tool: the Video, by Bier (1995, ACM CHI Video)
- Visualizing large trees using the hyperbolic browser, by Lamping (1996, ACM CHI Video)
- Alternate Reality Kit, by Smith (1987, SVGR 26)
- TeamRooms, by Roseman and Greenberg (1996, ACM CHI Video)
- The DeckScape Web Browser, by Brown (1996, ACM CHI Video)
- The Web book and Web Forager, by Xerox Parc (1996, ACM CHI Video)
- 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,
- the definitive source book for information visualization techniques
- 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
- Interface metaphors and user interface design, Carrol,
Mack and Kellog (1988),in Helander (ed.) Handbook of Human Computer Interaction, North
- another valuable description of the role of metaphors
- Tufte, E. (1983) Visual display of quantitative information.
Graphics Press, PO Box 430, Cheshire,
- 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,
Tufte, E. (1997) Visual explanations Graphics Press, PO Box 430, Cheshire,
- 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
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
- Chapters 3 & 4 of Donald Norman's book
Things that make us smart
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
- 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.