Skip to main content

Widget Guidelines

Use the Widget component to display insights about a specific part of a product. These insights are usually charts or datasets that make sense on their own, but might be further contextualised by the screen they're placed on.

Principles​

When designing a widget, follow these principles:

  • One widget should serve one definitive goal. Don't cram multiple goals in one widget. Create separate widgets for multiple different goals.
  • A widget should be understandable on its own. Don't make a widget heavily dependent on information outside itself. It should be independent from the screen so it can be used across multiple screens. Display the time range of the widget's content.
  • The data in the widget should be easy to understand. Don't include so much data that it's not easily scannable. Don't use terms and metrics not present in the product. Contain the fundamental knowledge — not more, not less.
  • A widget should lead somewhere. Include a follow-up action to provide more details or make a related action (e.g. details, settings, history, adding new items).
  • A widget should provide insights, not simply raw data. Display data in a way that supports understanding rather than just listing information.
  • A widget should be visual. Don't make text-heavy widgets. Use charts and diagrams to visualise data.
  • A widget should never be blank. Don't display empty content for widgets with unused features. Show an empty state explaining what information would go here and what steps to take to activate it.

Structure​

  1. Widget title
  2. Widget settings
  3. Widget metrics (optional)
  4. Widget footnotes (optional)
  5. Widget content
  6. Widget follow-up actions

Best Practices​

Widget title​

  • Be as short as possible.
  • Properly describe the widget even outside a dashboard.
  • Avoid generic terms alone (e.g. "Results" → use "Campaign Results").

Widget settings​

  • Place in the right side of the title bar.
  • Include time range selection and filtering options.
  • Fixed time range options: 7, 30, 60, 90 days.

Widget follow-up actions​

  • Include in all widgets.
  • Place at the bottom of the widget.
  • Start with the more important action.
  • Avoid more than two follow-up actions.