Have you ever been to a poorly designed retail store? The cash registers are hidden, there’s nobody on the floor to ask for help, clothing is everywhere, you know you want a jacket but have no idea where to start. It’s frustrating, to say the least, and makes you never, ever, want to visit that store again.
A poorly designed eCommerce store is exactly like that. There are eCommerce stores so poorly designed that consumers have no idea what’s being sold. It leaves them confused and overwhelmed, and they quickly leave your store for another one that’s better designed.
The point of eCommerce design is not meant to distract a customer, but rather to help a customer. Whether it’s helping them search for a product or helping them see how great your product is, the design is meant to help! It’s supposed to guide them through the buyer journey from visitor to customer.
Poor design turns people away and good design converts.
These 7 eCommerce design tips are meant to not only make your online store look and perform great but will also help increase conversion.
Large images are starting to become the norm for eCommerce stores and with good reason, they increase conversion. They are a great way to showcase your product because you are able to see product details so well.
Large, high-res images are the closest, besides video, a customer is going to get to your product without actually seeing it in real life. The images have to presented really well in order for a consumer to connect with what they see.
According to Remove The Background, a study that was conducted shows that 75% of people list the quality of the product images as the most important feature when shopping online. There have also been countless other studies that show that larger images used on product pages help convert better than stores that use small images.
Add To Cart Button
The ‘add to cart’ button, while you may think is just a button, is really much more than that. It is THE button that will determine whether or not a person will add an item to to their cart. If you have an ‘add to cart’ button that blends in with the rest of your product page, you’re losing sales.
Always make sure your ‘add to cart’ button is in a visible position and in a colour that matches your design aesthetic. A pop of colour used only for the ‘add to cart’ button does a good job of making it stand out. A potential customer should not have to look hard to add something to their cart!
There’s a very simple test to determine if your ‘Add to cart’ button stands out. It’s called the ‘squint test’. All you have to do is squint while looking at your product page, and if you can immediately identify which element is the button then you’ve designed it well.
Selfridges has an extremely minimal design aesthetic and uses a pop of colour only to their ‘add to bag’ button. You can’t miss it!
Auto Complete Function
The search box is an important feature on any eCommerce store, especially if you sell lots of products. It is a great way to increase conversion because it helps customers find what they want right away.
Sometimes visitors don’t use the right keywords while searching. This could result in too many products showing up or the wrong products altogether. Garbage in, garbage out, right? To solve this, add an auto-complete feature to your search box.
The autocomplete function displays the closest match as customers type in their keyword. With auto complete there is no need to load the search results page because it shows results in real-time.
If your store has what a person is looking for it will display in the search bar and they can click through to the matching product. Or, if there is no product match, the search suggestions allow visitors to correct their search.
Autocomplete works so well that, according to Baymard, 82% of the top grossing eCommerce sites use autocomplete in their search.82% of the top grossing #eCommerce sites use autocomplete in their search. Do you? Click To Tweet
Quick Product Preview
Quick Product view allows visitors to view product details — on a category page, a cart, or any other page — without refreshing the page. The product details are displayed in a pop-up window on the page the visitor is on.
Quick views drastically reduce the amount of time it takes customers to find the right products by eliminating unnecessary page loads. Customers don’t need to click on multiple products and then backtrack to search results or the category page.
American Eagle uses quick view on their website. To accommodate all product details inside the pop-up, they have multiple tabs.
One of the major design trends for 2015 is going to be video. We’ve already been seeing it slowly creep its way into eCommerce sites for the past year.
Video increases conversion because it keeps people engaged. Many eCommerce stores feature some sort of video on their homepage because it immediately grabs your attention. Stores like Folks Verona and Boosted Boards are perfect examples of this.
We’re also starting to see videos on the product page to show off the product. Asos is an eCommerce store that does a fantastic job of using video on the product page. The video shows a model wearing their clothes as she walks up and down a runway. In this example you can see the natural movement and how it glistens when the model walks, things you wouldn’t be able to tell just by an image.
Human faces have been proven to increase conversion rates. The impact a human face has on us is astounding. In fact, looking at a baby’s face activate the emotional controls in our brain.
There are physical characteristics that actually determines how trustworthy a person looks. It’s remarkable how we perceive people based on physical appearance. Using a trustworthy face in your eCommerce store can greatly improve conversion.
I wrote an article a while back about all the compelling reasons to use human faces in your eCommerce store. There are a few different reasons why you should use human faces and they are:
- Grabs your attention
- Builds trust
- Helps visitors relate
- Guides a visitors focus
Visual hierarchy is the arrangement or layout of elements in order of importance. Because our eyes are always scanning and making sense of what we see, it’s important to focus on one thing at a time.
Although carousel sliders often focus on one feature at a time, we know that they are not good for conversion. What merchants are now starting to focus on is large images that appear one at a time as you scroll.
A site that is doing a unique job of visual hierarchy is, again, Selfridges. As you scroll down, you are not bombarded by too much information. The design is simple and your eye is immediately drawn to what they want you to read.
They have listed, in order of importance, what they want someone to read. At the moment their “denim manifesto” is the most important feature because it’s first on their visual hierarchy.
It’s easy for us to forget the purpose of good design. Today, people are happy buying pre-made themes and dropping it onto their stores. They think that if it looks pretty, people will buy from them.
But eCommerce design is much more than that. It’s about helping visitors and converting them to customers. If your design isn’t doing that, it’s time for you to change things up.
Customize and optimize your design with LemonStand