Design Freebie: Advice to Improve your UI Design
Grouping things together, if done right, can improve the aesthetics and usability of your designs
In this article, we’ll discuss how to use grouping to create visually appealing and easier-to-use designs.
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 advice in this article combines both function and form. It’s a trick that increases the aesthetics and makes the product easier to use.Â
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 of “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 present.
Whenever you do this throughout your design, you won’t be able to scan it easily.
Let’s quickly move on.Â
Improvement 1
This is starting to look more like it. The two groups, marked in blue, are two groups whose aim is to improve scanning. However, I think the card could use some more whitespace since it feels tight.Â
Improvement 2
I’ve added some spacing on the left and right. 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.
Improvement 3
More spacing around the button. Even better.Â
Below is an image showing the exact spacing used. Not only are the elements within the cards groups, but the entire card is also a group. 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 😉Â
Ed
June 4, 2021Thanks for sharing this useful article. The examples look great. Keep up the good work!