According to a very well known researcher Don Norman, we develop our emotions with an object on three different levels: Our instinct (visceral), our behaviour (behavioural), and our reflection (reflective).
Three levels of emotional design:
- Visceral Emotional
- Attractiveness
- Initial impression
- Feelings
- Pre-consciousness
- Behavioural Emotional
- Performance
- Usability
- Effectiveness of use
- Product function
- Reflective emotional
- Impact of thought
- Meaning of product
- Sharing the experience
- Cultural meaning
In the very initial phase, designs generate emotions through the user's eyesight and their interaction with any of the products. Therefore, this is the best part for the UI designers to showcase their skillset. Besides the basic principles and fundamentals of design. Below are few psychological rules we have been applying to our designs so far.
Gestalt Principles
Law of Similarity:
Human eyes are trained naturally to connect similar looking elements into a group, and the brain automatically will assume that these elements serve the same purpose.
Hence, making consistent design elements that serves the same function or content.
Applications: Galleries, Cards, Banners, Pagination, Navigation
Law of Continuation:
Our eyes perceive the elements arranged in a continuum as a group. This is quite relevant to symmetry and similarity. By forming similar and repeating design elements over a sequence, ew can drive the users in the direction we want. It helps in reading information much more relevant and clear.
One of the best examples that applies this rule is a carrousel, providing the user with an indication that there is still more information to see.
Applications: Lists, Menu & Submenus, Arrangements, Carousels.
Law of Closure:
When we look at an incomplete image, our brain relies on previous experiences and fills up the remaining.
This law is commonly used in graphic or logo design. However, we can also use it for icons and loading in a product design.
Applications: Loading, Icon, Data visualisation
Law of Symmetry and Order:
Human brain likes to see things that are balanced and are symmetrical. This law is one of the most frequently used and the safest law in all design fields. It lets us create a sense of stability and order in the designs.
We often apply symmetry while designing products that require visualization, simplicity, and harmony. It lets the user feel much more comfortable and it allows them to focus on what is really important. The only downsize is that if it is overused, the product can becoming monotonous and very boring. We usually apply these to the header or the CTA to better focus and call to action.
Applications: Banners, Galleries, Content heavy, Listing, Navigation, Product Display
Law of Figure / Ground:
Human eye’s have the tendency to notice detached things from their background or groups that are framed together.
We usually apply this law to direct the users eye to view the important information. It is usually a card design with a very light background with a subtle drop shadow to lay a layer on top of the background.
Application: Content, Cards, Listing, Summary, Services.
Law of Common Fate
Elements that usually move in the same direction are considered to be more related than any stationary element or that is moving in another direction. This rule law helps to establish relationships between statuses and groups.
We usually apply this rule more explicitly while creating animations. However, this can be applied to so many various factors.
Applications: Navigation / Dropdown, Collapse, Accordions, Parallax Scrolling, and Product Sliders.
Law of Proximity
A very essential law in the UI design, as our eyes treat any adjacent element as a group.
While designing, we pay keen attention to using proper spacing to group different elements together. We usually add large spaces to separate big content groups, then a smaller spaces to smaller groups of content.
Applications: Navigation, Cards, Navigation, Content, Banners, Pagination.
Focal Point
When human eye’s look at something, it focuses on the most prominent element first. Understanding this simple behaviours can help us create an anchor point in any of our designs, so it helps user to view the content that follows our scenario.
Applications: Content, Landing Page, Product Page, Pricing, Banners.
Isolation or Von Restroff Effect
This suggests that people usually are tend to notice and remember parts that are different from the rest of the elements. This is is very easily confused with the Focal Point Law. The major difference is that the elements that form this rule often are placed separately and they have no extra function to serve in navigating to the user.
Applications: Promotion banners, Pricing Tables, Premium Upgrades.
Visceral Reactions
This is achieved by creating a visual experience based on the real world user experiences. A very simple example to understand this better is that. It is easier for us to laugh while we are watching a video with a voiceover of laughter at every funny scene. Users would love the design if it makes them feel good, connected, and comfortable.
Applications: Illustrations, Photography, Product Image
Color Psychology
There have been so many studies on how colour plays a vital role in creating an impact on our subconscious. The colour perception differs between different religions, genders, and culture.
And also, lets not forget the colour system that have widely used:
Green: Success
Red: Failure / Error
Yellow: Warning
Blue: Under process
Psychology of Shapes
Just like colour, our subconscious reacts differently to different shapes.
Circle, eclipse, oval: Usually represents sending a positive message and is often related to relationships and community.
Triangle and Square: Usually used to represent a strong message and is often associated with stability and strength.
Vertical Lines: Used to represent intensity, aggression, or strength.
Horizontal Lines: Used to represent quiet, equal, or calm.
