In today’s lesson we’ll learn how the Science of Great UI can help us create better layouts.

What’s wrong with this elevator control panel design?

elevator-panel-small

Let’s say your life depends on reaching the 30th floor as soon as possible.

Which button do you press?

floor-30

Without additional context, it’s pretty much impossible to tell which button will take you to the 30th floor. Guess wrong, and you could end up dead, on the 29th or 31st floor.

The problem is that these placard labels are located directly between the adjacent left and right buttons.

The Science of Great UI teaches us that one of the six ways we infer contextual relationships (also known as grouping) is through proximity. Our minds infer that items placed close together are likely to be contextually related, and similarly, items placed far apart are likely to be contextually unrelated.

So in the elevator floor example above (which I call a proximity violation), we see what happens when the contextually-related item (the button we want to press) has the same proximity as the the unrelated item (the button we do not want to press).

Here’s another proximity violation – showing what happens when we push things even further in the wrong direction.

Which way to Ft Worth?

which-way-to-ft-worth

In the example above, the contextually-related parts are far apart, and the contextually-unrelated parts are next to each other. Both this street sign and the elevator panel are examples of the Blivet anti-pattern (I talk more about this in the full video course).

So for now, the question is, how can we fix the elevator panel?

Well, knowing what we know about how the brain infers contextual relationships, we know that as designers we should place contextually-related elements close together. With the elevator panel, we can do that by moving the placards closer to their corresponding buttons, like this:

elevator-panel-fix

Now the question of which button to press to get to our floor can be answered immediately, which means happier guests reach their floors sooner and spend less time waiting for the elevator to arrive.

sgui-case-studies-thumbnail-ws

By the way, if you purchase the Science of Great UI design course you’ll learn the other five ways our minds infer contextual relationships. You’ll also get access to my Science of Great UI Case Studies mini e-book, which will show you an even better way to fix the elevator panel, and also reveal four different fixes for the faulty street sign above, all based on cognitive science and the way our brains work.