[onboarding] Start Pane v1.5

RESOLVED FIXED in Firefox 38

Status

()

defect
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: ywang, Assigned: liuche)

Tracking

(Blocks 1 bug)

unspecified
Firefox 38
x86
Android
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments, 1 obsolete attachment)

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!
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.
(Assignee)

Updated

5 years ago
Blocks: firstrun
(Assignee)

Updated

5 years ago
Blocks: onboarding
(Assignee)

Updated

5 years ago
No longer blocks: firstrun
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 :)
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 :)
Flags: needinfo?(Mnovak)
Summary: [Onboarding] Get started content development (UX+Copy) → [Onboarding] Get started (UX)
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.
Flags: needinfo?(Mnovak)
(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.
Posted video 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!
Flags: needinfo?(liuche)
(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!
(Assignee)

Comment 8

4 years ago
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.
Flags: needinfo?(liuche)
Summary: [Onboarding] Get started (UX) → [onboarding] Start Pane v1.5
(Assignee)

Comment 9

4 years ago
Posted image Mock screenshot
Adding a screenshot from the current .mov mock.
(Assignee)

Updated

4 years ago
Assignee: nobody → liuche
(Assignee)

Comment 10

4 years ago
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%
Status: NEW → ASSIGNED
(Assignee)

Comment 11

4 years ago
(Assignee)

Comment 12

4 years ago
/r/1845 - Bug 1063844 - ViewPager for onboarding.

Pull down this commit:

hg pull review -r a6cd62a7c0614ad608397f71813feefc69eff81d
(Assignee)

Comment 13

4 years ago
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!
QA Contact: cristina.madaras
(Assignee)

Comment 15

4 years ago
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.
Attachment #8542924 - Flags: review?(mhaigh)
Attachment #8542924 - Flags: feedback?(michael.l.comella)
(Assignee)

Updated

4 years ago
Attachment #8542924 - Flags: review?(mhaigh)
Attachment #8542924 - Flags: feedback?(michael.l.comella)
(Assignee)

Comment 16

4 years ago
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
(Assignee)

Updated

4 years ago
Attachment #8542924 - Flags: review?(mhaigh)
Attachment #8542924 - Flags: feedback?(michael.l.comella)
(Assignee)

Comment 17

4 years ago
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.
Attachment #8542924 - Flags: review?(mhaigh)
Attachment #8542924 - Flags: feedback?(michael.l.comella)
Attachment #8542924 - Flags: feedback?(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.
Attachment #8542924 - Flags: feedback?(mhaigh) → feedback+
(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.
(Assignee)

Comment 20

4 years ago
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
(Assignee)

Comment 21

4 years ago
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
Attachment #8542924 - Flags: feedback+
(Assignee)

Comment 22

4 years ago
Added the animations, some more telemetry, and did a name refactor.
(Assignee)

Comment 23

4 years ago
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
Attachment #8542924 - Flags: review?(mhaigh)
Comment on attachment 8542924 [details]
MozReview Request: bz://1063844/liuche

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

Looks good - I like the animation.
Attachment #8542924 - Flags: review?(mhaigh) → review+
(Assignee)

Comment 25

4 years ago
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.
Target Milestone: --- → Firefox 38
https://hg.mozilla.org/mozilla-central/rev/eea3ec299b53
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Blocks: 1132054
(Assignee)

Updated

4 years ago
No longer depends on: 1128431

Updated

4 years ago
Depends on: 1154980
(Assignee)

Comment 27

4 years ago
Attachment #8542924 - Attachment is obsolete: true
Attachment #8618300 - Flags: review+
You need to log in before you can comment on or make changes to this bug.