How Emotions Shape UI: The Three Psychological Layers Behind Design

Emotions and Feelings Everywhere

We are entering an age where information complexity far exceeds the past, and products are no longer just about specifications but about emotional connections. Emotional design has become a core component across design fields.

Often UI designs oscillate between usability and practicality, and many seemingly delightful web pages or apps feel like “someone else’s work.”

While many discuss which UI elements might trigger users, a systematic exploration of how emotions and feelings influence design is rarely articulated.

By combining basic psychology with our perception of the world, we can analyze and understand the principles of emotional design. Before designing, we should first understand emotions and feelings.

Three Levels of Design

Psychology divides the brain's response to the external world into three layers: instinct, behavior, and reflection. These layers map onto design as follows.

Instinct

The instinctive layer involves innate biological responses, such as danger avoidance or enjoyment of food. It applies broadly to all users.

Behavior

The behavior layer controls daily actions unconsciously and is tightly linked to the emotional system, preparing the body for specific scenarios.

Reflection

The reflection layer connects cognition and reasoning, using rational thought to help us understand the world. Survival often precedes understanding, so emotion can prompt faster reactions than cognition.

Interwoven Layers

Intuitive design, like that discussed in a previous article, intertwines intuition (a behavior-like, unconscious process) with experience, training, education, and culture.

Examples include users of Samsung phones instinctively pressing the right side of the Home button, or long‑time Mac users feeling anxiety and performing certain actions, and Chinese Windows XP users habitually refreshing during loading.

These behaviors are learned, not innate, and become semi‑fixed background processes that allow multitasking in daily life.

Most apps and websites blend the three psychological layers—instinct, behavior, and reflection—to communicate with users.

The Two Faces of Emotion

Both positive and negative emotions are tools for designers. Online comments often start with phrases like “to be honest” or “speaking frankly,” reflecting emotional underpinnings.

In applications, elegant interfaces, subtle animations, pleasant sounds, or vibrant colors can evoke positive emotions, while error messages, flashing alerts, or harsh tones trigger negative emotions that prompt corrective action.

Designers should leverage both sides: red error prompts, shaking dialogs, and disabled gray buttons create tension that drives users to reflect and fix mistakes.

Conclusion

Emotional design encompasses many topics, but starting with the three fundamental layers helps designers think more clearly, observe users during research and testing, and validate ideas. Though tracing origins can feel tedious, it leads to deeper understanding.