Wednesday, 18 March 2015

The Top Ten Rules of Product Page Usability

http://www.awin1.com/cread.php?platform=dl&awinmid=1203&awinaffid=32306&clickref=&p=http%3A%2F%2Fwww.johnlewis.com%2Flg-50pb660v-plasma-hd-1080p-smart-tv-50-with-freeview-hd%2Fp1479092
Getting a visitor or returning customer to click on that 'Buy Now’ button can be very difficult, with a lot of pitfalls along the way.  Conversion is without a doubt the most important factor of e-commerce and getting your product page web usability right is half of the battle.

A visitor will arrive at your website because they’re looking for something but just how simple do you make it for them to find it, and then once they reach the exact page which holds all the information for the product they’re seeking how easy and inviting do you make it for them to buy?

There are so many e-commerce sites out there competing for your slice of the market, give yourself the best chance of success by following these rules.


http://click.linksynergy.com/fs-bin/click?id=CX54I0Ftnrk&subid=0&offerid=254410.1&type=10&tmpid=6887&RD_PARM1=http%3A%2F%2Fwww.net-a-porter.com%2Fgb%2Fen%2Fproduct%2F487575
1.  Image
I’ve written about this here also as its the image that draws the customer in, and is the most important element of your product page, but in essence your images need to be very clear, have a large sized zoom facility so that detailed close-ups are available, and thumbnails for alternative views. 

If you're offering a product that would benefit from a model shot, or a video then include those as well if at all possible, plus various detailed stills shots. 

2.  Product Name

Should be at the top with clear wording, making it easy for people to search for specific products and arrive at the right place quickly

http://click.linksynergy.com/fs-bin/click?id=CX54I0Ftnrk&subid=&offerid=149472.1&type=10&tmpid=4853&RD_PARM1=http%3A%2F%2Fwww.oasis-stores.com%2Fv-neck-lace-skater%2Fdresses%2Foasis%2Ffcp-product%2F3770047030

3.   Price
Immediately below the product name or over to the right – must be instantly visible.

4.   Make your descriptions clear and succinct.
 
Imagine that it’s you who are buying something, what would you want to know?  If you need to include a lot of information consider bullet points or tabs and don’t make visitors scroll a long distance down the page, losing sight of the image.  As much information as is necessary should be immediately available without any scrolling and pictures sell more effectively than words.

5.   Delivery
Information should be obviously accessible on each product page

6.   Size Availability

Be totally transparent about what’s available and when.  Don’t offer all sizes if some are out of stock. Some websites tell you how many they have left of each item.  When the numbers go down they create a 'need' to buy now.

7.  Ratings and Reviews
If you offer customer ratings and reviews put these in a prominent place – many retailers are afraid of showing these without realising the overall benefits of customer ratings in improving both trust and conversion rates.

8.  Social Sharing Buttons

Put these where they are obvious – you want your visitors to share the products they like with their friends.  It won’t happen if they’re hard to find.

9.  Cross-Sells
Include on every page.  Yes it’s extra work for you, but cross-selling will generate further sales.

10.  Add to Bag Button
Your Add to Bag button should stand out, either by choice of colour or by making it slightly oversized.

Don't allow your web designer to get clever, or think 'I want to do something really really different on my website'.  The basics of product page conversion are to make it as simple for the user as possible, they want to browse, arrive at the page offering what they're looking for, look, read, click buy, input details, and leave.  Fast.


Find me on:
Twitter:  http://twitter.com/#!/ShopaholicGuide
Facebook:  www.facebook.com/thesiteguide
LinkedIn:http://uk.linkedin.com/in/patriciadavidson1
And contact me at phd@thesiteguide.com

Wednesday, 11 March 2015

Responsive vs Adaptive Web Design Made Simple

netaporter.com home page on PC
There are a lot of buzzwords around when it comes to web design, which can be confusing for the retailer/service provider who wants a website that works on any device.  Two of the most used right now are responsive and adaptive web design and it’s important to understand the difference, before you get baffled and befuddled and start shelling out cash for something you don’t need.

We’re all aware that smartphones and tablets have overtaken pcs and laptops when it comes to using the web and how the user utilises the web is now the single most important factor when it comes to web design. Users now expect seamless and clear navigation and usability whatever device they choose.  Netaporter Home Page on Iphone Responsive Web Design

The point of both responsive and adaptive web design is that the user is able easily to browse a website on any device no matter the size or type.  Responsive design does this fluidly and automatically, and adaptive design specifically targets each device.

At the forefront of any website designer’s thoughts when creating a new website should be the question ‘what is a visitor going to want to do on this website?’ and then ‘and how can I make it really really easy for them?’.  Most web visitors don’t want to have to think, let alone struggle, to find what they’re looking for – if they do, they leave.

Responsive web design is about a design that allows websites to adapt to whatever device is being used.  There is no individual experience or website for iPhone, tablet or laptop.  Just one.  The design is flexible, it works in portrait or landscape and on any sized screen. 

For example, whereas on a laptop a website may display in three columns, on your smartphone, with responsive design you may have a single column and scroll down or swipe across to see more.  Images will automatically resize.

American AirlinesAdaptive web design uses a set of different pre-designed layouts depending on which device is being used.  The main reason for choosing adaptive web design with its increased up-front costs, is that some types of business expect different interaction from their users depending on which device is being used as well as the user demographic. 

A good example which demonstrates this is  the American Airlines website, using a totally different layout for desktop and smartphone, and where most people will use the site by browsing and booking a flight using a laptop or pc, and will want other quick options such as check in on their smartphones.  American Airlines on Smartphone

The options therefore that are displayed per layout/device will be designed to reflect the way that a website is used on a certain type of device by the majority of users.

For websites where most people will shop, or browse, (in other words carry out the same activities) whichever device they are using, then adaptive web design isn’t necessary.  But for websites where analysis shows there is different user activity and requirement depending on the device then adaptive web design may well deliver benefits over and above responsive design.

The main question is ‘do your website users use your website in a different way depending on which device they’re on?’  If the answer is yes, then consider adaptive web design.  The user comes first in every way, every time.