Dialog Box
Interface surgery: Converting an implementation-model design into a mental-model design
One of the peskiest implementation-model widgets on the Web is the tree view interaction. Tree views are a shining example of a graphical user interface element that reflects the system’s underlying structure without regard to users. In this article, we’ll take a look at converting this implementation-model widget into a mental-model widget.
The tree view is used to display the hierarchical structure of a set of folders in a way that clearly represents the hierarchy used to create the set. And it does a great job of this. It’s very easy to see from the figure below that the tree illustrates an outline view, like an outline you might create for a term paper. You see the root folder, folders nested within it, a small plus-minus icon next to each folder used to expand or collapse the folders, and you may even understand that each folder is clickable. But people don’t understand tree views as much as we’d like to believe.
Figure 1: Behold the tree view interface, in all its glory.
Requirements
To complete this article, you will need the following software
Adobe After Effects
Flash 8
Prerequisite knowledge:
General knowledge of After Effects and Flash
About the authors
Robert Hoekman, Jr., is a professional interaction designer and usability specialist who has worked with GoDaddy.com, Macromedia, Adobe, United Airlines, Cisco Systems, and countless others to provide superior user experiences to a wide range of audiences. In addition to his other writing credits, Robert authored the movie-based training course “Flash User Experience Best Practices”, the Flash design basics book “Flash Out of the Box”, and the seven-part InformIT.com series, “Designing the Obvious.”
Excerpted from “Designing the Obvious: A Common Sense Approach to Web Application Design” by Robert Hoekman, Jr. © 2007. Used with the permission of Peachpit. To purchase this book, visit http://www.peachpit.com.
