Interactive Graphics

People learn more about the world through their sense of vision than through any other channel. That’s one reason images serve an important role in training. The evolution of web-based technology has allowed us to move beyond static and motion visuals to online interactive graphics with the potential to deepen understanding of the topics we care about. This blog post demonstrates how effective the new generation of visuals can be.

Note: all graphics are hyperlinks to the source.

Estimated reading time: 4 minutes, plus time to experiment with the examples

Traditional static and motion graphics provide a strong foundation for adding an additional element of interactivity. It is fitting to pay tribute to the excellent thinking behind traditional graphics because a solid understanding of visual design allows us to add complexity to our didactic graphics. In a nutshell, effective didactic graphics must clearly and accurately depict data.

In the mid-1800s, Florence Nightingale visually documented causes of death during the Crimean War. They gray wedges represent the number of preventable deaths in a month. Light red areas represent the number of deaths from wounds and black areas represent deaths from all other causes. The overall message is clear – the number of preventable deaths is unacceptably high.

Florence Nightingale’s graphic paradigm was used successfully for a contemporary interactive online chart about a totally different topic.

This chart shows what issues Americans care about in a given year. Visual representation makes it easy to recognize the relative importance of issues. Users can click a wedge to see how important an issue was in various years. They can also select the year for which they want to see results or view topics by political affiliation.

The Political Climate chart gives the user a lot of control. The user determines what he/she wants to learn about and can access information in any order.

A camera’s aperture determines the depth of field in a photograph. This concept is best demonstrated visually. Microassist demonstrates the concept by allowing the user to change f-stops on a camera lens.

Scale of the Universe tackles a different kind of visual communication problem – one that perplexes many scientists. How can you help people understand size relationships among objects that differ vastly in scale? People can understand differences in scale among things that are relatively similar to our own size, but much of what exists around us is a vastly different size – either smaller or larger. This interactive graphic allows users to scroll through the dimension of size. Clicking an object provides a written description while the lower right corner displays how the size compares to a human.

The New York Times is one of my favorite sources for interactive informational graphics. A Nation of Wineries provides a visual depiction of wineries by location and year.

• Mousing over a state shows the number of wineries.
• Clicking a state opens a detail map.
• A slider shows differences across time.

The Fukushima Daiichi Nuclear Plant satellite photographs allow users to move a slider to view sides before and after the earthquake and tsunami in 2011.

Interactivity puts the user in control of training content and that’s important. Individuals have the opportunity to investigate what interests them. They can move around a graphic and change elements in an effort to understand relationships.

Visual depictions shape the mental models we create for objects, concepts, and relationships. Visual depictions take many forms including:

• Charts
• Graphs
• Diagrams
• Maps
• Icons
• Illustrations
• Photographs
• 3D models

Within each of the categories above, visuals can eb anywhere on the scale from simple to complex. Some graphics are elegant, while others may appear crude. The important thing is that the creator understands the message and uses the most effective techniques to clearly communicate the message to others.