Available for Freelance Work
Designing E-Commerce Websites for 2010
Designs for e-commerce websites have changed dramatically over the last few years. A genre that has typically been known for aesthetically poor concepts and strict grid like layouts has developed, along with the increase in market, into some of the most original user experiences available.
2009 has been a year of financial uncertainty but the outlook for e-commerce remains bright. The cleverest of shoppers know that purchasing from an online retailer can save pennies and doing this wisely and often can save pounds. Therefore the shift in rich User Experience (UX) design has made e-commerce shoppers one of the most taken care of users on the web.
Let us take a look at some of the key strands of creating an e-commerce design and how these small details add up to become part of the returning customer experience.
E-commerce - The Basic Design Principles
Let's face it- the following 4 elements are the key to successful e-commerce design:
- Simple and thorough search facility & results
- Clear product displays and information
- Prominent Call to Actions
- User friendly Shopping Cart
1. Search Facility & Results
The search facility is vital in e-commerce websites- sometimes more so than traditional content based sites because of the sheer quantity of products available within an e-commerce environment. Amazon's main title bar is dominated by its search facility, using a drop down option to aid users in their departmental quest.
Some companies, like fashion chain Uniqlo, deem the search so important that they have allocated even more time and space to the facility- dedicating an entire page - making sure that a solitary keyword search is accompanied with the ability to select between other specifications such as colour and size.
The ability to organise the search results is vital within the UX design. Ascending/descending options allow the user to arrange product results into a format that suits their purchasing needs best. Retaining a search filter on the page allows users to edit their initial search requests, empowering their familiarity with the brands stock.
Product compare options have seen a dramatic increase over the last year, found often on products within long lists of technical specifications. See Dixons as a good example of how to compare, with the additional help of a jargon buster for those unfamiliar with industry terms.
The success of this facility means that users are more likely to compare products within a company's stock catalogue rather than external competitors, often resulting in an eventual purchase. This facility adheres to a fundamental "golden web rule" of keeping the user browsing through a site for as long as possible- whilst constantly informing/educating/entertaining them on their journey.
2. Product Information
The product details page (PD) or product page is crucial for converting sales. All key information about a product, including specifications, imagery and call to actions must be displayed in a clear and presentable format.
It is common for e-commerce sites to almost 'forget' about this vital page- with too much emphasis being placed on either the homepage or the search results display.
The design and usability of product imagery has seen a recent trend towards interactive 'non-click' thumbnails. Hovering over a thumbnail can allow the user to instantly view product details (see La Senza) as well as alternative angles (Blackberry). The introduction of 3D modelling into product imagery has seen the user take full control of how a product is manipulated and again increased the users power, resulting in a more thorough User Experience (UX).
The information and options available to a user on this page can also increase satisfaction. Many e-commerce designers limit this process by only adding an "Add to Basket" option- where as over the last year we have seen a dramatic increase in the ability to share product information for example by using social media sites such as Facebook and the ability to send product information to a friend through recommendations
Whilst the ability to feedback on their purchases may worry some companies, with concerns regarding negative service comments, this does allow both current and new users to feel part of the brand and therefore feel they are valued as a customer.
3. Call to Actions
Often in the world of e-commerce, Call to Actions (CTAs - a link which the user needs or should click on to perform an action) usually come in the form of the "Add to Basket" button. Whilst this is a vital CTA, it is also just a small part of the overall experience and one that only will be used if the rest of the user experience has been up to scratch.
The pressure on designers to help all types of users from the 'new to online shopping' to the 'advanced user' is difficult when it comes to steering customers in the right direction. New users need prominent directions, labelled information with useful hints and tips being essential at keeping their attention through to the final payment. Experienced users look for more details, quirkier layouts and intelligent design to satisfy their often sophisticated know-how.
Either user still needs to know where they are in the site, they need to know how far along they are in a payment process, they need to know their options (from basic delivery to size and colour) and most importantly they need to know that all this information is at hand if they so require.
CTA buttons can be designed through size, colour and position to attract users. The "Add to Basket" usually is the most prominent button on a Product Display (PD) page yet a "View Information" button can be more useful on a homepage so help sell the product before convincing the user to purchase. John Lewis, one of the UK's biggest department stores, do not even show an "Add to Basket" button on their product search results page and can only be found on the PD page, however for usability I feel that a "View More/Info" button would be a more useful CTA rather than clicking on the product title.
Some e-commerce sites do not allow users to purchase without an account and therefore the Sign Up/Login CTA needs to be a focal point on the overall template design- accessible throughout the site. Madsen Cycles does not enforce such a restriction on its users- allowing anyone, new and old, to purchase straight away, something I tend to agree with from a user perspective as one off purchases demand too much sign up information from a customer.
Adding products to Wish Lists or Favourite lists may not see an instant result/sale however this CTA generates the option to review choices and make a return visit without having to repeat any basic searches/procedures- essential in a world where the next online shop is only a click away.
4. Shopping Cart
Understanding shopping cart is as important as understanding your target audience and the company brand. Just because a user can find the shopping cart, and click to add an item the process does not stop there. From the moment a credit card number is entered down to the email confirmation this is all deemed part of the shopping cart/payment experience and should be taken as seriously as the design of the homepage.
The usability of the shopping cart has to increase the UX. Consistent and constant information about the cart should be available to the user at all times. Information such as number of items, total cost are effective ways of keeping the user up-to-date with their progress as well as links to payment methods and help desk contact details can also allow the user to forget about the rigor of the payment process and allow them to concentrate on finding their desired products.
Even the choice of shopping cart/basket icon can be vital to generating a consistent brand. More and more often fashion stores are opting for the use of a shopping bag icon to match the process of a traditional high street shopping experience. The icon can also be used across the site beside any purchase CTA, visually assisting the user and reminding them of their overall purpose of visiting the site.
Modifications at this level of the shopping procedure should be just as easy as on the PD page. The ability to change size, colour and quantity should be as easy as one click allowing the user to feel in control of their purchases. Imagery of the product is still vital at this point in the process- to act as reminders as well as confirming with the user this is the exact product they requested(see Oxfam. Text alone can often be confusing and may prompt the user to click away to confirm product information.
Progress indicators give any e-commerce user the "light at the end of the tunnel". Knowing how many parts there are to a payment process or purchase process can make the act seem a lot quicker especially when divided into small manageable chunks. The Apple store have done this exceptionally well! Nothing puts a user off more than a long scrollable page they have to complete, often more than once.
Confirmation is probably the most important aspect of any e-commerce purchase, informing the user that they have succeeded at their task and backing this up with an e-mail confirmation for added peace of mind.
Communication with the customer is vital and the interface should allow users to check on purchases, amend and add to orders all before delivery. Basic functionality like this can see an e-commerce company grow from a small cottage industry into a retail giant.
