1147070 - On-boarding experience for Firefox iOS

Status: RESOLVED FIXED

(Firefox for iOS :: General, defect)

Description

[Darrin Henein [:darrin]]

Would like to have a simple Welcome Screen to introduce a few features. Can be simple, like a modal carousel which users can dismiss or swipe through.

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: First Run V1 - Slide [e-mail]

Attaching a slide of the WIP. 

General framework - Image, copy, call-to-action, dismiss button.

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Note: we should also look to measure how far users get in these 3 slides, duration spent perhaps, etc (if possible)

Comment 3

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Stefan,

any gauge of how much work something like this might be?

http://invis.io/VM2P5WDWF

Comment 4

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Anthony, this is pretty simple to put together.

My first thought is: how do we deal with the different screen sizes?

Comment 5

[Darrin Henein [:darrin]]

I wonder if we want to also try a "card" approach, where that same UI appears in a floating modal over the empty tab. This may scale better to iPad, etc?

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: First Run V1 - Spec.png

Attaching spec from my convo with Stefan, still need to attach those header images. 

Stefan raised a good point, on smaller phones like the 4/4S, we might have to fix the height of the white area and let the green area (header image) resize dynamically.

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: Slides.zip

Attaching illustrations

Comment 8

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

^

Comment 9

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Thanks Anthony. Those images look good.

Comment 10

[Darrin Henein [:darrin]]

Few comments:

Slide 1 – We aren't using the double square tab icon on iOS, its just a rounded square right now. This should probably reflect that.

Slide 3 – Do we want this device to look more like an iPhone?

Comment 11

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Attachment: PR: https://github.com/mozilla/firefox-ios/pull/363

Comment 12

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Attachment: PR: https://github.com/mozilla/firefox-ios/pull/369

Comment 13

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

This is pretty complete now.

Darrin, I have moved most constants into the IntroViewControllerUX struct so that you can mess with them. There are still a few small things hardcoded though.

The one thing missing is opening the Firefox Accounts dialog when you press 'Login to Firefox Accounts'. I need some feedback about what happens then. This is what I suggest:

* User taps "Sign in to Firefox"
* The On-boarding dialog is replaced with a dialog that shows the FxA login screen
* When logging in succesfully or cancelling, the Login screen disappears
* The on-boarding dialog does not come back. You are immediately back into the browser

Let me know if this sounds right.

Comment 14

[Darrin Henein [:darrin]]

This login flow sounds right to me. Anthony, any comments you want to make or is this fine?

Comment 15

[Darrin Henein [:darrin]]

Stefan, how easy/hard to add a button in Settings to re-popup the tour?

Comment 16

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Darrin, do you want a button to just open the same tour again or a 'reset the tour so i see it next time i open firefox' ? (Both are relatively simple)

Comment 17

[Darrin Henein [:darrin]]

Just 'show the same tour again' immediately. Just will be nice to have something to point people to if they skip it or have questions etc.

Thanks!

Comment 18

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Darrin I think this is in pretty good shape. In the last changes to the PR i also included a Support section in the Settings that has a 'Show introduction again' row.

Let me know what you think. Specially how the controllers transition. Our view controller 'stack' is pretty complicated and it is really challenging to show or animate things in the right order.

Comment 19

[Darrin Henein [:darrin]]

I think this is an AWESOME start :) One nit I'd propose fixing before we land is making the whole tour view swipable (first thing I did was try to swipe the bottom text area to continue). Keep the arrow buttons functional.

UX can then get feedback and tweak on our own, likely.

"Show introduction again" should maybe become "Show Tour", but I'll see what desktop/other platforms call this on-boarding experience.

Comment 20

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

I think I want to land this with the right strings (Show Tour?) and the swiping behaviour you describe.

Darrin, when you swipe the whole thing. What would move? The whole top and bottom part? What happens to the arrows? Would they scroll together with the other content?

And then tapping the arrows will simply trigger a scroll to the left or right?

That means I remove the cross fading that is happening now in the bottom part?

Comment 21

[Darrin Henein [:darrin]]

Follow up discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1162068

Comment 22

[Darrin Henein [:darrin]]

Comment on attachment 8596563 [details] [review]
PR: https://github.com/mozilla/firefox-ios/pull/369

Will file follow up bugs, ship it.

Comment 23

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Merged with r=darrin

Comment 24

[Aaron Train [:aaronmt]]

"Connect to Firefox Accounts anywhere you want."

What does anywhere mean?

Comment 25

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Aaron Train [:aaronmt] from comment #24)
> "Connect to Firefox Accounts anywhere you want."
> 
> What does anywhere mean?

Copy TBD :)

Comment 26

[Matej Novak [:matej]]

Copy suggestions:

[SCREEN 1]

Browse multiple Web pages at the same time with tabs.


[SCREEN 2]

Personalize your Firefox just the way you like in Settings.


[SCREEN 3]

Connect Firefox everywhere you use it.

Sign in to Firefox

Comment 27

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Attachment: IntroScreens.pdf

For the localizers. This PDF contains screenshots of all the screens in the introduction.