Visual communications typically consist of a number of different graphical elements: some always present, some appear on demand, and some make multiple uses of the limited space the screen can show at any one time. Management of this scarce resource (sometimes called its real estate) is one of the most important tasks in representing an interactive visualization and adds a fourth dimension to the problem, which can be thought of as time or layers or some combination of both. Fourth-dimensional solutions include techniques such as shared spaces, layers, pop-ups, tabbed spaces, timelines, zooming, and progressive disclosure techniques.
- Shared Spaces – The ability to use the same screen area for different visuals is an extremely useful technique. This provides users with a consistent area in which to expect information to appear while it provides the opportunity to display new information when contextually appropriate. The area can be the entire screen (such as navigating to a new web page), scrollable areas of images or text (such as a product shelf, or grid), inspector and property boxes that show attributes of an item in focus, and more unique views such as “cover flows” album views in Apple’s iTunes music player. Typically a control such as a menu bar, pull-down menu, or radio button dictates what information is displayed when, or the area can dynamically respond to internal states or mouse clicks to other areas.
- Layers – Layers are one or more overlays atop a base image, which can be a graphic or map that augments that image by adding information that relates to features within it. This technique is common in geography-based (GIS) systems, which add or remove layers from a base map to change the amount of information shown at any given time through the use of checkboxes and other controls.
These layers can be considered slices of different aspects of the same basic view, all registering to the same underlying shape or geography. Each layer represents some aspect of the visualization that can be considered separately or in combination with other layers. It is this ability for the user to control which layers can be viewed with others that provide an opportunity for inquiry. - Zooming – Also common in geographic displays is the ability to move through a large virtual two- or three-dimensional space through the use of zoom and pan controls, scrollbars, magnifiers, and rotation controls to navigate a virtual window within a larger space. Google Maps and Google Earth are good examples of applications that use these techniques.
- Virtual canvas – Some online presentation software applications, such as Prezi provide a large virtual canvas containing areas that the presenter zooms into and pans around to get a detailed close-up while maintaining a sense of context to the whole presentation. Stanford’s Republic of Letters project uses this large canvas technique as the main page for their Web site. Instead of dividing the site’s content into individual pages as most traditional Web sites do, they present a very large virtual canvas containing all the pages and provide controls that help the user smoothly navigate to the desired page.
- Pop-ups – Some information such as word definitions or data details are relevant only when a user wants more information and then should be quickly dismissed from view once the information has been provided. Common ways to present this information are tooltips, which present small amounts of information as the user’s mouse is over them and disappear when the mouse leaves the area, and dialog boxes, which appear when one clicks on an area to allow for larger amounts of information to be displayed and even interacted with before being dismissed with a click.
- Tabbed Spaces are shared areas of the screen that are displayed by selecting tabs, are a common space fourth-dimensional solution. Clicking on a tab quickly replaces the contents of the window beneath it. An interesting variant is the accordion control, where content is replaced within a list of possible options.
- Timelines are controls that facilitate the display of temporal information in a scrolling space that shows some portion of the overall time span at a time. Timeline widgets like MIT’s Simile and VisualEyes’s make it easy to show multiple timescales in separate bands (like a 1930s-era radio with a coarse- and fine-tuning dial).
- Progressive Disclosure – Using time or some other factor to cause the progressive revealing of information can be quite useful in showing process. As the factor increases, more of the image is exposed.
The dynamic and interactive capabilities of modern web-applications have opened up a wealth of possibilities for designers that are just now being explored as these new software tools are made available. These advanced capabilities have led to many innovative and useful techniques for representing information in ways that encourage discovery and understanding.
About Bill Ferster
Bill Ferster is a research professor at the University of Virginia and a technology consultant for organizations using web-applications for ed-tech, data visualization, and digital media. He is the author of Sage on the Screen (2016, Johns Hopkins), Teaching Machines (2014, Johns Hopkins), and Interactive Visualization (2012, MIT Press), and has founded a number of high-technology startups in past lives. For more information, see www.stagetools.com/bill.
Excerpted From Interactive Visualization: Insight from inquiry, by Bill Ferster. MIT Press, 2012