EKM Homepage eCommerce Blog by EKM
EKM Homepage eCommerce Blog by EKM
Blog menu

Design vs user experience: Why EKM themes are different

If you’re a newcomer to eCommerce and building websites, there’s something you should know; there is a vulnerability at the heart of how most websites are built. Before exploring this, we need to take a step back and identify why a problem exists.

 

It’s your fault!

Being as respectful as I can possibly be, you, the eCommerce newbie are the reason that there is a fundamental flaw in how websites are designed and built. I don’t blame you, because when I first dived into the world of online selling, I immediately looked for ‘which theme looked the nicest’. Therein is the inherent problem we are facing as an industry; sellers are looking for which website looks the nicest and ignore how easy it is to use for the end user.

Now, I understand that when choosing a theme your only reference point is purely aesthetic in nature. Also, you’re a newbie, so why would you know any better? You just want a website that looks nice and sells stuff. What you don’t see, however, is how many more sales you could receive if you’d have paid as much attention to user experience as you would to how pretty your shop looks.

 

Design vs user experience (“UX”)

As you may expect, both are important, however, eCommerce providers are spending too much time catering for ‘what looks pretty’ because it’s what YOU like when in actual fact we should be focusing on what the END USER (your customers) want, as this will get you more sales.

Listen, we all appreciate a pretty page. It’s important as it makes your operation look more professional and trustworthy, but it’s equally important to ensure that your website is easy to use, as well as being easy on the eyes. Here at EKM, we’ve always tried to have a healthy balance between design and user experience. In fact, we don’t see a difference between them, they are one in the same. You can’t have a great user experience without a great design and you can’t have a great design without offering a great user experience.

 

What to look for in a theme

Your checklist will vary depending on the industry that you operate. Here are some ground rules to follow when choosing a theme for your online shop:

 

  • Search function

When you’re lost on a website, the search function is usually your first point of contact. Giving customers the option to search for products means they don’t have to scan through loads of categories to find a product. Displaying a prominent search function makes your products easier to find. If you’re going to be stocking a bunch of different products, look out for a theme with a prominent search box. If you’re only selling a couple of products then this function becomes slightly redundant.

 

search-function

 

  • Category menu’s

Horizontal menus are preferred over vertical menus because they bring the shop’s categories to the top of the page. Horizontal menus can also make use of multi-level mega menus which make accessing sub-categories a breeze.

An additional benefit of a horizontal menu is that it forces the user to restrict the number of categories they have and prevents the menu from falling onto multiple rows (which looks awful); vertical menus encourage an almost infinite number of categories which can be hard to search through when you’re looking for a specific category. Also, standard themes hide categories behind hamburger menus (which even on mobile isn’t good UX but is often a necessary evil) meaning engagement is drastically reduced.

 

horizontal-category

 

  • Call-to-action

We’ve made sure the most important elements of our themes are obvious; add-to-cart buttons need to pop out of the screen (compared to the elements around them) so users can easily add the product they wish to buy to their cart. We’d regularly use the squint test: squint while looking at a page and the single most visually prominent element should be the add-to-cart button/call-to-action. With themes, we most commonly make CTA’s stand out by assigning them their own colour which is reserved only for such buttons.

 

cta1

 

Here’s the thought behind the call to action on one of our new themes named ‘Tesla’:

-Prominent right-hand position on the product page. (The entire right section follows you down the page as you scroll too)
-Green background colour promotes positive action and attracts the eye.
-The add to cart button background colour is the only element using this colour on the page aiding recognition.
-Clear white bolded text within the button itself making it easy to read.

 

  • Industry specific

When shopping for clothes we use different visual clues than shopping for an HDMI cable. Clothes rely heavily on large product images to sell their look whereas electronics rely on product information and specs. Because our themes are aimed towards an industry, the layout (and available product information) is also aimed towards how shoppers in that industry shop. This means our clothing themes will tend to have 3 products in a row (as opposed to 4 or 5) with large product images but smaller product price, short description etc. On the other hand, our electronics themes will display products in a grid-like structure with each product on its own row. This makes listing product specifications easier which is also easier to read from a user’s point-of-view.

 

Example of bad user experience

I hate to name and shame (lies), but I think it would be a good idea to give you an example of a bad user experience on an eCommerce website so you know what to avoid (Disclaimer: this shop was not built on EKM). The example below is a perfect illustration of how some eCommerce providers build their themes to look good but pay no attention to how it is used. So let’s jump in…

Think of shopping online like Golf, the lowest amount of shots to reach the hole (checkout) wins.

Par for this course: 4 clicks to get to checkout.

1. To illustrate this bad experience, we put ourselves in the shoes of a watch enthusiast looking for a new beautifully designed minimalist watch. My friend recommended a ‘good’ website, so I punch the URL into the search bar and I’m greeted with their homepage:

 

phantom-home-1

 

2. As visually appealing this image of a watch sat on a rock is, I’ve come here with the intention of grabbing myself a new watch, where do I go next? There must be another button somewhere. Hmm, let me call my friend Brian, maybe he can help me navigate through to the product page…

 

phantom-home

 

2. Great, so after a bit of squinting, we found a drop-down menu (thanks for the help Brian!) and we can progress to the ‘Store’.

 

store

 

Note; If you take any lesson away from this article, please take this:

“Minimise the number of times a customer has to click to buy a product”

This whole step was completely unnecessary. We’ve had to click a menu to find the menu. Wouldn’t it have been easier to just have the word ‘Store’ or ‘Shop’ on the homepage? That extra click takes us to 1 above par. Let’s move on.

 

 

cat-page

3. Nice and clean page, however, I would expect another visual cue telling me where to click next. If I was in a rush it would be great to have an add to cart button and go straight ahead with my purchase. We’ll give them the benefit of the doubt and assume clicking on the photo will take us to the product page…

 

 

product-page

 

4. Ta-da, it worked. Cool, description looks great, love the watch and the price is right, let’s buy! Although nothing particularly stands out to me, I think it’d be a safe bet to assume the black button with the price on is the add to cart button, so we’ll go with that (although it may seem obvious to us, believe me, there are shoppers out there that will be confused by this).

 

 

add-to-cart

 

5. Convention would have me expect more of a visual cue that I have added my product to the cart. A good idea would be to have a ‘soft add to cart’ which would give me a short summary of my order before proceeding to the cart page. The only visible change on the page was the add to cart button changing from black to grey. I’m sure something must have happened, let me have a scour.

 

 

shopping-basket

 

6. Two migraines later, something caught my eye on the top navigation menu. Oh wait, that’s a little shopping basket with an ill-fitting number “1” overlaid. Desperate to grab my new watch before my eyes give up completely, I instinctively click the 2-pixel shopping basket and hope for the best (that takes us 2 above par).

 

checkout

 

 

7. Finally, I’m safe on the cart page, I can take it from here and complete my purchase. Wait, where did the past 5 days go?

Par for the course: 4 clicks
Score: 6 clicks

That example gives you some context as to what a bad user experience is and so you know what to avoid when choosing a theme. At EKM we have always tried to follow best practice and what works best for customers, not just what looks pretty. We have recently released 3 new themes that are industry specific and built with user experience in mind. They also look pretty, if I do say so myself.

What are you waiting for?

Your own successful online shop is just a click away