UI Design

9 surefire tips for better data visualization design

9 surefire tips for better data visualization design

Imagine you are standing in a room with 100 other people, all of whom are shouting at you at the very top of their lungs. You are expected to (a) hear every word of what each person is shouting, (b) fully understand what each person is shouting, and (b) recognize all the ways in which each person’s diatribe is related to all of the others.

Impossible, right? Of course. But that’s exactly what happens when a user is confronted with a poorly designed data visualization.

The purpose of data visualization is to bring order to chaos, to allow a user to quickly read and understand multiple attributes of a particular issue, topic or data point. However, the majority of data visualization design I see does the exact opposite; the UI design styling adds complexity instead of simplifying it.

In the majority of sites, portals and systems, for example, data usually appears onscreen in the form of a table. That’s because this format usually an apples-to-apples correlation to how that data exists in a database. There’s nothing inherently wrong with this, except for the fact that these tables are almost always very poorly designed.

The visual styling far too many designers and developers use is informed by poor sources (Word and Excel, I’m looking at you). The proliferation of ubiquitous CMS templates created by folks who are decorating instead of designing has only made matters worse. Data design rarely gets any consideration beyond whatever default styling exists. Every rule, label and piece of data is designed with high contrast, heavily saturated color and identical font sizes, weights and styles. Every element is shouting at the viewer while expecting them to understand and make sense of what’s being said.

There’s no excuse for this. There are 9 hard and fast rules I live by for designing better, more useful information in tables. Every one of them is little more than mirroring how the brain perceives visual information and assigns priority:

  1. Use all caps in the label row as opposed to sentence case. Labels are typically short, and they are scanned, not read. Using uppercase exclusively in the header allows users to instantly discern the difference between label and content.
  2. Use a sans-serif font, which is much easier to read. There is endless debate over serif vs. sans-serif, but on a digital screen where refracted light quickly fatigues the eye muscles, simpler is better. The decorative ends of serif letterforms only create visual noise.
  3. Use a smaller font size in the label row. The brain is built to recognize visual cues that signal differences. Priority is naturally placed on things which are larger and have high contrast. Speaking of which…
  4. Use grey, not black for the labels. Items with high visual contrast (e.g. black on a white background) come forward in the visual field and are given high priority. In other words, we instinctively focus on them first. Items with low contrast recede, and are perceived as lower priority.
  5. Consistently align labels and text. If the label is left aligned, all text in every row that follow should be left aligned. If the column contains numbers, both labels and content should be right aligned. Do not ever center-align anything in a table. For any reason.
  6. Make all padding consistent in every cell: top, bottom, left and right. Be generous with padding: 20 pixels whenever possible. That negative space gives the eye a place to rest, and actually speeds association between labels and content, and between individual cells of content. When text is tight to the edge of a table or boundary of any kind, the brain has to work harder to read it.
  7. Use light grey rules instead of solid black. The boundary outlines of the table and its columns, rows and cells are the least important visual elements on the screen. They should be barely discernable: just enough to separate information and never visually competing with content. Rules should never be back. As in never.
  8. Use a different type of rule (dashed) for the vertical column dividers. This subtle difference increases the visual connection between category labels and the data directly under it. Columns come forward, rows recede. If your categories and labels are on the left side, simply reverse this pattern.
  9. Add a very light grey behind alternating rows – so light it’s barely there. Again, a subtle visual difference is enough to speed identification and make associations between data points.

Remember that people have to be able to draw conclusions and act on what they see. When the cognitive effort required to do that is high, people struggle to make sense of what they see. The consequence? Bad decisions. Some of which cost time, money or customers — and some of which result in injury or death.

All of these small design tweaks work together to separate things visually, which allows people to scan, identify and associate more quickly. These rules apply to any kind of table, any kind of data. Apply them to your next data-intensive UI design and I guarantee the results will speak for themselves.

 

Announcing my upcoming book, Think First!

Announcing Think First, the upcoming book on UX strategy from Joe NatoliI truly believe Think First is unlike no other book on the subject of UX strategy. Instead of addressing the narrow, tactical pieces of the design process, Think First shows you everything that must be considered to create great UX — and gives you a roadmap to make it happen.

Think First details my no-nonsense approach to creating  successful products, powerful user experiences and very happy customers.

The book shares lessons learned from my 25 years as a UX consultant to Fortune 100 organizations. You’ll find step-by-step methods and straightforward, jargon-free advice that can be applied to anything you’re designing or building. Here are just some of the things you’ll learn:

  • Simple user research methods that anyone
    can conduct and apply
  • The right questions to ask stakeholders and users
    at the outset of any project
  • The 3 crucial questions you must ask of every
    client, every time
  • How to tell the difference between what people say
    they need
    vs. what they really need
  • A better, simpler way to generate meaningful
    UX requirements 
    at the outset of the project.
  • How to avoid scope creep and the never-ending
    project scenario

Think First will be available in Spring of 2015, as an exclusive hardcover edition, eBook and audiobook format for all device platforms. As we move closer to publication, I will share updates and excerpts from Think First — stay tuned!

  • mindGrinder

    This is great advice! I have been looking for tips on styling heavy data oriented tables. Our CEO likes the tables to be tight, meaning he doesn’t like that generous padding around the data that I think helps so much. Many people have insisted on applying the padding and they had provided many articles and resources to our CEO that explains the benefits of that. What else could you advice us to do? I’m hoping that after I made the updates to the table that he can see how easy is to read the data after following your 9 tips that he’ll forget to mention the padding. Fingers crossed! FYI. I love your courses in Udemy! keep them coming!

    • http://givegoodux.com/ Joe Natoli

      “Approve”

      Best – Joe

      Joe Natoli
      User / Customer Experience
      Consulting, Training & Speaking
      410.627.1783
      http://twofoldworks.com
      http://givegoodux.com

    • http://givegoodux.com/ Joe Natoli

      You may not be able to convince him, but there is an overwhelming amount of evidence that — from a physiological perspective — that padding/negative space is what enables the eye to focus. The brain fixates on differences in the visual field, in this case the difference between empty space and the edge of the number or letter. That’s how we are built as human beings, so it’s not a matter of opinion.

      He may hold fast to his personal preferences, but that’s all they are. The system isn’t built for him, it’s built for the XXXX number of users who need to be able to see and understand and act quickly.

      I’ve had plenty of encounters with folks like this, and all you can do is emphasize the downside of not using the padding, as it sounds like you’re doing. Hang in there, keep fighting the good fight, and good luck!

Blog Categories