Humanizing Data — Part IV (Mobile)

How to design data interfaces for mobile

We’ve discussed the importance of designing for data; it’s all around us and is not going anywhere anytime soon. However, with such a limited amount of screen space, how do you display data effectively within a mobile experience?

The answer is that you need to be highly efficient with your available screen space.

The following three points are crucial to maximizing your mobile space for highly effective data experiences: Customizable Headers, Succinctness, and Layout.

Customizable Headers

With customizable column headers or dropdowns, you are able to show a lot more than just (the traditional) one metric. You can keep it brief while leaving the breadth of your data available (see a previous article on this).

Succinctness

Keep it short. The more columns you can show at once, the more helpful the experience. Shortening a column (see below from “Questions answered” to “Questions,” clears space for a second column. This makes the table that much easier to extract insights from.

Layout

Traditional Tables

You can fit a fair amount of (data) people in each traditional table vertically. Stacking the avatar on top of the name instead of side by side, gave some much needed additional room and ultimately helped enable a third column to be shown.

Horizontal Layout

With A horizontal layout we were able to fit three students on each row and show a lot more data at once. To make this work with two statistics, we used icons (instead of text) within the rows to represent each stat column.

Notice that the final two rows of image 2 deviate from the others. With the first, I experimented with a layout that would be less tall than the others. With the second, I used colours (instead of icons)to represent the column statistics. (In image one I also experimented by making the last row simpler.)

Navigation
For both of the layouts above, if you are displaying a lot of data you will likely have users scrolling (which can be a little bit of a mess for your column headers-use sticky stables). I suggest using swipe gestures (as carousels) to easily navigate through all the data.

If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Give this a clap 👏!