How to Build Efficient E-Commerce Checkout Forms

Forms come in many shapes and sizes, from the basic lead generation form that asks for a name and an email all the way to those pesky multi-step forms that will essentially require your entire life’s history to complete.

But somewhere in the middle is the e-commerce checkout form, which is a unique animal unto itself. But what makes it so special?

[content_upgrade cu_id=”239″]Don’t miss: 7 Examples of Truly Inspirational E-Commerce Forms[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Checkout Forms vs. Standard Forms

Well, for starters, checkout forms carry a bit more weight than standard forms, mainly because they need to process payments and fees. A standard form, on the other hand, is typically there to gather information, usually in the form of a name and email and not much else.

This means that checkout forms come with their own set of challenges. Some of those challenges include:

Calculating Payments

Your checkout form will undoubtedly pull a price from somewhere, and usually it’s a shopping cart. Even if your form is a simple one for processing a single payment (like downloading an e-book or a single product), there’s still payment involved, which means that your form has some calculating to do above and beyond a traditional form.

Even after calculating the price of the shopping cart items, your form will also need to calculate shipping costs (which can fluctuate based on a variety of factors) as well as any applicable taxes associated with the products. And you’ll need to make sure that you’re processing all payments through a secure gateway, which is another thing that you never have to worry about with standard forms.

Shopping Cart Abandonment

One other big factor when it comes to checkout forms is follow-through. Because most people who subscribe using standard forms are only asked for basic information, the follow-through rate is usually pretty high. But this isn’t always the case for e-commerce checkout forms. In fact, the average shopping cart abandonment rate – or the rate at which people don’t finish their purchase – is at a staggering 68%. That means 1 in 4 people will not finish using your checkout form.

The reason why people aren’t finishing their purchases is surprising: it’s about transparency. Customers often complain that they have little to no information about the purchase during the checkout process, including shipping fees and estimated delivery dates. Also on the list? Usability.

032

Basically, if a form isn’t upfront about the costs associated with the purchase, or the form itself is confusing and hard to use, people won’t bother filling it out. It’s those extra things that make a checkout form that much more harrowing for a designer or storeowner than a standard form could ever be.

So what’s the best way to overcome these challenges and create an efficient checkout form that customers will actually follow through on using?

Checkout Form Best Practices

To make sure that your users actually fill out your checkout forms, you’ll need to follow some best practices when designing them. Here’s a general rundown of things to include to make sure your forms are as efficient as possible.

Be Transparent

Like we said before, the number one reason people won’t use your form is a lack of transparency when it comes to prices. People want to see what’s in their cart, what their total cost will be (including shipping and handling), and when they can expect their product to arrive. Even if they’re ordering a digital download, you should still be upfront about when they can expect their download to be available.

Take a page from SodaStream’s book and include as much information as possible on your form’s landing page, even if you have to use multiple steps to do it (be sure to show the summary at the final step).

sodastream-blog-full

Don’t Force Registration

One surprising reason why people may skip filling out your checkout form altogether is being forced to register for an account in order to purchase something. When it comes to usability, forced registration is actually a top complaint.

While accounts are a benefit to anyone ordering – they make tracking packages and reordering easier, for one – they can turn people off if they’re mandatory. The best way to handle accounts it is to give your customers the option to setup an account (or save the information they’ve already inputted) after the checkout process is complete.

Make Your Form Fields Clear

While it may seem like common sense that people would know what to input into any given field, you would be surprised how often the wrong information ends up in the wrong place. To improve usability, try to make your form fields as clear as possible by including microcopy – little pieces of text that give instruction – above or below your form fields to eliminate any doubt.

wff1-blog-full

Include Fewer Fields Where Possible

The age-old adage “less is more” holds true here. Because checkout forms already ask for so much sensitive information, it’s important that you only ask for the things you absolutely need. Of course, this information will be more than a standard form because you’ll need things like shipping and billing address, but make sure that you’re only asking for information that helps verify a purchase so that users can get through it quickly.

Use Visual Cues

Because checkout forms are typically longer than lead generating forms, they will probably come in multiple steps, which can be confusing for many users, especially if your customer base skews toward the older generation. The more visual cues you can give – big, bold, colorful buttons, arrows, bullet points, or even small images – will go a long way to helping customers get through the process with minimal effort.

Use Progress Indicators for Long Forms

Speaking of multiple steps, the best thing you can possibly do for your long checkout forms is to include a progress indicator showing exactly which step the user is at in any given moment. If you’re able, you should also include a “save” feature so that customers can come back at any point in the process. Not only is this great for usability, but being able to come back to a purchase without having to do extra work is a great incentive for fulfilling purchases (and counteracting that pesky abandoned cart).

Include Trust Symbols

Finally, one of the most important things you absolutely must include in your checkout form is a symbol (or symbols) of trust. Trust symbols show that the user’s information is safe from hackers and that they can rest easy knowing that you’re not spreading their credit card information to spammers. If you skip anything else on this list, don’t let it be this!

oriental

Final Thoughts

Checkout forms may be a bit more complicated than standard lead generation forms, but that doesn’t mean they can’t be just as user friendly.

When designing or including these forms on your site, make sure to focus on elements like transparency and usability to eliminate the chance of abandoned carts.

Be sure to include only what’s necessary, and use visual elements like progress indicators, arrows, or images to guide your users through long forms.

And whatever you do, include trust symbols that show the user that their financial safety is your first priority.

[content_upgrade cu_id=”239″]Need a little inspiration? Check out our 7 Examples of Truly Inspirational E-Commerce Forms[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Keeping Quality High When Rushing Web Development

No one likes a rush job. They usually mean high stress and late nights, and leave you disappointed in the end result. Unfortunately, many clients only come to you when they need something yesterday. But just because the deadline is tight, doesn’t mean the project has to be a hectic rush.

Plan

Often clients try to “speed up” the development process by skipping the early stages. If you bypass the proposal, discovery and planning stages, and jump straight into development, then you’ve circumvented half the work, right? Wrong.

If you have loads of time on your hands, you can afford to skip the planning stage (although it still would be a terrible idea). But when you have a tight deadline, proper planning becomes even more important. If you try to skip it to save time, you’ll end up losing significantly more time down the line.

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” —Abraham Lincoln

Whether it’s a website or application, following the Minimum Viable Product concept will help streamline your development process. Separate each requirement into “Must Have” and “Nice to Have”. You can then further separate them into what needs to be included for the initial release, and what can be added on in a future round.

Finally, if you’re not 100% sure on an idea, prototype it before building it out completely. When the deadline is tight, you can’t afford to lose valuable hours by coding up a flawed concept. Prototyping will allow you to test out your ideas quickly, get feedback from your client, and avoid wasting time going down the wrong path. There’s been an influx of prototyping tools in the last couple of years, so you’re spoilt for choice here. Some notable ones include InVision, Atomic and Marvel.

[content_upgrade cu_id=”19″]Bonus: Ensure your next launch goes smoothly by downloading our free resource – the High Speed Launch Checklist.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Pick the Right Tools for the Job

Using tools that are either too lightweight or too complex for the job will drastically slow down your web development process. Many agencies jump immediately to WordPress whenever a basic site is needed, but if you’re creating a blog or simple marketing website, consider using a Static Site Generator. Not only will they speed up your development process significantly, but since the end product is plain HTML, it’ll load around 6x faster!

If you’re creating an eCommerce website, instead of going straight for one of the old-school mammoth CMSs like Magento, take a look at some newer options like Shopify or SquareSpace. Both of these have beautifully-designed themes and take care of all the minor things – like hosting, analytics, and SEO – that would otherwise all add up to take away a lot of your precious time.

Don’t Start From Scratch

Whether you’re creating a completely customized design or a standard layout, using frameworks to jumpstart development is a great way to save time without sacrificing quality.

You can pick and choose the elements that you’ll need, to avoid bloating your site with unnecessary code. Even the most customized layouts will benefit from normalizing CSS, which makes your site render more consistently across different browsers, or a simple grid system like the one included in Bootstrap or Foundation.

If you’re a fan of Material Design, the developers at Google have put together a framework called Material Design Lite, which will allow you to quickly install its basic components to use in your site.

If you’re doing similar projects again and again, consider creating your own boilerplate code. For example, if most of the work you do is creating WordPress sites, creating a custom boilerplate will allow you to skip the repetitive part of the development process. Make sure your boilerplate includes all the generic functionality you need, while making it easy to build custom layouts on top. You could even include one of the above frameworks in your boilerplate.

If you’re creating a fairly run-of-the-mill design, it’s a good idea to start with a theme and modify from there. ThemeForest provides themes for many of the major CMSs like WordPress, Magento, Drupal and Joomla. Some of the newer CMSs like Shopify and SquareSpace have themes built into them. Unfortunately, many themes are quite difficult to modify, so unless the theme you pick almost completely fits your design, you’re probably better off coding it from scratch.

Even if you don’t go with themes, using plugins instead of custom code is a must when you’re pressed for time. Try and go for plugins that are style-agnostic, so that you don’t need to spend time overwriting the plugins code to get it consistent with your site’s design. For example, Wufoo is a popular way to build and insert a form into your website. Unfortunately, their solution is to iFrame in a form, which forces you to use their themes that may or may not mesh stylistically with your designs. As an alternative, FormKeep’s solution embeds plain HTML into your site, which gives you complete control over how it looks.

[content_upgrade cu_id=”19″]Bonus: Ensure your next launch goes smoothly by downloading our free resource – the High Speed Launch Checklist.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Done is Better Than Perfect

When you’re doing a rush job, you’re never going to be completely happy with the end result. Keep in mind that “Done is better than perfect.” This was one of Facebook’s maxims for almost 10 years. It represents the hacker culture that allowed them to grow so quickly, and will allow you to ensure your project makes it out the door on time. The maxim has since been retired, but only after reaching 1 billion users and being worth hundreds of billions of dollars.

done-is-better-than-perfect

If you’ll be working on the project after launch, a really great idea is to use a shame.css. The idea behind this is to put all of your hacky code (and there will probably be some hacky code, given that it’s a rush job) into one file that you can fix up when you have more time. By putting all of these hacks and quick-fixes into one file, they keep your main codebase clean and make them easier to isolate and fix later on.

Ultimately, when you’re in a rush, the most important thing is get get it done by the deadline. This means letting go of what it should be, and focusing on what it can be. “Out of all the different directions a design could go, the best one is the one that gets finished and ships.”Dan Cederholm, co-founder at Dribbble.