I\u2019m a big fan of data. I think that, second to maybe only social proof, it\u2019s one of the most powerful weapons a brand has in convincing prospective users or customers to trust it.\u00a0<\/span>\u00a0<\/span><\/p>\n That said, data isn\u2019t always the easiest to read or comprehend when all you have to look at is a bunch of numbers or steps.\u00a0<\/span>Or<\/span><\/i>\u00a0when it\u2019s buried in mountains of text. This is why data visualization is so valuable.\u00a0<\/span>\u00a0<\/span><\/p>\n Data visualization is the process of turning information into a graphic. There are many ways to represent data visually:\u00a0<\/span>\u00a0<\/span><\/p>\n Our brains can more quickly and effectively understand data in a visual format. In fact, studies show that\u00a0<\/span>visuals are processed 60,000 times faster than text<\/span><\/b>. As you can imagine, this makes data visualization a critical component of a website with tons of complex information on it.<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n In the following post, we\u2019re going to explore 4 things you can do to improve how you use and design data visualizations for the mobile experience.\u00a0<\/span>\u00a0<\/span><\/p>\n Here\u2019s the thing: Much like a design that doesn\u2019t look great, content that\u2019s too hard to read, or features that don\u2019t work, poorly-designed\u00a0data visualizations\u00a0on mobile can compromise the integrity of the brand.\u00a0<\/span>\u00a0<\/span><\/p>\n Now, I don\u2019t think that data visualization design in and of itself is the problem. Designers have come up with some amazing things.\u00a0<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n No, the problem we have today is that many data visualizations aren\u2019t designed with the mobile experience in mind. When that happens, only a segment of your audience can really enjoy\u00a0 the data you\u2019re presenting, while the rest are left frustrated because they\u2019re missing an important piece of the puzzle.\u00a0<\/span>\u00a0<\/span><\/p>\n Based on what we know about designing high-quality mobile web experiences, I\u2019ve put together 4 tips and examples of how you can improve your data visualizations for smartphone and tablet users:<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n There\u2019s a UX principle called\u00a0<\/span>Jakob\u2019s Law<\/a><\/span>\u00a0that says that consumers expect your website to behave similarly to the sites they spend the most time on. When you deviate from these intuitive designs, it can cause undue friction in the user experience.<\/span>\u00a0<\/span><\/p>\n Let\u2019s use the example of a map.\u00a0<\/span>\u00a0<\/span><\/p>\n According to Statista<\/a><\/span>, Google Maps is the most popular mapping and navigation mobile app by a long shot. Knowing this, it would probably be an unwise decision to add a mapping feature to a website that deviates too far from what mobile users are used to with Google Maps.<\/span>\u00a0<\/span><\/p>\n Look at how Google Maps handles a request for \u201cdog friendly hotels\u00a0st\u00a0augustine\u00a0beach\u201d:<\/span>\u00a0<\/span><\/p>\n Now, compare this to how\u00a0BringFido\u2019s\u00a0mobile search form works. Users initially see search results in this card format:\u00a0<\/span>\u00a0<\/span><\/p>\n This is similar to what we\u2019d see in a Hotels.com or Airbnb app. When users choose to view the data in Map view, this is what the search results look like:\u00a0<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n It\u2019s a little different from Google Maps because it\u2019s branded to\u00a0BringFido\u00a0<\/span>and<\/span><\/i>\u00a0has search filters on the right. Other than that, you could argue that the designer used Google\u2019s mapping style \u2013 for instance, the hotels being represented by their price tags \u2013 to create their own.\u00a0<\/span>\u00a0<\/span><\/p>\n It\u2019s not just the map display that\u2019s similar. Here\u2019s what Google Maps shows when a user clicks on one of the hotel results:\u00a0<\/span>\u00a0<\/span><\/p>\n A concise summary of the hotel, along with photo previews, a star rating, and buttons to learn more, appears in the lower third of the screen.\u00a0BringFido\u00a0uses a similar design:\u00a0<\/span>\u00a0<\/span><\/p>\n When the user clicks on any of the pins on the map, a matching result appears at the bottom of the screen with a preview of the data available on the location.\u00a0<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n If Jakob\u2019s Law is right, then this similarity in design to Google Maps should make\u00a0BringFido\u2019s\u00a0list visualization feature an easy one to interact with.\u00a0<\/span>\u00a0<\/span><\/p>\n This same principle applies to other data visualization formats. Regardless of what you\u2019re designing, research websites or apps that have similar visualizations that are popular. This is most likely what users will expect in terms of usability. You\u2019re then free to brand and customize the look and style of the visualization as you see fit. Just be mindful of overcomplicating it.<\/span>\u00a0<\/span><\/p>\n Minimal design and white space are the pillars of good design across all devices. White space, in particular, is helpful when designing data visualizations for desktop users as they help give your data room to breathe.\u00a0<\/span>\u00a0<\/span><\/p>\n For instance, this is how a bar graph looks on the\u00a0<\/span>Contra Freelance Industry Report 2021<\/span><\/span><\/a>\u00a0website:<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n When we see something like this, it doesn\u2019t look wasteful at all. The empty space around the graph brings more focus to the eye-catching (and interactive) data.\u00a0<\/span>\u00a0<\/span><\/p>\n But what would happen if we built in this amount of space around the mobile data visualization? It would likely squish the data down so much that the user would need to zoom to read it.\u00a0<\/span>\u00a0<\/span><\/p>\n This is what that same graphic actually looks like on the mobile site:\u00a0<\/span>\u00a0<\/span><\/p>\n It takes up a greater percentage of the screen compared to the desktop version, and that\u2019s okay. As long as the data visualization has a dedicated space where it\u2019s easy to find, and distractions are kept at bay, that\u2019s all that matters.<\/span>\u00a0<\/span><\/p>\n The other data visualizations on this site, including this bubble chart, are just as well-designed and with the right amount of white space:<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n As you can see, the graphics aren\u2019t crowding up against the margins. Nor do the users have to scroll in order to see the graphics in full. Zooming isn\u2019t needed.\u00a0<\/span>\u00a0<\/span><\/p>\n Each mobile data visualization is designed with the perfect amount of white space to frame the graphic without compromising how easy it is to read or interact with it.\u00a0<\/span>\u00a0<\/span><\/p>\n According to Google<\/a><\/span>,<\/span> the mobile and desktop versions of a site should have the same content. This makes for a consistent experience for all visitors. Plus, it ensures that all of your content gets indexed by search engines (which wouldn\u2019t happen if some of it were only on desktop).<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n So, what I\u2019m advocating for here isn\u2019t to display different\u00a0<\/span>data<\/span><\/i>\u00a0to your mobile visitors. Instead, what you should consider doing is using a more mobile-friendly data visualization format.\u00a0<\/span>\u00a0<\/span><\/p>\n Let me show you what I mean.\u00a0<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n This is Statista\u2019s data on the <\/span>\u201c<\/span>Number of monthly active Facebook users worldwide as of 2nd quarter 2021<\/a><\/span>\u201d<\/span>. It\u2019s in a line graph format:<\/span>\u00a0<\/span><\/p>\n Just looking at this, you can tell that there\u2019s going to be issues if the data were presented in the same format on mobile. So, here\u2019s what Statista does instead:\u00a0<\/span>\u00a0<\/span><\/p>\n It provides mobile users with two formats with which to read this data. The first is a sortable table format:\u00a0<\/span>\u00a0<\/span><\/p>\n\n
Design Tips for Mobile Data Visualization\u00a0<\/span>\u00a0<\/span><\/h2>\n
1 \u2013 Use Familiar Data Visualization Formats<\/span><\/h3>\n
![\"Google](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/Google1-300x210.png\")
<\/a><\/span>\u00a0<\/span><\/p>\n![\"bring](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/BringFido1-300x210.png\")
<\/a>\u00a0<\/span><\/p>\n![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/bringfido2-300x210.png\")
<\/a><\/span><\/p>\n![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/google2-300x210.png\")
<\/a>\u00a0<\/span><\/p>\n![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/bringfido3-300x210.png\")
<\/a>\u00a0<\/span><\/p>\n\u00a02 \u2013 <\/span>Don\u2019t Be So Frugal with Space<\/span><\/h3>\n
![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/mobiledatavisualization1-300x165.png\")
<\/a><\/span><\/p>\n![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/mobiledatavisualization2-300x210.png\")
<\/a><\/span>\u00a0<\/span><\/p>\n![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/whitespace2-300x210.png\")
<\/a>\u00a0<\/span><\/p>\n3 \u2013 Use Different Data Visualizations for Mobile Only<\/span><\/h3>\n
![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/graphformat-300x165.png\")
<\/a><\/p>\n
![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/sortable-table-format-300x210.png\")
<\/a><\/span>![\"mobile](\"https:\/\/origin-blog.mediatemple.net\/wp-content\/uploads\/2021\/11\/horizontal-graph-300x210.png\")
<\/a><\/span><\/p>\n