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:
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.
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.
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.
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.
I hope this was helpful, if not, let’s have a chat 😉