We will take some quality time to review—and give feedback—for the following assignments which have been submitted so far:
- Gallery Pages, Version 2
Showing Complex Data
Information graphics communicate knowledge visually rather than verbally. When done well, they let people use their eyes and minds to draw their own conclusions.
They show, rather than tell.
Information graphics simply means data presented visually, with the goal of imparting knowledge to the user.
This data presentation includes:
- tree views
- bar plots
- diagrams of real-world objects
Because we are using computers rather than paper, we can allow users to choose how they view the data using interactivity. Rather than simply being a passive observer, a user can choose how to view the data by rearranging or showing/hiding elements.
As the designer, you need to understand what the user needs to learn from the material. Can he or she find something very specific within the data in a short amount of time? Which act would be more effective for this use: searching or browsing? Is the “big picture” the point of the process, with a few details thrown in for clarity, or are the details themselves the end goal?
Understanding the User’s Interaction with Your Data
Users don’t want to spend a lot of time learning your methods. Good interactive information graphics quickly offer users answers to these questions:
- How is this data organized?
- What’s related to what?
- How can I explore this data?
- Can I rearrange this data to see it differently?
- How can I see only the data that I need?
- What are the specific data values?
There are many design patterns for dealing with complex data. Here is just a sample.
Overview Plus Detail
Place an overview of the graphic next to a zoomed “detail view.” As the user drags a viewport around the overview, show that part of the graphic in the detail view.
As the mouse rolls over a point of interest on the graphic, put the data values for that point into a tool tip or some other floating window.
As the mouse rolls over an area of interest on the graphic, highlight that slice of data and dim the rest.
Provide ways to filter the data set immediately and interactively. Employ easy-to-use standard controls, such as sliders and checkboxes, to define which slices or layers of the data set get shown. As the user adjusts those controls, show the results immediately on the data display.
Show all the data in a single dense page, with small-scale data items. Wherever the mouse goes, distort the page to make those data items large and readable. Unlike Overview Plus Detail, the zoomed in image lies right on top of the larger data set.
Show the data in a table, and let the user sort the table rows according to the cell values in a selected column.
Stack multiple graph lines in one panel; let them all share the same x-axis.
Create many small pictures of the data using two or three data dimensions. Tile them on the page according to one or two additional data dimensions, either in a single comic strip sequence or in a 2D matrix.
Express multidimensional and/or hierarchical data as rectangles of various sizes. You can nest those rectangles to show the hierarchy, and color or label them to show additional variables.
More design patterns for complex visual data can be found at patternbrowser.org.
Calendars of Events contain complex data, and are handled many different ways on various sites. Here are a few I found. Some are more beautiful and engaging than others.