This next talk is about UI density, maximizing value in time and space. >> So, I guess we better keep this next intro compact and to the point.

>> That's right. Next up is dense by design. Please welcome Matthew Stromon.

>> If you know anything about me, you know that I write a lot. Some of this writing comes from a place of curiosity because I find an idea that I really like and I just have to share it with the world.

But, honestly, most of it comes from a place of frustration.

Somebody says something and it bugs me so much that I can't help myself, I just have to go and try to prove them wrong.

This sounds a little bit petty, but I promise it comes from a good place. What I like to do is try to construct a best possible version of that other person's argument and then I wrestle with it.

I'm right, they're wrong. I get to write what I found out with a smug sense of superiority.

But, sometimes, I'm wrong. I lose the wrestling match and I have to change my mind. Today, I want to tell you guys a story about a time I tried to prove somebody wrong.

That's uh Patrick Collison, uh the CEO and co-founder of Stripe. You might have heard of him before.

I really hope he's not here right now. I worked at Stripe a few years ago. And uh I can say this with all honesty, Patrick is one of the smartest people I've ever worked with.

So, as you can imagine, trying to prove him wrong is an extremely inadvisable thing to do.

But, I did it anyway. Couple years ago, me and my team were presenting a vision for an updated visual design language for the Stripe dashboard.

We really wanted to double down on all the things that made Stripe design great, attention to detail, great information hierarchy, you know, the the and the ample white space that that Stripe is known for.

During the presentation, Patrick silently started sharing his screen. He opened up a blank Google Talk, and he pasted in a picture of this.

If you don't recognize it, this is the Bloomberg terminal. It's one of the most valuable pieces of software in the world, and it's also the ugliest.

So, it was a little confusing, but uh >> [clears throat] >> after we presented, we were uh getting feedback.

And Patrick asked a simple question. He asked, "Why can't we make it look more like this?

" Now, I immediately thought of a lot of reasons why we couldn't make it look like that. I thought of a lot of reasons why I didn't want to make it look like that.

But, Patrick's the boss. So, after the the presentation, me and my team were getting back together and trying to decipher this feedback.

Trying to figure out what it What was he talking about? Eventually, we circled around this idea of density.

Well, the Bloomberg Terminal is very dense. So, maybe Patrick wants us to make it look more dense.

Like I said before, I like to take the best possible version of somebody's argument before I decide that they're wrong. So, we started from the perspective of, "Okay, let's make the Stripe dashboard more dense.

What would that even look like?" It turns out that is a very hard question to answer.

Cuz that word density has a lot of different meanings. And it took me almost a year to figure out exactly what it meant.

And how that actually impacts the users that we were designing for. So, I want to take you on that journey with me today.

We're going to climb the ladder of understanding rung by rung. Five different definitions of density. And we're going to get to the top and we're going to look back down, and we're all going to decide together whether or not Patrick Collison was wrong.

So, the first rung. The first thing that you think of when you see the Bloomberg Terminal. Like me, you think, "Ah, there's a lot of stuff going on.

There's a lot of pixels on the screen." And that's I think what most people think of when they think about density.

So, you know, there's a lot of websites that have visual density. I hope Craigslist never changes because it's beautiful the way it is.

Um another of my favorite websites in the world is McMaster-Carr, where you can see and purchase every single screw that's ever been manufactured.

These are beautiful examples of density, but there's also some really horrendous examples of density.

This is a real website, by the way. You can go there right now. I I wouldn't advise it, but it's uh it's it's pretty amazing.

So, if there are both a beautiful versions of visual density and ugly versions of visual density, then surely there must be something else to it.

We can't just stay with our definition of density. This kind of graphic is what really locked it into a place for me.

This is the kind of graphic you'd see in a newspaper. And I want you to just take a second and try to figure out what it is this graphic is trying to tell us.

Because there's a lot of visual density here.

But what's the point? Maybe if you look past all of the cartoon bullets and the silhouettes of fighter planes and the the numbers, you might actually get to the meaning underneath the chart, but I decided to strip away all that visual information and let the data speak for itself.

Here's the exact same data represented without visual density. And hopefully you get the point right away, that in 2013 the US spent more on military and defense than almost any other country in the entire world combined.

Well, that's very apparent when we take away all the visual density. We took pixels off the page, but we communicated more, not less.

Which makes it really clear that this is a chart crime and it trades accuracy for emotional effect. And that's what the visual density can do sometimes, which brings me to the next definition of density.

Information density, which is about how much of those pixels are actually communicating.

Edward Tufte has been writing about this for 40 years now. He describes it as the data-to-ink ratio, which means you take the amount of data that's on the page and you compare it to the amount of ink that's on the page.

And the goal is to get to as close to one-to-one as possible, where every single part of the graphic has to be communicating something.

The golden standard of this, according to Tufte, is this 1885 train schedule from Paris to Lyon.

And I just want us to appreciate it for a second cuz it is a beautiful chart. Across the top in the x-axis are time, the hours of the day from 6:00 a.

m. all the way through 6:00 p.m. Uh or I would say 6:00 a.m. to 6:00 a.m.

the next day. And then on the y-axis going from top to bottom are the train stations. Now, the cool thing about this chart is they've actually chosen to put the train station at the physical distance they are apart.

And what that means is that that decision actually communicates something.

So, that you can see these diagonal lines as they trace across the chart are the actual trains moving from one end of the line to the other.

You can see what time they depart, what time they arrive, you can plan an entire trip, you can see where you can stop for a while or how transfers are going to work, and you can even see how fast the trains are moving.

Some go really fast and their lines are more vertical. Some are slower and they're more horizontal. So, this is a perfect example of a one-to-one data-to-ink ratio.

But, if it's all about the amount of ink on the page, then truly we can just subtract the ink and increase the ratio by making the graphic smaller and shrinking it down.

So, let's try that. Let's make the graphic smaller, more dense, and more dense, and more dense.

And here we've done it. We've created the perfect data-to-ink ratio, a black hole of information density.

We've taken all of the information in the known universe and condensed it down to a single infinitesimally small point, destroying the fabric of space-time.

So, obviously there's a threshold here. There's a place where as you increase the information density, you actually stop getting any useful information out of it all together.

It's actually a speed limit for your brain. And it's the key to the next definition of density. Meaning density.

This is the first time we're actually taking into account the people looking at the design. We're going beyond the ink and asking how much is the user actually getting out of this?

And how much of it can they understand and use? I have an example of this. I want you to tell me very quickly, what is a ratio of red dots to gray dots on the screen?

Okay. Okay. Uh I'm going to make it a lot easier for you.

So, I didn't add information to the screen. I didn't label it. I I just rearranged the information on the screen.

And all of a sudden, not only could you give me a much better estimate, but you could probably count the dots pretty quickly and give me a very precise number.

So, this is the key to meaning density. Arranging information on the page can actually communicate something.

Now, this is also really old news. There's a group of psychologists in the 1920s in Germany who studied how the brain perceives patterns and how they communicate different things.

It's called Gestalt. So, I want to share some Gestalt principles with you today.

Starting with this, these are nine dots on the page. Uh and as I bring them closer together, at some point your brain actually perceives them as a single unified whole.

If I change the shape of some of those dots, now without being conscious of it, you're perceiving this as three separate groups.

This is the law of similarity. If I change the spacing between those three groups with some motion, now without being conscious of it, you see two groups instead of three.

This is the law of common region. The Gestalt principles are ways to communicate meaning simply by arranging information on the page.

There's tons of them. You should look them up and use them in your designs. I was sharing this idea with a friend and because all of my friends are super nerds, they were like, "Whoa, what about time?

Time is just the fourth dimension, dude." And um they were joking, but I I take these things very seriously.

So I was thinking, "Okay, well maybe if we can arrange things in space and add meaning, maybe we can also arrange things in time and add meaning." Uh so this is uh a speed reading tool and I'm just going to let it play to to tell you about it.

So time turns out to be the key to the next rung on the ladder, the next definition of density.

Time density is all about how much time it takes for a user to get something out of a screen.

And once you start thinking about time as a a material, we can actually design for it and around it.

Uh some researchers in the '90s were studying the brain and how the brain perceives time and they actually identified a few thresholds that we can design around and for to change the way people perceive our designs.

So the first threshold is at 100 milliseconds and anything less than 100 milliseconds, your brain perceives as a single instant in time.

It's because of when you blink, your brain kind of turns off your recording apparatus and you might not have known that, but now you're certainly aware of the fact that you're blinking.

You're welcome. Uh so if If have anything in your interface that takes less than 100 milliseconds, don't have an animation.

Don't have a transition. Just do it instantly and your users will perceive it as happening much, much faster than it actually is.

Between 100 milliseconds and 10 seconds, we actually want to show some of those transitions and animations because we're still working with the hardware and software of hunter-gatherers looking for motion out in the jungles for signs of of prey or or predators.

Um so, this is where adding a little bit of animation to a dialogue opening or a transition state can help. And if you're starting to get more towards that 10-second line, you need to show a spinner or some kind of indeterminate loader just so that your user understands that something is happening behind the screen.

Now, I'm sure you all have seen the the beach ball of death and we know that at a certain point, we start to lose patience and our attention span is completely shot.

So, between 10 seconds and 1 minute, we want to actually show progress.

This is where a progress bar is really useful. And and that helps people connect the dots and have a little bit of that patience that we all desperately need sometimes.

Once we get past a minute, I want to encourage you to let your users just leave.

It I don't care about your engagement metrics. I I really think it's important because we don't want people to staring at the screen for minutes on time.

They could be doom scrolling Twitter instead. So, say, "Hey, I got this. I'll notify you when it's time to come back." That will help your users and the people who are looking at what you design feel like it's more dense because they were able to do something more meaningful.

So, speaking of doing something meaningful, I want you to uh find Waldo or uh for my UK friends, Wally.

And while you're doing that, I'm going to I'm going to tell you that this is a very visually dense piece of design.

It's very informationally it is certainly not very dense in time because if you're like me, you probably haven't even found Waldo yet.

You're wondering if he's even there at all. So, this is a case where we can actually change the amount of time something takes by changing the design of it.

We can subtract visual density, we can subtract meaning density, we can subtract information, and we can make it more dense in time.

So, I prepared a second Where's Waldo for you. Are you all ready?

Got it? Now, that felt much better because it took less time. It was more dense. That is the fifth and final rung of the ladder.

Before I get there, I want to show you an example of two different approaches and how density mattered. Now, when Google launched, it wasn't clear that they were going to succeed or take over the internet.

Um at the time, Yahoo was the undisputed king of finding things.

Dense by design ft. Matthew Ström-Awn (mu.design) | Config 2026

Scripts