Loading indicators in wizards

We’ve optimised a lot of wizards and decision trees.  Getting more users through them.  Getting more users to convert at the end of them.  Particularly lead generation sites.

We’ve shared a tactic below which we’ve found to be effective in getting more users through that final zero-moment-of-truth stage of a wizard.  I.e. getting more users to commit to converting.  That doesn’t mean to say that the below is always going to work on every website/app, on every user.  You should always do your own qualitative research to see how viable these are, and how big an opportunity exists at that final stage.

What is a wizard?

A journey on a site or app which asks the user a series of questions, in order to a) qualify them before a conversion b) recommend a product / action based on those answers c) warm them up before asking them to convert.

E.g. An energy supplier site, a wizard or decision tree will ask users about their location, energy type, property type, before providing an outcome/quote, and asking them to convert.  Just like the above image from Bulb (which is one of our favourite examples of a decision tree)

E.g. A lead generation site, like an accident claim site, might ask users about their claim details before asking them to complete a form:

What is a loading indicator?

A visual representation of content loading.  Something to indicate to the user that content is being prepared.

They can look basic like this:

Or animated like this:

Or this:

Using them on wizards

We’ve seen 10-15% uplift on conversion completion when a loading indication stage is used just before the conversion stage.  Particularly on lead generation sites.  I.e. users have been 10-15% more likely to complete a form, after viewing a loading indicator following a wizard journey:

After extensive user testing on them, we’ve found that these uplifts occur because users feel that their time, and inputs, have been considered by a site or app.  If forms and outcomes appear too abruptly, they make users feel like the previous questions were token / less valuable.

Just inserting them isn’t enough though.  We’ve found that there are 4 principles to make them effective:

#1 Give a purpose

Tell the user what is happening.  E.g. “we’re just finding the best product for you”

#2 Give a time indication

E.g. “This won’t take long. Just 10 seconds or so“.  Don’t mislead users here.  Too short = risk of users abandoning suspecting a problem.  Too long = risk of time-sensitive users abandoning anyway.

#3 Remind users of benefits

You have a selling opportunity here.  Promote the reasons why users should convert/commit on the next screen.

#4 Animate carefully

Don’t use something which could imply an error.  Don’t use something which is over-designed and doesn’t indicate that content is loading.