Visual DesignThe Number One Design Tip to Improve your UI

The Number One Design Tip to Improve your UI

When a design could use some improvements to increase the aesthetic aspect: the lack of hierarchy or grouping is very often the cause. This article will focus on the latter: how to use grouping to make a visually more pleasing, and easier to use, design.

Forms meets function

Increasing the aesthetic aspect might not always be at the top of your clients’ list. Because, why does beauty matter, right? You can read my view on that question here. (SPOILER: IT MATTERS!). But the tip in this article combines both function and form. It’s a trick that both increases the aesthetics and makes the product easier to use. The sweet spot 🙂

Why does it make products easier to use, you ask? Well, grouping makes a page easier to scan. And according to Don’t Make me Think by Steve Krug, users don’t read, they scan pages. Let’s help users scan, shall we?

By the way, this trick is also known as the Gestalt Principle “Proximity”. Described as: Elements that are near each other, appear to be more related, than things that are further apart.

Example Time: Putting the Gestalt Principles to Practice

This topic is best explained with images. Here you go:

Gestalt Proximity Example 1

The example above is obviously crap. The blue area on the right illustrates the grouping, in this case only one group is used. Result when you do this throughout your entire design: no easy scanning. Let’s quickly move on. 

Gestalt Proximity Example 2

This is starting to look more like it. Again marked with blue: two groups to improve scanning. Yet, I feel like the card feels a little tight, and could use some more whitespace. 

Gestalt Proximity Example 3

Much better. One thing left: I usually tend to group the button separately, making it stand out just a bit more, and hopefully increase clicks.

Gestalt Proximity Example 4

Even better. See the image below with the exact spacing used. Notice that not only the elements inside the cards are groups, but the card in its entirety is a group as well. It’s perceived as such because the outer padding is (as a rule) always bigger than the spacing between individual elements. 

It’s perceived as such because the outer padding is (as a rule) always bigger than the spacing between individual elements. 

Gestalt Proximity Example 5
Gestalt Proximity Example 6

I hope this was helpful, if not, let’s have a chat 😉 

Comment (1)

  • Thanks for sharing this useful article. The examples look great. Keep up the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll up Drag View