E-commerce is more popular than ever, with 18% of all retail sales coming from e-commerce buyers. But with less than 2% of e-commerce site visits leading to a sale, there is a lot of untapped potential in the market. 

E-commerce UI design is an important aspect of any online sale, and poor website usability will stop customers from staying around on your site to make any purchases. 

Almost 2% of people will terminate a purchase if the website is too slow, and nearly 50% of people would leave a website if it didn’t immediately portray a clear message. 

To design e-commerce sites that convert visits to sales, the relationship between website design and user experience is key.

What is user interface (UI)?

User Interface (UI) is the interaction between human and computer, or, more specifically, between your visitors and site. It focuses on user experience, how guests navigate around a site, and the information visitors need to carry out specific actions (in this case, a purchase). 

E-commerce UI design encompasses many visual aspects of web design, including typography, logo design, images, media, forms, widgets, and links it all back to human behaviour.

A variety of types of UI design exist, with the most popular being graphical user interface (GUI), followed by menu-driven interface.

GUI is a well-known type of design that utilises pictures or graphics as click points to navigate a website. It’s a popular choice, meaning it’s often familiar to visitors and self-explanatory. 

Menu-driven interface is entirely guided by a setlist of commands or options, such as navigating on a mobile phone menu. It’s a simple option that can be particularly useful in e-commerce websites due to its compatibility with product inventory. 

An engaging e-commerce site uses a variety of design types, including newer design trends like voice user interface and virtual reality, to provide an outstanding user experience.

What does good e-commerce UI design look like?

The overall goal is to produce an engaging and informative e-commerce site that doesn’t get in the way of the shopping process, especially when accessed via a mobile device.

A good e-commerce website utilises UI design focusing on the four Es:

- Error-free

- Easy to use

- Easy to understand

- Effective for product sales

Users want to be in control of their shopping experience and interact with products in a comfortable way that reduces their cognitive load.

Jakob Nielsen, a UI expert with 79 internet-use patents, created a useful list of 10 general principles on interaction design that are essential when designing your e-commerce platform:

1.Visibility of status - Users should always know at what stage in the buying process they’re at and the design should always make it clear what is going on at all times, from the initial landing page to order confirmation.

2. System represents real-life - UI design should reflect what customers know and are used to, using familiar concepts, and ensuring information is provided logically.

3. User control and freedom - Visitors often make mistakes and perform actions accidentally. They need to be able to easily navigate backwards without being penalised, and to exit if they change their mind.

4. Consistency - Both across your site and when comparing your site with other e-commerce businesses in the same sector. Users don’t want to struggle with new terms or confusing actions.

5. Error prevention - The best designs prevent errors before they occur, whether that’s due to a mismatch between user and design, or due to user mistakes. 

6. Recognition not recall - Ensure users have to use as little of their memory as possible, to make it a more enjoyable retail experience. All information should be visible when it’s needed, or as easy to find as possible.

7. Flexibility - Provide a variety of navigation options to suit all users, including shortcuts and the option to customise to appeal to users’ individual needs.

8. Minimalistic design - Adding extra unnecessary information confuses the user, and makes it harder to find the information they actually need. Prioritise information by importance, and ensure the key facts feature first.

9. Error management - Errors that do occur should be expressed simply for users to understand, rather than in code, so they can easily deal with the situation. Clear error messages may even suggest solutions to the problem, such as a shortcut redirecting them. 

10. Help and support - Make it simple to get support where needed by providing the information in a simple and easy-access format.

ui design

How to optimise your e-commerce UI design

Just 1% of e-commerce visitors say a website meets their expectations every time, and with 40% of users exiting a website if it takes more than 3 seconds to load, poor user interface design leads to lost income.

By focusing on individual aspects of your site and considering how visitors use them, you can help more customers navigate successfully through to product purchase.

Landing Page

This is where visibility, consistency and minimalism are important. You need to create a strong brand with a clear message, without diluting the key facts or confusing your target audience. 

Your design must take into account:

- Brand identity

- Purpose of the website

- Graphic design

- Visual product representation

- Links to important areas

- Social proof

- Call to action 

- Search function

- Contact details and social media

Landing pages are the first page your customer sees, so they set the tone for your whole site. Personalised landing page marketing with a specific call to action tailored to your target audience results in more than 200% more conversions.

Build your brand identity from the landing page across the site using fonts, illustrations, colour schemes, logos, and widgets that are user-friendly and don’t get in the way.

Product Categories

After landing on a website 86% of customers want to see product information, demonstrating the importance of product accessibility. 

Featuring “best-selling” product categories on the home page can be an effective way to do this, whilst also targeting browsers who visit without a specific product in mind.

Consider ease of use when designing product categories, allowing visitors to search by options important to them. Easily-reversible product filters keep the customer in control and give them the freedom to change their mind.

“Breadcrumbing” is an excellent method where product categories are displayed on the product page, making it easy for users to backtrack or identify other similar products in the same category. A “similar products” section is another design option to give users access to products they might be interested in and boost sales.

Product Display

With conversion rates for product pages being 2-3x higher than landing pages, your product design really matters.

Keep the product as the main focus of the page by highlighting it in a variety of formats. Including a 360-degree product view can increase sales by as much as 40%, whilst including pictures of the product in use can help customers visualise themselves with the product. 

Utilising white space draws visitors’ eyes to the merchandise, whilst adding videos and zoom-in options can help your target audience access the visual information they want.

Consider the option of “quick view” product displays in pop-up format, featuring the minimum amount of information needed for customers to make a speedy purchase.

Including customer reviews and testimonials can increase conversion rates on product pages by 34%, so are a successful design feature to drive sales.

Most of all, all products must be easy to purchase with no confusion; customers should never have to consider how to buy a product.

Shopping Cart

E-commerce businesses lose $18 billion a year on abandoned shopping carts, making cart UI design an important aspect to consider when looking to increase sales.

Your shopping cart interface must focus on user control and error management. Giving users the option to view product details, easily edit their cart, delete accidental items, and alter product specifications are all important for a simple user experience. 

Pop-up cart access can be a very useful design aspect for visitors, allowing a live cart view whilst browsing other products reiterates the principle of recognition not recall.

28% of shoppers will abandon their purchase if presented with surprise shipping costs, so it’s important to make shipping costs easily visible in the shopping cart and provide customers with the information early on.

Mobile Accessibility 

Responsive website design is more important than ever; with mobile e-commerce purchases tripling over the past 4 years, customers expect to be able to browse and purchase products on their phone with ease. In fact, websites that aren’t optimised for mobile users see 5 times more task abandonment by visitors. 

With desktop purchasing still a popular choice, allowing “save to cart” options and continuity between sites help increase sales follow-through.

Mobile shopping is a completely different experience, so including mobile-specific actions like pinch to zoom and thumb swipe optimisation can help improve usability. Simplified text input boxes and autofill options can help save time and effort for your customers.

ui design mobile accessibility

Do you need help with your e-commerce UI design?

Navigating UI design can be complicated and confusing, so why not let Laracle create an engaging and responsive user interface for your e-commerce site so you don’t have to do the hard work. Our team of designers and developers can help improve UI design for an existing site, or help the development of your e-commerce site from scratch with a focus on UI.

Contact us today for more information about our services, and to discuss your individual business needs.

How to plan for successful Software Development Outsourcing

Download Free Ebook

How to plan for successful Software Development Outsourcing

Download Free Ebook