[UX] New User Tour Overlay UX Specs

VERIFIED FIXED in Firefox 55

Status

()

Firefox
General
P1
normal
VERIFIED FIXED
8 months ago
4 months ago

People

(Reporter: nicoleyee, Assigned: verdi)

Tracking

(Blocks: 2 bugs)

54 Branch
Firefox 55
Points:
---
Dependency tree / graph
Bug Flags:
qe-verify -

Firefox Tracking Flags

(relnote-firefox ?)

Details

(Whiteboard: [photon-onboarding] [ux])

Attachments

(4 attachments, 1 obsolete attachment)

Comment hidden (empty)
(Reporter)

Updated

8 months ago
Assignee: nobody → mverdi
(Reporter)

Updated

8 months ago
Blocks: 1354686
(Reporter)

Updated

8 months ago
Summary: Tour Overlay Specs → Tour Overlay UX Specs

Updated

8 months ago
Blocks: 1357665

Updated

8 months ago
Summary: Tour Overlay UX Specs → [UX] Tour Overlay UX Specs

Updated

8 months ago
Depends on: 1354046

Updated

8 months ago
Blocks: 1354046
No longer depends on: 1354046

Updated

8 months ago
Whiteboard: [photon-onboarding]

Updated

8 months ago
Status: NEW → ASSIGNED

Updated

8 months ago
Target Milestone: --- → Firefox 55
(Assignee)

Updated

8 months ago
Summary: [UX] Tour Overlay UX Specs → [UX] New User Tour Overlay UX Specs
(Assignee)

Comment 1

8 months ago
Current spec is here - https://mozilla.invisionapp.com/share/4MBDUMS5W#/228511972_Overview
(Assignee)

Updated

8 months ago
Blocks: 1360378
(Assignee)

Updated

8 months ago
Depends on: 1360474

Updated

8 months ago
Whiteboard: [photon-onboarding] → [photon-onboarding] [ux]

Updated

8 months ago
Flags: qe-verify-

Updated

8 months ago
Priority: -- → P1

Comment 2

8 months ago
Created attachment 8864427 [details]
try_onboarding_visual_20170504.mov

Comment 3

8 months ago
(In reply to Fischer [:Fischer] from comment #2)
> Created attachment 8864427 [details]
> try_onboarding_visual_20170504.mov
Hi Verdi

Tried the visual assets provided today on the con-call meeting[1].
Please see attachment 8864427 [details] for the trial demo.

Some questions needs your help:
- The little fox icon (used to toggle the overlay) on the top-left corner of about:newtab is not provided.
- The little "x" icon on the top-right of the overlay is not provided.
- The large images inside the right content part of the overlay are all blue. Is this what we want?
- The small navigation icons on the left side of the overlay are all blue, only turning into colorful ones when mouse hovering? Is this what we want? (for example, in the visual assets, we see icons_private-hover.svg is colored and icons_privater.svg is all blue)


[1] https://drive.google.com/drive/folders/0B-WT7MpBRN0NUVRoU051YUdkdFU

Thank you
Flags: needinfo?(mverdi)
(Assignee)

Comment 4

8 months ago
(In reply to Fischer [:Fischer] from comment #3)

> - The little fox icon (used to toggle the overlay) on the top-left corner of
> about:newtab is not provided.
> - The little "x" icon on the top-right of the overlay is not provided.

Correct. I still owe you those.

> - The large images inside the right content part of the overlay are all
> blue. Is this what we want?

Yes this is correct. The style has been updated but I haven't had a chance to update the spec on invision.

> - The small navigation icons on the left side of the overlay are all blue,
> only turning into colorful ones when mouse hovering? Is this what we want?
> (for example, in the visual assets, we see icons_private-hover.svg is
> colored and icons_privater.svg is all blue)

Let me follow up with you about this part tomorrow.
(Assignee)

Comment 5

7 months ago
I consulted with Stephen and Sean and I updated the spec though the final icons and illustrations are still pending. The main changes are:
*Updated the navigation to look and work more like the navigation in the new preferences
*Now using a smaller 960px wide design
*Removed responsive breakpoints and compact navigation

https://mozilla.invisionapp.com/share/4MBDUMS5W#/228511972_Overview
Flags: needinfo?(mverdi)
If it is confirmed not to have responsive design, we may close bug 1358790 and ongoing works will not be checked in.
sorry, it's bug 1358970.
(Assignee)

Comment 8

7 months ago
(In reply to KM Lee [:rexboy] from comment #6)
> If it is confirmed not to have responsive design, we may close bug 1358790
> and ongoing works will not be checked in.

Yes, confirmed - sorry about that.

Comment 9

7 months ago
(In reply to Verdi [:verdi] from comment #4)
> (In reply to Fischer [:Fischer] from comment #3)
> 
> > - The little fox icon (used to toggle the overlay) on the top-left corner of
> > about:newtab is not provided.
> > - The little "x" icon on the top-right of the overlay is not provided.
> 
> Correct. I still owe you those.
> 
Hi Verdi,
The little fox icon was provided.
The little "x" icon on the top-right of the overlay is not provided yet.
Thanks.
Flags: needinfo?(mverdi)
(Assignee)

Comment 10

7 months ago
(In reply to Fischer [:Fischer] from comment #9)
> The little "x" icon on the top-right of the overlay is not provided yet.

Hey Fischer,
Let's just use a regular Firefox close button like in a sidebar or tab.
Flags: needinfo?(mverdi)
(In reply to Verdi [:verdi] from comment #5)
> https://mozilla.invisionapp.com/share/4MBDUMS5W#/228511972_Overview

I was under the impression that the 6 features to show-off are the things we want to ship for 56. It looks like per our meeting today this is not the case. Verdi, please tell us the items to present for 56. This does not has to be come with the final wording and illustration (but that needs to come soon also, due next week).

Rex, please re-align your scope/break-down based on the updated information.
Flags: needinfo?(rexboy)
Flags: needinfo?(mverdi)
The above comment was incorrect. the 6 features to show off on 56 are indeed the ones listed on the spec. Want to add/remove for 57 it still under discussion here though: https://docs.google.com/document/d/1TyBy9PewBCHoBPMHLKIS7guwlRypoh96caN7vkWXyP8/edit

Cancelling ni since verdi explained have confirmed this with me offline.
Flags: needinfo?(mverdi)
Fred and I just opened working bugs so clearing needinfo.
Flags: needinfo?(rexboy)
(Assignee)

Comment 14

6 months ago
important
Final Copy for the Firefox 56 version of the tour:

The Fox icon on each notification should say (in the word bubble), "New to Firefox? See what you can do!"

Overlay panel headline: Let’s get started

[1: Private Browsing]
Navigation link: Private Browsing
Headline: A little privacy goes a long way.
Body: Browse the internet without saving your searches or the sites you visited. When your session ends, the cookies disappear from Firefox like they were never there.
Button: Show Private Browsing in Menu

[2: Add-ons]
Navigation link: Add-ons
Headline: Add more functionality.
Body: Add-ons expand Firefox’s built-in features, so Firefox works the way you do. Compare prices, check the weather or express your personality with a custom theme.
Button: Show Add-ons in Menu

[3: Customize]
Navigation link: Customize
Headline: Do things your way.
Body: Drag, drop, and reorder Firefox’s toolbar and menu to fit your needs. You can even select a compact theme to give websites more room.
Button: Show Customize in Menu

[4: Search]
Navigation link: One-click Search
Headline: Find the needle or the haystack.
Body: Having a default search engine doesn’t mean it’s the only one you use. Pick a search engine or a site, like Amazon or Wikipedia, to search on the fly. 
Button: Show One-Click Search

[5: Default Browser]
Navigation link: Default Browser
Headline: We’re there for you.
Body: Love Firefox? Set it as your default browser. Then when you open a link from another application, Firefox has you covered. 
Button if OS = Windows 7: Make Firefox Your Default Browser
Button for all other OSs: Open Default Browser Settings

[6: Sync]
Navigation link: Firefox Sync
Headline: Sync brings it all together.
Body: Access your bookmarks and passwords on any device. You can even send a tab from your laptop to your phone! Better yet, you can choose what you sync and what you don't.
(Assignee)

Comment 15

6 months ago
(In reply to Verdi [:verdi] from comment #14)

> The Fox icon on each notification should say (in the word bubble), "New to Firefox? See what you can do!"

That's meant to be the copy for the speech bubble for the Fox icon on about:home, about:newtab, Activity Stream.

Comment 16

6 months ago
(In reply to Verdi [:verdi] from comment #14)
> Final Copy for the Firefox 56 version of the tour:
> 
> The Fox icon on each notification should say (in the word bubble), "New to
> Firefox? See what you can do!"
> 
> Overlay panel headline: Let’s get started
> 
> [1: Private Browsing]
> Navigation link: Private Browsing
> Headline: A little privacy goes a long way.
> Body: Browse the internet without saving your searches or the sites you
> visited. When your session ends, the cookies disappear from Firefox like
> they were never there.
> Button: Show Private Browsing in Menu
> 
> [2: Add-ons]
> Navigation link: Add-ons
> Headline: Add more functionality.
> Body: Add-ons expand Firefox’s built-in features, so Firefox works the way
> you do. Compare prices, check the weather or express your personality with a
> custom theme.
> Button: Show Add-ons in Menu
> 
> [3: Customize]
> Navigation link: Customize
> Headline: Do things your way.
> Body: Drag, drop, and reorder Firefox’s toolbar and menu to fit your needs.
> You can even select a compact theme to give websites more room.
> Button: Show Customize in Menu
> 
> [4: Search]
> Navigation link: One-click Search
> Headline: Find the needle or the haystack.
> Body: Having a default search engine doesn’t mean it’s the only one you use.
> Pick a search engine or a site, like Amazon or Wikipedia, to search on the
> fly. 
> Button: Show One-Click Search
> 
> [5: Default Browser]
> Navigation link: Default Browser
> Headline: We’re there for you.
> Body: Love Firefox? Set it as your default browser. Then when you open a
> link from another application, Firefox has you covered. 
> Button if OS = Windows 7: Make Firefox Your Default Browser
> Button for all other OSs: Open Default Browser Settings
> 
> [6: Sync]
> Navigation link: Firefox Sync
> Headline: Sync brings it all together.
> Body: Access your bookmarks and passwords on any device. You can even send a
> tab from your laptop to your phone! Better yet, you can choose what you sync
> and what you don't.
Hi Verdi,
I think these strings are also applied to the notification bar, headline, body, button title, right?
If yes, for [6: Sync] what would be button title on the sync notification bar?
Thanks
Flags: needinfo?(mverdi)

Comment 17

6 months ago
(In reply to Fischer [:Fischer] from comment #16)
> (In reply to Verdi [:verdi] from comment #14)
> > Final Copy for the Firefox 56 version of the tour:
> > 
> > The Fox icon on each notification should say (in the word bubble), "New to
> > Firefox? See what you can do!"
> > 
> > Overlay panel headline: Let’s get started
> > 
> > [1: Private Browsing]
> > Navigation link: Private Browsing
> > Headline: A little privacy goes a long way.
> > Body: Browse the internet without saving your searches or the sites you
> > visited. When your session ends, the cookies disappear from Firefox like
> > they were never there.
> > Button: Show Private Browsing in Menu
> > 
> > [2: Add-ons]
> > Navigation link: Add-ons
> > Headline: Add more functionality.
> > Body: Add-ons expand Firefox’s built-in features, so Firefox works the way
> > you do. Compare prices, check the weather or express your personality with a
> > custom theme.
> > Button: Show Add-ons in Menu
> > 
> > [3: Customize]
> > Navigation link: Customize
> > Headline: Do things your way.
> > Body: Drag, drop, and reorder Firefox’s toolbar and menu to fit your needs.
> > You can even select a compact theme to give websites more room.
> > Button: Show Customize in Menu
> > 
> > [4: Search]
> > Navigation link: One-click Search
> > Headline: Find the needle or the haystack.
> > Body: Having a default search engine doesn’t mean it’s the only one you use.
> > Pick a search engine or a site, like Amazon or Wikipedia, to search on the
> > fly. 
> > Button: Show One-Click Search
> > 
> > [5: Default Browser]
> > Navigation link: Default Browser
> > Headline: We’re there for you.
> > Body: Love Firefox? Set it as your default browser. Then when you open a
> > link from another application, Firefox has you covered. 
> > Button if OS = Windows 7: Make Firefox Your Default Browser
> > Button for all other OSs: Open Default Browser Settings
> > 
> > [6: Sync]
> > Navigation link: Firefox Sync
> > Headline: Sync brings it all together.
> > Body: Access your bookmarks and passwords on any device. You can even send a
> > tab from your laptop to your phone! Better yet, you can choose what you sync
> > and what you don't.
> Hi Verdi,
> I think these strings are also applied to the notification bar, headline,
> body, button title, right?
> If yes, for [6: Sync] what would be button title on the sync notification
> bar?
> Thanks
OK, ignore me, just saw the bug 1357668 comment 4. Those are strings for the notification bar.
Flags: needinfo?(mverdi)
(In reply to Verdi [:verdi] from comment #14)
> [4: Search]
> Navigation link: One-click Search
> Headline: Find the needle or the haystack.
> Body: Having a default search engine doesn’t mean it’s the only one you use.
> Pick a search engine or a site, like Amazon or Wikipedia, to search on the
> fly. 

Not all languages ship with Amazon pre-installed, and maybe Amazon is not even relevant in that region. What should we suggest localizers to do here?
Flags: needinfo?(mverdi)

Comment 19

6 months ago
Michael, I can't found the checked sign icon (when we marked the tour as completed) and the related UI spec (how this icon should show on the tour menu), could you help provide it?
(In reply to Francesco Lodolo [:flod] from comment #18)
> Not all languages ship with Amazon pre-installed, and maybe Amazon is not
> even relevant in that region. What should we suggest localizers to do here?

May I suggest adding a simple LOCALIZATION NOTE here asking the localizer to "translate" it to whatever site on their search engine list? It's a duplication of the list we ship but I guess we don't add/remove preloaded search engines that much?
(In reply to Tim Guan-tin Chien [:timdream] (please needinfo) from comment #20)
> (In reply to Francesco Lodolo [:flod] from comment #18)
> > Not all languages ship with Amazon pre-installed, and maybe Amazon is not
> > even relevant in that region. What should we suggest localizers to do here?
> 
> May I suggest adding a simple LOCALIZATION NOTE here asking the localizer to
> "translate" it to whatever site on their search engine list? It's a
> duplication of the list we ship but I guess we don't add/remove preloaded
> search engines that much?

I'd prefer a clear indication of what can and cannot be used in this context. We do remove ecommerce search engines, especially when they're not relevant.
(Assignee)

Comment 22

6 months ago
(In reply to Francesco Lodolo [:flod] from comment #18)

(In reply to Tim Guan-tin Chien [:timdream] (please needinfo) from comment #20)
> (In reply to Francesco Lodolo [:flod] from comment #18)
> > Not all languages ship with Amazon pre-installed, and maybe Amazon is not
> > even relevant in that region. What should we suggest localizers to do here?
> 
> May I suggest adding a simple LOCALIZATION NOTE here asking the localizer to
> "translate" it to whatever site on their search engine list? It's a
> duplication of the list we ship but I guess we don't add/remove preloaded
> search engines that much?

The idea of mentioning "Amazon" (and Wikipedia) is that they are examples of things you can search that are not search "engine" (e.g. Google, Bing, Yahoo, Yandex, Baidu, etc.). For places where we don't ship Amazon we can replace that with the name of another site we do ship. If there is only one site that we ship in a region we can say, "Pick a search engine or a site, like [name of site], to search on the fly."
Flags: needinfo?(mverdi)
(Assignee)

Comment 23

6 months ago
Created attachment 8876932 [details]
nav-icons.zip

Here are the icons and the checkmark for the overlay navigation in svg format.

Updated

6 months ago
Blocks: 1357046
(Assignee)

Comment 24

6 months ago
Created attachment 8876986 [details]
overlay-illustrations.zip

Here are the 6 illustrations for the overlay
(Assignee)

Comment 25

6 months ago
Created attachment 8877008 [details]
sync-spec.png

The Sync panel is laid out differently than the others because it contains a form. A spec for that is attached.

Comment 26

6 months ago
hi Michael,

if all content/strings/illustrations are lockdown, can you resolve fix this bug? or still anything missing?

thank you very much
Flags: needinfo?(mverdi)
(Assignee)

Comment 27

6 months ago
Created attachment 8878706 [details]
overlay-illustrations-final.zip

Here's the final illustrations.
Attachment #8876986 - Attachment is obsolete: true
Flags: needinfo?(mverdi)
(Assignee)

Updated

6 months ago
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED

Updated

6 months ago
Blocks: 1374573

Comment 28

4 months ago
Release Note Request (optional, but appreciated)
[Why is this notable]:New onboarding experience
[Affects Firefox for Android]:No
[Suggested wording]:Added onboarding tour for users new to Firefox
[Links (documentation, blog post, etc)]:N/A
relnote-firefox: --- → ?
Marking as verified since the specs are in comment 27.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.