The UX within UI: Proximity
Many a times I’ve seen UX designers playing down the significance of high fidelity designs, arguing they only care about usability not the visual design. However, we need to understand that UI is not all visual design, many principles of good usability go into designing a good UI.
Instead of giving you some abstract principles of usable UI design directly, I would like to show you a concrete example and then derive the principles from there.
The specimen I came across today was an “Intermediate Category Page” at amazon.in
Now have a look at the first tile, The one with the thumbnail of an iPhone. Can you see what the label of the thumbnail says? “Data Storage”. Are you sure that’s the right label?
No! Perhaps it’s just a small design or implementation bug, but it would definitely confuse a user. The label for the thumbnail is above it! In fact the thumbnail for “Data Storage” is below it, but after some white space. The white space is enough to make you ignore it and immediately shift your focus to the next thumbnail of the monitor (Turns out its a TV).
Let’s look at how to fix it.
As you must have guessed intuitively, the solution to this is pretty simple. The label needs to be closer to the thumbnail. Isn’t this better?
Essentially, the closer the things, the more they belong with each other. This better grouping helps users easily scan and analyse the UI.
Now, let’s abstract this idea into a design principle.
Objects or shapes that are close to one another appear to form groups
The above statement is also known as “The Gestalt law of proximity”.
Design keeps improving. Here’s how Amazon has fixed it now! Much better!
