Stop Duplicate Form Submissions with Progress Buttons

by on 12/16/13 at 8:10 pm

Imagine a user placing an order on an e-commerce website. They get to the checkout page and accidentally click the ‘order’ button twice. Now they just got billed twice for the same order. They contact the merchant to correct this, but they are not happy.

The merchant isn’t happy either because they have to find the duplicate transaction, issue credit back to the user and pay the extra processing fee. This situation is all too common in the world of online payments. You can avoid this mess by using a progress button for your ‘order’ button.

Progress Buttons

Websites can’t change the clicking habits of users. But they can change what happens when users double-click the ‘order’ button. Progress buttons prevent duplicate orders by disabling the button after the first click. It then displays a progress bar over the button to let users know their order is processing.

progress-button

Users get clear and immediate feedback, so they won’t feel the need to click the button again. Double-clicking a progress button won’t duplicate the user’s purchase order.

Implementation Tutorials

Why Users Double-Click ‘Order’Buttons

There are many reasons users double-click ‘order’ buttons. Some web pages load slow after the first click. This could make users wonder whether their click registered. They’ll end up clicking the button again just to make sure. By then, they’ll have already submitted the form more than once.
users-double-click-online

Research shows that many older users (aged 50+) have a habit of double-clicking buttons. This leads to duplicate ‘add to cart’ actions. Users have to then go through the trouble of removing the extra items from their cart on the checkout page. If users don’t get a duplicate order notification, they could end up checking out without knowing.

Duplicate Submissions Can Happen on Any Form

Duplicate form submissions don’t just happen on ecommerce websites. They can happen when users pay bills online, send messages, upload photos and anywhere there’s a form button that’s not double-click proof.

No one wants to get double charged for an order, overpay their bills or spam others. It’s up to you to prevent duplicate form submissions from happening on your site. Save your users the hassle and frustration and put a progress button on it.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes Shopify

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

Leave a Comment