An eCommerce site is stubborn and users are creatures of habit. eCommerce web design is a pretty specialist thing so we’ve put together some guidelines of things we’ve found that you shouldn’t be too experimental with and why.
And if the word “guidelines” make you shudder, remember this:
A great design team should be able to sell you the dream of why these eCommerce guidelines should be followed.
1. Titles on the navigation
The tone of voice of your brand is really important and making sure it’s consistent across your website is vital. However, this can turn into a real problem on the navigation, compromising the user experience. If you give your category pages ambiguous names, this can hurt you in two ways:
Firstly, the user isn’t inside your brain, don’t assume they know what you mean. Howies has an option for LITB; this stands for ‘Last in the Box’, the last sizes of certain pieces. The user would probably understand the whole phrase but the abbreviation isn’t very helpful and anything reduced or exclusive is a big draw for conversions.
Secondly, your choice can have a big impact on SEO. If you name a clothing section of your eCommerce site ‘threads’ instead of ‘clothes/t-shirts/womens’, there will be SEO implications. Howies are already a successful brand so they can get away with it not damaging their rankings, but naming things what people actually search for is a huge help when it comes to rankings.
2. Product photography
67% of users consider product photography really important when online shopping. It’s easy to forget about photography but it’s one of the first things that can put users off.
You also need to remember that photography is very much form vs function. Conversions are likely to be higher if you have a few more traditional product shots rather than one arty, Instagram-style one. The urge to take photography to an editorial level may seem like a great way to go, but don’t. Keep it simple, even if you think the product has lots of different functions.
Victorinox have clear images with white backgrounds and a maximum of 3 different angles or positions of the product. The pictures are high quality, unfussy and work well with the product description.
Photography, especially high-end, is an investment, but it’s entirely worth it. It’s also important to remember that if you have beautiful photography, it’s more likely to be shared on social media platforms!
3. Basket location
This is simple: always keep the basket at the top, right hand corner. This might seem like a fairly minor point but take a look on any eCommerce website you go on and you’ll see what we mean. It’s what’s expected and, like we said before, users are creatures of habit and will be thrown off.
Bonobos is a great example of modern design incorporating traditional best practice. Also, remember you must be consistent with what you call your the basket across the site. If it’s shopping cart? Great. Basket? Brilliant. But don’t call it a trolley on one page and a checkout on another – consistency is key!
4. Call-to-action buttons must stand out
Call-to-actions get the user where you want them to be. On a potentially crowded page, they guide users on a preferred journey. To make sure your website is effective, CTAs must stand out and be large enough to prompt importance on the page.
You can see from the example above that CTAs don’t have to be giant or flashy (unless that fits with the design), but subtle design changes can impact conversions dramatically. If you have an existing eCommerce website but don’t have the budget for an entire rebuild, assign some of your budget to the redesign and optimisation of key page features like CTAs. Small changes can make a big difference.
5. Product page call-to-actions
Following on from the previous point, CTAs on a product page are incredibly important to get right. If a user is on a product page, you’re in a good place, but this can easily be compromised if a user has way too many choices aside from ‘Add to Basket’.
If you’re asking a user to select a number, colour, save it to a wishlist, Pin it, Tweet it, Facebook it…you get the picture. It’s confusing. Another CTA sin is not making them stand out enough.
You can see here that Obey Clothing have done extremely subtle CTAs to buy different sizes of the product. At first glance, users can’t clearly identify what they can buy, what they can’t buy, what’s clickable and what isn’t. You could argue that the red cross is enough on a mainly white page but it doesn’t create a sense of urgency. Bolding the ‘add to shopping bag’ text would help it a little but it’s just too subtle.
Here’s an entirely different type of product page but it achieves exactly what it needs to. It’s uncomplicated, though some would argue it’s not utilising the space to cash-in on social media follows or wishlist collation, but – a good product description, price, informative photography and one, clear CTA – what else do you need?
6. Product zoom
It may seem slightly frivolous but product zoom is so important, no matter what you’re selling. It’s a chance to show off quality without having the user physically in front of the product. When we’re talking about product zoom, we don’t mean opening an image in a large shadow box, we mean detailed zoom on small areas of the product.
J Crew have a brilliant detailed product zoom that allows users to really look closely at the details of the stitching, how the material sits, and the finish. Giving users the opportunity to really investigate your products is only a good thing because it promotes trust.
7. The checkout
If we could choose one thing from this list that you should definitely heed, it’s this. Just don’t mess with a checkout. It’s the most important aspect of an eCommerce website and is where so many conversions are lost.
MADE have a brilliant checkout. It’s on one page but it goes through a 3-step process. If you show every step on one page, it can look pretty overwhelming. By hiding every step other than the one you’re on, it keeps everything simple.
Checkouts have been researched to death and one-step checkouts are almost always better for encouraging purchases. Lemonstand have argued it out on their blog so have a read if you need a bit more information.
8. Poor search
The final point is about search. A search function is incredibly important if you have multiple products so, if you don’t have one, that’s an easy win for increasing conversions.
Threadless have a great search function. It has a live search function which shows suggested products whilst you’re typing. Once you’ve clicked search, the results page is also really useful with even more filters to specify even further.
eCommerce searches must be useful and for this to happen, your product categories (including sub-categories), titles and descriptions must be clear and concise. If your search function is searching for the wrong things, it’s pointless and will annoy more people than it helps.
We really hope this has been useful. It’s taken us over 10 years to become eCommerce experts and we’ve learnt a lot about what works and what doesn’t. If you have an eCommerce project that you need help with, please get in touch and tell us all about it!
