The Psychology of
User Experience

Humans feel choice overload.

Too many options? We give up.

But how many is too many? I think 4 options is the threshold.

Look at these squares:

You see 4 items. But your brain doesn't need to count them. It knows that 4 items exist immediately. It's called parallel individuation (Gallivan et al., 2011).

Humans possess this ability up to 4 items, but it collapses with 5 items:

Five items are a critical threshold in which options feel like "a lot" — an unknown quantity that is large enough to require counting.

Therefore, choices feel difficult with 5+ options.

How to Apply It

What if you need to show 5+ options?

Well, you just need to group them.

Consider this navigation menu on HubSpot:

It groups 12 links into 4 sections.

This choice is now two mini-decisions:

1. Which section should I view? (4 options)
2. Which link should I click? (3 options)

Despite 12 options in total, this choice feels easy because each mini-decision stays within the confines of parallel individuation.

The Takeaway: Categorize options into small groups that contain no more than 4 options. Even randomly assigned groups can work (Mogilner, Rudnick, & Iyengar 2008).

Exceptions

1. Specific Searches. Choice overload is less prevalent when people are looking for a specific option. It's called top-down attention.
2. Pleasurable Choices. Contemplating each item in a restaurant menu could feel good. In this scenario, perhaps more options are better.

• Gallivan, J. P., Chapman, C. S., Wood, D. K., Milne, J. L., Ansari, D., Culham, J. C., & Goodale, M. A. (2011). One to four, and nothing more: nonconscious parallel individuation of objects during action planning. Psychological science, 22(6), 803-811.
• Mogilner, C., Rudnick, T., & Iyengar, S. S. (2008). The mere categorization effect: How the presence of categories increases choosers' perceptions of assortment variety and outcome satisfaction. Journal of consumer Research, 35(2), 202-215.

Users think in relative terms.

Compare any stimuli (e.g., dates, prices, usage) to meaningful baselines.

How to Apply

• Show Incremental Units of Time. Sure, users might have sent a message today. But indicating the current date (e.g., July 1) will unnecessarily force them to calculate the current date. Instead, gradually expand the relative duration: 10 seconds ago (then minutes, hours, days, weeks, months, years).
• Compare Usage to the Average Norm. Help users compare their current electricity bill to the average amount they spend.

Users might need to submit information in a certain way.

Tell them these requirements.

How to Apply

• Indicate the Format. Is it a PDF, PNG, JPEG? Any max file size?

• Populate the Units or Parameters. Is the currency USD?

• Match Form Sizes With Input Sizes. Is the apartment unit separate from the address field?

• Indicate Which Elements Are Required. Is the address field required?

Users vary in their ability and knowledge.

Your interface should handle these different levels.

How to Apply

• Help Users Understand Unfamiliar Terms. Add tooltips or clarifying messages to jargon.

Interfaces can feel disorienting.

Help users find and navigate to relevant pages.

How to Apply

• Add Breadcrumbs. Show the current sequence of links that brought them to the current page.
• Communicate the Current Phase of Interactions. Has their product shipped yet?

Try to fix errors for users.

But if you can't, help them solve errors themselves.

How to Apply

• Provide Instructions in Error Messages. You might need an error code for developers, but try to add instructions for users as well — even if it's a link to support.
• Point Users Toward Support or Documentation. Add a link to relevant page that could help them overcome it.

• Avoid Saying “You” in Error Messages. It feels antagonistic.

Attention is precious.

Push attention to focal items, while limiting the peripheral content from diluting their attention.

How to Apply

• Omit Self-Explanatory Instructions. Users don't need to be told to fill out fields. Just show the fields.

• Maximize Data-Ink Ratios. Fewer distractions can reveal the key findings.

• Hide Peripheral Details in Expandable Mediums. Collapse information in toggles when space is constrained (e.g., mobile).

Some products have uncertain results.

How can you tell if a lotion is truly working?

Well, add a physical sensation

Researchers tested two herbal balms.

The only difference? One tingled.

Sure enough, the tingling balm seemed better: Only 33% of people bought the regular balm, whereas 58% of people bought the tingling balm after trying it (King et al., 2024).

Same with other products. Customers were willing to pay:

• $13.03 for a regular headwrap
• $20.71 for a headwrap with a cooling sensation

Sensations imply that a product is working:

...[sensations] improve consumers’ ability to perceive an inflow of (otherwise invisible) benefits from the product to their body, giving consumers a metacognitive sense that the product is improving their body (“The tingle tells me that the product essence is now flowing to my body”; King et al., 2024).

In fact, this enhancement is so extreme that it changes behavior.

Researchers gave participants a muscle-enhancing gel. Participants who felt a tingle could hold a 5 lb. weight for a longer duration (King et al., 2024).

When possible, help customers infer that your product is working by adding sensations:

• Sensory feelings (e.g., tingling, cooling, warming)
• Sounds (e.g., buzzing, humming)
• Attachments that "click" into place

Placebo Sensations

Can't add a sensation? Try describing events that will happen anyway.

After applying the sunscreen, it should:

• ...feel slightly cold
• ...feel moist
• ...disappear fully

Frame these expected outcomes as evidence that your product is working.

Digital Sensations

Imagine clicking an important button:

• Transfer money
• Delete data
• Submit job application

Sure, you might see a "thank you" message. But did it really happen? How can you tell?

In these scenarios, loading screens can be useful. Even if you don't need them.

For example, TurboTax shows a lengthy animation after you submit taxes:

It becomes a tingling sensation. You believe that something is truly happening during this moment, so you feel confident in the accuracy and efficacy of this action.

• King, D., Auschaitrakul, S., & You, Y. (2024). Felt something, hence it works: Merely adding a sensory signal to a product improves objective measures of product efficacy and product evaluations. Journal of the Academy of Marketing Science, 1-19.

Users possess expectations when they visit a page.

And your page should match these expectations.

Why It Works

• Processing Fluency. Any contradiction feels unpleasant, and they attribute these negative feelings to your content.

How to Apply

• Choose Colors That Are Semantically Meaningful. Green for good actions; red for bad actions.

• Show the Primary Essence Upon Loading. If users click a "pricing" page, what do they expect to see? Prices. Well, show them prices upon loading the page.

• Adhere to a Consistent Layout. Any adjustments will contradict their expected interactions.

Caveats

• Distinctive Products. A gourmet cheese was preferred with disfluency (e.g., complex font) because it felt distinctive (Pocheptsova et al., 2010). Customers who want special high-end products will be searching for distinctive cues. Their expectation is unexpectedness, so it's okay to break common patterns to satisfy their desire for something different.
• Product Exploration. You prefer familiar products in common grids, yet unfamiliar products in unexpected patterns because you need to break away from habitual decision factors (Walter et al., 2020). Some platforms (e.g., Netflix) might benefit from atypical catalogs that nudge certain users toward less familiar content.

• Pocheptsova, A., Labroo, A. A., & Dhar, R. (2010). Making products feel special: When metacognitive difficulty enhances evaluation. Journal of Marketing Research, 47(6), 1059-1069.
• Walter, M., Hildebrand, C., Häubl, G., & Herrmann, A. (2020). Mixing it up: Unsystematic product arrangements promote the choice of unfamiliar products. Journal of Marketing Research, 57(3), 509-526.

Changes will occur in your interface.

Users should notice these changes without disrupting their current experience.

How to Apply

• Prevent Changes From Blocking Other Functions. Volume changes shouldn't block content.

• Indicate Which Items Have Changed. Which field do they need to fix?

• Warn Users When a Timed Function Will Occur. Let them know before a timeout occurs.

Look for repeated interactions.

Then make them easier to perform.

How to Apply

• Let Users Duplicate Past Input. Have users created something on your platform (e.g., document, spreadsheet, survey)? Let them duplicate an item to build from this template.

• Preserve Input During Interface Changes. Was their password wrong? Maybe they forgot a character. Keep the existing input to prevent them from starting over.

• Monitor Excessive Input or Repetitions. Need to fast forward a video? Increase the speed of fast forwarding exponentially with the duration of this interaction.

Users make mistakes.

Help them catch these mistakes.

How to Apply

• Monitor Wording That Contradicts Intent. Did they say "I attached" in an email without attaching anything?

• Monitor for Inactivity. Have they been watching Love Island for 10 hours? Check on them.

• Verify That a Repeated Action Was Intended. Are they sending the same amount of money again?

Error messages should be a last resort.

Strive to make them unnecessary.

How to Apply

• Disable Buttons When Users Click Them. Prevent duplicate clicks.

• Only Offer Inputs That Are Acceptable. Limit calendar dates to available slots.

• Enable Functions Only When Necessary. Not relevant? Not enabled.

• Structure Text Fields to Match the Input. Don't make users guess whether a dash is needed (and remove a dash if they enter it).

• Add Constraints to Irreversible Changes. Force them to type "DELETE" to delete something important.

Screens are getting smaller.

Content will inevitable exist outside viewports, and users should be able to recognize this existence.

How to Apply

• Avoid a Self-Contained Viewport. Visible breaks can imply that more content exists.
• Convey Depth Through Fades or Shadows. Users should perceive more rows or columns in a table.

Users face moments of indecision.

Gently nudge them toward answers or solutions without forcing them to think.

How to Apply

• Suggest a Starting Point. Give them ideas for search queries (e.g., books, games, movies).

• Show the Typical Answer. Most people start with an ad budget of $10/day.

• Help New Users Find Value. Follow these poular accounts.

• Replace "0 Results" With Similar Results. Similar is better than nothing.

Do users perform the same interaction repeatedly?

Make it easer to perform this action.

How to Apply

• Keep Frequent Interactions Visible. Don't collapse them in a menu.

• Predict Then Prefill Input Fields. Users can always change it.

• Help Users Complete Their Input. Give them real-time suggestions.

• Keep Pertinent Information Up Front. Tell users whether a product is out of stock before they needlessly visit the product page.

Interactions should be intuitive.

Users should know whether they can interact with items.

How to Apply

• Change the Cursor. On hover, etc.

• Change the Element. Change a button color, etc.

• Indicate Which Element Will Receive the Interaction. Sometimes it's difficult to see in small items.

Guide the user's attention.

Emphasize a focal point in your viewport so that users know where to look first. Without an entry point, users feel overwhelmed and uncertain what to do.

How to Apply

• Reduce the Saturation of Nearby Elements. Subheadlines should be a lighter font weight or color.

Interfaces are like roads.

Users might travel down a road, then realize it's the wrong direction.

Help them return to a previous road.

How to Apply

• Let Users Undo Multiple Levels of Action. Store a backlog of their actions.

• Skip Confirmations in Easily Reversible Decisions. Confirmations can become annoying. Provide undos when possible.

Programming adheres to stringent rules.

But users stray from these rules. And your interface needs to accommodate this real-world behavior.

How to Apply

• Add Hover Flexibility in Menu Interactions. Delay closures by a few milliseconds.

• Enlarge the Clickable Area of Small Buttons. Any clickable element should at least 40 x 40 pixels

Users need assurances.

Indicate whether any interaction was a success or failure.

How to Apply

• Indicate Whether an Interaction Will Be Successful. Inform users whether they provided the right criteria for their password before they erroneously submit.

• Indicate Whether an Interaction Was Successful. Users may have clicked "send" on their message. But was it truly sent? Tell them.

Different users will need different interactions.

Your interface should handle these varying needs.

How to Apply

• Let Users Control the Appearance. Let them choose rows or grids.

• Let Users Control the Order of Elements. Whether it's relevance, rating, date, etc.

• Offer Multiple Ways to Accomplish a Task. Add keyboard shortcuts for common interactions.

Some interactions are ambiguous.

Reduce this ambiguity as much as possible.

How to Apply

• Indicate the Next Item in a Sequence. What's the next article in a queue?

• Describe the Destinations of Links. Use descriptive anchor text.

• Specify Which Interaction Will Occur. Undo is more ambiguous than undo color change.

All users need to wait.

But you can enhance these waiting times.

How to Apply

• Decrease Their Arousal With Cool Colors. Loading seems faster with blue (Gorn et al., 2004).

• Keep Users Engaged While They Wait. Distract them with a task.

• Align Machine Downtime With User Downtime. Perform lengthy tasks when they won't be disruptive.

• Populate Loading Elements With Placeholders. These skeleton screens decrease perceived loading time.

• Start Progress Above Zero. Zero feels deflating. Start at 1% or above.

• Gorn, G. J., Chattopadhyay, A., Sengupta, J., & Tripathi, S. (2004). Waiting for the web: how screen color affects time perception. Journal of marketing research, 41(2), 215-225.

Users will group your interface into sections.

Help them perceive these groups with gestalt principles of grouping (e.g., proximity, color, shape).

How to Apply

• Push Headlines Closer to Their Sections. Headlines seem ambiguous if they appear in the middle.

• Keep Labels Close to Their Elements. Form labels should be nearby.

• Divide Long Lists Into Sections. A subtle line can make a list seem organized, even if the groups are randomly divided (Mogilner et al., 2008).

• Distinguish Powerful Functions to Minimize Slips. A delete function should look vastly different to prevent unnecessary interactions.

• Mogilner, C., Rudnick, T., & Iyengar, S. S. (2008). The mere categorization effect: How the presence of categories increases choosers' perceptions of assortment variety and outcome satisfaction. Journal of consumer Research, 35(2), 202-215.