When you are trying to convince people to buy your products, you need more than good features and competitive prices. You have to make your store look professional, credible and trustworthy – and a lot of that comes from how your products are presented. This article will look at some simple techniques to help present your products in an attractive way – and most of these tips don’t require the input of a designer.
Below are two store designs which lay out the same four products in the same positions, but there are clear differences in how professional the two sites look.
Take a look at the example at the top of this blog, which site would you buy from?
The answer for most people will be Layout B. Buy why?
Layout B uses square images for all its product images – even if it means there is a lot of ‘wasted’ white space around the products. For instance, look at the rolling pin! There is a big white gap above and below the pin itself, but having it there means that the product itself lines up nicely next to the other products.
Having your images all the same shape means that when a customer browses a page of products, you are giving their brains as little work to do as possible. Visitors can focus on looking at what is shown in the image, rather than having to process all the different shapes and sizes of images.
It also means that the text under the images in a row of products will always start in the same place, which looks professional, and again makes it easier for customers to take in the information on the page.
In Layout B, all the text is of a similar size and has the same amount of spacing around it. Whereas in Layout A, the product names are much bigger than the prices and the prices have much more space below them than above them. Having consistent sizes and spacing for your text will help the customer quickly take in what is written there, and look a lot neater as well.
Layout A just uses a default HTML button, whereas Layout B has an attractive colourful button in a contrasting colour. In marketing speak, an add-to-cart button is known as a ‘Call to Action’; they are the things you want customers to act on when they are looking at the page. You don’t want them to blend in – you want them to stand out so there’s no doubt at all in the visitors mind what they are meant to do.
One of the simplest things to control is the capitalisation for your product names. It doesn’t really matter whether you capitalise each word, or just the first word, as long as you are consistent throughout your store pages.
Those are some design areas that are simple for anyone to fix.
There are lots of other annoying design mistakes I see every day on even the largest and most popular stores, which I could also talk about in this article. What are some of the things that annoy you?
Comment below to start the discussion!