Back to Blog

how-to-improve-ux-through-data-visualization
Design

How to Improve UX through Data Visualization

4 minute read | March 12, 2018
Lexie Lu

Written by:
Lexie Lu

Free UX Design Course

Dive into UX design with our free starter course. Transform your creative ideas into user-friendly solutions.

Enroll for Free

Ready to launch your career?

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.

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.

infographic ux visualization

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 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

Miranda Mason

Miranda Mason

Springboard X Blacks In Technology Fellow at Springboard

Read Story

Yipeng Wang

Yipeng Wang

UX Researcher at Google

Read Story

Erich Schulz

Erich Schulz

Product Designer at Disney Parks, Experiences And Products

Read Story

3. To direct attention

Another way to use visuals is to spotlight the 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.

direct attention ux visualization

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 from different angles. It is the next best thing to shopping in person.

ux product visualization

Moissaniteco.com uses a 360-degree image of many of its 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.

informational data visualization

Source

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.

Related31 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 course to get a feel for our style and results. TL;DR: average starting salaries for our students = $85,440. Let’s do this.

About Lexie Lu

Lexie is a UX designer and writer. Her ideal day would consist of A/B testing and several lattes. She owns Design Roast and can be followed on Twitter @lexieludesigner.