You are browsing:

Checkout Tips

Landing Page lessons related to the checkout process.

Include an email within error messages

Hot Tip #62 is to include a support email address within your error messages.

If your Landing Page payment integration offers message customization, include a support email address for when a problem persists:

🚫


Error Reference
✅

Error Reference
This can potentially convert dozens of disgruntled visitors into happy customers.

Make it accessible

Hot Tip #69 is to make it accessible.

Providing people with health conditions or impairments, the ability to read and navigate your Landing Page easily is the right thing to do.

Here are five small tasks that can go a long way:

  1. Create a clear :focus state like this - keep hitting tab on your keyboard and see what happens in your Landing Page.

  2. Ensure your text color contrast isn't weak - this text against this background - has a decent AAA accessibility score of 8.99.

  3. Increase your browser font size and see if your Landing Page layout breaks or anything become illegible.

  4. Correctly assign and order semantic headings (H1, H2, H3) - disabling your stylesheet or using a screen reader will quickly surface issues with your hierarchy.

  5. Describe all your non-decorative images using the alt tag - if an image is only there for graphic purpose you can let the screen reader skip it.

One hour tackling the above, could saves hundreds of frustrating hours for others.

The exercise will also strengthen your Landing Page by surfacing fundamental development issues.

Accessible Color Generator - Useful to find the nearest accessible-passing color based on your color inputs (that are failing).

Contrast for Mac - Great tool I've been using to to ensure my text color hierarchies are within Accessibility standards.

Focus Styles - Solid article by Eric Bailey covering :focus and :active CSS selectors.

Lighthouse - Instructions how to run an accessibility audit for your Landing Page in Google Chrome.

Screen Readers - A curated round-up by UsabilityGeek.

UserWay - A website accessibility solution for ADA & WCAG Compliance. Their widget sits in the corner of the browser where users can customize their browsing experience.

Reassure during checkout

Hot Tip #72 is to reassure your visitors during the checkout process.

Nerves are high. Settle them with these small reminders, strategically positioned near the checkout form:

⭐️ The average customer star rating
🍏 A small stack of well-known client logos
💳 A payment-related FAQ
💬 A short but comforting testimonial

Also, try to include anything that adds transparency to the experience. This can alleviate any lingering doubts the visitor may have.

Note how LearnUX reassures by showing you exactly how the payment will appear on your statement — including the renewal date differences between tiers:


LearnUX checkout
If checkout customization isn’t possible in your Landing Page, the above would still apply to the area around your pricing table or final CTA button.

Personalize the success message

Hot Tip #73 is to personalize the success message.

Congrats on converting your Landing Page visitor into a beaming customer. Why not strengthen the relationship with a personalized ‘thank you’ message as the transaction completes?

The nerds call this Lead Nurturing but think of it more as a cherry on top. The same kind of sweet cherry when someone includes an (unexpected) handwritten note inside a packaged delivery.

When I paid for my HEY account, this popped up from the CEO. I shared it with around 5 people and saw the same message shared a dozen times on social media:


Hey personalized success message
Write the personalized message you would want to receive after buying a product online — it’s a wasted opportunity not to.

Boost confidence with payment method logos

Hot Tip #75 is to boost confidence with payment method logos.

We’ve come a long way with online transaction confidence, but some demographics are more hesitant than others.

An SSL certificate for your Landing Page is non-negotiable.

You can further improve your visitor confidence by adding all accepted payment methods near your pricing tables, main CTA buttons, and Landing Page footer. All three are not too much.


Payment method logos

Payment Method Logos - A brilliant free set (pictured above) on IconFinder in PNG and SVG formats.

Strategically position testimonials

Hot Tip #83 is to strategically position testimonials.

We’ve discussed curating testimonials to provide the most value to your Landing Page visitor. But where do we put them?

Start by positioning your best testimonial — preferably from an opinion leader in your industry — above the fold. This will strengthen your intro pitch and lower bounce rates. Now position other testimonials relevant to the Landing Page topic.

Example: If you are showcasing a specific product feature, try to position a testimonial mentioning that feature alongside it.

Note how the CleanShot X screen capture tool is talking about the ease of saving, copying, dragging, dropping, and then just below it a customer testimonial suggests the tool is like a Swiss Army knife:


Testimonial position reference
Finally, position a testimonial near checkout that mentions value for money or overall satisfaction.