Seven UX design principles to improve your business data visualizations, Part 2

Photo by UX Indonesia on Unsplash

Check out Part 1 here.

In Part 1, we discussed audience-centricity, cohesion, and interactivity as essential elements of good data visualization user experiences. In this post, we'll look at visual appeal (aesthetics) and clarity and consistency.

Visual Appeal

Let’s get really real for a moment. An accurate, understandable, and cohesive data visualization with a clear story or truly mind-expanding insight can also be super-duper ugly. There’s an attitude akin to snobbishness among some data practitioners that extols the virtues of a chaste chart — the humble pixels that fade into the background in order to let the data 🌟shine🌟! Whether the chart is aesthetically pleasing should be an afterthought if it’s a thought at all, according to this mode of thinking. I can appreciate a minimalist approach — in fact I love many minimalist designs. This approach is not minimalism, though. Minimalist design is still design because the clean look was created on purpose by way of conscious, thoughtful choices.

Consider the following scenario: A 👩🏽‍🔬 chemist who works for the water management district has been tasked with determining if the concentration of a chemical present in a body of water is within the threshold of safety for consumption as drinking water. The chemist obtains the water quality data, imports it into Excel or a BI tool, and creates the default line chart with its default color(s), styles, and other options. (That isn’t minimalist design, by the way. The chart was simply not designed at all. This is not necessarily a problem, depending on the intended purpose of the chart.) Since the chart is intended to help the chemist quickly understand the the concentration of the chemical in the water, then the chart is very likely to be completely adequate for accomplishing the chemist’s goal of making an informed recommendation to public health authorities. Essentially, the chart created by the chemist is a part of her exploratory data analysis (EDA) and likely lives in a Jupyter Notebook or a spreadsheet. It’s not a product for an additional audience beyond the chemist herself and perhaps a few colleagues, so no additional effort to optimize its design or improve the user experience is needed.

As data becomes more product-ized and intended for consumption by greater numbers of users and more diverse audiences, the need for thoughtful design and consideration of the overall user experience will increase. As more data products are introduced in the marketplace, when all other factors are approximately equal, visual appeal may be the factor driving the decision to use or not use a particular product.

Consider another scenario. One of my health goals is to improve the number of hours and quality of my sleep. I use an app called Pillow to track, monitor, and interact with my nightly sleep data. Pillow is just one of dozens of apps in Apple's App Store designed for the same purpose, but I chose Pillow. (Many of these, without the input of my own data from my iPhone or Apple Watch, are essentially just user interfaces that display my data in a certain way. In a sense, then, I may mostly be buying the visual appeal.) Factors such as cost, reviews from App Store users, and recommendations from trusted sources all being about equal, I chose Pillow because of the user experience. I signed up for a trial and found that I liked the charts, the color palette, the ease of navigation, and the minimal but helpful notifications (like a reminder to track my mood when I wake up in the morning). I don’t even use the full functionality of the app, but I am a loyal subscriber because I find it visually appealing and easy to use.

I’m not the only one who thinks Pillow has the best user interface among the sleep apps, it turns out. Wareable says, “The first thing that struck us about Pillow was the vibrant and engaging design — and it’s not a bad little sleep tracker, either.” iGeeksBlog says, “Pillow has one of the best user interfaces among all the sleep tracking apps for Apple Watch. The app features a nice bottom menu bar with big buttons, menus, and eye-popping sleep graphs to read the data.”

Last night was not a great night for me, sleep-wise, but you get the gist.

Now that we’ve established that visual appeal is indeed a requirement for a good user experience, how do we define visual appeal? To an extent, it’s like the movement in Lindsay’s viz that I pointed out in Part 1— you know it when you see it.

Visual appeal is also a matter of personal preference, but how did we get our personal preferences? Our culture, familiarity with the medium of data visualization, and psychology surely all influence our preferences. One example is the varying meanings of colors in different cultures. Start paying attention to your own reactions to various aspects of design and note the patterns.

There are some less nebulous design guidelines we can implement as data visualization developers to improve our chances of creating a visually appealing product, though. Tableau Visionary Nicole Klassen wrote about an important, but often overlooked, one in her Medium post "Design Delights: White Space". She describes the importance incorporating plenty of white space (sometimes called negative space) into your designs. It's easy to implement, but can make a big impact.

Clarity and Consistency

I know I just spent several paragraphs extolling the importance of visual appeal, but if your data visualization, data application, or dashboard is not clear and consistent, it doesn’t really matter how beautiful it is. It is effectively not usable.

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What do I mean by clarity and consistency? I grouped them into one category because of their inextricable relationship.

Clarity involves some seemingly obvious things, but I know you can think of instances where these considerations were not obvious to a dataviz creator or they didn’t spend enough time on them:

1. Readable font style, weight, and size. (The right--or wrong--typography can also impact visual appeal in a huge way.)

2. A reasonable number of colors with appropriate contrast, hue, and saturation.

3. Annotations, explanatory text, and tooltips free of grammatical, spelling, and factual errors.

Some less-obvious aspects of clarity include the following:

1. A clear point of view, story, or key takeaway (unless the visualization is intended to be truly exploratory only) in your brand’s voice.

2. Thoughtful transitions between charts and thoughtful order of charts. Your intended message can be reinforced or confused by your chosen layout. Interactive elements such as parts of your visualization that can be shown or hidden should be deployed thoughtfully, with regard for their power to help or hinder your ability to deliver your ideas.

3. Use of appropriate icons and imagery. A house icon will be perceived as being clickable and as a navigation element that will take the user back “home” to the start or beginning of their experience with your dataviz. Don’t use it to mean “realtor”.

Consistency, too, involves some aspects that are fairly obvious and some that are less so:

1. The charts, graphs, explanatory text, colors, icons, and images should all work together to support the clear point of view, story, or key takeaway(s) you aim to communicate. (This is related to the principle of cohesion discussed in Part 1, but consistency involves the actions taken to implement a cohesive idea or narrative rather than the development and existence of one.)

2. Filters, navigation elements, buttons, and menus should be in the same place when multiple views are involved. In a business context, these elements should be in the same place and have a consistent look and feel across your branded visualizations.

3. Grammatical consistency. Use the same tense in written elements. Be sure that subjects and verbs agree. Check your spelling.

4. Compatibility with existing mental models.

None of us has the time or attention span to spend a lot of time learning how to use another app or explore a new data visualization, but we’ve all had years to absorb mental models, and our brains have used them to create shortcuts that make our interactions with digital products easier.

The blog post “What Are Mental Models and How Are They Used in UX Design?” from Career Foundry explains, “a mental model is what a user thinks they know about how to use a website, mobile phone, or other digital product. Mental models are built in a user’s brain and people reference them to make their lives easier.” This actual concept from UX design makes total sense, but we often take it for granted when we are designing. Driven by a desire to capture an audience’s attention with something shiny and new or with a chart that’s technically challenging to build, we can forget that our ideas may come across more clearly when placed within the context of an existing mental model. “By referring to what they already know from their past interactions with another weather app, for example, the user can streamline their interactions with a new weather app. They’ll know approximately where to look for the current temperature, the forecast, and how to add the forecasts for other cities and states with minimal cognitive effort.”

Revisit some of your favorite data visualizations and evaluate them based on the criteria introduced thus far (and on any additional criteria that came to mind as you were reading). What did you notice? Did anything surprise you?