To Create Tables That Are Easy to Read

One of the simplest ways to improve UX in data-heavy apps and systems is to visually separate labels from the content they refer to. This is one of the most often overlooked attributes of UI design, a seemingly insignificant detail to many – but it's one of the simplest ways to create a more usable application. It increases efficiency, time to complete a task and minimizes errors in both data entry and decision making. And best of all, it takes very little effort on your part.

First: Content Leads, Labels Follow

Content and data should "come forward" and be visually prominent, meaning that it's the darkest thing on the screen. All text that contains data should be solid black. That creates maximum contrast, which allows the user to focus on it.

Labels, however, should visually recede, and should be clearly distinct from the content they refer to.

Let's start with an example where there's no clear separation between the two:

Notice how much visual and cognitive effort you have to expend to look at and categorize all of this in your mind. Do you have to work a little harder to distinguish the labels from the data? One column or row from the next? When size, contrast and visual "weight" are all the same, the brain – and the eye – can't distinguish or prioritize. So your focus wanders all over the screen and it's difficult to keep your visual and mental focus on one specific area. That makes it hard to scan, hard to quickly grasp what all of this is, how it's organized and what it means.

What's more, the solid black rules that define each cell are distracting as well — they're high-contrast and the padding between them and the content is inconsistent. Sometimes they're right up against the text, sometimes not.

Finally, add the fact that the column labels are center-aligned, while the text is left-aligned. That prevents the eye from making a quick association between the two. Once our vision locates a starting point, the instinctive response it to move in a straight line, either horizontally or vertically. That's how we determine relationships between things. When that reflexive visual flow is interrupted, we have trouble comprehending.

In a single instance, the time lost trying to focus is nominal. Multiplied by hundreds (or even thousands) of times a day five days a week, it's a very serious problem.

Next: There's No Such Thing as Small Change

With some very minimal changes, we can make this a lot easier to scan quickly, and increase a user's ability to focus on the content without the eye being dragged back to the label (or other UI components). Notice how both the table header and the column labels recede and the content – what the person needs to see most – stands out.

There are nine (9) small things I did to accomplish this:

1. I used all caps in the label row as opposed to sentence case.
2. I used a sans-serif font, which is much easier to read.
3. I used a smaller font size in the label row.
4. I used grey for the labels.
5. I left-aligned both labels and text.
6. I made all padding consistent in every cell: top, bottom, left and right.
7. I used light grey rules instead of solid black.
8. I used a different type of rule (dashed) for the vertical column dividers.
9. I added a very light grey behind alternating rows – so light it's barely there.

All of these small design tweaks work together toseparate things visually, which allows people to scan, identify and associate more quickly. These rules apply to any kind of table, any kind of data.

One thing I should mention: with grey labels, you may very well hear people say "but I can't read it." In almost all cases, that's untrue. It's a knee-jerk reaction to anything that's not black and bold. Every time I hear that statement I always ask "What does it say?" In every instance they tell me, easily and immediately. A label isn't meant to be read, focused on for a length of time; it's meant to be quickly scanned and identified so the person can get on with understanding the content.

One last thing on labels: once you set these styles, use them everywhere – in every table, every column header, every screen across the UI as a whole. The goal every time you make an adjustment like this is to turn it into a repeatable UI design pattern – in order to build consistency across your app, your site or your system.

. . . . . . . . . . . . . . . .

If you'd like to get more advice from me every month on UX, UI and Product Design + Development topics — in the form of training videos, full-length courses, e-books, downloadable templates and more — check out my NEW online school, the UX 365 Academy . Every month I publish new content, and you also have access to every course, book and training video I've ever created — some of which have never been published online before now.

Check out the UX 365 Academy >

torkelsonwasee1983.blogspot.com

Source: https://givegoodux.com/ui-design-tweaks-that-make-tables-easier-to-read/

Share this post