E-commerce web design – 8 basic, ‘must have’ components

Web design image on a table of a designer working on creating a website

It’s a big wide world online, and the competition for customer attention is massive and still growing. Add to that modern society’s search for instant gratification and you’re faced with a challenge. If you don’t grab your visitors’ attention the moment they land on your site, they’re likely to click right off again. Masterful e-commerce web design is the key to success here.

What we’re aiming for in e-commerce web design

If you want your business to make money and grow, you need to focus on conversion. Every visitor is a potential buyer, and to attract, engage and keep your customers, your e-commerce website should be beautiful, functional and strategically thought through. In essence, we’re talking clean, easy and fast.

This blog will take you through the basics that need to be in place to keep your customer interested from the word go. Although e-commerce web design is about a lot more than just the basics, these principles will take you a long way.

Talk to us if you want to know more.

The 8 basic ‘must have’ components for e-commerce web design

Some things are non-negotiable if you want to attract and keep your customers. Let’s look at what those characteristics are:

1. Responsive

With so many people now using mobile devices of all kinds to view sites and buy online, a responsive site is essential. This means the design and navigation need to be simple, so they easily translate to a different viewing method. Product pages should also be cleverly designed so very little zooming or panning is required in mobile mode.

Tip: Use the What Is My Screen Resolution tool to test your site on different screen sizes and devices.

Desktop view:

Mobile view:

2. Clear and easy navigation is key

While your e-commerce web design needs to be beautiful and engaging, it also needs to follow tried and tested rules. If your visitor has to think too hard or gets irritated, chances are you’ve already lost them.

These tips will help:

  • Once they’ve reached your e-commerce site homepage, your customers should be able to quickly find what they need. Give them the choice to do that via well-organised categories, filters that narrow down options and/or a search bar. This is especially important if you have a large number of products on your site.
  • Make your navigation clear, intuitive and easy to understand. Avoid complicated menu wording and rather use familiar, but descriptive terms so visitors know where to go. Keep menu items to a minimum (7 or less is the recommended number).
    • Consider sticky navigation if your page scrolls down very far.
    • Consider drop-down menus or collapsible side menus – but only if you have many products and it eases navigation.
  • Don’t make your site structure too deep. Customers should be able to get to their final destination within about 3 clicks.
  • Take SEO into account when designing your site structure. The more concise your navigation, the more homepage authority and trust (known as ‘link juice’) flows to interior pages, making them more likely to rank in searches. When your navigation has too many links, the ‘link juice’ is diluted as you move away from the home page.
  • Use text-based links instead of graphical, button-based navigation. Search engines can’t find buttons, they are hard to update and they load more slowly than normal links.

Look at this site’s clean, but descriptive menu:

Link to source

3. Call-to-action buttons that make visitors’ decisions very easy

  • Make your call-to-action buttons easy to find, so your visitor is gently guided through the buying process. Visitors must feel clear and confident about any action they take.
  • Make sure there are no pop-ups, advertisements or social buttons competing with the call-to-action button. It should stand out with a bright colour and clear description.
  • Support your visitors further with a live chat feature like Zopim, making it easy for them to ask questions of you on the spot.

On this product page the product and the Call-to-action button is all you see at first glance:

Link to source

4. Excellent visual images

Your customer wants to know exactly what they are getting for their money, so help them to see that. Products should be clearly displayed using good resolution images. If possible, include a 360-degree view from a service like Sirv to give customers the option to see the product from different perspectives. Include product videos too, and you increase your chances of making a sale even further.

The product page below has excellent resolution pictures, showing all available colours:

Link to source

5. Helpful product information

Help your customer decide what they really need (and reduce queries to your customer service team) by providing clear and useful product descriptions. Structure them well, so they can decide what level of detail they want to see, and highlight how they will benefit from owning the product. If you have relevant “how to” videos or blogs, link these here too. Showing related products can also be extremely helpful, as you may sell another product that is complementary or better suited to their needs.

In the example below, the product image is excellent and the Add to Cart button is very clear and prominent. At the bottom of the picture, you will also see ‘tabs’ (we can customise these for you), where you should enter as much information as possible about your product. In this example, there are tabs showing product details, specs, sizing (expanding on the sizing shown under the price), warranty information and reviews. In the kettle example above, the customer chose to have tabs for an overview, specs, videos, downloads and FAQ.

Link to source

6. Ratings and reviews

Including ratings and reviews in your e-commerce web design has so many benefits. It informs and reassures customers, and gives you useful feedback on your products. As an added bonus, the regular new content also boosts your site rankings.

At Comalytics, our software includes reviews. We also recommend being very pro-active about asking for reviews by sending emails requesting feedback after a customer has bought and used a product for a while. We integrate with Yotpo, which is excellent for managing pro-active follow-up emails for reviews.

Link to source

Reviews start to become very credible when you have more than 7 reviews and not all of them are for 5 stars. The reviews are about establishing trust, not only in the product, but also in your services as a merchant. Addressing the concerns of a customer that left a bad review can have a very positive impact on your business.

7. Fast and efficient check-out

The easier you make check-out, the less likely people are to change their mind half-way through. Regular customers might want to log-in either directly to your site or via a third party such as Gmail or Facebook, so they don’t have to re-enter all their details. Others may prefer to check out anonymously, so offer that option too. Don’t give your customers any excuse to leave!

Here is an example of guest checkout:

Link to source

8. Personalisation

Personalisation is a very important trend for the future and you can differentiate yourself by starting to use it extensively right now. Draw on your visitors’ past purchases or previously viewed pages to create recommendations tailored specifically for them.

At a minimum, you should have ‘customers who bought this also bought…’ and/or ‘related content’ features as shown below. Note the stars for reviews! Don’t they make you want to investigate and buy?

Link to source

Link to source

The bottom line

Growing your business in a competitive market requires excellent e-commerce web design. Take care of the essential features, and you greatly increase your chances of attracting and retaining new customers, so your business can thrive.

Contact us to discuss your B2C or B2B e-commerce needs.

What aspects of your website have worked particularly well for you in the past? And what features do you love about other sites? Post your comments below to create a pool of ideas everyone can draw from.

Share this content!

Leave a reply

Your email address will not be published. Required fields are marked *

Use us to change your game

Get in touch for a free consultation today