Insights

Insights are visual charts or diagrams that typically appear in the Stage but can also appear inside Modules on the Dashboard.

Money Bar

Web

When to Use

Insights should be purposeful and thoughtful in execution. Consider the following before deciding whether it is appropriate to use an Insight:

  • An Insight must help the user better complete a workflow: It must be directly relevant to the page it is on and effectively communicate to the user what exactly needs to be done. It may also help the user navigate through and/or parse the page.
  • An Insight must help users understand the content underneath it: For example, an Insight may help the user effortlessly identify items in a dataset that require special or immediate attention.
  • Avoid including Insights to merely make a page more visually interesting. If an Insight is not meaningful, it does not belong.

Appearance & Behavior

They are visually striking and celebrate the product’s identity. Follow the Color guidelines when designing these visualizations.

insights_dia_color
InsightsStages

Example Stages with Insights Charts from QuickBooks Online with Payroll

Insights can be interactive. For example, the user can reveal more information by hovering or clicking on visual elements. Insights may also be used to filter table contents or navigate to certain items on the page. For example, the Money Bar serves as an Insight for the Customer List page. The user can select a segment of the bar to filter the list of contacts on the page.

Simple, elegant transitions should be applied when loading and interacting with an Insight. The transition used should be appropriate for the corresponding Insight type. Using transitions for a component as visual as an Insight allows the application to feel dynamic, responsive, and engaging.

Example Insights Charts

Money Bar

InsightsMoneyBar

Money Bar with no bars selected, and with each different bar selected

Pie Chart

Example pie chart

Example pie chart

Bar Chart

Example bar chart

Example bar chart

Positive/Negative Chart

Example positive/negative chart

Example positive/negative chart

Half-Pie Chart

Example half pie chart

Example half pie chart

Line Graph Chart

Example line graph

Example line graph

© Intuit 2016 | Terms of use