5 user experience guidelines for ecommerce

by Hua Zhang on 3 February 2015

In my time at Webcredible I've been involved in a lot of user testing for ecommerce clients. It always strikes me just how many things you need to consider and optimise to provide the best possible user experience. The following UX tips should provide a starting point so you can improve conversion rates and make your website easier to use.

1. Photography

To state the obvious, people can't touch, feel, or try on products when they buy online. Photography is extremely important as it is essentially what is selling your product. Make sure you:

  • Have a variety of shots - close ups, angles, any special details or aspects (NET-A-PORTER's photography is a good example to follow). Also, make sure users can zoom into the images
  • Use models to showcase your products. This puts the product in context, gives a sense of scale and helps users imagine themselves using/wearing it
  • If you do use models, you might want to consider not showing their face. The model might steal the show and detract from the product you’re selling. An exception to this would be a product like make-up
  • Retina displays are increasingly common among mobile devices. This means you should use very high resolution imagery to make sure the pictures are crystal clear. However, don't show this image on devices without retina displays. Most CMS's will have an option to present different images depending on the users device

2. Gifters

Not everyone is buying for themselves. Depending on your products, a reasonable proportion of your users are buying gifts. To cater to this not inconsiderable audience, make sure you:

  • Include a guest checkout, as it is more popular among gifters
  • Gifters want to maintain secrecy, so think about packaging and delivery details
  • Include an option to filter by price range, as gifters are usually buying to a budget

3. Different devices

When shopping online people tend to browse on all devices (tablet, mobile, desktop). While I've found that most people are open to buying on mobile, there is still a preference (because of screen size mostly) to complete transactions on tablets and desktop. Here are some tips to encourage more mobile transactions:

  • Choose the relevant default keyboard for the field a user is filling out. i.e. When filling out an email field include the "@" and ".com" in the default keyboard
  • Most mobile browsing takes place on the move. For precision make sure your touch areas are big (9mm) and far enough apart (2mm)
  • Information in hover states wont work as desired on mobile devices (you have to double tap). I’d recommend that you simply don't use them on mobile
  • Before launch, user test rigorously with a touch device. Don’t forget to use in different orientations as well!

4. Checkout

This is where you’ll get the most drop offs so it needs to be perfect. This is worthy of a blog of its own, but for now:

  • Don't make customers self identify at the beginning of the process
  • Show detailed return and delivery information in the basket page. This is an important decision making criteria
  • You might not want to make the promo codes entry too obvious. In testing I've found that this will prompt users to search online for a code, and if they don’t find one they may drop off
  • Upsell in the basket, it’s a good place to do it!

5. Sizing

nord blog imgIt might seem straightforward, but it’s easy to go wrong here and end up confusing your users.

  • Don’t assume users know their current size, you should try to find clever/innovative ways to help them. For example:
    • Clothes Horse is a start up that offers an embeddable widget that helps shoppers pick the right clothing size
    • Nordstrom include fit information from customers in user reviews (image right)
  • Keep in mind that when users access your site they might not be in a position to measure themselves (using mobile while on the move)
  • Different countries often use different units of measurement
  • If you're using models to showcase your wares, you could include detail on their dimensions and the size of the item they're wearing. This is something that Nicole Miller does well

The user experience of e-commerce websites is an expansive topic, this blog could have easily been twice the length! Hopefully I've given you some food for thought, but if you take just one thing away from reading this, I'd like that to be... the importance of user testing. User testing helps you to identify what is or isn't working  in your purchase journey and why. With so many different elements making up an ecommerce experience - don't leave it to chance that you thought of them all. Luckily we can help you with that, so if you're stuck - get in touch! What are your top tips for designing for ecommerce? Please feel free to add suggestions or your favourite examples in the comments.

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x


Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)