During a recent move, the glass in one of our picture frames broke. I found an online shop that offers replacement glass, and headed down the path to check out. But after I completed the first step, the form suddenly reset and all the fields were blank.

Turns out, I’d hit the dang reset button.

This checkout form illustrates several usability issues that can users to make costly mistakes.

1. The path forward (Continue) is disabled until all fields are complete, making it hard to notice.

2. The path forward (Continue) is not the most prominent button on the screen, causing users to anchor on the wrong conclusion. As a user, I see the most prominent button and in my mind, that’s what I’m building toward (a lesson in Conversion 101). That’s where I’m going to click when I’m done.

3. The path forward (Continue) is at left, with a competing button (Reset) at right. If the users notice both buttons, the dual buttons might cause a double take. But because of the first two issues, they’re unlikely to even notice the Continue button. The one on the right looks like the path to move forward and if anything, the one on the left is the one to move backward.

4. A destructive action (Reset) can easily be mistaken for the path forward. Users are already prone to abandonment, and unintentionally clearing their progress from a form is only going to exacerbate that.

To be fair, small businesses are easy targets when it comes to bad UI design. They’re often unaware of the potential upside of fixing usability problems, meaning they think they don’t have resources for custom design and development.

Still, in this case, there are other notable issues.

1. The only way to calculate shipping costs is to check out. Sometimes, users need to understand shipping costs in order to make their purchase decision. (In this case, it turns out, shipping would have doubled the cost.)

2. The full product catalog header navigation is present on the checkout flow, tempting me to abandon my cart and return to shopping. An ideal design will eliminate all distractions.

3. The “Check out with PayPal” button is positioned outside of the flow to the right, making me wonder what happens if I click on it. Do I need to fill in this form first? Will I lose all my work?

4. There was no confirmation before the destructive action (Reset) occurred. Rather than asking me “Are you sure?”, all my field inputs simply disappeared.

Even small eCommerce ventures can be very lucrative, but flaws in checkout can mean that brands miss out on big revenue opportunities.

You don’t have to hire a professional to do design and research for you, but you should be aware of usability risks if you’re selling online. Our flexible programs can be tailored for a more budget-conscious option. Avoid the pitfalls and get it right; it’ll pay itself off quickly!