1063844 - [onboarding] Start Pane v1.5

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Talked to Arcadio today about the full onboarding: "Get started". As I mentioned before, this is not about educating our users how to use the browser, but about telling our users what makes Firefox special and valuable to them.

Currently, we are planning to have 3 screens after the welcome screen. Each screen will be focusing on a theme. Right now, the three themes are: Customization/Personalization, Privacy, and Sync. 

And each screen will be consist of a headline, brief description, and an illustration. The users can simply swipe through to go over the screens and keep swipe left one more to get to Home Page.

We will be using the bug to track progress including IxD, Visual, and Copy. Thanks!

Comment 1

[Matej Novak [:matej]]

Hi Yuan,

Looking forward to hearing more about this and definitely happy to help.

Will you need any design help from the Creative team? Or is it just copy?

Either way, would you mind filling out a Creative Initiation Form?

https://bugzilla.mozilla.org/form.creative

That really helps us keep track and make sure it doesn't fall through the cracks.

We're also in the process of updating the Firefox for Android website using the same three major buckets, so maybe there's some text we can share and reuse between the two.

Thanks.

Comment 2

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

CC'ing Gemma here too as we've been trying to pick this up from Yuan.

Seems like we're thinking along the same lines here :)

Comment 3

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

Attachment: Screen Shot 2014-11-14 at 3.41.59 PM.png

Attaching a super early stage WIP to get some visuals in here.

Yuan started us off with a great modal dialog that allows us a platform to put some of this amazing content on. We're looking to stick with this UX while making some small improvements to it based on some feedback that was received.

Some of the aforementioned feedback were around the "intrusiveness" of this UX. Right now, we're experimenting with ways to both "pop up" but not be annoying. I want to see if we can leave the browser chrome "tappable" so that the user may easily proceed as normal if they choose to ignore the modal (see screenshots).

Looking at that (what's in the product currently) as a V1, me and Gemma are talking about a "V1.5". This will mainly be to clean up some of the visuals (so they better align with our UI), getting more telemetry in to better understand how users are responding to the current UX, doing some UR ground work around the messaging and really focusing that on the right users so this can provide even more user value.

It seems that we're on the same page about telling the Mozilla story rather than showing them how to use the product (especially around the next "screens"/steps that come next). So let's continue that content discussion in bug 1064538.

Just wanted to get this back on your radar and bring you guys up to speed on how we're planning to pick this up :)

Comment 4

[Matej Novak [:matej]]

Is this the same project as bug 1064538 (I'm guessing it is, I just want to be sure)?

Perhaps we could combine this with ongoing efforts around the 10th anniversary. That way we could reinforce the independent messaging and perhaps use the onboarding to surface the Privacy Coach, for example.

Comment 5

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

(In reply to Matej Novak [:matej] from comment #4)
> Is this the same project as bug 1064538 (I'm guessing it is, I just want to
> be sure)?

It seemed like the same thing at first, but since it wasn't marked as a DUPE, I re-purposed this to keep track of the UX work around it (while the other is more focused on content).

> Perhaps we could combine this with ongoing efforts around the 10th
> anniversary. That way we could reinforce the independent messaging and
> perhaps use the onboarding to surface the Privacy Coach, for example.

Sounds like a good idea to me! The space and the UX around it is something we'd like to be able to re-purpose for "events"/ feature announcements such as this.

Comment 6

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

Attachment: mob_FR_v2_600ms.mov

Attaching a WIP here for Chenxia. This is basically what I'm shooting for in terms of animations. The delay is set at 600 ms right now before the modal/card slides up. 

Couple quick notes: 
 - We might want to explore with slide down as the dismiss animation, I've used fade out here
 - I've chosen to leave the panel view looking disabled to notify the user that "something's coming". This helps avoid an awkward surprise. 
 - The slide up will help direct attention to the panel headers (related: bug 1021751)
 - Content is still pending from Arcadio and co, this is just dummy text :)

Chenxia: we may want to file a separate bug to track implementation, but up to you!

Comment 7

[Richard Newman [:rnewman]]

(In reply to Anthony Lam (:antlam) from comment #3)

> Some of the aforementioned feedback were around the "intrusiveness" of this
> UX. Right now, we're experimenting with ways to both "pop up" but not be
> annoying. I want to see if we can leave the browser chrome "tappable" so
> that the user may easily proceed as normal if they choose to ignore the
> modal (see screenshots).

For the Bugzilla record:

This chunk of UI (still) serves two purposes: informing the user, and also distracting them and obscuring the home panels UI so that we can quietly change it -- e.g., adding new suggested sites -- during first run.

In a sense, that means striking a balance between successfully obscuring the UI and not being intrusive. The two are rather opposed.

When adding animation and changing how much we obscure the main UI, we should try to simulate how it'll look when we add a couple of, say, dark blue suggested sites to the first two positions, somewhere between 80 and 300msec after activity start. That's what real distribution users will see, and we hope that those will be a large part of our user base!

Comment 8

[Chenxia Liu [:liuche]]

Updating this bug to reflect that this is our work to get the onboarding to a v1.5 state, from which point we can springboard to having multiple screens to our onboarding experienc.

Comment 9

[Chenxia Liu [:liuche]]

Attachment: Mock screenshot

Adding a screenshot from the current .mov mock.

Comment 10

[Chenxia Liu [:liuche]]

Adding the text specs for the welcome screen from antlam:

Title: Roboto Light 20sp #363B40
Body: Roboto Regular 14sp #777777
Button text: Roboto Regular 20sp #FFFFFF
Browsing text: Roboto Regular 14sp #0096DD

top pane height: 42%

Comment 11

[Chenxia Liu [:liuche]]

Attachment: MozReview Request: bz://1063844/liuche

Comment 12

[Chenxia Liu [:liuche]]

/r/1845 - Bug 1063844 - ViewPager for onboarding.

Pull down this commit:

hg pull review -r a6cd62a7c0614ad608397f71813feefc69eff81d

Comment 13

[Chenxia Liu [:liuche]]

The plan is to get the v1.5 with one screen out, and then during 38, move onto having multiple screens addressing customization, privacy, etc that are essentially the same format.

Just dropping the WIP commit here (comment #12), with a few more things that need to be done, in case anyone wants to pick this up while I am PTO:

- Adding scrolling in layouts - allow the full panel to be seen on smaller phones, or in landscape mode
- Round the buttons with a 9-patch
- Do a small refactor to move GeckoApp.autoHideTabs to BrowserApp - assuming GeckoApp shouldn't need to know about tabs
- Animation - Add a black (overlay) view at 40% opacity over the main browser app on first run (per video mock)
            - Don't animate the bouncing titles on first run

Timing for the animations should also be fine-tuned with antlam!

Comment 14

[Chenxia Liu [:liuche]]

https://tbpl.mozilla.org/?tree=Try&rev=4cb52b02dcfe

Comment 15

[Chenxia Liu [:liuche]]

Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

This is the onboarding/first run v1.5, which is a refresh of the UI, but with the same copy. It runs when you open Firefox with a clean profile.

Comment 16

[Chenxia Liu [:liuche]]

Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

/r/1845 - Bug 1063844 - [onboarding] Start Pane v1.5. r=mhaigh

Pull down this commit:

hg pull review -r cdca66874d800e7a4d612d881085b1dd10382dc6

Comment 17

[Chenxia Liu [:liuche]]

Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

Anthony actually has a few more small animation asks, and we'll be meeting next week when he comes to SF, so I'm going to add in some more animation and possible font/margin changes.

The structure of this won't change though, so I'm changing this to a f? request - if you have any feedback on how I structured the onboarding pager and everything, I'd like to hear it! Earlier rather than later, so I can incorporate any feedback you have.

Comment 18

[Martyn Haigh (:mhaigh)]

https://reviewboard.mozilla.org/r/1843/#review1959

General approach seems great, a few nits but nothing major.  :)

::: mobile/android/base/resources/drawable/onboarding_welcome_button_background.xml
(Diff revision 2)
> +<?xml version="1.0" encoding="utf-8"?>

Add MPL text

::: mobile/android/base/BrowserApp.java
(Diff revision 2)
> -                prefs.edit().putBoolean(PREF_STARTPANE_ENABLED, false).apply();
> +                prefs.edit().putBoolean(OnboardingPane.PREF_ONBOARDING_ENABLED, false).apply();

Does this mean that the user potentially would never see the onboarding if the first time they use Fennec it's not via a ACTION_VIEW Intent?  I'm not sure exactly how this would happen, but we have a WEB_SEARCH and a NDEF_DISCOVERABLE intent action which could load BrowserApp.

::: mobile/android/base/onboarding/OnboardingPager.java
(Diff revision 2)
> +    protected OnboardingPane.OnFinishListener listener;

change to mListener

::: mobile/android/base/onboarding/OnboardingPane.java
(Diff revision 2)
> +    private OnboardingPager pager;

pager -> mPager

::: mobile/android/base/BrowserApp.java
(Diff revision 2)
>  import android.support.v4.content.LocalBroadcastManager;

We can remove the LocalBroadcastManager import now.

Comment 19

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

(In reply to Martyn Haigh (:mhaigh) from comment #18)
> pager -> mPager

I can't find the email, but I believe we decided on the convention that new files should not use Hungarian notation so actually you should go the other way (at least in the one file I looked at):

mContext -> context

Consistency is most important though.

Comment 20

[Chenxia Liu [:liuche]]

Some specs from antlam:
Build icon: 100dpi

Title: Roboto Light 20sp #363B40
Body: Roboto Regular 14sp #777777
Button text: Roboto Regular 20sp #FFFFFF
Browsing text: Roboto Regular 14sp #0096DD

top pane height: 42%

Padding:
Above title padding: 30dpi
Title-Subtext padding: 20dpi
Subtext-Button padding: 30dpi
Button-Link padding: 20dpi

Button: 300x60dpx
text margin: 
color: #E66000
pressed: #DC5600
corner radius: 4dpi

Comment 21

[Chenxia Liu [:liuche]]

Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

/r/1845 - Bug 1063844 - [onboarding] Start Pane v1.5. r=mhaigh

Pull down this commit:

hg pull review -r 2bb0f41c79ca21fb66905f11dbbddaffad3c8ded

Comment 22

[Chenxia Liu [:liuche]]

Added the animations, some more telemetry, and did a name refactor.

Comment 23

[Chenxia Liu [:liuche]]

Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

/r/1845 - Bug 1063844 - [onboarding] Start Pane v1.5. r=mhaigh

Pull down this commit:

hg pull review -r 2bb0f41c79ca21fb66905f11dbbddaffad3c8ded

Comment 24

[Martyn Haigh (:mhaigh)]

Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

https://reviewboard.mozilla.org/r/1843/#review2493

Looks good - I like the animation.

Comment 25

[Chenxia Liu [:liuche]]

https://hg.mozilla.org/integration/fx-team/rev/eea3ec299b53

STR:
1. Have a new install, or clear all data for the app
2. Launch app directly from a launcher icon (e.g., not from a link or other app)

Onboarding should be displayed.

Comment 26

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/eea3ec299b53

Comment 28

[Chenxia Liu [:liuche]]

Attachment: MozReview Request: Bug 1063844 - [onboarding] Start Pane v1.5. r=mhaigh