5 Common eCommerce Design Mistakes

In the world of eCommerce, design is the vehicle driving your brand messaging and representing your awesome products. Quality user experience is responsible for defining an easy peasy purchasing process and ultimately portrays legitimacy to your customers. This can be the primary factor in creating a positive shopping experience which will lead to higher sales and establishing customer loyalty.

Many popular eCommerce websites are making the same mistakes. Below I have outlined some of these common errors with some suggestions on how you can fix them.

1. Cheaping out on Photography

Create Desire

When it comes to selling products in-store or online you need to motivate your customers. In a consumer world driven by lust and emotion over need, photography is one of the most powerful triggers to purchase. Showing your product in it’s best light will create that temptation. Action shots of models using your products transitions from selling an item, to selling a lifestyle that comes along with owning it.

Let’s take a look at an example from Michael Kors. This is the same purse on their website vs. someone selling it on eBay. I think it’s pretty obvious which photo portrays a high quality item.

1.1

Be Specific

A big reason customers still prefer in-store retail is the physical touch and interaction they can experience. They can touch the materials, view the item at every angle, read the label, and compare items side by side. Online shopping forces people to use their imagination. If you are selling products dependant on looks it is extremely important that your users have an adequate perspective of what they will be receiving. Leaving questions regarding how it will fit or what materials are used can be enough for a user to abandon a purchase. Make sure your photos are large enough to see detail, show product versatility, highlight features and never (ever ever) mislead your customers. Quality photography will allow your customers to feel comfortable with the products they will be receiving.

Check out this example from Zegna. If someone is going to spend a significant amount of money buying a suit online they better have a good idea of the quality they will be receiving. Zegna does a great job showing multiple angles, extreme close ups and give specific fabric, composition and sizing details.

1.2

2. Too Much Clutter

Create Focus Through Hierarchy

It seems so simple… make the important things prominent. However, I still visit eCommerce sites where your initial attention is drawn to “Join our Facebook Group!”. Don’t get me wrong, social media has it’s place, but do you really want to drive shoppers away from your online store the moment they get there?

There are many ways to allow site elements to stand out. You can make them larger, place them at the top, give them lots of white space or use bright colours. Creating a visual hierarchy of items from most important to least important leads to easy navigation. Users actions become obvious and recognizable. Do not assault your customers with so much information that there is no clear focus or they will become overwhelmed and have difficulty finding what they are looking for.

If you look at the example below, the site on the left is completely overwhelming. There are so many items fighting for your attention that you don’t know where to start. Highlighting what is important and blending what is less important will ease this friction. The Indochino site on the right is clean and concise. Your eye is immediately drawn to the product and the call to action “Shop Blazers”. This is achieved through a combination of placement, colour, and size. Their phone number is also available but has been placed in the top corner in small font. It’s there if you need it, but it’s less important and therefore less prominent.

2.1

The sad truth is that very few web surfers are reading your content. Most users who visit your site will click on the first thing that catches their attention. You can use A/B testing to see where your users are clicking in order to optimize your home page.

Show Visual Relationships

Logically related items should be visually linked together. If you have a lot of content to display breaking up pages into clearly defined areas will help users move from section to section with ease. This can be achieved by putting them in close proximity (in a side bar) or styling them the same (all in one colour or font). Your shoppers will be able to quickly decipher which areas of the page to focus on and which they can safely ignore.

3. Lacking Consistency

Follow Design Conventions

The past 15 years have moulded the way that people use the internet. We have subconsciously developed a set of rules on how we surf websites. There are certain expectations on where to find a contact number, where to start shopping and how to add an item to your cart.

Reinventing the wheel for the sake of being different is ultimately going to put a strain on the usability of your site. User experience is one of the most essential components in eCommerce. The less your visitors need to think about how to access information on your site, the more time they can spend enjoying it and buying your products.

For more on web conventions read “Conventions Are Not The Enemy”

Logical Aesthetics & Behaviours

Having consistency not only creates a unified design, but it improves the user experience and increases conversion. This includes your layout (displaying the header in the spot), aesthetics (using the same fonts and colours) and also the behaviours and interactions on your site.

There can be a learning curve the first time someone visits your site so ensure that once they’ve defined a behaviour, it continues throughout their experience. For example, all clickable links being accented with blue or the ability to swipe through images on your iPad. Keep buttons, features, menu items, and headings the same in terms of order, positioning, colour, and size.

Screenshots of Cowshed below show how they have used consistent layout and design from home page to listing page to product page… even on their registration page. The header never changes, all buttons appear in a dusty pink colour, and the fonts are the same throughout. The mint green is used as an accent colour for secondary prominence. The visually unified design has created a seamless shopping experience.

3.2

As an added bonus… consistent elements will make your developers cry tears of joy.

4. Making it Difficult to Find Products

Every day companies lose sales because their users simply cannot find what they are looking for. On an eCommerce site one of the most important opportunities is allowing shoppers to find their desired products quickly and efficiently.

Provide a Search Function

Some shoppers know exactly what they want and do not want to spend time casually perusing categories on your site. To solve this you need to have a prominent and functional search bar. Make it easily visible at the top of your site as it is an important element. Offering quick, precise, and successful searches increase your customer’s trust and boost sales. A shopper who knows the exact product they are looking for are very likely to make a purchase and you don’t want to miss out!

If you want more than your basic search, here are some excellent features to include:

  • Auto completing items as a user types.
  • Providing photos in your search drop down.
  • Categorized search (Amazon allows users to search for an item within “books”, “DVDs”, etc.). However, always give the option to search all categories.
  • Cluster your results so it isn’t overwhelming. The example below shows how Apple has handled a broad search for “iPod”. There are 1,700 results but at the top it shows the three they predict to be most relevant.
  • 4.1

    Efficient Information Architecture

    Some shoppers may not know the name of the item they are looking for or perhaps they enjoy the experience of browsing. Proper categorization of all your product SKUs is key to creating a smooth user experience. It’s ok to duplicate items under multiple categories if it seems logical. Below you can see that Best Buy has included printers under both “Office Supplies” and “Computers and Tablets”.

    4.2

    Your website “signage” should help users narrow from a broad topic or category to a very specific item through a series of 3-4 steps. If someone was looking to purchase a specific cordless drill they may go to Home Hardware, visit the power tools section, then find the drill aisle. If they can’t find what they are looking for after a quick browse they will leave. The same thing will happen on your site. If you haven’t categorized items where they are expected to be found the assumption is that you don’t have it.

    Allow Filtering

    Once users have made their way through levels of categorization they should be able to select and change multiple values on the fly. Grouping items by characteristics such as brand, colour, style, or size will allow them to continually narrow their search as they navigate. Someone could be interested in none or possibly a few of these. Filtering will allow shoppers to customize exactly what they want and weed out what they know they aren’t interested in. Sorting is also an extremely beneficial function allowing users to view a list of items by price (low to high), popularity, or publication date.

    Below is an example from Aldo Shoes. A user may know that they want some new sandals on a budget that match a certain dress. They aren’t interested in anything that isn’t in their size. With the help of filtering and sorting they can look at all the sandals within their parameters – size 7 in brown and priced from $40-$59.99.

    4.3

    5. Clear concise messaging

    Be Obvious

    Don’t force your customers to decode where a link will take them. Using obscure or wordy verbiage is just making things more difficult. Here are some examples of what I’ve seen:

  • “What can I help you find?” instead of “Search”
  • “Curious?” instead of “FAQ” and “About Us”
  • “Styles” instead of “Shop”
  • Users should seamlessly shop your site without thinking “why did they call it that”, “where should I begin?”, or “does styles mean clothes?”. Don’t beat around the bush.

    Provide the Information People Need

    Provide product descriptions with the adequate information to make an intelligent purchasing decision. Give your shoppers size charts, list the materials, give the dimensions, the weight and the care instructions. These are often displayed in accordion menus so shoppers can choose what is important to them. Short bullet points are easier to digest and are read by more users over sentences.

    By cutting your copy to provide on the information people need you are reducing the noise level, making the useful content the most prominent and ultimately simplifying your site. The Product Page is the one area you can have some freedom to write a little more content. A short (!) romanticized description using narrative and emotional words can help sell an item.

    The example below show two product pages for watches. The one on the left displays their features and specs in paragraph format. They have put these under a tab called “Expert Opinion”. Not only is the tab name confusing but it forces the user to read full paragraphs just to find out that it’s made of steel. The Guess site on the right has provided their information accordion style with all the specifics in chart form. They are doing a good job answering people’s questions quickly while allowing them to only open the areas of information they are are interested in.

    5.2