Fight the blue light: Screens are probably one of the key offenders in the blue light war. It used to be the sun. With always-on set-to-the-max-brightness screens that are near-constant, we're setting our retinas up to fail. White in particular loves to amplify this effect, which is why some of the nicer phones offer a night-mode and blue light filter. To ease screen glare, I've opted to soften the white with a lemon cream background.

Make vizzes easier to click: Smaller screens not only mean less real estate, but reconsidering the how the data itself is presented due to an entirely different shape (most people interact with their phone upright). We also have less precision on a phone. We've learned (and anyone who remembers the 1980's or '90's knows it was learned) to use mice as inputs. Our fingers are instinctual, but the lack of texture and minimal feedback is not. With this is mind, I made the bars in super chunky to help my users click.

Intentional filters: Phones have a compressed space and are likely used in the middle of other activities. My targeted end user may be in a warehouse and dividing attention. I've also added a set action focused on the Shipping Mode that activates the charts surrounding it. This highlights that category and lets me compare it to others versus removing details with a traditional filter.

Now I'll bring this dashboard into the device designer to create the mobile version. Right away my dashboard looks like this:

In the image above, you'll notice that I have new options in my dashboard pane. Automatic layout is selected and my dashboard is slightly greyed out as a signal that I don't need to do anything. Tableau Desktop tiles each chart one by one in z-reading order. I don't need to, but I could choose to edit this if I want to tweak it even further. This dashboard looks exactly how I hoped it would! If I leave it automatic, it will continue to update as I make changes.

My tips for optimizing automatic layouts:

Filters go above the charts that display them. Using a global filter? Select them from the first chart, so it goes to the top of the dashboard.
Automatic follows a z-reading pattern based on the upper left corner of every worksheet. Remember this when creating the desktop version of your dashboard so you have an idea of how it will display on mobile.
Floating designs get converted to tiled in the mobile layout. Items that are stacked get read by their starting pixel.

Learn more about creating automatic phone layouts in Tableau.

Attachments

  • Original document
  • Permalink

Disclaimer

Tableau Software Inc. published this content on 20 May 2019 and is solely responsible for the information contained herein. Distributed by Public, unedited and unaltered, on 20 May 2019 17:22:19 UTC