Styling data - how to make it look good [a walkthrough]

As a non-designer, I always assumed that design was about making things look good. And when it comes to looking good, I think of picking colors, fonts, and layouts that are aesthetically pleasing.

But one lesson from Adam Watham and Steve Schoger’s Refactoring UI that really stood out to me was how “looking good” isn’t all about subjective aesthetic choices. Instead, it’s about organization.

When items on a page look structured, organized, and positioned with intention, they give us a sense of calm and order, and it’s that sense that “looks good.”

How does that make you feel?

Personally, I find this incredibly reassuring. Understanding how to organize information feels much more learnable than having good taste and knowing which font is hot right now.

Instead of trying to make design decisions based on what we think looks good, what happens if we instead base it on what best organizes the information on the page? What would that do for our products? How much easier would design choices be?

To illustrate, let’s style some info on a banking dashboard.

Before you apply any styling, you might start with some simple HTML that results in this:

A row of information surrounded by a light gray border. Simple.

Now let’s do an exercise: before reading onward, think about how you would describe this data to a friend.

What would you say?

You’d probably say something like this: “The balance is $120,103.10”

Did you notice that you basically read the dashboard as is?

This exercise illustrates one of the tendencies of us non-designers – we lay out information the way we would describe it – linearly.

We would say, “The balance is X” so in our app, we write “Balance: X.” Makes sense! But is that the best way to communicate to the user that the balance is x? How else can we do it?

Let’s break it down.

“Balance: X” contains two pieces of information: 1) the label and 2) the data. If you’re the user, which piece of information do you care more about? What is more pertinent?

Hint: It’s not the label.

But by putting the label first in the same row with no other styling, we’re implying that it’s more important than the data. We’re giving it primary status.

So what can we do to better organize this information and make it look good?

The first thing we can do is play with positioning. The fact that the label appears ahead of the data in the same row isn’t helping our organization.

What if we just moved it?

Here are two options:

Putting “Balance” to the right of the data feels a bit funny at first glance, but with a bit more styling, we can probably get it to look right.

But I think I like the “Balance” on top more. It feels like a label but, because it’s in a different row, the data gets more weight. Let’s pick that and keep going.

Another element we can play with is size. Why don’t we try making the label smaller?

That feels better. The label is looking much more like the secondary information it is.

But here’s the thing about font size – the smaller it is, the harder it can be to read. I think it’s still legible here, but I’m going to try uppercase-ing the label to make it a bit easier on the eyes. And because the label and data are on separate lines, I’m going to lose the colon as well.

Let’s see how that looks.

Not bad! I get the hierarchical separation of the label from the data by using a smaller font size but I keep the readability by making it uppercase.

This is looking better, but I want the eye to be pulled to that data, to make it really stand out in a busy dashboard.

What if we introduce some color to help it pop? Since we’re talking about money, green sounds like a great option to play with. Let’s try it out!

Poll time!

For me, changing that color actually had the opposite effect than what I was going for – although the green is brighter, it’s also lighter than the black of the label. So instead of standing out the way I’d hoped, it actually feels a bit more washed out to me.

How can we keep that pop of color but give it more weight? Well, we can literally give it more weight!

Let’s see what that does.

That feels much better.

But I think we can help that data stand out juuuuuuust a bit more. There are two things we can keep playing with: font color and font size.

What if we made the label a bit lighter by using a dark gray instead of the deep black? What would that do?

I like that! It takes the edge off of the label and helps it ease into its supporting role.

The last thing I want to try is to increase the size difference between the label and the data a bit more. I don’t want to make the label smaller because then it won’t be readable, but I can make my data bigger.

Let’s try that.

Now that looks good.

Let’s compare this to what we started with.

Much better.

Now, here’s the thing: we didn’t do anything wild. We changed four things:

• position

• font color

• font size

• font weight

But it’s not the number of things we changed that’s important, it’s the logic we used to make those changes.

What led each decision wasn’t a subjective desire to have it look good — it was a desire to make the information more organized. We optimized for creating a design that helped the user get the data they were looking for quickly and, in that process, ended up with something that looks so much better.

We didn’t try to make it look good – we tried to make it look better organized.

So what do balances on dashboards look like IRL? Here’s how some popular finance companies display this information:

You’ll notice that apart from some dark gray, the IRL examples don’t use colors. What do you think about that?

So next time you’re trying to design something with data, don’t think of designing aesthetically – ask yourself how you can organize the information better, and see if designing gets a bit easier.

What other changes would you try to make it even better?

Let me know!

Saron

PS. Don’t be shy about replying, I love hearing from you! Click “reply” and let me know what you think of this issue :)

PPS. Were you forwarded this email? Feel free to subscribe below to get future posts!