Add Intro.js to create a step-by-step guide and feature introduction

[tanyapowell]

What

Add Intro.js to create a step-by-step guide and feature introduction.

When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.

Examples can be found here

How

• Install the intro.js ruby gem
• Add data-attributes (data-*) to the HTML elements that we want to add the steps/tooltips to

Examples of data-attribues

• data-intro
• data-hint
• data-step

Considerations

• Will very likely need some UX ❤️ @EChesters @rocioleon @marizoldi
• What features do we want to add steps/features intros to? @CathMollie @krissy

[CathMollie]

@tanyapowell This is great. I can advise on the features/steps - though not sure if UX ladies would rather take this on @EChesters @marizoldi. Most of the features of the Admin & Upload are settled, at least for now, though @marizoldi is designing sign-up pages so there's some dependency on #142.
Do we need basic copy for call-outs & how best to supply?

[EChesters]

This may be a good idea as we have such an international audience. Although I do not want it to be a fall back on, for bad design. An interface is like a joke - if it has to be explained it's not very good.
The only other thing that did come out of Monday's research (16th Jan), was that they hadn't read the user guide or EULA. People usually want to get stuck in and work it out for themselves.

So if we were to do this, then it would require research to see if it's helpful. Also happy to look at how this has been used and responded to.

[marizoldi]

Echoing @EChesters this will be useful to highlight the important functions (I would say no more than 4) and any hidden gestures if they exist. From a UX perspective is usually good practice to inform users of these but not expand too much as attention span is about 5sec?

[tanyapowell]

I would suggest not using this on neither the login nor the sign-up page, as both should be designed to be self-explanatory. I see this being beneficial on the upload page, especially as the form is quite long, and the page where we display all in the images in the table (can't remember what page that is off the top of my head). Particularly in the mobile version of the app I see this being helpful.

As @EChesters said, the users from the last pilot didn't even read the user guide, and to be honest, humans are lazy and less likely to read the documentation given to them.

@EChesters @marizoldi would you mind going through the app and making suggestions of where this could be useful?

[marizoldi]

I don't see any particular use of it at this stage except for the EULA. The rest of the site is self explanatory, i.e. Manage drawing, Upload drawing, view drawings. Maybe I would use it for the Upload Drawing form highlighting the EULA and informed consent requirement?

[CathMollie]

Agree with @marizoldi that the most important bit of the form is the checkbox for informed consent, so we should add a step/intro to this feature. Something like: 'Leave this box checked if you have the consent of the artist to share their drawing. Otherwise, uncheck the box. See the End User Licence & Checklist for more information'

The other feature we could call out is that not all data fields are compulsory. User is not notified of this until they try to 'complete' their submission, which is when compulsory fields display red if left empty (see example below). Should we warn about this in advance or will it be even more distracting?