We looked previously in our eCommerce planning series, about why you need an eCommerce strategy (see Are you avoiding the eCommerce Trap?) if you want to succeed. As part of your eCommerce strategy and planning, you need to create a document in a format that works for you that stays in the forefront of your mind. More importantly you need to do this before you start thinking about how your online store might look or function. If the results from your investment, time and money are important to you, or to your business, we suggest you go back and read it!
Today however we are going to explore another pillar of having a successfull online store - the point where eCommerce useability fits in to the bigger picture. Useability, or ease of use is one of the key factors in making your project a success. The moment someone has to wonder what to do next, if you allow them to get distracted whilst making a purchase, or if something does not work first time on thier system - you have probably lost the sale.
Make sure you consider useability issues as part of your strategy, and that any proposal or specification you review accounts for them. In short your website should be as easy to use as, yep - you guessed it...
Let's explore how to do this in reality.
You are going to see a theme as we step through these points, they often talk about eCommerce design best practices - or rather the planning around the design process. It's not that we are changing topics, its that great eCommerce usability stems from the design process. It's somthing you design in, not a secret sauce you add later. Each point also has a simple action you can follow.
Work to design guidelines, don't allow anyone to make it up as they go along:
- Create a common and connected theme of colours, fonts, images and layouts. This can be usually be done without needing spectacular graphics. These should eventually become 'Visual Guidelines' for everything on your ecommerce site, they should be agreed (or developed) with the people responsable for your design before they create the pages themselves.
- Whitespace on the screen is important. Keep the screen uncluttered - make good use of space. Only use effects, plugins and technologies that add value for the user. The online world used to be made up of 'flash' sites. It's not today for a good reason. As a customer would you want to spend time on your own website?
- Understand why things are placed above or below others. Understand what a call to action is. Ask any potential provider why things are done a certain way at the design stage. You need to make sure you design for the items above or below the fold (the part of the page visible before you scroll), for example your primary 'buy now' link on a product page should always be clear and accessable.
- Make sure your UI (User Interface) and UX (User eXperience) are considered and informed by the aims of your website strategy. Done correctly this contributes to making eCommerce easy to use. We strongly suggest having wireframes for all key site areas.
- Be very sure that any design (and later technology choices) takes into account responsive design principles - In 2015 you will need this to make the most of google ranking signals!
It is much easier to have guidelines that can be used to inform the design process, rather than continually attempting to make ongoing changes later. A balanced and cohesive set of design priniciples will massively help with useability, remove distractions, speak to your professionalism and have a direct impact on user trust and sales.
You need to know what success will look like in visual terms and well as financial ones! Make sure you create or can open a document that visually demonstrates your design guidelines. Agree that wireframes and UX design are part of the required process with your developers or internal department building any eCommerce website.
Consider your mobile audience and download speeds:
- 33% of browsing on eCommerce sites now takes place on mobile. People sometime switch to desktop to make purchases, but your site has to work well on mobile to maximise its potential (as above, design for it)!
- Download times are key - users expect pages to load pretty instantly. Set expectations around performance on target machines and connections. Understand how your potential customers will connect to you. Make sure this is documented in way that your designers and develoipers understand.
- Will users on 3G and 4G mobile connections be expected to view the same content?
Create some statements like the following: 'Bob uses our website in his free time to shop from a home laptop. He has a 15" sceen running at 1366 x 768 resolution. He is connected by wifi to his home network, which has a 10Mb internet connection. He uses Chrome as a browser which auto updates'. If you can link these to Buyer Personas so much the better!
Support multiple browsers:
- Document, and then agree browser standards before you start the design or the build process. Understand that different browsers behave differently - your site will probably not always look 100% the same on all platforms and screen sizes.
- Design web pages that can be displayed by different browsers. The more common browsers include Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera and Safari. Make sure you include mobile varients in your list! More important than choice of browser, make sure you know what versions of various browsers you intend to support. Its ok to decide not to support older browsers, but make it a considered choice.
- Make sure you have a way to test your eCommerce site with all of the different browsers and versions in your list. You need to ensure they both display properly and that you can complete transactions easily - before you launch.
Create a statement that says the following: 'We will support Browsers X, Y and Z on desktop platforms. On Mobile and Tablet platforms we will support A & B. We support from version 1.2 of X, 2.3 of Y and all versions later than 4.0 for A & B. Any user visting our site on an older browser will see a message advising them to upgrade, and pointing out that there current browser may not work'. Your developers in house or external will thank you!
Navigation is important!
- Ensure any navigation choices are deliberate and well designed. Have a plan for how users will interact and move through the website. What are the target aims for people on your website? What do you want them to see or do?
- Include a site map and a search facility to help users locate the required information. Make sure you can review what people have searched for after the fact. Use this information to inform future choices, promotions, discounts and promotions (everyone is searching for a widget you stock? Best move that product to onto the front page...)
- Use broad parent categories, repeat information if it could logically be in more than one place. Make sure you can show new, and suggest appropriate contextually relevent products.
Getting Navigation right is a topic for its own book. If you are still in the planning phase, create a spreadsheet that lists every product you have under its parent categories. Now think of your ten most important products (by margin, popularity, or uniqueness) and ask 10 people which parent category each one is in. Do they always get it right?
Plan for useability testing before you launch:
This one is not for before you build out your ecommerce site, but you should build it into your plan, timescales and budget. Many e-commerce operations don't get usability feedback from anyone beyond the development team and friends before they launch.
- Consider getting an outside perspective - employees not involved in the design, a user group, or some trusted customers.
- Do this before you launch! Ideally do so in house so you can look at peoples reactions when they use the website. Ensure you have time to act on any findings.
- Test the following:
- Do users gets the point of the page(s)?
- Do users understands the navigation system?
- Can users can guess where to find things?
- Can users easily complete a purchase, make an account or other action?
- Ensure you can record feedback from the site in a controlled manner. You need to be able to refer to it and discuss findings and any concerns or behaviour patterns with your development team.
Ensure you get feedback before the full launch of the site. Once it is launched any problems will be highly visible to both your customers and competitors. The impact will go beyond a few lost sales, if people can't find somthing they will assume you dont stock it, preventing return visits. If somthing does not work, people just won't come back. If you site is not easy to use people simply just wont buy. Finally if it does not work well on mobile (including payments!) people will seek an easier alternative rather then fight the experience. Create a checklist of things you plan to test and share them with your developers and designers before they start. Make sure that time is included in the plan and budget to make any changes reccomended throught testing.
So there we have it! Five takeaway topics to consider when planning for a high level of usability, each with an associated action you can easily take. If you combine these actions with the plan you will have created last week you are well on your way to creating a viable online strategy and plan for your business. Let us know how you have found the process in the comments below! What would you add or take away from the thought process?