Wave Dashboard – How we design

By Harshal Bhalerao

ad-sales-sum-up

Dashboards can be used to provide valuable insight into your data. Salesforce Wave has revolutionized the way business users can drill down and visualize their data to make better business decisions. Wave dashboards and analytics in general have been extensively discussed in previous blogs on this forum. What makes Wave even more useful to a business is its ability to deliver visualizations on a variety of mobile devices.

With the Salesforce Analytics Mobile App, users can instantly slice and dice data on a number of devices no matter where they are working. This blog will focus mainly on how web dashboards can be enabled on a mobile platform.

We follow 3 simple mantras for Dashboard design:

  1. When in doubt, use fewer lenses. This makes dashboard easier to digest, fewer clicks, performance is faster.
  2. Grid based design, always.
  3. Use a defined color palette.

Information should be easily digestible with not much effort or help guide. In the example below, laying out the filters on the left, sections with clear titles and associated table view provides the user with all required information without too much interaction.

Browser Layout

analysis by Drug

iPad view Portrait

IMG_0199

iPad view Landscape

IMG_0200

A Wave dashboard typically consists of text descriptions, data filters, selection toggle buttons and visualization charts. While designing web dashboards, users can move all these components around before settling for the dashboard design they like. The JSON will populate itself with all these components. When designing for the mobile layout, however, it is imperative that the developer maintains the hierarchy in which he wants the components to appear. The mobile enablement is done by adding a “Layouts” component to the JSON. This layout should then be populated with information about the kind of device used, its screen orientation, followed by the dashboard components to be included. Colspan is your friend, use it effectively.

json

 

Next up is the need to align these components to better suit the mobile display. Components defined in double quotes and separated by a vertical bar ‘|’ are displayed in a single row. In this manner the developer can define the number of rows he wants in the mobile display. Each of these rows have equal column spans and it is up to the developer to distribute the column span between each component in a row. Similarly the text alignment and the font size can be defined. Filters and text take comparatively smaller space than a chart. Hence, we can have multiple filters aligned in a row followed by its corresponding chart which can take up the entire column span of a row. It is worth noting that the column span can be attributed an even number value, which in turn must be distributed among the components. This value must remain consistent for the entire mobile page.

json2

There are a variety of other conditions that one can add to modify the layout. Developers can define the vertical and horizontal padding of a component. This is typically used while including text boxes or buttons. A row span or zindex can also be defined in case the user wants a component to take up more vertical space than its partners in a particular row. A few other conditions like adding Row height can be used to increase the visual attractiveness of the dashboard.

springML design team is happy to review the best practices and provide guidance on dashboard design. Please stop our booth in Analytics zone at Dreamforce!

Special shoutout to our friend Suyog Deshpande (Experience Architect @ Salesforce) for all his design guidance.