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 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.
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.
