Design needed for "tool tips"

[jesicarson]

Andrea to work on research of precedents and come up with a look and feel for ppedia to review with Jesi. Could be a full click through tutorial, could be hover on certain elements to reveal tips, etc.

J&A to come up with a list of what elements should have tool tips (and text needed for them) here:

• [ ] Quick submit button: "Add a case, method or organization"

• [ ] Edit button: "Edit or add data to this case/ method/ organization"

• [ ] Search: "For advanced search options see [link to help faq about search syntax]"

etc...

[andreadelrio]

I've found some alternatives for this: tooltips (that are less intrusive) and feature tours (that take more of a centre stage e.g. lightbox).

Tooltips example

Feature tour - lightbox

Hybrid: tooltips with multiple steps (slider)

Some options to implement on the tech side: http://kushagragour.in/lab/hint/ http://introjs.com/ http://bootstraptour.com/ https://gilbarbara.github.io/react-joyride/

[jesicarson]

Cool! Can you post links to those examples so I can go through the experiences live? On first glance the hybrid option seems to make sense. I'm curious what triggers the tool tips to pop up in option 1.

[andreadelrio]

For the first two I only have screenshots that I took from this article https://www.appcues.com/blog/the-5-best-walkthrough-examples First site is https://www.getflow.com/ The other one is https://inbox.google.com/?pli=1. I can create an account in Flow to see how their tooltips work.

For the hybrid option you can look here: http://introjs.com/ (click 'Demo') https://gilbarbara.github.io/react-joyride/

[jesicarson]

Andrea and I like react joyride. She's going to research implementation and mockup the quick submit button using this text:

"Clicking quick submit allows you to publish a case, method or organization in minutes, or you can also submit a full entry here."

Order of the tour would likely be

1. search
2. sort results by cases, methods, orgs
3. quick submit

[andreadelrio]

@jesicarson Here are some options, what do you think?

[jesicarson]

Nice! I like the top one better without the extra red line. You decided to do the dark background, or is that part of the built in joyride package?

[andreadelrio]

@jesicarson It's part of Joyride and can be disabled if needed.

[jesicarson]

Well, since your initial thought was to not have the dark background, perhaps try a quick mock of that and we can compare. Would also be good to see the little notifyer thingy, or show how you envision users being prompted to take the tour. Also if it's not a first time visitor, can we make sure the tour doesn't interrupt their session? And, we should consider where a user can go to find the tour again once it's been closed (maybe in the help side bar?)

[andreadelrio]

Here's the version with no dark overlay.

However, when you see the demo live, having a dark overlay really adds to the tour (it's like the camera pans to the spot we want to highlight), I can show you in our next meeting.

The notifier is this beacon which is animated.

I need to check how we are handling users to see how we would disable this. And also figure out how we would trigger the tour at the user's request. I like the help sidebar idea.

[jesicarson]

I agree, the dark is much more clear and directs you to the feature more clearly. I like it! Very important to figure out the interaction with return users. Looking forward to seeing this!

I'll keep working on some text for the rest of the features in the copy deck under the help section, and I'll let you know here when it's ready to go.

[jesicarson]

@andreadelrio does the feature tour allow you to open other pages during the tour? ie: clicking quick sumbit, would we be able to show people the actual page that comes up, and then what the form looks like? Another example would be the reader view of a case - if they're doing the tour from the homepage, we want them to know how to edit existing content, but how do they get there?

[jesicarson]

There's some new text for the feature tour in the copy deck that will hopefully let you see how I got to that last question. Thanks!

[jesicarson]

Just for reference:

[jesicarson]

@andreadelrio

Notes from Nov 20 D&T meeting:

• added a few new tips
• changes in copy deck highlighted yellow

[jesicarson]

@andreadelrio is going to check if the start tour button in the help menu can be triggered based on the page you are on.

[jesicarson]

@andreadelrio is going to make an invisible element to target the feedback button (usersnap) as a work around.

[jesicarson]

Update @andreadelrio :

• the show tour button will redirect to the homepage, and if the user is in an edit form clicking show tour would trigger the warning about unpublished data.
• Remove internal tours (ie on case reader or edit forms)

[jesicarson]

User Feedback: I'd be in favour of a single popup after 1-2 minutes spent on the site with a really short tagline, button to login/signup (with social media signin/up options), and a newsletter tick-box.

[jesicarson]

example (this popped up after about 30 seconds of visiting the everyday democracy site):

[jesicarson]

@ascott Here's the old issue for the feature tour that Andrea built. As noted above, text for the tour was drafted in the copy deck, but i'll make a new doc. let me know if you want to keep using this issue or make a new one in API for this.

I was able to pull some screenshots from the old testing site a while back too, so here's where we were at with the visual design:

This screenshot shows the red beacon, which had a sort of pulse animation on it, and would come up for new visitors only:

This shows the dark background and modal popup with arrow pointing to the feature that was identified by the beacon (not sure the arrow will work with all features, placement wise, though):

This shows how we envisioned users bringing back the tour if they had closed it, finding it in the help & contact menu:

[jesicarson]

Saw this prompt to do a tutorial on Github today, we could think about specific tutorials, push to contribution guidelines, teaching materials, collections, etc...

[jesicarson]

also this: https://introjs.com/