Mobile view
Creating a mobile-responsive view is important to ensure all users can access (and enjoy!) your dashboards.
Creating a mobile view involves more than simply stacking your visuals. You’ll need to test the mobile view on your phone and consider:
How easy is it to see the key data or information?
How does the information flow?
Adjust the design as you test.
If your data visualization tool is automatically mobile responsive, test that to ensure figures are stacking as expected. If it is not (like Power BI), you will need to create a second mobile view. In creating your second mobile view, follow the guidance below.
Note: For internal reporting, PowerBI has a robust mobile view creator and dedicated IOS and Android app. This guide is concerned with public reporting where no dedicated mobile view exists
Create the mobile view last.
This should be the very last thing you do after you’ve finalized all the formatting, alt text, and tab order of the desktop view. You want to ensure the mobile and desktop view match and have all the curated alt text you created.
Duplicate the desktop view page, resize visuals to 330 wide, move visuals to the far left, and make the page size width = 360.
Name the tabs “desktop” and “mobile”.
Make design and accessibility updates for mobile.
Imagine being on the go and a mobile user of your dashboard. Can you make anything easier for your users to see or infer?
In some cases, it may be helpful to add a card visual to highlight a key metric larger for mobile. Consider this, and then test on mobile.
Make formatting updates for mobile.
Within each visual, you may need to update certain formatting to better fit on mobile. Some possible formatting updates:
Filters in mobile should be drop-down filters, which saves significant space on mobile (instead of longer pick lists).
Data labels may need to be removed in mobile. They are often too small and can cover up seeing the trend in the chart.
Tables may need to be adjusted to better fit on mobile. The title may need to be shortened. Column widths may need to be thinner to fit, and text may need to wrap on mobile.
Put filters above the visuals they affect in the mobile view.
Remember that the reading flow of a mobile dashboard is different from desktop.
On a desktop, users can move around the dashboard and more easily reference an earlier card/visual. In mobile, the view is much more linear from top to bottom.
Do not make users scroll up and down to use filters. They should come across any filters (and be able to use them) before the visuals that are filtered.
Restructure any dashboards using toggles or buttons.
Toggles work on desktop when they are discoverable and easy to use. On mobile, toggles are not recommended, particularly if they rely on users scrolling up and down to remember there are toggles and to see the impacts of clicking them. Instead, consider other dashboard structures.
For example, it may be best to build a mobile view of the first toggle view, and then add visuals to the bottom that capture the key information from the other toggle views. This will create a much longer mobile view, but the information will flow more like a desktop user.
Make tables shorter in the mobile view.
Tables should not be more than 245 pixels long in mobile.
Longer tables can create issues for mobile users: they could get stuck scrolling the table, without being able to scroll beyond the dashboard.
Last updated