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.
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.
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.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
ajax is always the for usability. great article you should have come with the solutions for above problems
Good point, we’ll be sure to present possible solutions in future articles.
Ajax is your friend!
Did this in a eCommerce-Website (German)
Interesting implementation. Thank you for sharing it with us.
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.
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.
In E-commerce sites proper usability of functionality makes a lots of difference. I remember once in my site we had a complex application. Though we had good customer but they were reluctant to buy the product. Customer friendly Usability makes difference.
Great Tips thanks fro sharing
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org