6 things nonprofits can learn from e-commerce checkout pages (and apply to their Donation Pages)

Working to optimize web content with nonprofit organizations, I’m regularly asked to help improve donation page conversion rates. Clients usually want to know … What are the best practices? Do you have case studies on what converts well? Even though nonprofits do a lot more testing than in years past, published research on what “works” to lift donation page conversion rates is still fairly hard to find. That said, there’s plenty that charities can learn from optimization efforts on e-commerce checkout pages when it comes to improving the user experience for donors. Image1_C+B_Checkout_1_smallThere are a large number of commercial marketers who test everything—in order to maximize conversion on their websites. These companies (and the experts they hire) have identified common “conversion killers” on checkout pages via live testing and usability research. As a fundraiser, the key question you’re going to have while reading this is… How do I get more people through my online giving process to complete a donation? Let’s take a look at 6 tactics commercial marketers have identified from extensive testing on their checkout pages that improve conversion. These techniques are all easy to apply on web donation pages. (Insights described here are adapted from research conducted by the Baymard Institute). #1: Remove seemingly unnecessary steps Oftentimes, staff with no training in web usability gets involved in decisions about what to include on a donation page. For example, your development director may want to collect a lot of information about online donors during the giving process to put to use at a later time. The result is often “form field creep,” i.e. you get greedy and ask for too much information up front. Unnecessary steps and questions lengthen the giving process and irritate a portion of your potential donors, causing them to abandon the page without giving and lowering conversion. Below are examples of unnecessary steps I see required on many donation pages (along with the reason each can harm conversion):
  • Telephone number. People fear marketing calls, so it’s a deal breaker for some if their phone number is required.
  • Program designation. This assumes the donor is already familiar enough with your programs to easily make a choice, which isn’t true. The question unintentionally introduces difficulty into the giving process—and encourages the visitor to leave the page to figure out which program to select.
  • How did you hear about us? It requires the donor to stop and think (something you absolutely want to avoid on a donation page). Your aim is to make the process ridiculously easy and painless.
  • Comments. The user has no idea what you’re fishing for, but people feel compelled to enter something into a blank field—and may get hung up trying to figure out what to enter.
  • Tribute/honor gift fields displayed by default. At first glance few will notice that these fields are optional (because web users skim pages, they don’t read every word). As a result, lots of fields create the perception of a longer form and a more difficult process.
  • CAPTCHA puzzle. These are pure pain for the web user. Even thinking, breathing humans stumble when attempting to decipher those distorted number and letter combinations. If spam is a major problem on your website, find a skilled developer who can help you implement a solution that does not require your donors to perform difficult tasks. This article describes five front and back-end alternatives to CAPTCHA.
  • Multiple email list opt-ins. They require the donor to expend cognitive energy in studying and choosing between offers (another type of difficulty), and distract from the priority conversion goal of the page—giving.
Is your organization guilty of asking for too much? If any of the items above are included on your donation pages, stop and ask yourself if the information is valuable enough to sacrifice donations in order to get it. #2: Ask for name and billing address first, payment information last When arranging fields on a form, always put the easy stuff first. Based on Robert Cialdini’s behavioral psychology research and the six principles of influence, the principle of commitment and consistency means people are more likely to finish something once they’ve gotten started. For example, it’s much harder to abandon a book when you’ve already read 90% of it than when you’ve only read a few pages. Similarly, people are more likely to complete a form after they’re more than half-way through it—because they get invested in the activity. As such, it’s best to put the easy steps first, i.e. those that encounter little psychological resistance like name and address fields. Anxiety and fear are at their peak when donors enter sensitive information like their credit card number—so it’s best to put payment fields at the end, where they’re less likely to disrupt a donor’s progress. #3: Don’t ask for the same information twice Web users are very good at remembering if they’ve been asked to enter the same information multiple times—and get irritated when they must work harder than they feel they should. Because this happens most often on multi-step forms, it’s well worth examining your conversion funnel to eliminate any instances where you ask the donor to enter the same information more than once (e.g. gift amount, email address, contact/billing fields). Instead of creating extra work for the donor, auto-populate their initial entry in subsequent steps requiring that same piece of data. With respect to mobile, this can be especially frustrating given the difficulty most have filling out forms on small screens. On a mobile device the UX can be greatly enhanced by changing the order in which information is collected. Consider asking mobile users for their zip code prior to their street address, so that fields like city, state and country can auto-populate based on the zip code, thereby eliminating the need for users to make those entries. Image2_Mobile form_zip code first Keep in mind that if you decide to automate—it’s best to allow the user the option to override the output data, since there’s the chance that their zip code may not yield the correct information in all cases. #4: Avoid in-line form field labels Web designers (and some marketers) love in line labels because they make forms look so clean and polished. Image3_in-line FF exampleHowever, when form field labels appear inside the field itself they cause a lot of usability problems. This is because instructions disappear as soon as the user begins typing in the field. If the donor gets distracted for any reason (or merely loses their train of thought) they cannot recover the instructions without deleting their entry entirely and clicking outside of the field. The Baymard Institute has found that in-line labels contribute to a lot of form validation errors because even after the form is submitted the in-line labels still don’t get restored to help the user understand how to fix a problem. If error guidance is not highly targeted and specific, users get frustrated and typically abandon the transaction process right there. #5: Make entry errors easy to fix It’s incredibly frustrating when making a purchase or donation online to submit form and trigger a validation error with little or no guidance on how to fix it. We’ve all seen opaque (or even hostile) error messages displayed at the top of a form that give us no idea what exactly we did wrong: Image4_Bad_form error messagesThe unfortunate donor who receives this type of message is now thinking… Uggh, what did I do wrong? Good error language is both courteous and precise about which field is cause a problem—and requires a correction. Below are three best practices when designing error messages:
  1. Be nice. Avoid negative and critical words like “problem” or “failed.” No one wants to be scolded for making an error.
  2. Be helpful—and clear. Provide specific guidance to the user on how to resolve the problem, e.g. This entry cannot contain dashes or spaces. And always use plain language—not “developer speak.” This language is a form of customer service, so be sure that someone with good communication skills is in charge of writing it!
  3. Place the error message in close proximity to the field that triggered it, not at the top of the page. Encapsulation of the problem field in red can help it stand out better:
Image5_Field label error_encapsulation And while it’s not mandatory, you should consider offering phone support for especially high value conversions (like monthly giving) to ensure that problems can be remedied by human intervention as a last resort. #6: Make the page look secure Many web users are acutely concerned about the risk of credit card theft online. Because most web users have little familiarity with “https”, simply having a secure page is not enough to alleviate their concerns. While donor anxiety about page security cannot be eliminated entirely, you can lessen its impact with targeted and timely reassurances. The best remedy is a visible indication that your site is secure, i.e. a recognized security seal located in close proximity to anxiety-producing steps (payment information fields). Security seals have far less benefit if they’re not easily noticed by web users while they’re completing payment fields. Besides locating the seal near to where donors enter sensitive information, encapsulation of payment fields (i.e. boxing them off with a distinct background color) is another technique that visually reinforces to the donor that their information will be secure: Image6_encapsulate_payment fields Finally, there’s some evidence that widely recognized seals like Norton-VeriSign, McFee, and TRUSTe appear to confer a greater benefit than lesser known providers. Brand awareness likely increases web users’ trust in these particular seals. Image7_Trust_seals_consumer confidence Conclusion These six techniques test-driven on e-commerce checkout pages are well worth trying to improve conversions on your web donation pages. How you apply them will depend in part on your current practice—as well as how flexible and customizable your donation forms are. Regardless of which techniques you use, remember that optimizing donation pages (or any other web page) for conversion is not a “one-off” exercise, it’s an ongoing process of testing, learning and application. Web conventions, user expectations, and visitor needs are constantly evolving, and your important landing pages need to be, too.
photo-thumbnail-dawnDawn Stoner is Mal Warwick | Donordigital’s Director of Analytics & Testing and works with clients to help them increase online revenues with web usability best practices and landing page testing. Dawn speaks regularly about testing and optimization at industry conferences and publishes papers highlighting what’s working and not working with our testing clients.