In August 2017, a team of passionate designers, researchers, and engineers at Google created a comprehensive set of data visualization guidelines covering everything from color, shape, typography, icons, interaction, and motion. The success of this collaboration led to the formation of Google’s first full-time data visualization team, which launched in May 2018.
Over the past year, we have continued to work on understanding needs, requirements and desires to shape how people visualize and interact with information.
Now, we want to share our insights with creators everywhere. We’ve published detailed public guidelines for creating your own data visualizations, summarizing our main principles and considerations.
Here are six strategies for designing any diagram:
1. Tell the truth
Data accuracy and integrity are paramount. Do not distort or confuse embellishments or partiality of information. Emphasize clarity and transparency.
Give users the contextual elements they need to understand a given visualization. Graphical integrity is maximized through the use of clear labels, accurate axes and baselines, and assistive tooltips and legends.
Exercise can help strengthen relationships, but it must not distort the data. Be transparent about the data sets used, their origin, and how they are collected and processed.
2. Lend a helping hand
Provide context and help users navigate data. Build capabilities that prioritize data exploration and comparison.
Design with users’ existing mental models (likely shaped by widely used tools) in mind. Create a warm onboarding experience that makes it easy for you to learn how to read diagrams and their information.
Choose visualizations and interactive features that support the discoverability of core features, such as selection, zooming, panning, and filtering.
Motion and interaction should support analytical reasoning and user understanding by revealing context, insights, associations, and causal relationships. Use the empty state as a moment of revelation.
3. Happy users
Always exceeds expectations. Think performance, improvement, surprise and innovation. Embrace a dynamic, fast and smart experience.
Create great visual experiences, then improve them in unexpected ways. When appropriate, use signature features and little moments of joy to guide users to what they need. The speed is as pleasing to the eye as the graphics. Consider motion and timing in the choreography of state transitions to help perceive a responsive system.
4. Make focus sharp
Reduce cognitive load and focus on what matters. Every motion, color and visual element should support data insight and understanding.
Focus on the user’s task and all other actions should follow. Direct users to access essential information as quickly as possible. Maximize the data-to-ink ratio and avoid redundant graphic elements. Apply color in meaningful ways to aid graph understanding: labeling, grouping, highlighting or measurement. Use actions sparingly – limit subtle transitions and hints to help users understand hierarchy, data direction, and relationships.
5. The Hug Scale
Allows the system to scale and adapt to any context. Respect different user needs in terms of data depth, complexity and schema.
Every diagram should be as accessible as possible. Consider how chart elements (color palettes, filter configurations, axes, panels, interaction mechanisms) scale to accommodate various user needs, screen sizes and data types (from single data points to large multivariate datasets). Consider a wide variety of possibilities rather than a hard-and-fast configuration. Apply interactive methods to minimize complexity, such as progressively providing details (progressive exposure), letting users change perspective, and linking different views for deeper insights.
6. Provide structure
Use visual attributes to convey hierarchy, provide structure, and promote consistency. The experience should be intuitive and easy to use.
Consistency promotes familiarity. Develop unity in graphic manipulation (shapes, colors, icons, typography) and interaction modes (selection, filtering, hover states, expansion). Motion should be controlled, giving the user a sense of stability and continuity while maintaining responsiveness. Consider in and out motion to help users understand the visual hierarchy of elements, the orientation of axes, and the data displayed. Maintain strong contextual cues, so no matter where users navigate in the diagram, they know how to get back.
