Understanding UX and UI Design in E-Commerce

Nine tips to improve your online store’s usability

Speak to any designer and you’ll gain valuable insight on user functionality, but what does that mean when you apply it to your online store? The key to ecommerce conversion is a complex combination of marketing, search engine optimization, functionality, and great design. Here’s what the experts have to say about making sure your online store is user-optimised.

1. Users want fast and responsive websites
Every second of delay in your page response time can cost you a seven percent reduction in conversion rate. Whether you’re working with a web developer or building your site with existing templates, there are many online tools available to help you along. Test your page with Google’s Mobile-Friendly test tool; it’s easy to use and can get you insights on usability issues like font sizes and flash.

2. Design for scannability
Do you read the sites you browse word by word? Most probably not. Most of us don’t read content on the internet; instead, we scan each page in an F-Shaped pattern, across the top and down the left-hand side. Entice your audience to stay and browse by making your written content (e.g. product details, sizing, descriptions) and call to action pop along this pattern. As a general rule of thumb, set your text at least 12 points for body copy, and 18-20 for headers. Don’t forget to give enough breathing space between lines (1.2 minimum line height) so information is scan-friendly.

3. Keep your colours consistent.
Consider the colours you choose for your online store like you would when designing your physical store; they need to make your products look good and help customers navigate the site easier. All your web pages should adhere to a similar colour scheme, preferably using a color palette that matches your brand logo. There’s no specific colour that always works (although you should avoid red and green as they are colours most affected by colour vision deficiencies), which means you’ll need to test your audience to see which colour gives you the highest conversion rate.

4. Provide excellent customer service
Customers will always have questions, and you need to be able to anticipate what questions they’ll ask and when. Create FAQ pages with refunds or exchange terms, shipping policies, and sizing guidelines for your customers. It’s easy to leave customer service links in the footers, but you’ll risk driving them away. Alternatively, include your FAQ, and customer service tabs in the easy to access navigation bar.

5. Be smart about displaying products
No matter how great your product is, your customers won’t bite if they can’t see it. Allow your customers to experience your products like they would in a physical store. Invest in quality product photography and showcase them in strategic categories. Bonus points if you can incorporate video functionality.

6. Add search and advanced filtration functions
Nobody likes browsing through cluttered stores. Use search boxes and advanced filtration functions (price range, style, colour, sizes, etc.) to help customers jump directly to products that are relevant to them.

7. Provide editable shopping carts with multiple calls to action
Let your customers edit the quantity or product options on the cart page so they can easily add or remove products they want. For customers who need more time to consider potential purchases, provide an option to save those products to a wish-list, and for customers who need a little nudge, persuade them by offering free shipping or discounts on orders above a specific amount.

8. Ensure a seamless and secure checkout process
You’ve convinced your customers to browse your products; now get them to make their purchases by having a simple checkout process. While it’s ideal for your users to register an account, give them the option to check out as guests for ease. If possible, opt for a single-page checkout where customers fill in the shipping and delivery information, as well as their payment and billing details in one page. Remember to include a summary bar in the right side of the page, along with the appropriate call to action button so your customers know exactly what they buy and how much are they paying.

9. Don’t stop at the checkout page
Cultivate your customers by maintaining a pleasant user experience beyond checkout. After customers have made a successful transaction, lead them to an order receipt page which includes order confirmation along with contact information of your customer service team.