1354707 - [UX] New User Tour Overlay UX Specs

Status: VERIFIED FIXED

(Firefox :: General, enhancement, P1)

Comment 1

[Verdi [:verdi] Best to slack me]

Current spec is here - https://mozilla.invisionapp.com/share/4MBDUMS5W#/228511972_Overview

Comment 2

[Fischer [:Fischer]]

Attachment: try_onboarding_visual_20170504.mov

Comment 3

[Fischer [:Fischer]]

(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

Comment 4

[Verdi [:verdi] Best to slack me]

(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.

Comment 5

[Verdi [:verdi] Best to slack me]

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

Comment 6

[KM Lee [:rexboy] (inactivate after Sep. 22)]

If it is confirmed not to have responsive design, we may close bug 1358790 and ongoing works will not be checked in.

Comment 7

[KM Lee [:rexboy] (inactivate after Sep. 22)]

sorry, it's bug 1358970.

Comment 8

[Verdi [:verdi] Best to slack me]

(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

[Fischer [:Fischer]]

(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.

Comment 10

[Verdi [:verdi] Best to slack me]

(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.

Comment 11

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(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.

Comment 12

[Tim Guan-tin Chien [:timdream] (please needinfo)]

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.

Comment 13

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Fred and I just opened working bugs so clearing needinfo.

Comment 14

[Verdi [:verdi] Best to slack me]

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.

Comment 15

[Verdi [:verdi] Best to slack me]

(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

[Fischer [:Fischer]]

(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

Comment 17

[Fischer [:Fischer]]

(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.

Comment 18

[Francesco Lodolo [:flod]]

(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?

Comment 19

[[e-mail]]

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?

Comment 20

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(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?

Comment 21

[Francesco Lodolo [:flod]]

(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.

Comment 22

[Verdi [:verdi] Best to slack me]

(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."

Comment 23

[Verdi [:verdi] Best to slack me]

Attachment: nav-icons.zip

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

Comment 24

[Verdi [:verdi] Best to slack me]

Attachment: overlay-illustrations.zip

Here are the 6 illustrations for the overlay

Comment 25

[Verdi [:verdi] Best to slack me]

Attachment: 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

[Francis Lee [:frlee]]

hi Michael,

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

thank you very much

Comment 27

[Verdi [:verdi] Best to slack me]

Attachment: overlay-illustrations-final.zip

Here's the final illustrations.

Comment 28

[chsiang]

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

Comment 29

[Justin [:JW_SoftvisionQA]]

Marking as verified since the specs are in comment 27.

Comment 30

[Liz Henry (:lizzard) (relman/hg->git project)]

I don't think this made it into release notes.