Skip to main content
  1. Posts/

Website psychology

5 mins
psychology ux
Shawn L
Builds stuff minimally
Table of Contents
  • Always think of the entry point. Where do you want visitors to see first?
  • Too much empty space could make it less credible.


  • Add a down arrow below hero to show there’s more content below.
  • Add small roundness to sharp corner
  • Use images that break out of rectangle to catch attention.
  • Make it pretty
  • Image and headline must match. E.g. for a mover company, use a photo of family watching the movers.

Menu #

  • More menu dilutes attention. Keep to 3.
  • Are users browsing or searching for something? Match menu names to what they are searching for.
    • ’topics’ is better than ’learn’ because users are searching for topics.


  • Match visitors’ expectations on arrival
  • Use skeleton loaders like Youtube.


  • Floating download button:
    • Put on bottom right
    • Use subtle animation. Too persuasive animations will turn off people.
  • Add white card background if you want people to read through.


  • Don’t use section header with a background because it feels they are 2 separate item.
  • Grid is good for browsing. List is for finding. Amazon is a good example.

Countdown timer

  • Don’t use countdown timer if it’s more than 24 hours because there are more than 3 things changing.
  • Use red color to make the time seem closer.

Social proof

  • Doesn’t create desire
  • More vertical images to appear larger.
  • Social similarity is persuasive. Use specific words like ‘10k of guests who stayed in this room recycled their towels’


  • Skew image inward to face text to keep readers’ focus
  • Shoot image from bottom to feel like you’re looking upward. It gives more trust – like a baby looking up to new mom.
  • Show a hand holding the book.
  • Images choices:
    • emphasize benefits early in decision (person playing guitar to make friends happy)
    • emphasize features late in decision (person learning guitar 1-on-1)


  • White background if:
    • action oriented (sign ups)
    • non-profit
    • proud to showcase to the world
  • Dark background if:
    • enjoyment (Netflix)
    • emotional
    • something to hide (porn, beginner in Photoshop)
  • For dark background sections, don’t use white or striking color for border color.
  • Avoid non-clickable blue text.
  • Black background with white pricing gives more value.

Logo #

  • Use text based for small businesses.
  • E.g. ‘psychology + marketing’. The lowercase shows casualness. The plus symbol appears more scientific than &.


  • For pages before checkout, use ‘Choose’ instead of ‘Buy’.

  • Price seem smaller if they are smaller than the buy button.

  • Make it more clickable:

    • use words that people use in real life. No cutesy words like ‘Count me in’.
    • no exclamation mark.
    • ‘Yes, add it’ is better than ‘Yes, I’ll buy it’. ‘Buy’ makes user feel they he is losing something. ‘Add’ makes user feel he is gaining something.
    • Add a white card behind button so it appears closer to user.
    • Add a finger icon on the right so user can image themselves tapping on it.
    • Put buttons at the bottom of the screen
  • For rejection button:

    • don’t use ‘No thanks’. It’s too clickable because it’s polite and natural.
    • use unnatural words, e.g. later, delay to later
    • don’t insult like ‘No I don’t want free stuff’
    • ‘No’ is not ideal because user might make up on justification to reject the offer even if they see it in the future.
  • Transparent button:

    • Only in white background
    • More suitable for mobile phone
    • Less noticable, so make sure you already have user’s attention.
  • Large button inflates the perception of price.

  • Square button for rational decision, precise goals e.g. download.

  • Round button for emotional decision, broad goals, e.g. subscribe

  • Sections with rounded dividers will make buttons less clickable because it seems less stable.

  • Sticky buttons at the bottom is good because people are more willing to buy something they see more often.

Pricing page

  • Background highlight the most expensive to anchor users’ decision.
  • For vertical pricing, sort most expensive to least expensive.
  • For horizontal, arrange from least expensive to most expensive. User expect numbers to grow larger to the right.
  • Sales pricing:
    • Original price on the left. Discounted on right and smaller.
    • Add more distance between them.
    • Use rounded original price to make it seem larger
    • Red discounted prices are more attractive to men.
    • To make the price difference bigger:
      • Change from round to precise number (~40,000.00~ 15,999.00)
      • Change from decimal to round (~5.4~ 3)
  • Sold out: Make the sold out banner or cross larger to give illusion of limited options.
  • [Divergent processing] Have more space between discounted price and original price to create perception of bigger discount, e.g. 3000 ——————–> 69.
  • [Convergent processing] Don’t show discounted price below a slashed original price. User will perceive the discounted price is expensive because it’s viewed together with the original price.
  • Don’t show ‘$69 (You save $2900)’. Instead use ‘$69 (Yep…it’s not a typo)’. Use self-generated inferences words. Words that user are likely to say silently. You’re also not biased to yourselves. User is the source of the statement.


  • Reduce options and menu. Don’t dilute their focus.
  • Progress bar:
    • Don’t use a long horizontal line. They make the process appear long.
    • Use color and animation to show user progress between the steps.
    • Move the 2nd last step indicator closer to the final step. Because you’re so close to checkout, you’re more likely to complete it.

Bottom page CTA

[Subscribe ] Get each month. Join 30k subscribers (small social proof)


  • If an upsell is not enticing, bundle it as a mystery gift. Give a hint like ’this may pay for the entire course’
  • Use a heading title that keeps the flow, e.g. ‘Wait, there’s more…’

Footer #

If you have a bottom CTA in the middle, keep the middle of Footer clear. You don’t want to distract from the CTA.


  • Nick Kolenda Website Psychology course