• Always think of the entry point. Where do you want visitors to see first?
• Too much empty space could make it less credible.

Hero

#

• 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.

Layout

#

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

Post

#

• 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.

Page

#

• 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’

Image

#

• 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)

Color

#

• 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 &.

Button

#

• 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.

Checkout

#

• 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)

Upsell

#

• 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.

References

#

• Nick Kolenda Website Psychology course