UI/UX Psychology Behind Good Design
Designing a product that people enjoy using requires understanding how the human brain works. People do not read every word on a screen. They do not carefully evaluate every button before clicking. They scan, guess, and act based on patterns they already know. When a designer understands these mental habits, every design decision becomes sharper and more deliberate.
People Scan, They Do Not Read
Eye-tracking studies show that most users scan a page in an F-shaped or Z-shaped pattern rather than reading left to right, top to bottom like a book. They move their eyes quickly across the top, then drop down and scan a shorter horizontal section, then move down the left side.
F-PATTERN READING DIAGRAM
[ =============================== ] <-- Top: Full width scan
[ ================ ] <-- Middle: Partial scan
[ == ] <-- Bottom: Left edge only
[ == ]
[ == ]
Z-PATTERN READING DIAGRAM (used on simpler pages)
[ =============================== ] <-- Top: Full width scan
[ ↙ diagonal drop ]
[ =============================== ] <-- Bottom: Full width scan
This means: put the most important information at the top, and never bury a key message in the middle of a long paragraph. Users will miss it entirely.
Mental Models: What Users Already Expect
A mental model is the picture a person already has in their head about how something should work. People build these models from years of experience with other products.
For example, most users expect:
- A logo in the top-left corner to take them to the home page when clicked
- A shopping cart icon in the top-right corner on e-commerce sites
- A hamburger menu (three horizontal lines) to reveal a navigation menu on mobile
- A red color to signal danger or an error
- Underlined text to be a clickable link
When a product breaks these expectations, users get confused. Even if the designer's new idea is objectively better in theory, it fails because users carry years of trained habits from using other products.
MENTAL MODEL DIAGRAM User's Brain Before Using Your App: [ Previous Apps Used ] --> [ Set of Expectations ] Your App: Matches expectations --> User feels confident immediately Breaks expectations --> User feels confused, tries random taps
The lesson: innovate on what matters, but keep familiar patterns where users expect them. Do not move the back button just because it looks cleaner somewhere else.
Cognitive Load: How Much the Brain Can Handle at Once
Cognitive load refers to the amount of mental effort required to process and use a product. Every element on a screen adds to this load. Every decision a user must make increases it. When cognitive load gets too high, users give up.
Three Types of Cognitive Load
Intrinsic load — the natural difficulty of the task itself. Completing a tax form is genuinely complex. A designer cannot remove that complexity entirely, but they can break it into steps.
Extraneous load — unnecessary difficulty added by poor design. A confusing layout, unclear labels, or irrelevant information all add extraneous load. This is 100% within the designer's control and should be eliminated.
Germane load — the mental work of learning a new system. Some germane load is acceptable, but a well-designed product minimizes it through clear patterns and helpful guidance.
COGNITIVE LOAD SCALE DIAGRAM LOW LOAD HIGH LOAD |------|------|------|------|------| Easy OK Fine Heavy Abandon Design should keep users near the left side of this scale. HIGH LOAD is caused by: - Too many options on one screen - Unclear labels and button text - Inconsistent visual patterns - Missing feedback after actions - Long paragraphs of text
Hick's Law: More Options, Slower Decisions
Hick's Law states that the time it takes a person to make a decision increases as the number of options grows. When a user sees 3 choices, they decide quickly. When they see 12 choices, they hesitate, second-guess themselves, and sometimes leave without choosing at all.
This is why streaming apps like Netflix do not show their full library on the home screen. Instead, they surface a carefully selected set of recommendations. Fewer visible choices lead to faster, more confident decisions.
HICK'S LAW DIAGRAM Options: 2 --> Decision Time: Fast [ __ ] [ __ ] Options: 4 --> Decision Time: Slower [ __ ] [ __ ] [ __ ] [ __ ] Options: 8 --> Decision Time: Slow [ __ ][ __ ][ __ ][ __ ][ __ ][ __ ][ __ ][ __ ] Options: 12 --> Decision Time: Very slow or abandonment Designer's goal: Show only the most relevant options at each step.
Fitts's Law: Target Size and Distance Matter
Fitts's Law describes how quickly a user can move their cursor or finger to tap a button. The farther away a button is and the smaller it is, the longer it takes and the more likely the user is to miss it.
Practical applications:
- Primary action buttons (like "Buy Now" or "Submit") must be large and easy to tap
- Destructive actions (like "Delete Account") should be small and require extra steps — making them harder to trigger accidentally
- On mobile, all tap targets should be at least 44x44 pixels (Apple's guideline) or 48x48 dp (Google's guideline)
- Place the most important button in the easiest area to reach — usually the bottom of the screen on mobile, since thumbs reach down more naturally
FITTS'S LAW DIAGRAM (Mobile Screen) Easy to reach (bottom center): [ PRIMARY BUTTON ] <-- Best placement Harder to reach (top corners): [ SECONDARY ] <-- For less important actions Thumb comfort zones on a phone: TOP THIRD: Hard to reach without repositioning phone MIDDLE: Reachable with effort BOTTOM: Natural thumb zone -- place primary actions here
The Serial Position Effect: First and Last Are Remembered
The serial position effect describes how people remember items in a list. They recall the first item (primacy effect) and the last item (recency effect) far better than items in the middle.
Designers use this principle in navigation menus:
- Put the most important navigation item first (Home, Dashboard)
- Put the second most important item last (Sign Up, Contact, Account)
- Place less critical items in the middle where they are least memorable
NAVIGATION MENU DIAGRAM [ Home ] [ Features ] [ Blog ] [ Pricing ] [ Sign Up ] ↑ ↑ Best remembered position Second best remembered (Most important link) (Conversion action)
Recognition Over Recall: Do Not Make Users Remember Things
Human memory works in two modes: recognition and recall. Recognition is much easier — seeing something familiar and knowing it. Recall is much harder — pulling something from memory without any visual cue.
Well-designed interfaces use recognition instead of recall whenever possible.
RECALL (Hard -- avoid this) "Type the name of the item you added to your cart last week" User must remember without any help RECOGNITION (Easy -- use this) Show a list of recently viewed items with images and names User scans and clicks the familiar item
This is why shopping apps show browsing history. Why autocomplete suggests words as you type. Why form fields remember previous entries. These features eliminate the need to recall and replace it with simple recognition.
The Von Restorff Effect: What Stands Out Gets Noticed
The Von Restorff Effect (also called the Isolation Effect) states that an item that is visually distinct from others is more likely to be noticed and remembered.
This is why every pricing page has one plan highlighted in a different color. It draws the eye immediately. It signals "this is the recommended choice." Users notice it first and read it most carefully.
PRICING PAGE DIAGRAM
[ Basic Plan ] [ PRO PLAN ] [ Enterprise ]
[ $9/month ] [ $29/month ] [ $99/month ]
[ Features ] [ Features ] [ Features ]
[ Sign Up ] [ SIGN UP ] [ Sign Up ]
↑
Highlighted card (different color, slightly larger)
Eye goes here first -- Von Restorff Effect
The Gestalt Principles: How the Brain Groups Things Visually
Gestalt psychology explains how humans naturally group visual elements. Designers use Gestalt principles to create clear, organized layouts that feel intuitive without requiring explanation.
Proximity
Elements placed close together appear related. Items spaced far apart appear unrelated. A row of three icons with tight spacing looks like a group. The same icons spread across the screen look like three separate items.
Similarity
Elements that look alike (same color, shape, or size) appear to belong together. Use consistent button styles to signal all buttons. Use consistent card styles to signal all content items of the same type.
Closure
The brain completes incomplete shapes. A circle with a gap still reads as a circle. A progress bar that is 70% filled reads as "a task in progress moving toward completion" — even though the bar is not complete.
Figure and Ground
The brain separates visual elements into the "figure" (the subject in focus) and the "ground" (the background). A dark modal overlay on a light page creates a clear figure-ground relationship — the modal is the figure, the rest of the page is the ground.
GESTALT GROUPING DIAGRAM PROXIMITY: ○ ○ ○ ●●● ○ ○ ○ Three groups perceived, not nine individuals SIMILARITY: ○ ○ ○ ● ● ● ○ ○ ○ Two groups perceived based on color FIGURE/GROUND: [ Blurred background ] + [ Sharp modal ] = Modal is what you focus on
Emotional Response Happens in Milliseconds
Research by Dr. Gitte Lindgaard found that users form a first impression of a website in 0.05 seconds — fifty milliseconds. That first impression is almost entirely visual. Color, layout density, and general aesthetic immediately signal whether a product feels trustworthy, modern, or professional.
This means the visual design (UI) creates the user's emotional context before they interact with anything. A strong visual design creates a positive emotional bias that makes the user more forgiving of minor UX issues. A poor visual design creates a negative bias that makes the user less patient throughout the experience.
Key Points
- Users scan screens rather than reading them fully — place important content at the top and in predictable locations
- Mental models are the expectations users bring from other products — breaking them causes confusion
- Cognitive load is the mental effort required to use a product — reduce extraneous load with clear design
- Hick's Law: fewer choices lead to faster, more confident decisions
- Fitts's Law: larger, closer buttons are easier and faster to tap
- The serial position effect means first and last items in lists are best remembered
- Use recognition over recall — show options rather than asking users to remember them
- The Von Restorff effect means a visually distinct element attracts attention first
- Gestalt principles help users group and understand visual information without explanation