UX and UI design are a great amalgamation of psychology, marketing and aesthetics. It is where usability and aesthetics come together to create a great and intuitive experience for the user.
In theory how would the design process go — in your extensive UX research you would discover all of the painpoints of your target audience and solve their issues and problems with an intuitive navigation system, useful functionalities, and attractive visuals. Sometimes, this process can be more challenging which could mean making compromises, rejecting some ideas and reiterating your whole design.
Luckily for everyone, there are some of the principles taken from psychology that can guide you throughout your whole process and give you a strong standing point for how you do your UX or UI. Then eventually you can say : “This is the psychology law and I’m not changing anything because this looks cool to me!”
Jokes aside, these 5 heuristic and Gestalt principles are very important and legit for your whole design:
Aesthetic Usability Effect
All of us perceive aesthetically attractive design as more usable than a design that is not as pleasing but with the same usability.
That is because what is aesthetically pleasing can make us happy so we think that such a design is better functioning. Also, such design will make some functionality issues more tolerable.
This of course shouldn’t mean prioritization of one over the other. You should always care about functionality and find a way of creating a pleasing looking design along with it.
Here is a simple example of the Aesthetic Usability Effect — both have the same functionalities but look different:
Fitt’s Law
Users will reach the target faster if the target is bigger and placed in the interface where it can be easily acquired.
If you want your users to register to a course, you should make that Registration button visible and easily reachable so users don’t have to scroll for it or search for it. This is applicable for all screen sizes, but especially for large screens that require larger targets to be noticeable and to “minimize the time to reach them”.
This law doesn’t just apply to the main call to action buttons, but also some elements like touch targets, especially now in the smartphone era, and spacing between touch targets.
Menus and buttons should have larger spacing between them because not everyone has the same tactile senses, and we should also consider designing for inclusivity. For example, people who can have issues with fine motor skills will need larger touch targets.
Here you have previous and next buttons very closely placed which makes it very difficult to touch or click in order to change podcast episodes and that can be very frustrating. And on the right you have them better spaced to decrease the chances of bad usability:
Hick’s Law
Have you found yourself in a situation like in the photo below?
Of course you did, because you are using internet. This means that whoever made the website is either not familiar with Hick’s Law, or is using some dark UI patterns.
Hick’s Law says that users will take more time to decide if they are presented with a lot of choices.
In real life example this means that you should minimize the action choices for user. You should not complicate it with many call to action buttons or an infinite number of highlighted recommendations.
This can be easily avoided with :
- breaking large steps into smaller ones,
- decreasing the number of CTA buttons on landing page,
- using progressive onboarding instead of a mandatory complex one.
Progressive onboarding are onboarding tips that are given to users as they use the app. It is one of the features I love in Adobe XD, and it really did help me a lot without overwhelming me.
Jakob’s Law
When designing a website or an app don’t feel pressured to reinvent the wheel because usually users want the websites or apps to work as they are used to. Users transfer their existing knowledge and expectations from the sites and apps they use to the other ones.
We want to guide users to focus on the actions we want them to complete instead of teaching them how to navigate our web for the first time.
For example, you don’t want to place your navigation in an unusual space in the interface, because it will make the navigation harder:
This doesn’t mean you shouldn’t experiment with the design and try to create and apply new ideas, but if your goal is to make a booking app the focus should be on a concrete action which is booking :).
Gestalt Laws of Grouping
This is not just one principle, but a set of principles called Gestalt Laws of grouping.
Gestalt laws of grouping are set of principles proposed by Gestalt psychologists denoting that humans perception is based on patterns.
How does this apply to UX UI?
Well, the first principle is Proximity where we organize objects by proximity and relate them to each other. Like the course cards on Awwwards academy website, the content within the cards is closely placed, so we perceive it as connected:
The principle of Similarity helps us to relate similar objects even though they are separated.
For example on Medium, topics are put in pill shaped buttons, and although they are not all in the same place, we as users can follow them throughout the website knowing those are topics and not action buttons:
Other principles are Continuity, Closure, and Connectedness (common region).
All of these principles should be taken with a grain of salt. Experimenting in design is very important because it leads to innovations and completely new principles.
The advice written above is something you can use to establish the main rules and structure for a website or an app that has a certain goal you want your end-users to complete.