7. Online Store Design – Bounce Rates & Conversions

I’m sure you’ve all at some stage, landed on a site using a black background, white text and bright colours including red. How did you first feel when landing on their website? Frustrated because of eye strain? Confused when their product didn’t really match their design? Did you think they looked kind of ‘amateur’? Sites that use conflicting colours, amateur graphics and poor layout simply leave your visitors feeling frustrated or confused. Wouldn’t you simply click away if you were in their shoes?

The first impression when landing on your site is extremely important. Your new potential customer should be impressed that they immediately understood what you offer, where to find it and feel confident that they are shopping from the right store.

This is where aesthetics and use come in. The background colour and text should complement each other so it’s easy on the eye and encourages them to read on. The most understood combination for this is white background and black or dark grey text.

You can of course use titles in strong red and other colours to draw the eye of the reader to certain points of interest or to demand a required feeling.

Learn which colours stimulate common responses in humans, e.g. Blue can often mean trust and reassurance or even success and good fortune. Red is a strong colour and should be used very carefully as it can also give a negative vibe to your site. Green is an earthy or healthy colour and is best used on sites related to food etc. It’s best to relate the information on your website with the appropriate colours. Getting it wrong will work against you.

Graphics should be kept to a minimum in order for a site to be fast loading; however they are certainly required when building your brand. i.e. Pest control companies often use insects and bugs on their site to let the user immediately understand that they specialise in termites as an example.

Another use of graphics is almost essential to a feel good design. Shades, tints, tones, Smooth curving lines, corners and complementarities will tantalise and maintain interest. Although many famous sites don’t do anything fancy at all, it certainly helps to impress your customers depending on how they’re used.

The layout of your product display is pretty flexible; however there are just a couple of rules to live by.

1.       The product photo or image should appear first, generally next to the title which should be large and obvious. You then need to have a short description directly next to or under the title. All product options, discounts and add to cart or checkout buttons should be close by to the image and title. The finally the long description should be underneath all this.
 

2.       The product photos or images are an integral part of selling your product. Depending on how they are displayed, they will stimulate an emotional response. Photo’s should be clear, taken from important angles, well lit, show all variations and consistent. If your images are dull, don’t display everything the customer wants to see, then they will not feel comfortable enough to buy it. Ashop Commerce offers four different display options to match with your site design and aesthetics.

Categories, informational pages such as contact us and terms, the shopping cart and checkout links and the search bar should all be placed in obvious positions such as the top menu, left column or the footer for links such as terms and privacy policy. If your visitors don’t immediately see how they can contact you it very easily leads to frustration. The contact us page is the first step to customer support and equally important as every stage thereafter.

The visitor should not need to click more than twice to get to their desired page. Placing pages deep within the link structure of your site is not only restrictive and less important for visitors to find information, but also for search engines.

The human eye only takes a fraction of a second to scan and focus on a point of interest. In a web page the ‘hottest spot’ is commonly the top left, then slightly lower and then the bottom right. These are where the visitors eye naturally lands looking for important information, probably through year of training and experience looking at books, magazine and well laid out websites.

The top left is thus best utilised for major navigational links such a product categories. Below that could be your best sellers. To the middle of the page is the information section used for titles, short descriptions or product images. The bottom right is where the visitor commonly looks for the next page of interest as recommended by you. A sale item or special offer is best placed here.

The top right menu or footer is best used for standard helpful links like contact us and terms, since these are not important links to help navigate your customer to products.

 

Some of the most successful websites such as Facebook and twitter are designed and laid out to best serve the common visitor regardless of their web experience and skill. They are fast loading, understood in a glance and promote the user to enter the website to their desired page with ease. So take a look around at least ten other successful sites in your industry and contemplate what it is about their site that makes it work.

If you have any specific questions about design, please don’t hesitate to contact an Ashop Commerce shopping cart software representative or design team member today.