Psychology principles that balancing aesthetic and usability in interface design — Part 1
I’ve always been obsessed with designing a beautiful product, however, balanced with a good usability.
Every time we craft an interface, we should always put a reason that is more than just nice and beautiful. And the reason is all about the users.
Your users.
People who use your products.
We can go crazy in crafting a super-beautiful and innovative interface, but again, we should always come back, have ourselves in their shoes.
So that means, we put our best efforts to design a beautiful solutions with a good experience and usability for our users.
In psychology, there is a theory called Gestalt psychology. It’s all about how we see patterns or individual elements that have a connection. We see the whole before we see the every single element that constructs the whole or the whole becoming more than its elements.
In a simple way, the theory is about visual perception — How human eyes see. What your users see your product.
In that way when designing the interfaces, We need to properly orchestrate the visual for achieving a visual perception that we want — Which helps users to interact in a better way with our product. So they can accomplish the tasks with ease or get the information they need quicker.
I became interested in psychology theories related to design from reading a book, 100 things every designer needs to know by Susan Weinschenk.
This book pretty much about the psychology of human perception and behavior to design or things.
That changed the way I see my job as a designer then — I said to myself that I have to equip myself with things more on the human, psychology (or maybe social and culture for the next).
So in this article I want to share what I have compiled about how we use the principles of Gestalt psychology in the interface design. I hope this will be useful for you in strengthening your reason why you design such that or this thing.
#1: Proximity — Human eyes will consider any adjacent element as one group
I care about spacing when designing interfaces. A chaotic spacing could lead to a different perception.
Every element that is in one group should use smaller spacing than the elements that are not in that group. Otherwise, users can assume the element to be part of another group.
Left: Spacing between Group A and B is bigger than the spacing between the elements in each group
Right: Almost all of the spacing is 48px. We can see as if there are five different groups there.
The following, I use Pinterest as an example of how they use spacing. If you remember the previous version of the card design, they put photo and content inside the card. While the newer version is way cleaner, there is no card.
Can you see the difference on the spacing for the photos and texts (see the red lines)?
On the edited version, I made the spacing of the photo to the text same with the card below. That would make ambiguous perceptions for users. Users may think that the arrangement is the text first then the photo, in fact, it’s the opposite.
#2: Focal Point — Human eyes will see and hold any stand-out element for the first time
We use this principle to attract user’s attention to an element. We want to encourage a user to perform a specific task. We are familiar with this term as Call-To-Action.
Well, It doesn’t have to be a task. It could be important information.
Here some examples I have collected.
- For Lake, having users join the free trial is better than nothing. At least one more step away to paid plans. So that’s why they use yellow for the free trial button. They want to attract users to click that button.
- Sweet Green uses a standout element on a button to complete a task.
- Paypal uses the standout element to make users aware and check again how much the money they want to send or request.
#3: Figure-Ground — Human eyes tend to see elements by separating them from the background.
An interface element that immediately crossed my mind is the card design. But figure-ground states that this principle can be based on many cues such as size, movement, or colors.
But I guess if we can decide the figure, and the ground on the card design, perhaps because there is a role of depth that we create it with shadow.
I think playing with the figure and the ground is good to direct the eyes of users. I assume if we put information on the figure, it will have a hierarchy higher than information on the ground.
If the three information on the top (Neighborhood, Perfect for, and Cuisine) are important, which design you think better to direct eyes of users?
Here’s another example from other apps:
#4: Common Region — Human eyes consider elements in one area as one group.
I see this principle somehow similar with the proximity. But I think this principle is not merely based on the spacing. But more like an area which can be made with a shapes or colors.
The following is Quora app as the example. They use the gray area as an element to create a post as one region.
Then here I did an experiment by eliminating the gray area. It could work, perhaps a bit tweak of spacing to make it works.
But wait… It feels not right when I scroll the screen and skim to find interesting topics. Somehow it feels better with the gray because it’s clearly separated.
#5: Similarity — Human eyes will consider any similar elements as one group or something that has same meaning and function.
The proximity principle states that adjacent elements are considered as one group. But in similarity principle, non-adjacent elements can be considered as one group, as long the elements are similar.
Similar elements are considered as elements that share the same meaning or function. Let me give you one example from Uber App.
Do you see the three circles in the middle? Those three circles for sure have the same function. The function is a shortcut for your addresses.
So let say, we change the circles into squares.
Well, that might work.
Though now we see overall elements have the same shape, rectangles with rounded corners. But using circles are better right?
Some more examples from other apps
- On Flipboard, you see the numbers, 1.6K added, 2 likes, 7 magazines, and 26 following. They have a similar pattern which has same meaning, the user statuses.
- For The List app, even though the green circles are on each different rows, we can still recognize they share the same meaning.
- The Infatuation uses blue color to highlight information or something clickable.
In another case, I think we can relate similarity principle to consistency. Because to achieve consistency, we need to reuse similar elements that share same function and meaning across the platform.
Actually there are 10 principles that I wanted to put here. I’ll write the other 5 principles in part 2. Stay tuned!
And last but not least, one of the sources, Wikipedia, says that this gestalt principles are not supported by strong quantitative research. So use this article as supporting knowledge only.
Thanks for reading!
Anyway, I took the app screenshots from pttrns.com. Thanks, Robin Raszka!
Like the article? Share some love 💚
