Creating a high quality product page requires a combination of many different elements. From the content to the layout, a good product page must combine functionality, optimisation and high quality copy.
Presenting your product pages in a way that is useful for both search engines and customers is incredibly important. Many different elements are involved in creating a website that prompts customer action and increases conversion rates.
Cross-Selling
Cross selling is a technique that involves suggesting or recommending products that are similar to the one that the customer is already viewing. For example, when a customer on a furniture website is looking at a sofa, the website may recommend an ottoman, by placing a link to that product somewhere on the same page.
Statistics show that cross-selling increases conversion rates by 3%. It also improves the overall ease-of-use of your site, increases the average value of each order, and provides more visibility to your website’s overall range of products.
Example: New Look
Click on any product on fashion retailer New Look’s website and you’ll not only be presented with great high quality imagery for that product, but also other complimentary items. New Look gets cross-selling right in their “You May Like” sidebar. The complimentary products are prominent, but small enough for the main product to still be the primary focus.
Effective Copy
Effective content is, arguably, one of the most important aspects of creating a high quality eCommerce site. In fact, 60% of consumers buy a product after they’ve read content about it.
Good copy cannot only increase your conversion rate, but it can also help your site’s search engine ranking. If you want to increase conversion rates, you must have an engaging product description written for every product on your site.
It should not only include the dimensions and specifications of a product, but it should also tell the reader why they should make a purchase. It should let them know what makes this product unique.
Example: William Sonoma Steel Grill Fry Pan
When it comes to product descriptions, William Sonoma gets it right. The product description for their Steel Grill Fry Pan combines all the elements of a good product description. It uses adjectives carefully, and cleverly, and provides the reader with information about the product in an interesting and engaging way.
Subtle Use of Keywords
Search engine optimisation is as important as ever for online businesses. B2B statistics show that SEO leads have a close rate of 14.6%, while traditional leads, such as print advertising, only have a close rate of 1.7%
Implementing effective SEO on-page elements can drive traffic to your website, and place it at the top of the search engine results. Search engine rankings are important for your site. According to statistics, 75% of consumers never scroll past the first page of search engine results. If you can get your site higher up in the search engine results, using SEO, it can have a massive effect on your conversion rates.
Example: John Lewis
Using both generic and brand phrases such as Adidas and football trainers, as well as longer tail descriptive keywords like black, white and mens in a way that reads naturally, and actually adds value to the copy and covers longer tail search phrases, John Lewis is a prime example of how SEO can be used effectively. There is also a good amount of descriptive text on the product page that will help the product rank for a wider range of long-tail phrases.
Customer Reviews
Product copy is one of the most important aspects of a good eCommerce website, but potential customers often want the opinions of “real” people. Allowing customers to leave reviews on your site can increase your conversion rate. Statistics show that 70% of consumers check with reviews before making a purchase.
Example: Boots
Pharmacy, and cosmetic company, Boots allow their customers to leave reviews on products. You can even sort products by customer rating, using the “Top Rated” search criteria.
High Quality Imagery
Photographs are a huge selling point for eCommerce sites. High quality imagery makes the shopping experience for your customers better overall. It gives the customer more information about the product, which words simply can’t convey.
To increase your conversion rate, offer controllable 360 degree views, photos with products on their own and in use, close-ups and views from multiple angles and perspectives. It’s also ideal to use images that are on the larger scale, rather than small images, as these can increase conversion rates by 9%, according to statistics.
Example: Sofa.com
Sofa.com is a fantastic example of how high quality imagery can be used to enhance customer experience. Large, high quality photos, and 360 degree product views, make the viewing experience a delight for the consumer.
Utilise Extras Like Video
Video offers a number of benefits. It increases overall user experience, and provides a fresh insight into the product. Most, importantly, however, videos can increase your conversion rate. Statistics show that consumers that watch a video about a product are 64% more likely to make a purchase.
Clear CTA
While cross-selling, email capture forms, copy, high quality imagery, and videos are all important for increasing your conversion rates, you don’t want to overcrowd your product pages. You want the focus of each page to be on the product, and on purchasing the said product. So make sure that you have a clear call to action on your site.
Responsive Optimized Web Design
Nowadays, consumers not only shop for goods on a PC, but they also use laptops, smartphones, and tablets. Providing your consumers with a high quality experience on your sites, across multiple devices can improve conversion rates and ROI.
A consumer shopping from their phone doesn’t want to have to scroll across the page. A responsive web design makes a website viewable from multiple devices, without the consumer having to resize the page or scroll across.
Example: Cotswold Outdoor
Whether you are shopping from your laptop, or your phone, the Cotswold Outdoor looks great. A fantastic example of a responsive optimized site, you can view this website on any device, without having to scroll, scale or zoom.
Matt
September 28th, 2012.
Hierarchy – What do you want people to see? Where do you want them to go?
“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organising information in a way that’s usable, accessible, and logical to the everyday site visitor.”
Brandon Jones on Sep 28th 2011 www.webdesign.tutsplus.com
The basis of design is communication – relaying a message or inducing a reaction, calls or click. With basic media advertising designers were fixated with the 3-second rule, whereby the advert has 3 seconds to get its message across above other adverts on the page.
The 3-second rule dictates that media adverts should incorporate bold, simple and clear messages and images. When implemented, this often led to aggressive layouts that were not pushing the envelope of design and could actually be classed as de-evolution of design. The finished result was an advert that was not necessarily aesthetically pleasing, but does bring into focus the importance of design hierarchy.
What does the user need to see in order?
- Sector / Product / Service – Industrial and Commercial Flooring (heading and image).
- Key information usually displayed as bullet points for ease of reading.
- Area(s) the company covers or is based in (Loughborough).
- Local Contact Number (01509 000000).
What do you want them to do?
- Recognise the sector, service or product being supplied by the company.
- Gain reassurance that the company is local and supplies what they are looking for.
- Call the telephone number
This hierarchy principle continues today and forms the basis of all media advertising.
Similar time frames have been mentioned when viewing websites but you very rarely get multiple websites shown side-by-side, advertising the same sector.
Website design has increasingly required multiple messages or multiple design prompts which navigate people around a site to a desired location or outcome, meaning hierarchy has become an even more vital part of design.
Once a website is opened it competes against itself, with its own messages and design prompts. A site will succeed or fail according to how well the design functions for the user. This is also dependent on what the user requires from the site. Getting relevant traffic to your site overrides all visual stimuli, but that’s a whole new subject that I won’t get into now.
Good hierarchy in web design should dictate what you want the user to read, in what order and where you want them to go. Destination or conclusion depends on the requirements and reasons of the user and most websites will contain information for multiple products or services including required action for each, such as call, click or renewed confidence with the company for example.
“The human brain has innate organizing tendencies that “structure individual elements, shapes or forms into a coherent, organized whole.”
Jackson, Ian. “Gestalt—A Learning Theory for Graphic Design Education.” International Journal of Art and Design Education. Volume 27. Issue 1 (2008): 63-69. Digital.
The human brain does not view individual items on their own merit and will instead organise them against the items around them. Items are instantly judged and ordered and size, shapes and colours inform us that the items may have more dominance than others. Understanding these principles allows us to form hierarchy within designs and use this to control the users pathway through the design.
Brad Jones explains 5 steps to analyse hierarchy in his post on www.webdesign.tutsplus.com:
Take a website you want to analyse and follow these 5 steps:
- List the key information points that visitors are likely seeking.
- Assign values (1-10) according to their importance to the average visitor.
- Now, look at the actual design again.
- Assign values (1-10) according to the actual visual importance as you see it in the live design.
- Consider: Does the expected importance match up with the actual designed importance?
In most cases, the answer will include shades of “no”. There are lots of reasons for this – client demands, inexperienced designers, design-by-committee – or a hundred other reasons that you’ve probably read.
Brandon Jones on Sep 28th 2011www.webdesign.tutsplus.com
The designer’s role is to take the required information and break it down into visually relevant and easily digestible portions. This has to be done while taking into account the goals and messages of the design. It is not enough to just layout the information, it has to work.
In general, service or product sites tend to work around USPs (unique selling points) and CTAs (call to actions). 2 or 3 USPs encourage the user to have confidence in the design and the 1 or 2 CTAs encourage goal conversions. These have to be displayed around a main message USP to allow the user to be reassured that the site they are using holds the information or product they are looking for.
Unfortunately, design input rarely comes from one direction. In an ideal world sites would be carved from pure creativity while using god-like functionality and subconscious triggers all based around the hierarchy mentioned earlier. In reality, the client will always want the logo bigger and will always ask “can you just make these 12 things all stand out more?”
The struggle continues…
“This post was written by James O’Flaherty on behalf of Adtrak”
Kolen 
One of Douglas Wilson's beautiful prints
I’m about half way through The Elements of Typographic Style and thoroughly enjoying it. I really wish there was a way you could read a book and ride a bicycle so I could get more reading time in while commuting, but I’ll just have to take my time reading it instead!
Some thoughts so far…
“With type as with philosophy, music and food, it is better to have a little of the best than to be swamped with the derivative, the careless, the routine.” (Page 117)
I think this is true of all design. In a time where you can get free website templates anywhere or make a website yourself so easily, the designs that have a lot of thought, care and expertise behind them really stand out from the crowd.
Shaping the page
Example of a page layout based on the Golden Section
Although the book focuses on print, the principles found in the chapter Shaping the Page can be applied to web design also. It is a great reminder to me of design school, especially the theories of the Golden Section and Fibonacci series. Using ratios based around π are useful for arriving at a design that is easy on the eye and feels comfortable to use.
Visiting Switzerland
Coffee cup in Zürich
What you read opens your eyes to things around you; I have been noticing nicely designed type everywhere! Recently we spent a weekend in Zürich – I love it how clean, thoughtful design surrounds you in that beautiful country.
Thank you to Steff for passing on this lovely graphic illustrating the differences between Helvetica and Arial.
It’s no secret – I hate computers. Outside of work I avoid them as much as I can. I mean they are very very useful things, but i hate being tied to and dependant on a machine.
I think the root of my dislike is the way they diminish your creative output. Many others have written about how going straight to a computer with a design can limit the effectiveness of the outcome. Mindy from Vidget wrote late last year how she’s found her creativity drop significantly the more she looks at gallery websites around the internet. This oversaturation of information is exactly how I feel.
When I go to my sketchbook rather than my computer, I can often come up with much better results, and much more quickly. So my New Years resolution is to use my Moleskin to its fullest, filling it with sketches and drawings, before touching the keyboard & mouse.
Rob Please excuse the following rant but I’m increasingly frustrated, bored, let down, despairing, incredulous that there are still “graphic designers” out there who have no concept of how to design for the web, but who insist on designing websites for their clients
It’s fine if they stick to Quark and what they are good at, and all credit to them, but for some reason they think they have carte blanche to roam into areas which are not their concern.
For example, let’s say that you wanted to design a new boat. Who would you go to first? Would you go to a designer of aeroplanes? No, you would seek out people who have experience in boat design, because what you want is a boat, and you need someone who understands nautical things like waves, water, ballast, the pros and cons of different hull shapes, propellars, and the like. Would you really want to go to sea in a craft designed by a designer of aeroplanes? I think not.
Do you work for a web design agency? Does this happen to you that clients get their so called “brand” guardian to do the web design or the guy who did their brochure and aks you to implement it as a web site.
And is it just us or do you receive a complete load of tosh that disobeys practically every law of web accessibility, search engine friendliness, usability, extensibility and future proofing, font usage and image sizing hell?
What planet to these people live on? Why don’t they put up their hands to their clients and say we can give guidance on the design but we are graphic designers for print and you need a professional web designer who can take into account the requirements of the web. Because they work in the web every day they will know what is the right way and what is the wrong way to do things. Do web designers try to do design brochures?
I won’t get started on programmers who think that they are web designers as I’m far too angry. Just for the record, in case you are a print designer and you are still wondering where you went wrong here are few tips:
- Decide the width of your design and what happens to the site when viewed on different size monitors
- Think about usability and consider tried and tested conventions. No need to think of your own “unique” style of navigation. There’s a reason for some of the conventions.
- Think about search engine friendliness. Not enough space here to explain but be aware that 60-80% of traffic and sales on most e-comms might come from search engines.
- A little flash can be nice, it can look good. A whole site built solely is flash is pointless – just drop it. Nobody is interested in seeing your logo sliding in and out.
- Think what happens in the future. What happens if more menu items, or product lines are added.
- Think about who will administer the site and how many image sizes you really need. It’s a pain creating 4 different size images for each new product, (although yes there are ways round this programmatically).
- Splash pages – why? What are they there for? Why do you feel the need to make people click an extra time to get to where they are going?
- Consider the online audience – they do not know your company probably so help them help you by giving as much information about yourself and don’t try to be so cool that they have to be Sherlock Holmes to find out what you do.
Thanks for reading, I feel better now