Design for limited screen area

Plan your design for a small-screen mobile device by setting the same limitations that you expect the user to have.

Set your screen area to approximate the size and shape of the small-screen mobile device.
Account for the space consumed by the web browser control display.
Design for a portrait orientation.
Select a visualization type that works on a small screen. See Types of visualizations optimized for mobile experience.
Plan for a maximum of two visualizations per page.
Hide controls that are difficult to use on a small screen, are not needed for a guided experience, and take a lot of room.
- Hide as many panels as possible: Filters, Data, Tags, Lists, and Collaboration.
- Hide the Bookmarks popover or panel.
- Hide Details on Demand, if possible.
- Hide the Legend for all visualizations except pie charts.
- Hide the zoom sliders. They are too hard to use on a small screen.
- For maps, hide the Layers control. Consider whether you need any other controls that might obscure the visualization.
Configure column labels and axis selectors.
If the visualization title and page name are redundant, consider removing the visualization title and setting the page name to a descriptive title.
Use a text area to create controls that can be used by adult-sized fingers. See Create a text area to enhance usability for more information.
Plan for minimal interaction. Manipulating controls on a small-screen mobile device can be frustrating if there are too many controls or if they are too small. Design your small screen dashboard to require as little selection, tapping, dragging, or other interations as possible.
Do not expect your user to be able to resize the visualization: selecting the divider on a small screen is very difficult.
Test the dashboard on a small-screen device to make sure it is usable and useful.

For more detailed instructions, see Designing for a guided experience.