Blog

A short guide to good ecommerce.

Most of us are creatures of habit. Aren’t we? Once we like something we will usually get back to it again. This is why good ecommerce store should be designed in a familiar for everyone interface style, creating pleasant shopping experience. There are many industry standards that are helping to create user friendly websites. You could follow the rules or ignore, either way it will have an impact on a website’s usability and overall your income. This subject is immense so in the text below I’ve covered only few examples, nevertheless I hope it will help you to get an idea.

What is ecommerce?

It is: “Business conducted through the use of computers, telephones, fax machines, barcode readers, credit cards, automated teller machines (ATM) or other electronic appliances (whether or not using the internet) without the exchange of paper-based documents. It includes activities such as procurement, order entry, transaction processing, payment, authentication and non-repudiation, inventory control, order fulfillment, and customer support. When a buyer pays with a bank card swiped through a magnetic-stripe-reader, he or she is participating in e-commerce.” Read more.

What are the standard patterns common for ecommerce?

I took 4 large online stores into consideration to show the most common links: Marks&Spencer, Topshop, Amazon, Ebay.

Let’s start with a website structure

Header
  • Search box

Is a must have for any ecommerce site. It should be visible at the top of the page, in a header or just beneath it. This helps people to access it easily anytime. It usually shows a loop/icon finder – as an obvious choice or when box is hidden away you must click on the icon to enlarge the window and then follow with your search.

  • Login/Register/Cart

They are links that are usually displayed in the header – this is where most people will look for it. It is also a common practice to show them in a footer, so regardless where you are on the website you can view them anytime.

  • Logo

Personally, I think a logo is a must. There are websites that don’t use them. But.. how recognisable Coca-Cola would be without its logo or, Mercedes or NIKE? Logo helps to show a company’s identity, to differentiate from others. Logo can be displayed towards the left or central side; inside header, banner, also in footer. Usually it’s linked to a website’s home page.

  • Currency option

Commonly used on many ecommerce sites that sell products internationally. It shows prices in a currency applicable for the country where a customer is shopping. Either by selecting your country or by selecting the currency.

 Banner

banner-amazonAmazon’s banner and header

  • Style

In the past couple of years, we saw characteristic trend moving into minimalism. I am not saying it is the core tendency but a lot of companies are drifting in this direction, especially in 2016. Good example of this minimalistic style that a lot of companies are using now are large HD ‘hero images’ – taking the whole space of your screen.

Sometimes smaller images are used, either as sliding images (‘’sliding banners’’) or one still.

banner-topshopTOPSHOP’s still banner 

Those pictures are there to create website’s mood, grab your attention… to say a lot often without any words. Other types of graphics, videos and animations are also implemented instead of hero images or sliding banners. Good sliding banners example are on Marks & Spencer site or W&P Design.

  • CTA (Call-To-Action)

Quite common practice is to use CTA button inside the banner. CTA – “Words that urge the reader, listener, or viewer of a sales promotion message to take an immediate action, such as “Write Now,” “Call Now,” or (on Internet) “Click Here.” A retail advertisement or commercial without a call-to-action is considered incomplete and ineffective.” (Business Dictionary)

hero-image exampleAn example of a home page with a hero image and CTA button.

  • Advertising style

Not all of websites need a banner but is it a good space for advertising your product or service using images, graphics, animations or videos.  You can show off either your best selling products, discounted or newly arrived for example. It should include a clear message, a catchy phrase to encourage your audience. Remember that anything you include in a banner should be working on all screen sizes – mobile, tablet and certain browsers users will receive appropriate, potentially different experience.

It doesn’t have to be the same ‘thing’ on all devices. Quite a few websites use different styles all together for mobile users. Amazon is like that. The important thing to remember is to have the same feel on all devices but without loosing any information on smaller screens (which is the main reason why people design responsive sites, rather than different for each device). You should be able to do everything you can on big or smaller screen.

An additional features like Quick Shop, wish list, reviews, messenger options – aren’t a necessity, so it doesn’t have to be also on a mobile. However, you should still be able to add products to the cart, apply any discount codes, view all product images, use the contact form, change your account’s addresses etc. The way it is done may be different, but it ads up for an overall experience.

Footer

Marks and Spencer - footer exampleMarks & Spencer’s footer

  • Links

In the footer, it is recommended to include most of store’s informative links ie. FAQ, Shipping Policy, Terms and Conditions, Privacy Policy and Cookies Policy (“Cookies” is a must have by the law and anyone who is going to a website should be aware that a website is using it). Make sure your webstore includes that information. It helps people to understand how your company operates and on what term and conditions.

  • Contact

You should include your company’s contact details, contact form (if you have enough space), subscribe to your emails option – this will increase your conversation rate. A Map – if you run a brick-and-mortar and/or a link to Google Maps – travel directions to your store – would be a good indicator for people to find you.

  • Other links

All other necessary links that you haven’t included anywhere else on your website ie. social media icons, payment icons, loyalty programs, feedback. There are many options you could include that are depending on your store’s needs.

lg-footerLeisure Games’ footer designed by Nott Development Studios

User Interface and User Experience of your ecommerce site.

Good UI and UX is what makes people come back to your website. So what are they?

UX – User Experience

“The outcome of a user’s interaction with a product and the factors that contribute to the user’s overall perception of the product’s operation”. Read more.

UI – User Interface 

Visual part of computer application or operating system through which a user interacts with a computer or a software. It determines how commands are given to the computer or the program and how information is displayed on the screen[…]” Read more.

First of all you must know your target audience. What they do? What they like? Where they go? What influence them? You should have a clear view of your niche market. It is much easier to approach a smaller group of people, than to satisfy everyone’s needs.

What should be taken into consideration?

  • Responsiveness  

It comes without saying that your website should be readable on all devices. In this day and age if you are willing to sell via your website, responsive design is a must!

  • Loading time

Make sure your website and all pages, on all browsers is loading fast. If customers will have to wait longer than 4 seconds they might go elsewhere.

  • Familiarity

People like familiarity. I would advise to use well known in ecommerce symbols to make your website user friendly. Always check does all your icons are leading to the expected information and that it’s clear what are they communicating; that you haven’t got links that are leading nowhere – nothing is more frustrating for a shopper than broken links leading to 404 page! Missing images or text explaining how your product works, what is it, what options/alternatives it has could be also annoying. It will surely put possible customers off from buying from you.

  • Navigation

Simple navigation process with standard icons ie. “burger menu” for smaller screen sizes. Keep your home menu clear and functional by using colours and fonts that are easy to read on all devices. Home menu should include the most important links – keep it simple and intuitive. Include go-to-top button – that improves navigation when scrolling up or down.

  • Keep it simple

Websites, if too complex, may hurt your conversation rate. Unless it is designed for purpose of Art, or special campaign there is no point of making it difficult to read or browse, as it will only push your customers away.

  • Typefaces & readability

Use of a lighter, grey or other pale background with a darker font colour will make website be more readable than dark background with white font. If you haven’t got much experience with design use up to 2-3 different fonts, from the same or similar font family. It would be a safe choice and create consistency, pleasant general look and feel for your webstore. Check also for all typos!

abc

  • Colours & design

There are many design trends, however once you choose one style – stick with it! Your website should be flowing, telling a nice story, have an eye catching images, sharp icons. Remember to give enough space to a viewer. Keep it free of clutter, especially with ecommerce websites, where so much is going on. You should check what is necessary to keep and avoid adding too much information in bulk.

  • Background

There is nothing wrong with dark backgrounds but it should be considered what is the purpose of your design first, and what your audience should concentrate on. Some images look good on a dark background but this isn’t functional for masses of text from the other hand. If your website is selling images or graphics then a darker background could be a good choice, if you are using it for blogging then lighter background is more suitable. Use colours within right pallets and do not mix too many, 3-4 are ideal. Here you can find out what colours work well and which aren’t.

  • Login/Register/Checkout pages

Those pages should be free of any additional images or text. It is not a place to be creative. It should be fully functional, be kept as minimal as possible because you want your customers to focus on a certain task without distractions. Your Checkout page should include a link to Terms & Conditions and your customers should agree to them before checking out, also use clear error indications that are easy to understand (placed above or near to the field that requires correction).

Breaking the rules or not?

Being predictable in ecommerce design isn’t a bad thing. The rules are there to brake – for sure – and people like to be surprised (or do they?). You can always check if something works for your store or if it doesn’t, if more and more people are buying from you then you must be doing something right. If it works then what’s the point to change it?

There are many solutions for one and the same thing but it is always worth to look what big brands are doing – people are spending money with them for a reason.

Of course there is much more to ecommerce design but general patterns are easy to follow. After all it is all about the journey and to find the best way to keep your customers happy and engaged.