Category Archives: Usability

5 Free Digital Tools That Every Start-Up Should Have

Get free tools to increase Conversion!

When you establish a digital start-up budgets are often very tight and yet it is important to have visibility of how your business is performing in the digital space.  When I advise start-ups on how to optimise their website the first thing I do is set them up with five free tools to begin this process. You can’t expect to understand how to improve something unless you have feedback and if possible you can measure it.

1. Google Analytics:

This is an excellent web analytics solution that allows you to understand more about who your visitors are (e.g. demographics and device) and also what content is most popular on your site. If you have a blog this is essential as otherwise how will you know which posts are generating most interest from your visitors.

Some of the key metrics you should be checking on GA include:

  • Mix of new to returning visitors – is your content attracting users back to your site,
  • Bounce rate – are they viewing more than one page,
  • Average time on page – how engaged are they with your content,
  • Source of traffic – how well is your SEO, social media and paid marketing working,
  • Device – what proportion of visitors use a mobile, tablet and desktop device,
  • Demographics – age, gender and interests of visitors
Demographic data from Google Analytics
Image Source: Google Analytics

 

Even if start-ups do have GA I often find they haven’t configured it properly and are getting false readings. Make sure you set up filters to exclude internal traffic by using your IPs and  set a filter for language spam. You can also link the account to your Adwords and Adsense accounts. For more details see this post – I’ve installed Google Analytics – Now what?

There are many web analytics packages on the market, but Google Analytics is one of a few that offers free permanent access to such a comprehensive and robust analytics platform. See my article on web analytics solutions for more details of how to use GA.

2. Google Search Console 

Previously called Webmaster Tools, the Search Console is a comprehensive tool for understanding how your site is performing in Google Search, but also what might be holding you back in getting more organic traffic.

Image of Google Search Console Dashboard
Image Source: Google Search Console Dashboard

The Search Console includes a really useful dashboard (see above)  which shows a graph of how many clicks your site has received from Google in the last 28 days, plus the number of site errors, including page not founds (404s) and the number of pages that have been submitted and ranked by Google.

The console has five primary navigation elements that you should be checking on a regular basis.

  1. Search Appearance:
  • This is mainly more technical SEO data including structured data,  rich snippets, HTML  improvements and AMPs (Accelerated Mobile Pages).

2. Search Traffic:

  • This provides data on search results, including clicks, impressions, CTR and average position. In addition it also shows number of external links to your site and what they link to, internal links, security issues and mobile usability issues.

3. Google Index:

  • This shows the number of pages on your site that have been indexed, blocked resources and remove URLs.

4. Crawl:

  • This section provides data on errors detected by Googlebots and the fetch as Google function allows you to submit a URL for indexing. The sitemap tab allows you to submit a new sitemap for your site to Google.

5. Security:

  • Finally, the security tab tells you if have Google has identified any potential security problems with your site.

For more in-depth instructions see my post; How to use Google’s Search Console to improve conversions. 

 

3. Optimize:

In 2017 Google’s introduced Optimize its free version of its testing and personalisation solution Google Optimize 360. Optimize enables you to run up to 3 A/B tests (or multivariate tests) at a time and provides a includes a visual editor to set up simple experiments in a matter of minutes. It also allows you to run redirect experiments where you test a totally new page against the existing experience. As you would expect it integrates fully with Google Analytics.

Image of types of experiments in Google Optimize
Image Source: Google Optimize

This is a simple but effective testing tool for companies not intending to conduct more than three simultaneous experiments or personalisation campaigns. It’s easy to use and is an ideal solution for start-ups that wish to use a data driven approach to website development.

Read my post, How to get started with Google Optimize for more details of this free solution.

4. Hotjar :

Hotjar is a brilliant tool as it combines behavioural analytics, such as session recordings, with easy to use visitor feedback tools. Provided you have less than 2,000 page views per day you can sign up for their free basic plan. For sites up to 10,000 page views a day the start-up plan costs only €29 a month.

Image of Hotjar dashboard
Image Source: Hotjar Dashboard

 

The session recording and replay feature is something I love because it’s like watching an un-directed usability test and they can provide some great insights into the behaviour of users on your site. However, the free plan also allows you to create up to three click, scroll and movement heat maps, a six step conversion funnel and form analytics.

Image of Hotjar movement heat map
Image Source: Hotjar heat map

That’s not to mention online polls,  surveys to be sent to users, an incoming feedback tab and a recruiter feature for getting people to participate in user testing. This is an amazing free tool that no start-up should be without. Please read my review of Hotjar for more details.

5. MailChimp:

It’s important to remain in regular contact with your customers and prospects. Otherwise they can easily forget you even exist. Email marketing is one of the most effective and productive means of doing this. MailChimp provides a free professional email marketing service which allows you to send up to 12,000 emails a month to less than 2,000 accounts.

Image of MailChimp dashboard overview
Image Source: MailChimp Dashboard Overview

MailChimp has a very easy to use and informative user interface which allows you to quickly create professional looking emails. To design emails it offers 20 basic layouts and over 300 templates using  drag and drop technology.

There is also an email editor for HTML and plain text alternatives to design your own template. It’s easy to import your contact list from a CSV or TXT file, copy and paste from Excel or import from an email marketing platform.

MailChimp also offers comprehensive campaign performance metrics so that you can see how many recipients received, opened and clicked on your emails. It also advises you on how many email bounced and unsubscribed. Because it easily integrates with Google Analytics you can track how well your campaigns drive traffic to your website.

MailChimp has now added autoresponders or what they refer to as automation  to free accounts. These are automated emails triggered by an event such as registration, purchase or abandoned basket. This is a really useful feature that often you have to pay for to get access to. So, don’t delay, sign up to MailChimp today.

Conclusion:

These five free tools are a must for every start-up. Don’t be reliant on SEO or marketing agencies to provide these resources, you will learn much more if you use them yourself. If you do need help in setting these tools up I can offer assistance as part of my marketing consultancy service, Otherwise, don’t delay and sign up now to these invaluable tools to assist you in growing your  online business.

Thank you for reading my post and I hope you found it useful. Please share using the social media icons below if you like this post.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.ukpartypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.
  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@conversion-uplift.co.uk. You can follow Neal on Twitter @conversionupl, see his LinkedIn profile or connect on Facebook.

Why Should You Use A Google 5 Day Design Sprint?

What I learned from a Google 5 day design sprint

I was recently asked to use my expertise in user behaviour and conversion optimisation to contribute to a Google 5 day design sprint run by New Haircut. It was a very intensive, but enjoyable five days working on a new digital concept. It’s a great way of making rapid progress with a digital project and so I would like to share my thoughts on making the most of this process.

 What is a Google 5 day design sprint?

It’s basically a framework for rapid development and testing of a design prototype to challenge assumptions and create a user experience that meets agreed business objectives.

It achieves this by bringing together the business owner/decision maker with other key stakeholders and people with relevant expertise (e.g. product and conversion experts) and skills (e.g. UX designer). A suitable member of the CRO team should attend the workshops as they can provide valuable insights for both user motivations and what influences online behaviour. The process at a very high level comprises:

  1. Preparation:  Briefing and recruit 8 participants.
  2. Day 1: Develop a team-wide understanding of the challenge and visualise it using a simple user journey map
  3. Day 2: Team members individually sketch their solutions
  4. Day 3: Each member votes on the most compelling solution(s) and the UX designer visualises the whole user experience through a storyboard.
  5. Day 4: Create a realistic working prototype.
  6. Test the prototype with at least 5 prospects and record detailed reactions and feedback.

The framework for designing a user experience is very effective at making rapid progress with an idea. However, before proceeding you need to have agreed a clear vision and completed research to understand the market, users and the competition as otherwise the sprint is likely to lack direction. It’s important you have a specific problem that requires a solution. 

The Home Depot (THD) for example used a 5 day design sprint to generate and develop ideas for a new personalised homepage. The vision was to design a page that would dynamically deliver relevant content based upon targeted user segments. They defined their business goal as follows:

“Homepage will act as a personalized dashboard that serves relevant content to each customer and can be accessed from anywhere.” – Source: The Home Depot, 2017

OK, so you’ve got a high level appreciation of what happens during a a 5 day sprint. How is this implemented in reality? If you want more details of how a 5 day design sprint progresses  read on as I have broken the process into 7 stages:

 1. Preparation:

 The workshop preparation is very crucial for the design sprint’s success. This begins by selecting up to eight participants from different areas of the company including marketing, product, design, conversion and IT/platform to provide an understanding of technical limitations. You should also consider recruiting external expertise if necessary as it’s important to get different perspectives on the challenge and possible solutions.

A briefing document can then be circulated to all the participants to explain the nature of the challenge, the desired outcome of the sprint and the agenda. The logistics, such as location, resources available and food should also be confirmed. Personally, I also find it useful to do some preparatory research on related subjects such as looking at how other sectors deal with the challenge and refresh my knowledge of the conversion related topics that might be needed.

2. Understand:

On day one it’s good to re-iterate the vision and discuss the overall goal of the design sprint to ensure nothing significant has changed. During a warm up session each area has the opportunity to brief the team on their area of responsibility so that everyone understands the specific business, marketing, design and technological challenges faced by the sprint. This should include feedback on the customer and the competitive landscape.

Image of sprint questions to be answered on a flip chart
Image Source: New Haircut

 

As an external expert my briefing focussed on user motivations and how they are goal driven. I used the BJ Fogg model to outline a useful framework to consider when designing a user journey.

Image of BJ Fogg's behavioural change model
Image source: BJ Fogg

 

During these talks each member of the team wrote down “How might we” question on post-it notes to capture thoughts and ideas generated by the discussion. This kind of question encourages participants to challenge existing ways of thinking and find new solutions to the problems the group is faced with.

After all the briefing sessions have been completed it is time to vote on the “how might we” statements. Each person in the team gets three dots to vote with and the sprint owner is given six dots.

3. Define:

This stage involves defining the nature of the challenge in more detail such as creating buyer personas and identifying the individual steps of the customer journey. The user journey map is especially important as it allows the team to identify which step or steps they want to prototype and test with users.

Often the team will also generate a design principles list. This comprises adjectives that we would like customers to describe the product or service. At this point the decision maker should be ready to select three “how might we” statements as targets for the prototype.

4. Diverge:

This step is based upon the view that group brainstorms aren’t effective and so team members work individually to generate ideas for possible solutions. But as research suggests that our first idea is often not the best solution, this process uses the power of iteration to improve on our initial thoughts.

Each participant is asked to sketch a potential UI to get started. We were then given an additional seven minutes to sketch a further seven potential UI solutions. This activity helps generate lots of different potential solutions to the problem.

Image of outputs from the sketching exercise
Image Source: New Haircut

Participants are then given 30 minutes to sketch out all relevant UI screens for either mobile or desktop. This can be based upon any of their iterations they sketched in the 7 minutes. All user journeys are then displayed on a wall in the workshop room for everyone to review.

5. Decide:

Each member of the design sprint team now votes for their preferred solution(s) by placing dot stickers on the sketches on display. The project owner also votes but they have a different colour sticker to show their preferences.

Image of voting on UI sketches
Image Source: New Haircut

 

Each member of team is then asked to choose another person’s design to walk though and explain to the rest of the team. After each user journey sketch is discussed the person who designed it explains their thinking behind the design.

The project owner then decided which elements of the different customer journey sketches we would take forward. However, some sprint leaders use the “Risk vs Reward” scale to evaluate each popular solution. This shows what’s easy to implement and important to customers so that the team can decide which designs to prototype.

Image of storyboard in Google 5 day sprint
Image Source: New Haircut

We then create a storyboard of the chosen design iterations to be discussed with the team. This allows everyone to visualise the whole user journey that will be prototyped and tested.

6. Prototype:

Here the team was split into two groups. One group worked on the design of the prototype and the second group wrote the copy for the designs. It’s important to produce a prototype that is accurate and professionally designed to ensure it is clear and easy to test. Otherwise the danger is that feedback will be overly influenced by usability and design matters that will be resolved before the product is launched.

7. Validate:

The final day of the design sprint is spent watching around 5 to 8 usability tests undertaken using the working prototype. Although the number of participants may be small this kind of study can help validate whether your proposition and user experience are delivering what you set out to achieve. Usability testing is especially good at helping to refine the user journey flow, identify shortcomings and challenge assumptions.

During each session we wrote down thoughts and ideas  on post-it notes.  We then placed  these notes on a whiteboard which was divided up into the individual stages of the prototype user journey and other relevant categories (e.g. the proposition). This provided the backdrop for our final discussion about what we had learned from the user testing and how we might change the prototype and the proposition as a result.

Conclusion:

As a conversion rate optimiser I have often been expected to help develop new concepts or product enhancements without the time or budget to validate the assumptions behind them. The 5 day design sprint provides a great opportunity to develop a concept using quick validations without using too much scarce resource.

Technology now allows us to create quick prototypes for minimal cost and by incorporating user testing into the sprint we can obtain timely feedback to assess the potential for the solution we’ve developed.

The process avoids early stage projects getting stuck in the bureaucracy of an organisation and breaks down silos by recruiting participants from across multiple departmental functions. From a conversion optimisation perspective it is also beneficial because it puts the customer needs at the centre of the process which is not always the case with new ideas and enhancements.

Thank you for reading my post and I hope you found it useful. Please share using the social media icons below if you like this post.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.ukpartypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.

Web Form Design Best Practices To Optimise Conversions

62 Web Form Design Best Practices

Whether it’s a contact form, registration form or check-out process, forms can be a significant barrier to conversion. Even a simple opt-in form can create friction and anxiety about entering personal information online.

A well designed and optimised form  is an important feature of any website. People usually expect the option of a form to be available on most websites as a way of leaving feedback, making an enquiry, asking a question, receiving updates, opening an account or making a purchase.

In this post I outline 62 best practices for improving your form design and completion rate.  If possible validate changes with an A/B or multivariate test before rolling out to all users. If your completion rate is relatively poor (e.g. less than 40%) then try a total re-design of your form to see if you can achieve a large uplift in conversion. There is no point wasting time with little changes if your form is dire.

Before you start:

Ensure your prospect is ready to complete your form before asking them for any information. Think about the user journey from the customer’s perspective and avoid designing your site around your internal process.

Don’t let your desire to capture data from your customers come ahead of your user’s goals. For instance on an e-commerce site prospects are looking to buy merchandise and so don’t force them to register if you can allow them to buy as a guest. You can collect most, if not all, the data you need in the check-out form.  Offer live chat for visitors wanting to ask questions or request assistance? This allows for real-time interaction with Customer Services rather than relying on email notifications which creates a delay in responding.

Fix basic usability issues before trying to be clever with advanced functionality or psychological persuasion. If your form is poorly designed and is difficult to complete without making mistakes then resolve those issues first as they are likely to swamp any other changes you make to the form.

To make it easy for you to find what you are looking for I’ve structured this post as follows. Click on the section heading that you wish to go to.

A: Mobile Forms:

  1. Mobile first:

To design an optimal user experience it is essential to take a mobile first approach because the small screen size makes them the most challenging to create.  By beginning  with mobile devices it forces designers and marketers to be  ruthless with priorities and to focus on user needs.

Image of definition of mobile first

With a majority web visits taking place on mobile devices forms must be mobile friendly and content should not just be copied over from a desktop site.  Making visitors pinch to zoom into a form is a poor user experience and so check that your form renders correctly on most popular mobile devices using a cross-browsing testing solution.

 

2. Use mobile device’s native functionality:

A couple of years ago I was evaluating a brand’s desktop and mobile user journeys when I discovered that I could only upload KYC (Know Your Customer) verification documents on their desk top site and not on their mobile app. It would have been so much easier to use my phone’s camera to take a picture of my documents and instantly upload to the app without leaving the form. But unfortunately the app did not have the same functionality as the desk top site.

For customers this is a very frustrating and disappointing experience as increasingly a majority of website visitors are mobile only users. Mobile devices have a number of features such as geolocation and cameras that should be fully utilised to minimise the amount of information requested on a form.

For example, incorporate technology shown below that scans credit and debit card details instead of making users manually input the information. This not only speeds up check out but also often reduces checkout abandon rates.

 

Image of how credit cards are scanned for mobile apps
Image Source:

 

3. Input fields and buttons should be a minimum of 48 pixels high:

Google recommend that tap targets such as input fields and buttons should be at least 48 pixels high because this corresponds with the average finger pad size of around 10mm wide. As averages can be miss-leading I would if possible allow slightly more height for tap targets for those customers with slightly thicker fingers.

4. Don’t use fonts below 16px:

Even though many more up-to-date smartphones have larger screens (e.g. 4.7 inch), don’t forget that many users still have devices with smaller screens (e.g. 4 inch)  that makes text below 16px difficult to read. As a result use text that is a minimum of 16px in size.

5. Use input masks to display the correct keypad:

Input masks ensure that when a mobile user is asked to complete a field their device displays the appropriate keyboard (e.g. numeric for phone number). For mobile devices this removes a source of friction as it removes the need for the user to select different keypads. The eight input masks that are relevant to form design are:

  1. Text – displays the normal device keypad
  2. Email – displays the normal keypad plus ‘@’ and ‘.com’
  3. Telephone – displays the numeric 0-9 keypad
  4. Number – displays a keypad with numbers and symbols
  5. Password – hides characters as they are typed
  6. Date – displays the mobile’s date selector
  7. Datetime – displays the mobile’s data and time selector
  8. Month – displays the mobile’s month/year selector

B: Design and Structure:

 

6. Multi-step forms normally out-perform single step forms.

In most instances breaking up a single step form into two or three steps will improve completion rates. Single step forms tend to be off-putting to users unless they are simply an email capture form. There are three core reasons for this:

  • Long forms with lots of input fields to be completed can be off-putting to users, particularly if they are on a mobile device.
  • Users are more motivated by seeing how close they are to completing a task than how far they have progressed (see goal gradient effect). Use a progress bar to show progress and how close customers are to finishing the form (i.e. show progress even on the first step of the form).
  • By breaking a long form up into multiple steps you can ask sensitive information (e.g. personal information) on the last step. Once users have completed the first step  of a multi-stage form they are more likely to complete other steps because of the emotional investment they have already made. This is known as the sunk cost fallacy.

Casumo, the online casino, decided to take this approach to its natural conclusion by asking one question per step. To avoid information overload and to allow the user the concentrate on one question at a time Casumo serves each input field on a separate page.

Casumo.com's one question per page sign-up form minimises distractions for the user
Casumo.com 12 step registration form

 

You might think creating a 12 step form would be off-putting for users, but from looking at Casumo’s affiliate page it appears they have a very high conversion rate. Further, usability research conducted by the UK Government’s Digital Service found the one question per page approach consistently worked best for their users.

What we don’t know is if there is an optimal number of pages for this strategy and so some caution may need to be taken when copying this approach.

7. Single column forms outperform multi-column forms:

Most A/B tests indicate that single column forms outperform two-column layouts. This may be because multi-column layouts are more distracting for users as their eyes are drawn to more than one question at a time. However, it is still appropriate to use multiple columns for dates (e.g. date of birth) and time as users expect such fields to be on one line.

8. Remove all non-mandatory fields:

It stands to reason that the more input fields you have on your form the lower the completion rate will be. Removing non-essential fields such as gender, password confirmation and any other fields that you don’t need for any regulatory or critical business purpose can lead to significant improvements in form completion rates. Be ruthless with evaluating each field and if it’s not absolutely necessary get rid of it.

9. Clearly label optional questions:

Although I recommend you remove optional fields or move them to another stage in the user journey (e.g. confirmation page), some organisations insist on them for compliance or other reasons. However, if they are asked use placeholders to make it clear they are optional so that users can decide whether they wish to complete them.

Image of check-out form from LizEarle.com with required fields labelled but not optional field
Image Source:

This example above from Liz Earle  clearly labels the mandatory fields, but fails to label the one optional field (Telephone). This can create uncertainty about whether it is necessary to complete the field or not.  By simply displaying the word ‘Optional’  to the right of the field we eliminate any unnecessary uncertainty.

 

10. Don’t repeat questions:

This is related to the above point as it should not be necessary to repeat any questions. Apart from annoying users, repeating fields just adds to the length of your form.

Image of how to get users to confirm email is correct
Image Source:

Rather than asking users to re-type their email address or password simply display it as the default setting (i.e. Show characters) and if necessary ask them to confirm it is correct using a radio button or other appropriate CTA.

Further, if you also automatically email users their login details there is no real need to ask them to confirm their details are correct on the form.

11. Display password characters as the default:

Most input errors occur because users can’t see what they have typed and so don’t hide the characters of the user’s password. Set “Show password” as the default experience.

Here we can see how Amazon’s sign in form has evolved over time to have show password characters as the default.

Image of how Amazon.com's sign in form has changed over time to show password characters as the default
Image Source:

 

12. Give a clear reason for why users should complete your form:

Research by Dan Ariely found that people are less motivated to complete tasks if they have little or no purpose. Ensure you help motivate users by giving a clear benefit for completing your form, whether it’s a free e-book, regular updates or to redeem vouchers.

In the test below for BettingExpert.com, Michael Aagaard achieved an uplift of 32% by amending the form title to communicate a clear reason why visitors should sign up.

Image of Bettingexpert.com sign up form with clear reason register
Image Source:

 

13. Apply conditional logic to reduce form length:

Conditional logic refers to where a question is only displayed if a visitor has answered an earlier question in a certain way. This approach shortens the form length and prevents users being asked irrelevant questions that could trigger abandonment.

Example of how to ask a question to get commitment for improving blog sign-ups
Image Source:

 

14. Align field labels to the top left-hand side of input boxes. 

UX researchers at Google discovered that labels which were aligned on the top left-hand side significantly  improved form completion. They believe this may be because it reduces the number of visual fixations required by the user.

15. Don’t ask for phone numbers unless absolutely needed:

Asking for personal data is always problematic, but many users are particularly concerned about entering their phone number into forms. Research shows that adding a phone number can reduce form conversion by between 5% (Unbounce) to 49% (Vital Design).

16. Create sections for related questions:

Create a logical flow to your form by grouping related questions together into homogeneous sections or steps. This helps set expectations of the type of information to be requested and should avoid customers being surprised by the questions you ask.

17. Use smart defaults:

When asking questions such as country or phone number you should offer a default country or phone code based upon the user’s IP address.

Image of smart defaults using geolocation
Image Source:

18. Avoid splitting single input fields:

Splitting input fields into separate chunks (e.g. separating post code into two input fields or having a separate field for area code for telephone number). This increases the number of clicks a user has to make and the division may be perceived as illogical by some users. Further, it may also create uncertainty about what’s required.

Image of how to condense multiple fields on a mobile form into a single field
Image Source:

If you must ask for an extension number for instance, hide it behind a form control rather than showing it as a default. Hiding irrelevant form controls has been shown to reduce error rates and improve form completion.

 

19. Clearly state why you require sensitive information:

As privacy is a major concern for many users it is important that you give a valid reason for requesting any sensitive personal information. The reason behind a request should be shown as either a tool tip or supporting text below the field.

20. Enable predictive search when large number of pre-defined options:

When users are faced with selecting a train station, city, country, occupation or something else with lots of predefined options, it’s a much better user experience if there is a predictive search feature to minimise typing and cognitive load.

 

Image of predictive search for train station on virgintrains.co.uk
Image Source:

 

21. Select field types that minimise the number of clicks or taps needed to complete a question:

Generally the more clicks or taps required the lower the completion rate will be. For this reason Luke Wroblewski recommends using drop down menus as the UI of last resort. For a date of birth or time question a drop down menu will require 3 or more separate clicks to open each drop down. If a multiple date picker menu is used instead (see image below) this only requires a single click to access all the columns in the field.

Image of multiple date picker
Image Source: 32red.com

 

  • Use radio buttons when there are multiple options but only one option can be chosen.
  • Use checkboxes when more than one option can be chosen. Always stack radio buttons and checkboxes vertically as it makes it faster to process them compared to displaying them horizontally.
  • Use a stepper for small increments rather than a drop down menu.
  • A table view is good for short lists.
  • Drop downs are more often used for lists with more than six options. However, for long lists (e.g. country) don’t show in pure alphabetical order if most users are known to select an option starting with a letter near the end of the alphabet (e.g. USA or United Kingdom).

22. Avoid Placeholder Text:

A placeholder is the light text that is shown in a field to guide users on how to complete a field. They are usually employed to reduce any uncertainty about the required format or content of the field.

Designers like placeholder text because it can reduce visual clutter by removing field labels. However, usability research by Nielsen Norman Group has shown that it causes many usability problems. For example, it makes it difficult for users to remember what information should be entered into a field and to check for and fix errors.

23. Always show a field name:

A label describing the nature of the information required should always be visible outside the input field and should not be replaced with placeholders. Using placeholders as the field label is problematic because as soon as a user begins to enter text into the field the placeholder text will disappear. This means the user would then have to rely on their memory to remember what information is expected.

To save space some forms use inline labels as these are always visible. This is the only occasion when you may want remove field labels.

24. The length of text field should reflect nature of question:

It is important to adjust the length of a text field to allow for the amount of text the user is expected to enter. A phone number field for instance should be shorter than the address field. For instance in a returns form users can get annoyed if there is insufficient space to enter a full explanation of the nature of damage or other information that has been requested.

25. Use address lookup services for address verification & completion:

Minimise user effort when asking for their address by employing an address lookup and verification service. These tools are now able to suggest addresses as soon the user begins to type their details or the user can enter their post code or zip code to select from the options available.

Image of address finder from http://uk.lizearle.com/
Image Source:

 

26. Clickable images are an engaging way to ask a question:

Leadformly has found that selectable images are one of the most engaging way of asking a question. Below Animal Friends Insurance uses images of different animals to make the process more engaging.

 

Image of form from Animalfriends.co.uk using characters to ask question
Image Source:

 

27. Use the welcome page to direct users towards the next step:

Your thank-you page should be used to direct visitors to the next action you want them to take. Use the thank-you page to clearly communicate the next step in the user journey so that visitors can continue without any uncertainty about what to do next.

28. Use encapsulation to  reduce distractions:

Encapsulation uses formatting, directional cues, boxes, colour  or shading to frame a form to remove distractions and improve prominence.  This often means removing banners, ads, social media icons and other links that might take users away from the form. The primary navigation is also often hidden, though it is worth A/B testing this change as sometimes users can respond negatively to all exit points being removed.

 

C: Usability:

 

29. Don’t use CAPTCHA’s:

CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) have been found to significantly reduce form completion rates as they act as they reduce accessibility for many users. In one study it was found that by removing the traditional word format CAPTCHA form conversion increased by 3.2%.

Image of CAPTCHA on wrexhamfc.co.uk
Image Source:

CAPTCHAs also ask frustrating questions like “Are you a robot?” which can create unease and increase the cognitive load on users. CAPTCHAs  are a lazy way of dealing with spam on a form as it puts the responsibility for preventing it on the user. Apart from phone or email validation, there are a number of other ways of protecting your site from spam and bots, including creating a honeypot (using a hidden field).

30. Avoid only using colour to communicate:

One in twelve (8%) men and less than 1% of women suffer from colour blindness which means they can’t differentiate between certain colours. Red-green colour blindness is the most common form. This means that yellow and green appear redder and users find it difficult to differentiate between violet and blue.

When using colour to communicate, such as for input errors and progress indicators, ensure you display text and/or icons to ensure clarity of the message.

31.Use cross-browser checking tools:

Check that your form works and renders on all major devices and browsers. When I reviewed a major bingo site I noticed that the load speed for the registration page had doubled after the new site was launched. When the developers investigated the problem they discovered that the form was not loading properly in Internet Explorer.

Check out the cross-browser checking solutions in this post: 12 cross-browser tools to boost conversion.

32. Allow users to navigate your form using the tab key:

Disabled users often rely on software that is operated by the tab key to move between questions.

33. Provide an explanation for questions which users may have difficulty understanding:

Many forms have sector specific questions that users may struggle to instantly understand. Some of these questions are mandatory and are needed for regulatory and compliance purposes. Use clear visual explanations such as tool tips that display when the user hovers over the question.

34. Avoid assets or text that flash:

Flashing or moving buttons and text can be very distracting to users because our brains are programed to respond to movement in case it signals some kind of threat. In addition, if an asset flashes more than twice per second it can also cause a seizure in some people.

35. Ask for additional information using milestone submissions:

Milestone submissions give users the option to continue to provide additional information when they get to a certain step in the form. This allows you to remove non-mandatory information from your form, but then give those users who wish to continue the chance to enter additional information.

Image of Jackwills.com confirmation page which allows user to create account at this milestone
Image Source:

Jack Wills effectively uses this approach in its check out form. Rather than forcing visitors to register an account before purchasing, the site asks customers on the purchase confirmation page if they wish to set a password and create an account. This ensures that setting up an account does not prevent the customer from buying merchandise.

36. Ensure high contrast between fields and the background:

As a majority of users on many sites are now on mobile devices it is especially important that forms are designed with good contrast between fields and the background. Otherwise users may struggle to see where to tap in bright sunshine or low-light situations.

37. Don’t auto-advance to the next question:

As auto-advancing (automatically moving onto the next question) is not standard on most forms it is not expected and can be off-putting for users.

38. Don’t have spell checker turned on for all fields:

Having the spell checker or auto-correct activated for input fields such as username, email address or name can be very annoying and frustrating for users. Only activate spell checkers and auto-correct when it is clearly beneficial for the vast majority of users.

39. Allow browser to auto-fill:

Most popular browsers like Google Chrome now retain certain personal information to allow you to use their auto-fill function. This can save users time in entering personal information into your form but you must properly tag fields with terms that the browser recognises (e.g. ‘first name’ or ‘city’).

40. Monitor the load speed of your forms:

Research by Google shows that load speed is important to prevent users abandoning your site. Form pages are just the same, make sure you optimise them for load speed. Use Google’s free developer tool or your web analytics to monitor load speed.

41. Visual cues and recognisable icons can improve usability:

People don’t read text on websites; they scan it to save time. Displaying visual cues can assist users because we process visual images faster than text. However, don’t invent new icons as if they are not already in common use visitors will not instantly recognise them and the icon will potentially slow cognitive processing and confuse users.

 

D: Data Handling and Error Messages:

 

42. Explain formatting requirements:

Don’t be too prescriptive of how you want data to be entered to fit in with your perception of the ‘correct’ format for a field. People use various different formats for fields such as telephone number (e.g. +44 1829 281771, 01829 281771,  + 1829 281771). To make your form user friendly get programmers to use rules to convert data to a consistent format after it has been entered rather than forcing people to conform to the format that your back-end systems has been configured to.

In addition, display tool tips to show users the correct format.

 

43. Use inline validation and display error messages soon after completing the field:

Error messages should be inline (to the right of the field), and should be displayed soon after the user completes a field to prevent them clicking on the form CTA. The validation should not be real-time either as otherwise this will report an error before the visitor has completed the field. It is recommended that error messages should be displayed around 500ms after the user has moved onto the next field.

Image of inline validation on mobile form
Image Source:

E: Persuasive Design:

 

44. First impressions count:

Visitors expect your form to look professional and well designed. Don’t cut corners on the quality of design as first impressions are important and poor design does create anxiety about how trustworthy a site might be.

Image of poorly designed signed in screen
Image Source: Partycasino.com

This welcome page on partycasino.com creates the impression that little thought has been put into the design of the screen. Users  are likely to be less responsive to the offer of making a deposit when so little effort has been put into the design of the page.

45. Use risk reducers to manage expectations and prevent user anxiety:

People often have concerns about completing forms that can significantly reduce completion rates if not dealt with appropriately. This can range from will they pass on my email address to other companies? Will I have to enter credit card details? Will I get sales calls as a result of entering my telephone number? How long will it take to complete the form?

Display appropriate risk reducers such as “No credit card required”, “No deposit required” or “No booking fee” on or below the call to action.

Images of different types of CTAs

46. Avoid negative influences:

Be careful to avoid negative influences like unnecessary graphical elements near the CTA that can cause a momentary pause as the user considers its meaning. Don’t use stop words with negative associations like for example “spam” in your privacy statement.

Image of A/B test for bettingexpert.com with privacy statement variant
Image Source:

Most people would expect displaying a privacy message to reassure visitors that they won’t be spammed would be a good idea. Well, you would be wrong, as Michael Aagaard found that adding a privacy message reduced form conversion by almost 19%. The word “spam has such strong negative connotations that it appears to automatically raise concerns in the user’s mind.

47. Avoid security seals unless you are asking for payment:

Be cautious about displaying a security seal on a form as it may raise un-necessary concerns about site safety. Further, security seals are associated with payment and so visitors may think you are going to ask for payment during completion of the form. I have seen a number of A/B tests where adding a security seal before the payment page actually reduced form completion rates.

 

48. Use live chat to offer instant support to users on your form:

Live chat is a powerful tool to assist users in real-time to answer any questions or deal with problems completing a form. Display a live chat window within close proximity of your form as it helps build social proof and can be used to gather real-time feedback on any problems encountered by users.

Image of live chat on Betfair.com registration form
Image Source: Betfair.com

 

49. Use social proof to establish credibility:

Display evidence of social proof, such as number of customers (if large), testimonials, logos of well-known partners or customers, awards or social media likes/shares close to your form. People have a strong herd instinct and so relevant and compelling social proof can be very persuasive.

50. Display progress indicators on multi-step forms:

Research by psychologists has shown that people are more motivated by how close they are to completing a task than the progress they have made (see goal gradient effect).

Image of progress indicator on animalfriends.co.uk
Image Source:

 

Progress indicators have been shown to improve completion rates because they reduce a visitor’s anxiety by communicating how close they are to completing the form. Further, starting your progress bar with some progress already made has been shown to also improve completion rates.

51. Clearly signpost number of steps together with progress:

To benefit fully from the goal gradient effect make sure you clearly display the total number of steps and which step the visitor is currently on to eliminate any uncertainty. In this example below you can clearly see that the progress indicator shows the number of steps and the CTA text reinforces this by saying what the next step is.

Image of partypoker.com registration form which shows number of steps and the step the user is on
Image Source: partypoker.com

 

52. Take care with transition speeds:

Be careful not to have too fast a transition speed as users may not notice the form has moved to the next step if it is too fast.

F: Call to Actions:

 

53. Call to actions should complete the sentence “I want to ….”

Use verbs that match what the user is looking to achieve by clicking or tapping on the CTA. Avoid ambiguous and generalised text such as “Submit” or “Send” as these do not inspire action.  Ideally the text on a button should answer the question “I want to” from the customer’s perspective.

For example, if the form creates a new account the CTA copy could be “Create my free account”. Making the copy more personal by using the word “my” rather than “your” has also been found to sometimes improve conversion.

 

54. Make your call to action look like a button:

Designing your CTA to look like a button removes any uncertainty about it being clickable and makes it stand out from your input fields.  Hyperlinks have been found to significantly reduce click through rates. Further, by giving your CTA the same width as your input fields it helps to ensure it is prominent and easy to locate on the screen.

Image of examples of call to actions

 

55. Call to actions should stand out from the page:

The colour of your call to action can make a difference to your conversion rate, but normally this is due the lack of contrast between the button colour and the background. To avoid this problem use a colour that has a high contrast with the background colour and ideally is not already is use on the page.

56. Use logical sequence for questions:

Order questions logically to assist with form completion and do not automatically follow the sequence of your back-end systems. For example, use the same order that information is shown on a credit or debit card (i.e. card number, valid from date, expiry date and security code). For field values consider the frequency of usage and list the most common values first when possible. To assist keyboard users test the Tab-key navigation to check that it follows the correct field sequence.

57. Don’t use ‘reset’, ‘cancel’ or ‘clear’ buttons:

Avoid including CTAs that cancel or clear your form as they are un-necessary and create a risk that users will accidentally delete all of the information they’ve input. This is frustrating for users and most people understand that they can clear a form by refreshing the page.

This registration page from e-commerce site Liz Earle has a ‘Cancel’ button on the bottom left-hand corner. It’s unnecessary and runs the risk of users clicking on it by mistake.

Image of registration form on Lizearle.com with cancel button
Image Source:

 

58. Don’t automatically opt-in users to your mailing list:

Auto-enrolling visitors to your mailing list forces users to make an extra click to opt-out and can create anxiety that you will be spamming them. You should also avoid tricking users into agreeing to receive promotional material as this can also harm trust in your organisation.

Image of unclick to receive marketing communications on Littlewoods.com
Image Source:

I came across this example from Littlewoods.com which attempts to automatically enrol users into their mailing list.

 

59. Avoid complex legal messages adjacent to your CTAs:

Displaying long and complex legal disclaimers next to your CTA can create anxiety and be off-putting to users. Where possible combine them into a single message and keep them as concise as possible.

Below you can see how William Hill have used links to minimise the amount of text for accepting terms and conditions. Betfair on the other hand have much more text which could be quite off-putting.

Image of legal messages from Williamhill.com and Betfair.com

 

60. Disable form submission CTA after it has been clicked once:

Disable the form submission CTA immediately after the first click. This prevents duplicate clicks on the CTA leading to data being re-submitted and/or multiple charges being made on the user’s credit card.

61. Send a confirmation email:

A confirmation email should be used to reinforce key messages and actions communicated by your welcome or confirmation page. This is your opportunity to establish your authority in your customer’s email inbox. Ensure you have an email autoresponder cycle set up to build a long-term relationship with your new customers.

62. Re-target visitors who abandon your form:

Don’t forget to have a re-targeting strategy in place to deal with those visitors who abandon your form. There are solutions available to send emails in real-time to users who abandon forms and on-site re-marketing techniques to capture email addresses for those customer who are not logged in. It is also worth considering re-targeting ads.

Conclusion:

Forms are ripe for testing. For any site with a reasonable amount of traffic I suggest you regularly A/B test your form designs to improve their performance. Validating changes with A/B or multivariate tests helps to ensure that the changes you make are improving your success metric and not just pushing through more unprofitable users.

For this reason don’t just set your success metric as form completion, but  also measure your most important conversion metric (e.g. sales or average order value). You can then identify if the changes made are impacting upon your bottom line and are worth implementing.

Thank you for reading my post and I hope you found it useful. Please share using the social media icons below if you like this post.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.ukpartypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.
  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@conversion-uplift.co.uk. You can follow Neal on Twitter @northresearch, see his LinkedIn profile or connect on Facebook.

 

Why Do Most Attempts At Behavioural Change Fail?

Most Behaviour Change Fails!

Have you ever tried to change a long-standing habit or create a new habit? Perhaps you tried to give up smoking, eat fewer sugary foods, start taking regular exercise, or just spend less time on social media. It’s often difficult isn’t it and the same is the case when we try to change the behaviour of website visitors. Indeed, studies suggest that most attempts to change behaviour fail.

Why do most attempts at change fail?

BJ Fogg’s Stanford Persuasion Lab conducts research on how to change behaviour using technology. The BJ Fogg Behaviour Model explains how three elements must converge simultaneously for a behaviour to occur. The model highlights that for people to complete a task they need the necessary motivation, the ability and a trigger to prompt the behaviour. When an action does not occur, at least one of these three elements must be missing.

Image of BJ Fogg's behavioural change model
Image source: BJ Fogg

How can we use the model?

The Fogg Behaviour Model has been created to help designers understand what stops people from completing a behaviour. For example, if users are not completing a target behaviour, such as a quotation request form on a price comparison site, the

Three core motivators – Psychological drivers:

Fogg highlights three key motivators; Sensation, Anticipation and Belonging. Each motivator has two sides; pleasure/pain, hope/fear and acceptance/rejection. Although this is a simplistic model of motivation, these core motivations can be applied to all uses and they get us to consider psychological drivers of behaviour.

Ability – Making things simpler:

If you want someone to do something they must have the ability to do so. It might seem obvious, but we sometimes wrongly assume everyone knows what we know and that they have the same skills as we do. We have two options here. We can either train people to improve their skills or we can reduce friction by making the target behaviour easier to complete.

Training or on-boarding is the more difficult route as people are generally impatient and lazy. As a result users will often avoid having to learn new skills. Designing an intuitive interface is normally a much better option as this fits much more closely with human nature.

Simplifying an action to make it easier to complete should be your preferred option in most cases. Ease of completion is a function of our scarcest resource. This is often either our time or money. Users are very impatient and so a behaviour that requires more than a few seconds may fail because the user is not prepared to sacrifice the time needed to complete it. This is why it is sometimes a good idea to inform users how long an action will take to manage expectations and encourage them to allow the necessary time for the task.

Money is another scarce resource and so if a behaviour needs £25 to complete and you don’t have £25 to spend, then it’s not easy is it. This is why a free trial can be an effective way of reducing friction to undertaking a behaviour.

Triggers to prompt behaviour:

Congruence bias can result in us testing just the things we decide are a problem rather than looking at other things

Triggers prompt or remind us to begin a task and without a trigger the target behaviour will not occur. There are lots of different names for triggers; prompts, call to action, request and cue to name but a few.

Triggers can be an external prompt, such as a mobile phone push notification or a pop-up message on a website. On other occasions our daily routine or habits may trigger a behaviour. For many people in large cities going to work triggers buying a coffee or checking Facebook may prompt us to upload our latest photos. Some of the most powerful triggers though are major life events such as starting work, marriage, moving home, birth of a child and children leaving home.

Trigger in action:

I sometimes play poker on Facebook with Zynga the online gaming company. I haven’t played for a week or two and so Zynga sent me an email offering me the chance to win some free chips. The trigger is a simple call to action of Open Now. The motivation involves scarcity as the offer expires within 24 hours of receiving the email.

Image of email from Zynga.com to trigger user to sign in
Image Source:

Although the target behaviour is to get me to sign in and claim my prize, Zynga’s larger objective is to get me playing a game of poker.  The use of loss aversion is an effective way to motivate me to click on the call to action and as Facebook remembers my login details the behaviour is very easy to complete.

How to apply the Fogg model to digital marketing:

The Fogg model is a powerful resource for evaluating how to encourage behavioural change in digital marketing as it has been specifically constructed for use with technology.

What is motivating visitors?

People buy benefits rather than features and so it is important understand your customer’s needs and what they want from your product or service. Marketers need to communicate a compelling proposition that includes psychological motivations as well as more rational benefits to motivate users. This needs to be sufficiently appealing to justify changing their behaviour and perhaps switching to a new supplier.

So before designing a page or website first consider what need your product or service is solving and how important is it to your prospects. Make sure you identify the most important needs so that you don’t make the mistake of promoting something that is not salient to your customers. Use the implicit association test to identify psychological motivations as people don’t have full access to our deeper, emotional drivers.

Evidence of social proof can further enhance the perceived value to prospects because of our natural herd instincts. However, perhaps most crucially is that your value proposition is communicated with engaging imagery and compelling copy to persuade visitors that it will deliver on your brand promise.

Rewards can be used to provide a further motivation to complete a task. However, make sure the reward is something people want and be careful to adjust the frequency of the reward to optimise its effectiveness. Read my post on the psychology of rewards for more details.

Evaluating ability:

If your target behaviour is not easy and simple for visitors to undertake it will create friction which can prevent even the most motivated user from completing a task.  Apart from being lazy, people have limited attention spans and are often interrupted when browsing. This is what it is important that the user experience is intuitive and there is a clear visual hierarchy.

To get an accurate assessment of how easy your site is to navigate usability testing is essential for any organisation that is serious about addressing ability issues. Observing visitors trying to navigate and complete tasks on your site is much more insightful than asking them direct questions. Your analytics can tell you where there may be a bottleneck, but usability testing tells you why there is a problem.

Browser replay tools, such as Hotjar or Sessioncam, can also help identify where problems may occur. Session replay recordings are like undirected usability tests as you don’t know for sure what visitors are trying to achieve. However, by encouraging people in your organisation to spend time watching session recordings it is surprising how frequently usability problems are identified.

Image of Widerfunnel.com lift model
Source: Widerfunnel.com

I find a heuristic analysis with the help of WiderFunnel’s Lift Model is also very useful at highlighting potential shortcomings with a screen or user journey. This begins with the value proposition and how compelling it is to your prospects. Use the model as a check list of what to look out for and you will soon come up with a long list of items to consider.

Frequent sources of friction:

There are some elements of web design that consistently cause friction and result in a poor user experience. Friction can reduce both our ability to complete a task, but the anxiety it creates can also harm motivation. So, if you have any of the following friction generators on your site I would recommend that you remove them if it all possible.

Using registration as a landing page:

Let me say this once. A registration page is not a landing page! Sending off-site visitors directly to your registration form is lazy marketing. Use a dedicated landing page that is designed to inform and persuade.

Registration pages should not be designed to inform visitors about your value proposition and should be focused on getting visitors through the sign-up process and not to persuade them that your offer is right for them. It’s also a poor user experience as it doesn’t conform to visitor’s expectations.

Sign up forms with a pop-up before the first page:

When a user clicks on a button to launch a form to input information for a quotation or open an account the expectation is very clear. The visitor anticipates being taken directly to the form. Given this strong expectation it is not advisable to interrupt the user journey with a pop-up or interstitial to offer users another choice.

Image of pop-up immediately before a form on https://www.theidol.com/
Image Source:

Theidol.com launch a pop-up to promote their comparison service immediately after the user clicks on “Get a Quote” CTA. This is a poor user experience as it is confusing for the visitor. The risk with interrupting the user journey in this way is that it’s not meeting customer expectations and can be perceived as too aggressive. It would have been better to offer the price comparison service as the primary CTA on the home page and made the existing option of getting a single quote a secondary CTA.

Dont’s use CAPTCHA:

Forms are a common source of friction and so it is important to take care when designing them. However, CAPTCHA fields are notorious for annoying and frustrating users. They are often implemented by IT security teams to protect a site against bots, but there many other better ways of achieving the same aim without causing friction.

Image of CAPTCHA on wrexhamfc.co.uk
Image Source

 

Allow users to decide when they are ready:

When a user lands on your site many will not be ready to convert. If they have never been to your site before they need to establish your credibility and may want to browse to find out more about what you offer. However, many sites wrongly assume that visitors are ready to convert on their first visit and offer no secondary call to action.

Image of https://www.theidol.com/ homepage with secondary CTA
Image Source:

To build visitor motivation it is necessary to design user journeys that allow for establishing credentials (e.g. customer testimonials and awards), information gathering (e.g. white papers or blogs) and lead capture (e.g. newsletter sign up form).

Always include a secondary CTA as people like to have a choice and you need to allow for those users who are not yet ready to commit. The above homepage from theidol.com prominently displays a primary and secondary CTA to give users the choice.

Homepage Sliders/Carousels:

So many websites have auto-sliders or carousels on homepages that you would be forgiven for assuming that they must be an effective means of communicating multiple products or value propositions. Management love them because they can allow them to avoid making difficult decisions about what should be on their homepage.

Here is the carousel on Very.co.uk which changes every few seconds as the user is reading the text. This can also be annoying to visitors if they are not fast readers.

Image of Very.co.uk with homepage carousel
Image Source:

However, the vast majority of A/B tests and usability studies have shown that few users interact with them and they can often harm conversion rates. Because carousels often look like adverts they are frequently ignored and have few clicks on calls to actions. In addition, even fewer visitors click on second, third and other panels that are included in a carousel. This means that prime real estate on your homepage is not performing effectively and so should be removed.

Welcome screen:

When a visitor successfully completes your registration process, don’t dump them into a blank page and expect them to work out where to go next. Make sure you provide a suitable welcome message and provide on-boarding information or cues. It’s an important stage in the user journey, and so make sure you take advantage of it with suitable content.

Image of on-boarding user journey for Deezer.com
Image Source:

Deezer, the music streaming app, has a simple and easy on-boarding process. When a user completes a short sign-up form they are first asked to select music genres they like. Users are then asked to indicate their preference for a series of artists. Once this is complete the user is presented with a unique play list called “Flow” which reflects their music tastes.

Conclusion:

BJ Fogg’s behavioural change model is a powerful framework for considering how we can nudge visitors towards their goals. Most attempts at behavioural change fail, not because people can’t change, but rather because at least one element is missing. People need a trigger, but also the ability and motivation to change. Use this framework to identify which elements are missing in your user journey and address these deficiencies to improve your chance of success.

Thank you for reading my post and I hope you found it useful. Please share using the social media icons below if you like this post.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.ukpartypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.
  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@conversion-uplift.co.uk. You can follow Neal on Twitter @northresearch, see his LinkedIn profile or connect on Facebook.

 

 

What Are The Implications of Gall’s Law For Digital Marketing?

What is Gall’s Law?

Gall’s Law is a rule of thumb which indicates that complex systems that work are normally found to have evolved from a simple system that worked.  This means trying to design a complex system from scratch is never successful and it cannot be made to work once it has been created. It is necessary to begin again with a simple system before trying to make it complex.

Gall’s Law originates from John Gall’s book Systemantics: How Systems Really Work and How They Fail. The law supports the idea of under-specification and has been used to explain the success of the World Wide Web and Facebook. Both of these systems began life as fairly uncomplicated systems but have since evolved over time to become highly complex ecosystems.

There are of course many examples of complex systems that have failed, especially in IT, but the evidence for Gall’s Law does appear more anecdotal than scientific. The other principles of Gall’s Law are:

  1. Complex systems rely on many variables and interdependencies that have to be organised precisely for them to function correctly. Designing complex systems from scratch doesn’t work because they haven’t been shaped by environmental selection forces that allow systems to naturally become more complex.
  2. Uncertainty means that designers can never predict all of the interdependencies and variables needed to build a complex system from scratch. This means such complex systems are prone to failure in all kinds of unexpected ways.
  3. Environmental constraints which change over time and are again unpredictable suggest designing a simple system that works in the current environment and then adjust the system over time to improve it.
  4. As prototyping and iteration are so effective as value-creation processes it is much easier to use these methodologies to verify that a system meets critical functional needs rather than try to build a complex system from scratch.
  5. Developing that prototype into a minimum viable offer enables project managers to validate critical assumptions and produce a simple system that can work with real users.
  6. The organisation can then use iteration and incremental augmentation to develop an extremely complex system over time that can be adapted to environmental changes.

Implications for conversion rate optimisation:

1. Focus on critical customer needs.

This means aim to begin by building simple apps and websites that are not overly complex and don’t have too many features and functions that most customers are unlikely to ever use. Snap Chat for instance started out as a very simple messaging app and has only gradually become mo re complex over time.Get the basic right first.

Unfortunately this is not ‘sexy’ or ‘cool’ and so often product teams add features based upon their personal preference rather than evidence. Avoid this if you can.

  1. Get the basic right first.

All too often people get obsessed with the latest feature or functionality that competitors offer without first getting the basics working on their own site or app. For example, most users won’t change default settings and so there is little to gain from giving customers more choice in the settings tab if no one ever uses them.

3. Allow for your app or website to evolve over time.

A key principle of Gall’s Law is that software starts simple and then evolves to become more complex over time. Optimisers and project managers should make allowance for this evolutionary change by building in feedback and reporting mechanisms to facilitate this process. Listening to customers and using A/B and multivariate testing should be part of the iterative process for allowing your app or site to evolve over time.

Conclusion:

Gall’s Law should be a reminder for designers, project managers and optimisers to stay focused on key customer needs and avoid the dangers of mission-creep and over-complicating a new user experience. Get the basics right first and allow for evolutionary change via customer feedback and optimisation experiments.

Gall’s Law could have been written for conversion rate optimisation as one of the key principles of CRO is to establish an evolutionary optimisation strategy rather than going for regular site re-designs. This makes for less disruption for users and it provides optimisers with more opportunities to understand the impact of small changes on success metrics.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.ukpartypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.
  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@conversion-uplift.co.uk. You can follow Neal on Twitter @northresearch, see his LinkedIn profile or connect on Facebook.

Top Posts of 2016

What happened in 2016?

2016 has been a great year for Conversion-Uplift as I now offer conversion rate consultancy services to a range of organisations. I also migrated from Tumblr to a WordPress and published a Glossary of Conversion Marketing. This has over 250 pages of definitions and examples from the commercial world..

But what caught your imagination most in 2016? Here are my most popular posts of 2016:

1.  How to use card sorting – Card sorting tools to improve website navigation. This post made it to the first page of Google and attracts a lots of visitors to the site.

2. Customer ratings – 6 top E-commerce rating and review platforms to build trust and credibility. This post also got to the first page of Google and is currently the most popular article on the site.

3. Optimisation solutions – Digital marketing toolbox – with over 300 solutions. A regular favourite with anyone wanting to optimise their site or app.

4. Competitor analysis – 10 website audience comparison tools for competitor benchmarking. A popular post since it was published in August.

5. Testing solutions – Which A/B & MVT testing solution should you choose? Now includes AI solution from Sentient Ascend.

6. The EU referendum result – They psychology of Brexit – Why emotions won over logic? A topical subject and a psychological perspective of why the UK voted to leave the EU.

7. Cultural dimensions of optimisation – Cross-cultural website optimization. Cultural differences in visitor preferences can seriously upset the standard template approach to website design.

8. Address look-up solutions – 11 free and paid for address look-up solutions. A must for any sign-up form or check-out process.

9. Referendum & democracy – Referendum a device for demagogues and dictators? Another Brexit post, this time about using referendum to make such important decisions.

10. Psychology of incentives – The psychology of reward and how to motivate your customers. What psychology tells us about creating automatic responses for marketing purposes. 

Many thanks for visiting my website during 2016 and I hope you will continue to return in 2017 and beyond.

To browse links to all my posts on one page please click here.

  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@outlook.com. You can follow Neal on Twitter @northresearch, see his LinkedIn profile or connect on Facebook.

 

Why is auto-play bad for conversions?

Why is auto-play bad for website accessibility?

Do you find it annoying when someone who is playing music or a video in a public place doesn’t use headphones, but expects you to listen to their music or movie choice without you having a say in the matter? Well, how do you think your visitors might feel when they land on your site and they are greeted by an auto-play video of your latest ad, music or at Christmas time, continuous falling snow?

I love Christmas decorations and lights but a few years ago I got the nickname of the Grinch after I asked for falling snow to be taken off a website I was helping to optimise. It had broken an A/B test I was running. But more importantly it can be very distracting and make a site inaccessible for those visitors using a screen-reader. For some users it can even cause  migraines and seizures. This can significantly harm your conversion rate.

 

What kinds of auto-play can reduce conversion?

Animated visual effects, such as falling snow or other moving images that go across or down the screen.

  • A music player that begins playing once a page has loaded.
  • Animated GIFs that automatically play when you arrive on a page.
  • An auto-rotating slider or carousel.
  • Anything else that moves or flashes automatically on a page can be considered auto-play. So, why can auto-plays reduce conversion?

Movement is distracting:

Image of a nuclear bomb exploding as movement is the nuclear option

Conversion expert Tim Ash from Site Tuners refers to movement as the “nuclear option” because our brains are hard-wired to be drawn to any kind of movement in case it is a threat to our existence. We can’t help but look towards anything that moves. If this is your call to action then it may be appropriate, but if it is anything else then the risk is that it will take your visitor away from your conversion goal.

It can obscure vital assets or information:

Falling snow or other visual effects that result in random sections of your page being covered with moving images can make it difficult to read information or instructions. In addition it can actually prevent users from interacting with clickable images (e.g. Add to basket CTA) because the effect temporarily covers the asset concerned. This can result in cart and site abandonment.

Trigger migraines & seizures:

According to the Epilepsy Foundation, around three percent of people with epilepsy find that exposure to flashing lights or certain visual patterns can trigger seizures. These kinds of visual effects can also cause migraines which are a much more common for web users. Moving content and blinking can be a severe distraction for people with certain health conditions such as attention deficit disorder as they find it difficult to focus on other parts of the screen.

Image of Tweets complaining about falling snow on websites
Source: Twitter.com

Audio-auto-play reduces accessibility:

Audio or video auto-play can be especially intrusive as the sound will either cancel or conflict with other audio tracks the user is listening to at that moment. This can be very annoying for a user who is listening to music or someone in a quiet zone. However, for someone using a screen-reader an audio track can make the site unusable as they won’t be able to continue with their task until the audio track has finished playing.

Auto-sliders suck:

Image of auto-slider on Snapfish.co.uk homepage
Source: Snapfish.co.uk

Auto-sliders or carousels are so common it is easy to assume they must work because so many sites use them. Unfortunately this is the kind of herd mentality that many business people use to justify adding an auto-slider to their site.

The evidence from many A/B tests and usability tests is very different because visitors lose control of the user interface when assets are automatically moved around by the slider. Further, low literacy and international users often don’t have enough time to finish reading the slider before it is removed.

As auto-sliders move and they look like banners many users assume they are ads. This means they are more likely to ignore them and as a consequence interaction levels on many auto-sliders are miniscule. Auto-sliders that I have analysed generally have a low level of clicks (less than 1% of visitors) and the vast majority of clicks are on the first position.

Erik Runyon’s analysis of sliders also shows very low levels of click through on these assets. Further, he confirms that most clicks (between 54% and 89%) are on position one of the slider.

Conclusion:

Apart from being distracting, auto-plays make sites less accessible and can trigger or exasperate certain medical conditions. It is also perceived as aggressive and annoys people because they have lost control of the user interface without giving permission.  Once you have annoyed visitors their perception of your whole site and your product will be negatively impacted.

Auto-play advice:

  • Give back control to your visitors. Display a prominent play button (i.e. above the fold) and make your slider user controlled with obvious icons (i.e. not small dots that few users will notice). Even better, remove your slider as they generally don’t engage users.
  • Silent explainer videos can sometimes work as it is the audio element that is usually most disruptive. But make sure there is a prominent button to pause or stop it for returning visitors or those customers who want to continue to browse.
  • Short video clips (i.e. 5 seconds or less) can work, but again have a skip or stop button for those impatient visitors who want to continue with browsing.
  • Avoid any random moving images or flashing assets (e.g. falling snow) as this can seriously reduce accessibility for some visitors and is generally distracting.
  • When users are informed beforehand that a link will take them to view a video clip it is acceptable to use auto-play as this meets their expectations.

 

Thank you for reading my post and if you found it useful please share using the social media icons below.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@outlook.com. You can follow Neal on Twitter @northresearch, see his LinkedIn profile or connect on Facebook.

How to improve site load speed to increase conversions

Does load speed matter?

A slow loading webpage creates a poor user experience, but does it really make a significant difference if you have an awesome proposition, product or website? Well, Google discovered that page speed does matter big time and it shelved a potential improvement to its search engine results page as a direct result.

After listening to customers in research express a clear preference for 30 rather 10 results on Google search, Marissa Mayer, Director of Search Products and User Experience, decided to A/B test displaying these two options. The experiment showed that displaying the extra 20 search results increased the time for the page to load by 0.5 seconds.

Shockingly this led to a 20% fall in full page renders when 30 results were displayed.  In other words one in five users searching on Google were not willing to wait an extra 0.5 seconds for a page to load.

Research by Google indicates that mobile users are even more sensitive to page loading speed. A page load time of between 1 to 5 seconds means the probability of a bounce increases by 90%

Image of impact of page load speed on bounce rate for mobile devices
Image Source:

 

So how quickly should a webpage load? Research for Akamai and Gomez.com found that almost a half of users expect a site to load in 2 seconds or less and that many will leave a site if it hasn’t loaded within 3 seconds. This demonstrates that users have relatively high expectations and could help explain the impact on conversion of slow loading websites.

As a rule of thumb if your site loads within 3 seconds that is pretty good performance. More normal is between 4 to 7 seconds, but don’t be satisfied with that, look to reduce it. Anything more than 7 seconds and you definitely should be looking to take action to reduce the time your visitors have to wait to interact with your website.

You should seek to reduce load speed provided the ROI makes sense. This can be assisted by A/B testing identical pages that have different load speeds. Provided you see an uplift that outweighs the cost of improving the load speed then it is worth continuing the process.

How to measure load speed?

Image of tape measure
Source: Freeimages.com

All web analytics tools should allow you to see your individual page load speeds. If you are using Google Analytics go to “Behaviour” and select “Site Speed” and “Page timings”. In the drop down menu select “Average Document Interactive Time” as this is a measure of how long before a user can begin to interact with the page. This is a more meaningful indicator of load speed as many sites have content loading in the background well after the page appears to have loaded to a visitor.

 

Google Analytics site speed overview
Google Analytics – Site speed overview

 

Other tools to measure load speed:

  1. Google Developers: Free resource that rates your page load speed for desktop and mobile devices. Generally your site should get a score of over 80 to be performing well, but see how you compare to your major competitors to benchmark your site speed.  It also provides recommendations for the main areas to investigate to improve your load speed.

Google Developers Page Speed Tools

  1. WebPagetest: Free tool for the more technically minded user that allows you to define the geographical location and to test different in different browsers. This gives you a detailed breakdown of the load speed of individual elements on the page.

 

  1. OctaGate Site Timer: Provides a Free evaluation of the impact on load speed of images, frames, iframes, script files and it also follows redirects. It also helps you identify the key offenders for you to optimise.

 

  1. YSlow: This gives you a Free analysis of load speed and indicates why page speed is slow based upon Yahoo!’s rules. It also enables you to select the browser you wish to test the page in.

 

How to speed up your site:

1. Minimise page size:

image of 2 weights
Source: FreeImages.com

1.1 Use GZIP compression – Check if your web host is using GZIP compression and deflation as this can reduce file size by up to 70% without adversely affecting the quality of images of videos.  Enter your site URL into the GZIP test tool to find out if your site is already GZIPPED.

1.2 Use JPEG rather than PNG images – PNG images don’t compress photographs anywhere near as much as JPEG files can and so make sure you use JPEG’s when you can. Smaller file sizes can help improve load speed markedly.

1.3 Adjust JPEG image quality – By setting the image quality of JPEG’s to 50-75% you can often significantly decrease the size of your images without any obvious reduction in image sharpness.

1.4 Avoid single page websites – Trying to get all your content on a single page is problematic at the best of times, but it also tends to result in very slow loading times because the page is often long and there are no other page to move content to.

Image of popcorngarage.com

1.5 Remove extraneous metadata from image files – Designers often leave a lot of metadata in image files, including comments, thumbnails and other information that they may find useful, but just adds to the file size. Get your designer to create a backup a copy for themselves and then put the website image version through image optimization software to minimise the file size and remove ancillary chunks.

2. Reduce the number of browser requests:

 

2.1 Enable browser caching – Provided your page dependencies don’t change too often you should look to enable browser caching so that the browser doesn’t have to dynamically generate the page every single time it loads. Contact your server admin or if you use WordPress you can use plugins like WP Super Cache to significantly improve page load times.

2.2 Use CSS sprites to combine small images into one file. Most websites have lots of small images (e.g. logos, icons, buttons etc.) which normally have to be fetched individually from the server. CSS sprites significantly improve performance by combining all the small images on a page into a single file called a “sprite”. This reduces the overhead of having to fetch multiple image files.

2.3 Merge related CSS and JavaScript files – Combining individual CSS and JavaScript files can reduce the number of files and thus help your browser load much faster.

2.4 Minimise the number of redirects – Multiple 301 redirects can confuse your browser and slow page load dramatically. Be careful not to create too many redirects as this can kill load speed.

3. Minimise the distance to your site:

3.1 Reduce the distance to your site – If you have users spread out around the globe consider a Content Delivery Network (CDN) to allow access to a server near the geographical location of your visitors. CDN providers such as Amazon Cloudfront and Softlayer provide competitive CDN services that can significantly improve site load speed.

Conclusion:

The evidence is clear – load speed is an important driver of bounce rates and conversion. Don’t let a slow site speed harm your conversion rate as there are plenty of ways to improve load speeds. Make sure you regularly check our site speed and use the above strategies to improve your site’s performance. It could make a large difference to your conversion rate.

Here is a great infographic from Skilled.co on how load speed affects your website.

Thank you for reading my post and if you found it useful please share using the social media icons on the page.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.com, Foxybingo.com, Very.co.uk, partypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.

9 Tools For Getting Design Feedback For Websites

For many websites there is hardly a day goes by without a new page or updates being rolled out. Rightly or wrongly there is constant pressure to keep websites looking fresh and to add new functionality or content to improve the customer experience and increase conversions. However, from my experience of evaluating website performance one thing is guaranteed, customers will always surprise you with how they interact or don’t interact with a new page or website.

Image of lady lying on the ground next to laptop
Source: Freeimages.com

 

That killer functionality will rarely instantly take-off, if at all. Visitors will not behave as predicted on your new website and they will often complain about the changes you have made. Key metrics will drop, and though they may largely recover, some measures will never be the same as on the old page or website. In some cases this may be welcome, but often conversion rates will suffer. So what should you do to prepare yourself for the launch of the new customer experience?

 

If you can you could A/B test your new design against the existing page or website. This will confirm how your key metrics are likely to change as a result of the new design, but it won’t tell you why visitors are behaving differently. To answer these types of questions you need more qualitative feedback rather than numbers. Below are 9 tools you can use to get design feedback from customers or experts to help identify where users may be having trouble with your new customer experience.

 

  1. Criticue:

This free tool provides you with the ability to get feedback on website designs from a community of entrepreneurs, usability experts and web designers. Reviews for your website are earned by you providing feedback on other community members’ designs. For each review you submit you earn one credit and this gives you the right to request one review of your screenshot. Importantly all reviews are moderated before any credits are processed and so this minimises the potential for misuse of the community.

Image of Criticue.com homepage

2. Five Second Test (Usability Hub):

Get feedback from real people on your landing page, wireframes and mock-ups to understand people’s first impressions of your design during their initial 5 seconds of viewing your design. This helps you evaluate how intuitive your page is by understanding what a person can recall about your design based upon those first few seconds.

Price: $99 per month for access to all services.

fivesecondtest.com homepage

 

3. Loop11: 

Online usability testing with your first project free (up to 5 tasks and 2 questions). Covers over 40 languages, provides heatmaps and clickstream analysis, real-time reporting, and you can test on mobile devices.

Pricing: A Free usability test is available for new customers. Pay as you go costs $350 per project. All plans include 1,000 participants per project, unlimited tasks and questions, testing on mobile, real-time results and 24/7 email support.

The Micro plan costs $158 a month and is designed for organisations with between 1 and 10 employees, plus for non-profits and public sector clients. The SMB plan costs $410 per month and is for 11 to 100 employees. The Enterprise plan is priced at $825 per month.

Loop11.com homepage

4. Peek from User Testing:

Get a Free 5 minute video of a real person using your site. You only need to provide your name, company phone and email address and you can have up to 3 tests per month.

Peek.usertesting.com homepage

  1. Proved:

A crowd sourcing tool for getting almost instant feedback on an idea, prototype or a new product development that you want to check-out before it goes live. Feedback is normally provided within 3 to 4 hours and guaranteed within 24 hours.

Pricing: A free trial is available (English only) for up to 3 respondents for one test per account and with feedback within 48 hours. A starter plan costs $149 per test for 25 respondents and supports 11 languages. The basic plan costs $299 per test for 50 respondents and the Pro plan is priced at $499 for 100 respondents.

 

Proved.co homepage

6. Sitepoint:

A forum of web designers and developers set up specifically to give design feedback from over 350,000 registered users. Sitepoint is a media company which serves the web design and development sector by publishing articles and e-books. Free membership provides limited access to the community, but for $99 per year you can get Premium membership which gives you access to over 5,000 videos, 83 eBooks, and live Q&A and chat with experts.

Sitepoint.com premium homepage

 

7. Usabilla:

Provides insights from users through a customised feedback button for websites, apps and emails. This allows users to select the part of your website that they want to give feedback on and there are multiple targeting options.

Prices: No costs shown on the website.

Usabilla.com homepage

8. UserBob:

 Provides videos of users talking about what they think as they use your website. UserBob recruits people to visit your website. Set a scenario for the user and specify a task for them to attempt to complete. During visits respondents record their screen and voice as they think out loud about the experience. You then receive a copy of the video to learn about what users say about your site.

You decide how many users you need, what demographics match your visitors, and how long each one should spend on your website. The test is instantly made available for users to participate and you will normally have a video to review within a few hours.

Pricing: Start at just $10 for First Impressions where 10 users
will spend one minute each on your website. Users will discuss their first impressions of your website, who they think it is for and what you can do on the site. Task Completion costs $20 for 5 users who spend 4 minutes attempting to complete your task. The price of the Custom test is variable. This involves between 1 to 10 users each spending up to 8 minutes with a specific scenario and user task to complete. You may also specify user demographics for Custom tests.

Userbob.com homepage

9. WhatUsersDo: 

Get videos of users as they browse your website, app or prototype. Respondents describe their impressions as they complete agreed tasks and these are recorded together with their screens and mouse movements into online videos. UX experts then analyse and summarise into high, medium or low UX reports.

A managed service offering is available which covers the WhatUsersDo research platform, instant access to an online panel from over nine countries, lab tests and UX experts to manage research and deliver insight reports.

Pricing: Pay as you go starts form just £30 + VAT per user and
includes tag videos, ability to download videos, download clips and PDF reports (including video). Prepaid Test Pack starts from £300 + VAT and provide for more cost effective user testing than the pay as you go plan.

Prepaid plans: All plans include design and scoping support from
UX specialists, expert analysis of results, and account management and email and phone support.

The Starter plan costs £10,000 per year for 50 video test
credits (1 credit = 1 completed video). The Repeat plan costs £20,000 for 100 video credits and the Regular plan is £30,000 per year for 150 video credits. An Enterprise plan is also available with 200 video credits – price available on request.

whatusersdo.com full service usability testing

 

For other usability testing providers see my post on how to do usability testing to improve conversion and for other online customer feedback tools see my post on how to use online Voice of Customer tools to boost conversion.

Thank you for reading my post and if you found it useful please share using the social media icons on the page.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.uk and partypoker.com.  He identifies areas for improvement using a combination of approaches including web analytics, heuristic analysis, customer journey mapping, usability testing, and Voice of Customer feedback.  By  aligning each stage of the customer journey  with the organisation’s business goals this helps to improve conversion rates and revenues significantly as almost all websites benefit from a review of customer touch points and user journeys.
  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@outlook.com. You can follow Neal on Twitter @northresearch and view his LinkedIn profile.

 

How To Improve Your Website Navigation Using Tree Testing

How Good Is Your Site Navigation?

 

How easy is it for your visitors to use your navigation and find what they are looking for? Do you get complaints from users that they can’t find what they are looking for on your site?  Have you tested the findability of items in your navigation structure (often called taxonomy) with real users? If not then you might want to consider a usability technique known as tree testing or reverse card sorting.  This can significantly reduce problems with your navigation.

 

What is Tree Testing?

 

Image of a tree
Source: Freeimages.com

Tree testing evaluates the findability, labelling and organization of topics on a website. Most websites are organised into a hierarchy (a “tree”) of topics and subtopics. Tree testing is a way of identifying how easy it is for users to find individual items in this hierarchy.

However, unlike normal usability testing, tree testing is not carried out on the website itself, but instead users browse a simplified text version of the site structure. This removes the effects of the design, including visual cues, and navigational aids (e.g the internal search box) and other factors that might influence how quickly visitors find what they are looking for.

 

How Does  Tree Testing work?

 

There are 6 steps to complete a tree test:

  1. Users are given a find it task to complete (e.g. “find a portable DVD players for less than £20).
  2. Participants are shown a text list of the top-level topics of the website.
  3. Users select a heading, and then are given a list of the subtopics to choose from.
  4. Participants continue choosing topics in the tree, and can backtrack if necessary, until they find a topic that achieves their aim or they may abandon the process if they can’t find what are looking for.
  5. Users will then repeat the process a number of times with different find it tasks to test the findability of a range of items in the tree hierarchy.
  6. Test results will then be analysed once a sufficient number of users have completed the test.

 

Image of welcome screen for remote tree testing
Example of welcome screen for remote tree testing – Source: Userzoom.com

When Should You Use Tree Testing?

 

If you want to identify the root cause of navigation problems tree testing may be the best solution because it removes the effect of the design of your website and other navigational tools and aids from the equation. With no internal search to assist your user tree testing helps to isolate navigational deficiencies so that you can make the necessary improvements in your taxonomy. Tree testing is often used for:

  • Identify which items, groups or labels are causing problems for your users and set a benchmark of “findability” before you update your navigation. This might then lead you to conduct a card sorting exercise to improve the usability of your taxonomy.
  • Measure the impact of a proposed improvement or implemented change in the findability of items in your navigation structure. This will allow you to validate if the change you are making helps improve findability, makes no difference or actually creates a new problem.

Which Elements  should You Test?

For a small website with less than a hundred items you may be able to test your whole navigational structure. However, for large ecommerce websites with literally thousands of items on the site this is not practical or cost effective. In this instance you should use your web analytics to identify less common paths that can be removed from the testing process.

To decide what to test you should start by defining user’s goals and the top tasks that they need to accomplish to meet their goals. This normally involves getting both users and stakeholders to rank the main tasks so that you can identify what both groups agree on and also identify any low priority tasks that internal stakeholders wrongly believe are important to users. It may also be useful to include some items that cross departments as these create their own issues for users and items that have been identified as problematic from open card sorting or Voice of Customer research.

 

What Sample Size Do You Need?

 

As Steve Krug points out, “Testing one user is 100% better than testing none.” Whilst this is true, we have to bear in mind that with tree testing we may be dealing with a complex navigation structure and that it is important to conduct a reasonably robust test if we are to draw any reliable conclusions. The key outcome metric should be whether the user successfully found the item they were asked to locate and so this simplifies the analysis to a “Yes/No” metric.

I have outlined below the sample size required to achieve a confidence level of 95% and  assumed 50% of users find the item. I have assumed 50% of users find the item because 50% generates the highest possible margin of error and so is the worst case scenario.

Image of sample size required for specific margin of error at 95% confidence level
Sample size required for specific margin of error at 95% confidence level.

 

Generally you should limit the number of tests each participant completes to 10 depending upon how long on average  each task takes to complete.  Otherwise participants may become fatigued and they will also become e experienced users of your site structure which could influence the test results.

Should You Ask Participants Questions?

 

After each tree test it is useful to ask participants to rate the difficulty of the task. This can provide a guide to the usability of finding the item. Keep questions to a minimum but understanding how users perceive a task can add context to the test data. It can be useful for instance to compare task completion data with survey answers to identify any items where user perception does not align with task completion as this could highlight areas of particular concern.

Tree Testing Solutions:

Tree testing may not be one of the most well-known forms of usability testing, but it certainly offers the potential to help organisations resolve problems with their navigation structure. If you want to investigate tree testing further you can check out these solutions:

  1. Treejack from Optimal Workshop: One of the leaders in web-based usability testing for information architecture, Treejack  is a popular solution for evaluating website navigation without the normal visual distractions.
  2. Usability Sciences: Offers a web-based solution and will analyse the findings to determine the effectiveness of your site structure. They will provide specific recommendations on changes to your labels, structure and placement of content within your navigation hierarchy.
  3. UserZoom: Provides a web-based service to identify navigational issues early in the design process. UserZoom will analyse any attempts where participants have trouble navigating to ensure this is resolved before your site goes live. It will also give you a measure how well users can find  items in your hierarchy.

Thank you reading my post. If you found this useful please share with the social media icons on the page.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author: Neal provides digital optimisation consultancy services and has worked for  brands such as Deezer.comFoxybingo.com, Very.co.uk and partypoker.com.  He identifies areas for improvement using a combination of approaches including web analytics, heuristic analysis, customer journey mapping, usability testing, and Voice of Customer feedback.  By  aligning each stage of the customer journey  with the organisation’s business goals this helps to improve conversion rates and revenues significantly as almost all websites benefit from a review of customer touch points and user journeys.
  • Neal has had articles published on website optimisation on Usabilla.com  and as an ex-research and insight manager on the GreenBook Blog research website.  If you wish to contact Neal please send an email to neal.cole@outlook.com. You can follow Neal on Twitter @northresearch and view his LinkedIn profile.