Best practice website design for retail sites

Posted by on Oct 24, 2012 in Tips tricks and ideas | No Comments

We took a look at best practice design ideas and some of the top sites on the net that are focused on selling things.

There are some common practices

  • A daily deal item on the home page is a key part top retail sites and occupies the most prominent place on the page. This is called the ‘hero’ shot.
  • Use of the ‘banner’ space for functional items eg search and cart information.
  • Minimising the height of the ‘banner space’ so that products sit higher on the screen and more products make it to the first window.
  • Clear simple navigation
  • Simple powerful key word search
  • Navigation free checkout with anonymous option and integrated CC clearing.

Many of these site are still visually cluttered but there is a trend to less clutter, compare old amazon with what they have now.

Home page is about promotion – deals, cool new products, special categories. The thing to understand with the home page is that you have about 3 seconds to catch someone attention before they move on. This is what the hero shot is for, it is like a headline in a news paper. The hero shot sits in the most highly visible space and needs to catch the attention of visitors that you want to keep (in 3 seconds).

While it is not retail focused we found the following article useful when it comes to thinking about and describing the different elements of a page.
7  Elements of a Winning Landing Page By Oli Gardner

7  Elements of a Winning Landing Page

Circle Software Retail Selling

Based on this and what we were seeing in major retail sites we came up with the following template design

The blocks are laid out so that you can align yourself with current ‘best practice’ but you can put whatever you like into them.
Everyone’s circumstance is different and you may choose to put a picture of your shop or some text into the area where you would normally put a featured category.

Circle Website Design