Attract people to analyze information from different angles.
Disclaimer: The current interaction examples below are missing proper label and navigation accessibility. Updated interaction examples will be added within the coming weeks. Please do not copy the source code until the examples are updated, which will be apparent when this disclaimer is removed.
Control your elements
Standard navigation features are fundamental to guarantee a tool’s accessibility. Panning and zooming offer more to see, framing the view to focus on a specific portion of the screen. When coupled with a quick and smart input for an items’ selection, your design instills confidence and reduces confusion.
From overview to fine-grained details
In complex visualizations, navigation must guarantee a seamless and intuitive exploration between different layers of information. Remember’s information-seeking mantra, “Overview first, zoom and filter, then details-on-demand,” one of the most common navigation behavioral patterns in data vis.
Create a dialogue between multiple visualizations
When multiple visualizations using the same data can be seen on a single screen from different views, give the user a way to identify patterns and behaviors among views. The use of “brushing and linking”, such as the process of selecting (brushing) items in one display to highlight (or hide) corresponding data in the other views, is very powerful.
Build environments, rather than dashboards
Complex situations benefit from rich visual analytics tools with multiple visualizations and robust settings. To coordinate and manage a set of visualizations, focus on consistent and meaningful transitions among views. Reduce ambiguity of global and specific controls.
Analysis rarely happens all at once, making filters a fundamental means of looking at a full data set. By limiting the number of items in a view, coupled with real time updates to the visualization, you can allow for a rapid and reversible exploration of data subsets.
Select and sort
Users should be able to point to an item or region of interest in the data and take action. Common forms of selection include mouse hover, mouse click or region selections.
Selection is fundamental to object manipulation— such as highlighting, annotation, details-on-demand— and can be starting point for more complex actions based on the object’s properties (e.g. keep or exclude, drill down, etc.). Let the user sort data according to a specific variable and arrange elements in the layout to highlight trends, clusters, and create a hierarchy among dimensions.
Trigger exploration and offer insights
Complex scenarios need to be explored using multiple layers and understood through several angles of analysis. A clever tool should encourage in-depth exploration by showing hints, making suggestions, and allowing users to see things from many perspectives. Visualization elements can evolve and mutate; they can smoothly switch from aggregated to granular data; they can become a benchmark or a pivot object—all to strongly support the discovery of new insights.
Foster iterative data interpretation
Provide users with tools for recording, organizing, and communicating insights gained during exploration. Allow them to point at specific items or regions within a visualization and associate them to explanatory text or links to other views.
Record and archive
After conducting analysis, users need to review, summarize, and communicate their findings, often in the form of reports or presentations. Provide users a way to record specific moments and steps of their exploration and to manage them in order to create stories based on their visual exploration.
Collaboration, with social interaction and multiple interpretations, is fundamental to the analysis process. Tools should be able to export views in different formats (png, jpg, ppt, pdf, etc.). Make charts easily embedded, maintaining their interactive functionalities, and generate data subsets (csv, json, xls, etc.) for revisitation.
Create a clear and dynamic structure
Framing and structuring the UI is fundamental to creating a clear hierarchy between the main view and the settings areas. Allow users to easily find what they need, carefully designing toolbars and control panels that affect the visualization globally or locally. Design a dynamic and flexible environment in which components change depending on user behavior.
Dynamic query widgets
Query widgets constitute the core of intuitive interaction with data. The most appropriate widget is largely determined by the underlying data type.
Simple graphical components (checkboxes, sliders, etc) are often enough to support exploration, but designing more sophisticated query widgets which work both as an input and as an output (for example using bars in a bar charts or the slice of a piechart as a filter) is far more effective in revealing patterns across data sets.
Autocomplete input field
Pop up windows and tooltips that appear on mouse hover are a widely used interaction technique in visualizations. They’re mainly used to analyze numeric values, but they can evolve from simply a way to display a label, to a trigger point for a deeper analysis showing comparisons. They can provide shortcuts to other views or act as a feedforward that gives information to the user before performing an action.
Mouse actions & gestures
Mouse actions on desktop and gestures on mobile devices are the user’s primary modes of interactivity. Rely on conventional interaction patterns to accommodate users’ habits when possible and minimize the risk of misunderstanding and frustration.
Complex visualizations might request the design of unique and custom behaviors. For example, a “double click” might create a new connection in a network, or a “stretch” might lead to a sublayer of information. In these particular cases, be careful to balance standards and unconventional actions.