On November 17th, 2015 Magento announced the general availability of their next generation open source digital commerce platform: Magento 2.0.
Currently, Magento has a market share of 22.59% amongst e-commerce platforms. This makes them the second largest e-commerce platform worldwide after WooCommerce who currently has a market share of 23.93% amongst the Alexa top 1M sites.
Magento 2 seminar
During a recent visit to a Magento 2 seminar in the Netherlands, a question was asked to the audience. The speaker asked the visitors “How many of your have made any changes to your Magento 1 checkout?”. Seconds later, virtually all visitors had raised their hands. Given the combination of such a large market share, and the apparent need for modifications, an article on how to improve the Magento 2 shopping cart seemed timely.
For this review, we’ve focussed on the official Magento 2 demo. Of course, some of the findings may not apply to your Magento web shop if you’re a different theme. However, we feel that many of the recommendations will apply to any shopping cart, Magento 2 or otherwise, and should, therefore, be taken into consideration anyway.
Some links aren’t underlined or colored
The NNGroup put it well in their article Guidelines for Visualizing links: “To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.”.
Certainly, some exceptions to this rule can be made. For instance, in the case of items in the main menu or when icons or text colors are clearly marking an item as a link. However, web designers should try to err on the safe side, and try underlining and properly coloring a link even when it isn’t strictly necessary.
Newsletter subscription is distracting
The input field and button on the right-hand side of the footer allow you to sign up for the newsletter. While this is a useful micro conversion on most other pages of the website, it’s plain distracting on the shopping cart. Aside from the product image and the items-in-cart icon, the two blue buttons on the right are drawing the most attention. As referenced in the visual design article, the main Call-To-Action button should stand out.
Furthermore, one should try to optimize the attention ratio of a page, meaning it should have the minimum amount of buttons or links required to get a visitor to take the next step.
Photo doesn’t offer zoom
When a visitor clicks on the image, he/she gets taken to the product page. While this might be the intended behavior of some visitors, I would argue that many just want to make sure they are buying the right item. These visitors would rather see a zoomed-in version of the image instead.
I would argue to set the default to zoom. Because when the zoom is the default, visitors who click the image don’t get taken out of the order flow. Therefore, they won’t get distracted on the product page, and are more likely to complete their checkout.
“One area that I focussed on in particular is related to performance. Often clients needed specific configurations in their Magento checkout that negatively affected the loading speed.
I would then make sure the checkout pages loaded fast again so that the positive user experience would remain intact.”
Link below CTA is confusing
While Bart Schutz from Online Dialogue argues in favor of links below CTA button in the article Hobson’s+1 Choice Effect, in this case, I wouldn’t advise it.
This is because the link probably won’t just overload the visitor mentally, but also actively confuse them. They might start to wonder when to use ‘Check Out with Multiple Addresses’ and when to use the normal checkout button above it. This, I would argue, falls more in the category of ‘confusing’ rather than mentally overloading visitors.
Coupon code field is distracting
As referenced in several articles, including GetElastic and WebsiteOptimizers the coupon code field can cost webshops big bucks. Not only is the sheer fact of another CTA button distracting visitors, it also encourages them to look for coupons on Google when they haven’t gotten one already.
Peep Laja from ConversionXL sums it up well in the article How to Design an eCommerce Checkout Flow That Converts: “When people see an ‘Enter coupon code here’ field, they feel less special. ‘How come I don’t have one?’ Many go to Google to find a coupon; many never return.”
Shipping and tax are hidden
Being presented with unexpected costs during the checkout process was the number one reason to abandon a shopping cart in a 2012 Statista study. Therefore it’s advised to make sure your shipping costs and taxes are as transparent as possible.
However, I do understand that for companies that are shipping globally, it can be difficult to present accurate estimates of these amounts. Then again, by using proper visual design, visitors can be made aware that the total amount they think they are going to be paying, it still exclusive of shipping and taxes.
A/B testing ideas, best practices or quick wins?
It should be noted that all of the findings above should be considered A/B test ideas first, best practices second, and quick wins third. In other words, try to validate the findings for your audience first before implementing them.
Enough traffic for A/B testing?
If you have enough traffic (> 1,000 conversions per month, a rule of thumb by Ton Wesseling) to get statistically significant results, I would advise you to run an A/B test with your current cart against a cart that has the changes above implemented. If, however, you don’t have such traffic volumes, you should try running user testing or mouse tracking on two versions of the shopping cart to find out which appears to perform better.
Dutch translation: Optimaliseer de Magento 2 Winkelwagen
He is the founder of ConversionReview. He has been building and optimizing websites for 15+ years now, and doing so with great success.
On top of his digital skills, Theo is also a trained psychologist and frequent speaker at events around the world.