Article overview

Checkout Usability: Apply Changes Immediately and Near the Input

· By · 6 comments ·

During our usability study of the e-commerce checkout experience we found that users have a hard time figuring out what actually happened when changes – such as an updated shipping cost – don’t appear instantly and in close proximity to the input applying those changes.

The tested subjects consistently expected changes to be ‘live’ when applying shipping options, shipping zip codes and gift options.

American Apparel has a significant distance between where you choose shipping options and where shipping costs are displayed making unlikely that the user will notice changes in shipping cost.

When the change happens far away from the input, as here on American Apparel, users have difficulties understanding how the two relate.

When choosing a new shipping method on American Apparel, two of the test subjects were unable to either locate the updated shipping cost or didn’t consider it at all, because the shipping cost was displayed in an entirely different column and more than half a screen up the page from the shipping method selector (the input).

Later during the checkout process one test subject complained about a higher shipping fee than first advertised, only, he had actually picked a more expensive shipping option himself without noticing the change in price because the change took place too far away from the input.

Levi's allow you to add gift wrapping but doesn't show the options immediately when you accept.

When selecting ‘yes’ the test subject expected to be presented with the available gift option immediately. Disappointed that they weren’t she changed her mind and deliberately skipped the options presented to her later on.

On Levi’s site another test subject selected ‘Yes’ when asked “Would you like to see our available gift options?”, expecting the gift options to be shown directly on the page. However, the change was only revealed at the next step and by then the customer assumed the gift option feature didn’t work and changed her mind.

Some of the tested sites that did apply the change immediately, reloaded the entire page after each change, making it very difficult for the customer to actually notice the difference. From a usability point of view it’s better to apply changes immediately without reloading the page (using AJAX). Furthermore you may highlight the changed elements for a few seconds, e.g. with a yellow background.

In short: Apply changes immediately (without reloading the page) and in close proximity to the input field/button.

Samiullah February 25, 2012 Reply to this comment

ajax is always the for usability. great article you should have come with the solutions for above problems

Jamie, Baymard Institute February 25, 2012 Reply to this comment

Good point, we’ll be sure to present possible solutions in future articles.

Dave March 12, 2012 Reply to this comment

Ajax is your friend!
Did this in a eCommerce-Website (German)
http://dl.dropbox.com/u/159486/Warenkorb.mov

Christian, Baymard Institute March 17, 2012 Reply to this comment

Hi Dave,
Interesting implementation. Thank you for sharing it with us.

Rob March 12, 2012 Reply to this comment

You forget to take into consideration how costly it can be to calculate the costs especially if you’re using multiple shipping partners each with their own API which you need to connect to.

Certainly when we’ve tried to implement this in the past its effected response times.

Christian, Baymard Institute March 14, 2012 Reply to this comment

Hi Rob, thanks for the comment.

Response times is always something to consider, but in most cases the second suggestion in the article (“apply changes immediately”) won’t affect the number of requests dramatically compared to the ‘Apply’-button, as most customers will want to know the price of their selected shipping option and therefor hit ‘Apply’ anyway.

Post a comment!

Close overlay