The most important thing to consider when designing a dashboard for mobile use is that you should not try to make it compete with or replace existing dashboards. A mobile dashboard should complement other dashboards and does not need to be comprehensive. A dashboard displayed on a phone should be kept as simple as possible. Like any other dashboard, the design of a mobile dashboard should start with a thorough understanding of the end user. The following are some questions to consider when building a dashboard for mobile:
- What is this person's role in the organization?
- In what scenarios will this mobile dashboard be used?
- What organizational goals are reached with mobile data access?
Most mobile users have little or no need for in-depth visualizations as the small screen size of a mobile device is not suitable for in-depth analysis. If a mobile dashboard has too many visuals, it is likely not focused enough. Another consideration is that mobile users may not have access to an input device to initiate dashboard interactivity, so interaction between elements should be limited.
Because mobile dashboards have less screen space than their desktop counterparts, it can be challenging to create an aesthetically pleasing interface and still provide users with the ability to get the answers they need at a glance. One way to do this is to use color effectively, and using contrasting background and foreground colors is one technique that can be effective. With contrasting colors, metrics and outliers stand out more.
Many mobile dashboards are about conveying performance. Indicators and gauges are often the best visualizations, as information can be consumed quickly and action can be taken immediately in response to it.
Tip:
When showing charts, limit the use of text and grids. Additionally, limit or avoid visuals that contain too much information to be consumed quickly. This includes details, lists, and legends.
Best practices for dashboard design
The following are best practices for designing dashboards for mobile devices:
- Choose a phone orientation (portrait or landscape) and design for it. Dashboard elements are designed to take up 100 percent of the display and do not realign themselves with changes in the display's aspect ratio.
- Take advantage of the fact that many desktop browsers (for example, Google Chrome) have built-in tools that enable you to get a close approximation of how your dashboard will look on mobile devices. When assembling your dashboard, periodically turn these tools on to get a sense of how things look, and adjust sizes, text, and colors as necessary.
- Take advantage of the fact that dashboard elements can be expanded at run time to fill the entire display.
- Use a dashboard's ability to group and stack elements to your advantage, but be conservative. You should not try to re-create a desktop dashboard for your phone by overusing these abilities. When used, stacks (tabs) should be renamed to reflect their content.
- When adding elements to the dashboard, do not add any unnecessary text such as titles and descriptions.
- Don't add a header to your dashboard unless it needs one.
- Limit the amount of text you place in each element's title and description (or omit text in these areas altogether).
- For all elements, keep the Last update text option off.
- For the pie chart and serial chart, turn off the Hover text option.
- Dashboard actions should be kept to a minimum.
- Use selectors sparingly. When you use them, consider placing them on a sidebar configured to slide over the dashboard rather than on a dashboard header.
Best practices for maps
The following are best practices for maps and legends used in dashboards on mobile devices:
- Maps should be as simple as possible. Limiting a map to one operational layer whose symbology contrasts with the background basemap is ideal. This will make the map easier to interpret and faster to draw, and it reduces the amount of data being downloaded to your device over what may be a slow network connection.
- Disable pop-ups on the operational layers. Tapping a single feature on a phone is difficult, and there isn't as much space on the phone to show an info window on top of the map as there is on your desktop.
- Consider whether a refresh interval is necessary. Many mobile dashboards will be opened and then immediately closed once the information they display has been consumed.
- When adding a map to a mobile dashboard, avoid enabling map tools such as search, layer visibility, legend, basemap switcher, and so on. They are rarely needed in mobile situations.
- Because the map used on a mobile dashboard should be simple to understand, adding a map legend element is typically unnecessary.