Closed
Bug 1354707
Opened 8 years ago
Closed 7 years ago
[UX] New User Tour Overlay UX Specs
Categories
(Firefox :: General, enhancement, P1)
Tracking
()
VERIFIED
FIXED
Firefox 55
Tracking | Status | |
---|---|---|
relnote-firefox | --- | - |
People
(Reporter: nyee, Assigned: verdi)
References
(Blocks 1 open bug)
Details
(Whiteboard: [photon-onboarding] [ux])
Attachments
(4 files, 1 obsolete file)
No description provided.
Reporter | ||
Updated•8 years ago
|
Assignee: nobody → mverdi
Reporter | ||
Updated•8 years ago
|
Summary: Tour Overlay Specs → Tour Overlay UX Specs
Updated•8 years ago
|
Summary: Tour Overlay UX Specs → [UX] Tour Overlay UX Specs
Updated•8 years ago
|
Updated•7 years ago
|
Whiteboard: [photon-onboarding]
Updated•7 years ago
|
Status: NEW → ASSIGNED
Updated•7 years ago
|
Target Milestone: --- → Firefox 55
Assignee | ||
Updated•7 years ago
|
Summary: [UX] Tour Overlay UX Specs → [UX] New User Tour Overlay UX Specs
Assignee | ||
Comment 1•7 years ago
|
||
Current spec is here - https://mozilla.invisionapp.com/share/4MBDUMS5W#/228511972_Overview
Updated•7 years ago
|
Whiteboard: [photon-onboarding] → [photon-onboarding] [ux]
Updated•7 years ago
|
Flags: qe-verify-
Updated•7 years ago
|
Priority: -- → P1
Comment 2•7 years ago
|
||
Comment 3•7 years 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•7 years 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 years 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)
Comment 6•7 years ago
|
||
If it is confirmed not to have responsive design, we may close bug 1358790 and ongoing works will not be checked in.
Assignee | ||
Comment 8•7 years 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 years 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 years 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)
Comment 11•7 years ago
|
||
(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)
Comment 12•7 years ago
|
||
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)
Comment 13•7 years ago
|
||
Fred and I just opened working bugs so clearing needinfo.
Flags: needinfo?(rexboy)
Assignee | ||
Comment 14•7 years 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•7 years 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•7 years 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•7 years 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)
Comment 18•7 years ago
|
||
(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•7 years 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?
Comment 20•7 years ago
|
||
(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•7 years ago
|
||
(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•7 years 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•7 years ago
|
||
Here are the icons and the checkmark for the overlay navigation in svg format.
Assignee | ||
Comment 25•7 years ago
|
||
The Sync panel is laid out differently than the others because it contains a form. A spec for that is attached.
Comment 26•7 years 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•7 years ago
|
||
Here's the final illustrations.
Attachment #8876986 -
Attachment is obsolete: true
Flags: needinfo?(mverdi)
Assignee | ||
Updated•7 years ago
|
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Comment 28•7 years 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:
--- → ?
Comment 29•7 years ago
|
||
Marking as verified since the specs are in comment 27.
Status: RESOLVED → VERIFIED
I don't think this made it into release notes.
You need to log in
before you can comment on or make changes to this bug.
Description
•