FTU - first time use experience

[toolness]

This issue has been migrated from mozilla/webmaker-android#1459.

It was originally written by thisandagain on Wed Apr 01 2015 and had the following description:

Design first time use (FTU) prompts and screens. Some initial work can be seen in the UI notebook:
https://docs.google.com/a/mozillafoundation.org/presentation/d/1-BtEXs64VAnY8MGkZxkK_mncXfzkVwf15pw8371exXw/edit#slide=id.gac9169e11_24_2

• Add a tile prompt
• Edit a tile prompt
• Move a tile prompt
• Add an element prompt
• Empty project list in Make view

Blocks mozilla/webmaker-android#1456

edit: moving first launch to mozilla/webmaker-android#2353

On Wed Apr 01 2015, xmatthewx commented:

We might add Move a tile to the list. Of all the things you can do, this might be the least obvious affordance.

On Wed Apr 01 2015, thisandagain commented:

👍 Added to checklist.

On Wed May 06 2015, xmatthewx commented:

• edit text string, button string

On Tue May 12 2015, xmatthewx commented:

Goal for this heartbeat:

• revised list of mvp v1 FTU touch points **@**flukeout
• copy for each item **@**flukeout
• UI for a basic tooltip **@**vazquez
• I think that a rich FTU experience is out of scope for now ... correct me if I'm wrong.

**@**secretrobotron will drive this

On Tue May 12 2015, secretrobotron commented:

Clarification: very simple FTU experience for beta (e.g. popups like, "click here to add an new item! lol!"), not several slides of all the awesome stuff you can do (which could be part of SOW for illustrator cc **@**thisandagain).

On Tue May 12 2015, flukeout commented:

**@**secretrobotron I started some of this work previously in mozilla/webmaker-android#1565

On Wed May 20 2015, flukeout commented:

Here's a list of first time use popups with a rough sequence & conditions for when they are shown:
First Time Use Popups

**@**vazquez **@**secretrobotron **@**LauraReynal - Let me know what you guys think and if anything seems missing or is too obvious to bother having a popup for. Do you think we need one for the Remix, Share and Project Settings menu?

On Wed May 20 2015, LauraReynal commented:

👍 Great ! thanks **@**flukeout

From what I could see with the interviews here, nothing is too obvious in the document you drafted.
The major concerns are addressed, so It might be enough for beta.

Then we can think of saving / sharing etc.

On Tue May 26 2015, xmatthewx commented:

**@**flukeout - This looks like a good set to test. Do you know the status on this? Was there any conversation on whether we have the capacity to implement this?

On Fri Jun 12 2015, LauraReynal commented:

Hey Folks, now that people are actually making stuff on the app, here are more FTU to consider, which are important.

• Sign-up / sign- in / register : Most people failed to sign - in / register today.
  => there was often a few mistakes and the yellow message was generally not read/ seen. Maybe a tucker jumping and saying : You forgot your capital letter . might be more effective ? I'll let you decide.
  cc/ **@**vazquez
• People dont name their projects and never click on project settings. Can we close the loop after we teach them how to make and give them some details about name/ settings and sharing ?

cc. **@**flukeout **@**xmatthewx **@**thisandagain

On Fri Jun 12 2015, xmatthewx commented:

**@**LauraReynal - some improvements to login are in process: gentler and more informative error messages; easier password requirements.

Project naming might solve itself when people actually use Discover and Make. But it might not. I will file a separate bug so we can keep an eye on this and discuss options if necessary.

On Mon Jun 29 2015, thisandagain commented:

**@**xmatthewx **@**vazquez Is it reasonable to request that this be ready to implement by the end of the next sprint (July 17)? I'd like to be able to include this in 1.0.3.

On Mon Jun 29 2015, vazquez commented:

Just a quick note that I'm on PTO today and tomorrow, July 1st is Canada
Day and away on July 8 - 10 talking at Cascadia conference.

On Monday, June 29, 2015, Andrew Sliwinski notifications@github.com wrote:

**@**xmatthewx https://github.com/xmatthewx **@**vazquez
https://github.com/vazquez Is it reasonable to request that this be
ready to implement by the end of the next sprint? I'd like to be able to
include this in 1.0.3.

—
Reply to this email directly or view it on GitHub
mozilla/webmaker-android#1459 (comment)
.

-- [unflagged]
Ricardo Vazquez
UI Designer, Webmaker
Mozilla Foundation
**@**iamrvazquez http://twitter.com/iamrvazquez
IRC: ricardo

On Mon Jun 29 2015, xmatthewx commented:

**@**vazquez - we'll essentially have 3 weeks to revisit the FTU contextual help already designed, refine it based on latest tests, and annotate the IxD for the build.

On Mon Jun 29 2015, vazquez commented:

👍

On Monday, June 29, 2015, matthew w notifications@github.com wrote:

**@**vazquez https://github.com/vazquez - we'll essentially have 3 weeks to
revisit the FTU contextual help already designed, refine it based on latest
tests, and annotate the IxD for the build.

—
Reply to this email directly or view it on GitHub
mozilla/webmaker-android#1459 (comment)
.

-- [unflagged]
Ricardo Vazquez
UI Designer, Webmaker
Mozilla Foundation
**@**iamrvazquez http://twitter.com/iamrvazquez
IRC: ricardo

On Mon Jun 29 2015, xmatthewx commented:

Moving first-run experience to mozilla/webmaker-android#2353

On Wed Jul 01 2015, xmatthewx commented:

**@**flukeout & **@**vazquez - plan to meet next week to nail down the UI and spec IxD. Beyond the browser player, this is one of your top priorities.

On Fri Jul 10 2015, xmatthewx commented:

**@**flukeout - I saw a new spec by you on this. Can you drop a link or file here?

On Fri Jul 10 2015, xmatthewx commented:

**@**vazquez - Let's add your updated UI here.

On Fri Jul 10 2015, flukeout commented:

Here it is https://dl.dropboxusercontent.com/u/109902/tiles/ftu-editing.pdf

On Mon Jul 13 2015, vazquez commented:

The UI file is available on the Google Drive: https://drive.google.com/a/mozilla.com/file/d/0ByIoeeW0a3R_Z0puOExNTlFCOVU/view?usp=sharing

[vazquez]

Technical Review

This design is now ready for Technical Review.

(click on image to see full size)

Sketch file is available here (Google Drive): https://drive.google.com/a/mozilla.com/file/d/0ByIoeeW0a3R_Z0puOExNTlFCOVU/view?usp=sharing

[k88hudson]

Generally I think this is pretty reasonable, I think some detail is needed for situations including:

• is there a way to cancel out of the tutorial?
• are users allowed to do non-prompted actions and/or can they navigate away from the page by pressing back? if so, what happens when a user navigates back to a previous view etc.?
• is zooming/panning still allowed? if so, what happens when users pan out of view of a prompt?

[vazquez]

Tech Review @gvn :)

[xmatthewx]

Good questions @k88hudson.

• For now, the tutorial prompt can only be canceled by taking the specified action (we believe tasks are minimal enough)
• No other actions should be disabled. You can read @vazquez's notes about when things appear and disappear quite literally. Prompts should reappear if they haven't been completed.
• Zooming/panning -- good point -- This could create a problem. I vote that we try it and see how it feels. Run a remote test.

[gvn]

I'm a little confused: Do the bubbles re-appear in certain cases for your first project, or do they always go away after you perform their parent action?

[xmatthewx]

When parent action is performed, they should go away and stay away.

If the parent action isn't performed, but you leave the view or project, prompts should still be there when you return to the editor. That's what I meant when I said reappear. Nice to have: repeat any reveal animation.

[xmatthewx]

If we remove the pencil from the project view, in favor of tap page to edit (#445) the first item above will need to change. "Tap page to edit" will float above the center page.

edit: clarified my comment

[k88hudson]

@xmatthewx is this supposed to be in 1.4.0?

[xmatthewx]

Moving this to the backlog. We're pursuing a new direction for FTU for share/remix (#575) and discover (#583).

[cassiemc]

Perhaps a useful resource. http://emptystat.es/