How to Improve UX through Data Visualization
Lexie Lu | 4 minute read | March 12, 2018 
When it comes to improving the user experience on your website and in your marketing efforts, data visualization is one of the best elements you can add. Visualizations are so effective, 74 percent of social media marketers add visuals to their social media posts. The best part? There are many places and ways to use data visualizations.
There is a science behind why visualizations work so well to draw the user into your website. 90 percent of the information the brain processes is visual. Once you understand the way your brain processes information and why you should break up your content with visuals, the importance of adding UX data visualizations to your efforts becomes obvious.
Related: Understanding Millenial Visualization Trends
The bottom line is that images make an impact, and including them on your site enhances the overall user experience on many levels. There are several ways you can improve the user experience of your website with data visualization.
UX Data Visualization Tips
1. Infographics
One of the simplest ways to add visualizations is by taking the statistics you are highlighting on a topic and showing them in pictorial form. So, if you notice 80 percent of your site visitors are spending 10 minutes or more on your website, you would add a graphic to display that fact, along with other pertinent stats about your site. This is a form of showing versus telling.
Adding illustrations to bring attention to facts can help readers digest heavier information. Since people tend to remember images and process them more quickly than text, your site needs to work on all fronts to add visual data.
Take a look at this visual on the Washington Post’s website. It illustrates the ocean depth the newspaper is talking about. This graphic helped readers understand the facts about the search for the black box from a missing Malaysian airliner, which disappeared over the Indian Ocean in 2014.
2. On mobile
Make sure to optimize your visuals for delivery on mobile devices. In 2018, analysts predict the average American is will spend more than three hours a day on mobile media. When adding data visualizations, make sure they will adapt to smaller screen sizes. Test them thoroughly on different devices and browsers. If they are too small for the user to read, they are not very effective.
Social Media Impact does a good job of creating a page with visuals to highlight main points. However, these illustrations adapt to a smaller screen and are still easy to read. Look at the infographic above. You can still make out the main points of the diagram, even on a mobile device. When creating visuals, you must think through how they’ll look on different screens.
Get To Know Other Design Students
Jane French
Founder at Ella Verbs
Bonnie Sweet
Product Designer at Giide
Bre Walker
UX Designer at KeyBank
3. To direct attention
Another way to use visuals is to spotlight text you want the reader to focus on. If you are trying to prove a point, this might be a way to draw attention to a specific statistic or fact that might convince the reader.
The Cliffside website does this nicely by offering visuals that clearly show which counter types are most popular with customers. Note how they also highlight their product while offering facts on top of the image of a beautiful kitchen remodel, such as that contemporary kitchens have a sleek, fluid feel.
4. To highlight a product
For several years now, real estate websites have used 360-degree visualizations that allow customers to see every detail of a property. This type of visualization is particularly helpful for any product where the customer benefits from seeing the item at different angles. It is the next best thing to shopping in person.
Moissaniteco.com uses a 360-degree image of many of their rings. The user can click on a graphic that shows how the ring looks on an animated hand, rotating the photo to view the ring at different angles. This type of 360-degree visualization is powerful because it makes the consumer imagine how the ring will look on her own hand.
5. Purely informational
Another thing to consider with data visualization is how you can use the information on the back end of web design to figure out things such as the best colors to use in your design or what message your target audience most wants to hear. Taking time to plug the data in and create a pie chart can benefit you in several ways.
Google Analytics is a classic example of informational data visualization and does a brilliant job of displaying your website’s data in an easy to understand format. This data can then be used to drive design and development decisions.
Related: 31 Free Data Visualization Tools
6. As a call to action
One of the keys to leveraging the traffic on your site is getting those visitors to take some type of action. Many sites use traditional call-to-action buttons in a color that draws the user’s eye. However, you can also use data visualizations for this same purpose.
For example, you might include a graphic with text over it that says, “95 percent of women prefer our product over any other out there. Are you ready to buy our widget?”
Related: What is UX Design?
Data can be hard to digest, both for site visitors and when considering data about site visitors. You can use your data — both online and off — to drive sales and capture customers’ attention. Be creative with how you present your data or incorporate it into your design process. Infographics are a good place to start, but banners in a store window, a well-designed newspaper ad or memes for social media all have a time and place that can enhance your overall message and bottom line.
Related: What Does a UX Designer Do?
Since you’re here…
Interested in a career in UX design? Rise to the top of the CV pile when you enroll in our UX Bootcamp—you’ll get a UX job or your tuition money back. Take a look at our student reviews and test out our free UX curriculum to get a feel for our style and results. TL;DR: average starting salaries for our students = $85,440. Let’s do this.
