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

If you missed part 1, you can catch up here.

Photo by UX Indonesia on Unsplash

As (half of what was originally) promised, in the space below I’ve expanded on two of the remaining four elements of what makes a “good” data visualization user experience, Visual Appeal and Clarity and Consistency, as defined by me about 19 days ago in the mind mapping exercise below. I had planned to cover the remaining four elements in one additional post, but — 🙀 surprise, surprise — I had a lot to say about two of them. We covered Audience-centricity, Cohesion, and Interactivity in Part 1, and I’ll get to Accessibility and Intuitive Navigation and Design next week(ish).

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, hopefully 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, inputs 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 if not in a spreadsheet or as a screenshot attached to an email. 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 the 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 like the charts used, the color palette, the ease of navigation, and the minimal but helpful notifications (like a reminder to track how I felt when I woke up this 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. Sleep Pulse 3 also appeals to me visually from what I can tell from the screenshots in the App Store and the reviews, but I am unlikely to change apps unless Pillow becomes buggy or they change the user experience to something I find less appealing. (The lesson here: don’t screw up UX unless you want to send your customers shopping for a new experience.) Start paying attention to your own reactions to various aspects of design and note the patterns.

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.

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. (Consider this a teaser for a follow-up post on how to define, measure, and test how appealing your visualizations are to users.)

Clarity and Consistency

I know I just spent eight 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 of dataviz UX 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.
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 or Flow 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. (Yes, I know this was listed up there under Clarity, too. I was an undergraduate English major and I cannot help myself.)
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.”

Your mission, if you choose to accept it: 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?

Stay tuned for the third, and final(?), installment in this series next Tuesday, June 28(ish).

I want to acknowledge that in Part 1, I not-unknowingly conflated user experience design (UX) — and its sub-specialty interaction design (IxD) — with user interface design (UI), a common lack of specificity and point of misunderstanding. 🌱✨ Or maybe, as I suspect, the disciplines really are sort of loosely stitched together in a linear-ish fashion, one having evolved into the other as new considerations have been undertaken over time. The term “user experience” evokes connotations of humanity a bit more than “user interface”, and “interface design” reminds them both that it’s not all about them. (Dilemma: I can’t decide if I should or should not consume edibles prior to writing. The previous sentence is a case in point. [Another dilemma: If I start using footnotes in my writing, will it be completely obvious that I am obsessed with Benn Stancil’s blog? {Should I rename the blog nicole.benn.substack?<No? Ok.>}])