Interaction

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.

Navigation

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.

Pan within the view by scrolling or dragging
Reduce axis ranges to zoom in the visualization
Type the name of a US state.

From overview to fine-grained details

In complex visualizations, navigation must guarantee a seamless and intuitive exploration between different layers of information. Remember Ben Schneiderman’s information-seeking mantra, “Overview first, zoom and filter, then details-on-demand,” one of the most common navigation behavioral patterns in data vis.

Pan to move within the frame, scroll to zoom.
Act on filter to reduce the number of elements.
Hover bubbles to reveal details.

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.

Animation of a brush chart visualization
Hover elements to see the linking behavior
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.

Manipulation

Filter

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.

Profits by category - Jan 2016

Animation of a radar chart visualization
Set timespan with the slider, filter categories using the legend

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.

Product Comparison

Animation of a parallel coordinates visualization
Make a selection by clicking on a value along any axis. To expose patterns, sort dimensions by dragging axis horizontally.

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.

Granular
Two arrows, one pointing up and one pointing down
Aggregated
Data visualization of a treemap going from a granular view to an aggregate view Data visualization of a treemap going from a granular view to an aggregate view
Aggregated
Two arrows, one pointing left and one pointing right
Granular

Foster iterative data interpretation

Annotate

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.

Share

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.

Design elements

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.

Checkboxes

Examples of checkboxes

Simple slider

Example of a simple slider

Autocomplete input field

Example of an autocomplete input field

Augmented slider

Example of an augmented slider

Input/output

Example of an input/output

Lasso

Example of a lasso interaction

Smart tooltips

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.

Product Sales by Category

$320k
Click on bar to explore smart tooltips

Product Sales by Category

Animation of a bar chart with tooltip interaction

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.

Back to top