941284 - Make 'top sites' screen less white / bare with fresh profile

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: Firefox Start, defect, P2)

Description

[Karen Rudnitski [:kar]]

Not as big of an issue if you have a shared profile and your Top Sites are already therefore populated.

However, for those with a fresh profile loading up Fx Metro, you get presented with a very big, white 'blank' screen. I also caught during my one user testing session that I attended that it's not exactly clear you've launched 'Firefox', which I thought interesting.

So some things that could be used to mitigate but at no expense to start-up or performance of course:
- Add watermarked / subtle Firefox logo and/or name to the background
- Add subtle shading or colour to the background 
- Add a couple of bookmarks (separate bug which I'll respond to)

Could be a combination to the above. I'm looking to UX for some thoughts first on how best to blend the gorgeous, simple design look & feel with something that's not just a sea of white :). Needing-Info to UX

Marco, apologies in advance for ill use of whiteboard tags - you'll need to bear with me as I get up to speed on how you guys operate here!

Comment 1

[Jim Mathies [:jimm]]

> - Add watermarked / subtle Firefox logo and/or name to the background
> - Add subtle shading or colour to the background 
> - Add a couple of bookmarks (separate bug which I'll respond to)

Most of this is addressed in other bugs - 

bug 916326 - implement first run page [block28]
bug 917429 - add back the about:start watermark [release28]
bug 823541 - pick default bookmarks bug (this one got lost in the cracks. it's currently assigned to you. I've marked it for triage.)

we also had rainbow'esk color shading in the background which ux decided to nix a while back.

Can we close this bug out?

Comment 2

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Windows8-i03-(StartPage)-freshprofile_v1a.png

Versions 1a:

Displays the watermark logo with a simple orange gradient and welcome message.

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Windows8-i03-(StartPage)-freshprofile_v1b.png

Versions 1b:

Displays the full logo with an added color gradient background and welcome message.

Comment 4

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Windows8-i03-(StartPage)-freshprofile_v1c.png

Versions 1c:

Adds function to version 1a with with coachmarks.

Comment 5

[Michael Maslaney [:mmaslaney] ([e-mail])]

Important to note that the logo and message will disappear after the user has navigated.

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Windows8-i03-(StartPage)-freshprofile_v1a.png

Revised version 1a:


This is basically a first run experience, adding a little bit of delight and education, then moving out of the user's workflow.


Features:


• Firefox logo with welcome message (inline with the current desktop start page)

• Coach marks that with a rotating orange highlight (see "Pin" in the mock)

• Welcome message and coach marks will move out of the workflow when the user begins to navigate.

If we proceed with this approach, I recommend looping in Matej from branding to provide the appropriate copy.

Comment 7

[Karen Rudnitski [:kar]]

I love the idea in principle, but knowing that we have 1.5 weeks before aurora uplift, my only concern is getting the appropriate copy and this coded in. I suppose the copy is first priority, so the strings are available for l10n - and we'll need engineering to give an estimate on how easy / difficult this idea is to implement.

Michael - can you loop in Matej now (as he's based in Toronto, my fingers are crossed is that he's still about) so we can work this in parallel. 

Marco - I know you are adding this to our agenda on Monday.

Anyone else - if you have thoughts on how easy / difficult this would be to implement prior to Monday, this will give us indication whether we need this scaled back (although am hoping not, as I think this is rather a nice design and aids in the whole discovery & usability experience!)

Comment 8

[Jim Mathies [:jimm]]

(In reply to mmaslaney from comment #6)
> Created attachment 8338965 [details]
> Windows8-i03-(StartPage)-freshprofile_v1a.png

Is this an overlay on top of the default start screen, or an interactive page we load in place of it?

If the former, overlaying a few "tips" on top of the start screen shouldn't be too hard. If we can nail down the strings and get them in now, we'll have time to code up the overlay. Also if this is an overlay, we need to take into account the about:start watermark, which we plan to bring back, and default bookmarks of which we currently only have two. If we keep the two defaults, we should update this to reflect how things will look with those in place.

If this is an interactive page things are bit simpler since we can create an about:firstrun or whatever and just code it up. Again, strings need to be finalized even if the page isn't ready yet by the 9th.

Comment 9

[Michael Maslaney [:mmaslaney] ([e-mail])]

Jim, I'm thinking this would be an overlaying of tips. That being said, would it still be possible to have the coach marks rotate with an Orange highlight?

Comment 10

[Jim Mathies [:jimm]]

(In reply to mmaslaney from comment #9)
> Jim, I'm thinking this would be an overlaying of tips. That being said,
> would it still be possible to have the coach marks rotate with an Orange
> highlight?

Yes, we can animate in xul overlays using css or animated images.

I like the idea of a 'help' overlay. We can expand on it over time, even give the user the option of invoking it via a shortcut or menu and add support for new about:start views like history later on.

Comment 11

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

Agree with Michael. This would be an overlay of tips. New users can get help tips in context, which is a better way of learning.

Michael, I think you mockup in Comment 8 is not up-to-date. On start page, the bookmark, pin, and menu icons don't exist. 

I would suggest to show the tips of these three icons and the gesture of swiping from bottom or top upon the first time a webpage is loaded.

We will talk more tmrw :)

Comment 12

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Metro_FreshProfile.zip

Metro_FreshProfile.zip contains the following:


• Updated Mock (new copy)

• Specs

• Product Assets




New Copy:


[tabs]

Looking for your tabs? Just pull down or right-click


[top sites] 

Go to the sites you visit most


[bookmarks]

Find pages you've saved for later


[menu] 

Access more features and options


[history]

See where you've been on the Web

Comment 13

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: 941284_strings.patch

String only.

Comment 14

[Matt Brubeck (:mbrubeck)]

Comment on attachment 8344029 [details] [diff] [review]
941284_strings.patch

Review of attachment 8344029 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/metro/locales/en-US/chrome/browser.dtd
@@ +110,5 @@
>  <!ENTITY syncFlyout.key "s">
>  <!ENTITY aboutFlyout.key "a">
> +
> +<!-- FIRT RUN EXPERIENCE -->
> +<!ENTITY firstRunTabs.label "Looking for your tabs? Just pull down or right-click">

We should add a LOCALIZATION NOTE comment explaining the context for these strings.  Something like this should work:

<!-- LOCALIZATION NOTE (firstRunTabs.label,
                        firstRunTopSites.label,
                        firstRunBookmarks.label,
                        firstRunMenu.label,
                        firstRunHistory.label )
     These strings appear on the Firefox Start page the first time
     Firefox for Windows 8 Touch (Metro) is launched.  Each one
     has an arrow pointing toward the feature it references.  The code
     to display these strings is not enabled yet, but will be soon.
     For now, you can see this mockup for an example of how they are
     used: https://bug941284.bugzilla.mozilla.org/attachment.cgi?id=8338965
     -->

Comment 15

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: Windows8-i03-(StartPage)-freshprofile.png

Latest mockup (extracted from Metro_FreshProfile.zip).

Comment 16

[Rodrigo Silveira [:rsilveira] [:rodms]]

Thanks for the quick review and localization note text!

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

Comment 17

[Matt Brubeck (:mbrubeck)]

Note: Bug 920236 has some code we can use to load an alternate URL on first-run.  If we want this integrated with about:start, maybe we could use a url parameter, like "about:start?firstrun".

Comment 18

[Carsten Book [:Tomcat]]

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

Comment 19

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: WIP first run

Needs the latest patch from bug 920236. Navigating to about:start?firstrun will also load the page. At first I thought we should block accessing through the url bar but I don't think there's any harm in that. Might even be useful in case someone missed it and wants to see it again. 

Works fine in landscape mode. I'll try to get something better for portrait although I think it might not be worth it. I'll also disable it in snapped.

To document the behavior, just the first page opened loads the first run page. Creating a new tab, closing current tab or restarting the browser will load the regular start page. I like how it's non-intrusive.

Comment 21

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: Patch v1

Supporting portrait mode too. The logo image is in browser/branding, will r? for that once the metro bits are r+d.

Comment 22

[Matt Brubeck (:mbrubeck)]

Comment on attachment 8349114 [details] [diff] [review]
Patch v1

Review of attachment 8349114 [details] [diff] [review]:
-----------------------------------------------------------------

I'm waiting for a build to finish so I can test this out before I finish reviewing it, but it looks good so far.  Some nits and questions:

::: browser/metro/base/content/Util.js
@@ +209,5 @@
>              aURL == "about:blank" ||
>              aURL == "about:empty" ||
>              aURL == "about:home" ||
>              aURL == "about:newtab" ||
> +            aURL.indexOf("about:start") == 0);

Please use aURL.startsWith("about:newtab") instead:

* Better performance than indexOf if the URI is really really long.
* about:newtab is now the official URI for the start page, for better compatibility with "Relaunch on desktop"

::: browser/metro/base/content/browser-ui.js
@@ +307,5 @@
>    },
>  
>    isStartURI: function isStartURI(aURI) {
>      aURI = aURI || Browser.selectedBrowser.currentURI.spec;
> +    return aURI == kStartURI || aURI.indexOf("about:start") == 0 || aURI == "about:home";

same here

::: browser/metro/base/content/startui/FirstRunOverlay.xul
@@ +18,5 @@
> +         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
> +
> +  <hbox id="start-container">
> +    <!-- Append topsites instruction just after topsites (position 2) -->
> +    <box position="2" class="firstrun">

The "insertafter" or "insertbefore" attributes might be better than "position":
https://developer.mozilla.org/en-US/docs/XUL/Attribute/insertafter

@@ +20,5 @@
> +  <hbox id="start-container">
> +    <!-- Append topsites instruction just after topsites (position 2) -->
> +    <box position="2" class="firstrun">
> +      <box id="instruction-topsites">
> +        <vbox align="center">

Do you need both boxes here, or could you use just a single <vbox id="instruction-topsites" align="center">?

::: browser/metro/base/content/startui/StartUI.js
@@ +27,5 @@
>        this.chromeWin.InputSourceHelper.isPrecise ? "precise" : "imprecise");
>  
> +    // NOTE: location.search doesn't work for about: pages
> +    if (location.href.indexOf("?firstrun") > 0) {
> +      document.loadOverlay("chrome://browser/content/FirstRunOverlay.xul", null);

Maybe we could check the prefs directly here, instead of mucking with the URI, if it makes things simpler.

Comment 23

[Matt Brubeck (:mbrubeck)]

Comment on attachment 8349114 [details] [diff] [review]
Patch v1

Review of attachment 8349114 [details] [diff] [review]:
-----------------------------------------------------------------

Looks beautiful!  I'd like to get as much testing of this as possible, so feel free to land what you have and file follow-up bugs for any of the review comments, if you want to.

One other thing I noticed when testing it out is that it goes away awfully quickly and there's no obvious way to get back to it.  We might want to consider adding a way to restore it (help button on the start page?), or showing it for the first few launches instead of just once.

::: browser/metro/base/content/startui/FirstRunOverlay.xul
@@ +47,5 @@
> +
> +    <box id="instruction-history-container" position="7" class="firstrun">
> +      <box id="instruction-history">
> +        <vbox align="center">
> +          <image class="instruction-arrow arrow-right" />

The history section looks a little weird since there are no tiles at first run in a new profile.  Maybe we should add some empty items with an outline style, like we do for Top Sites.

Comment 24

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Matt Brubeck (:mbrubeck) from comment #22)
> ::: browser/metro/base/content/startui/FirstRunOverlay.xul
> @@ +18,5 @@
> > +         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
> > +
> > +  <hbox id="start-container">
> > +    <!-- Append topsites instruction just after topsites (position 2) -->
> > +    <box position="2" class="firstrun">
> 
> The "insertafter" or "insertbefore" attributes might be better than
> "position":
> https://developer.mozilla.org/en-US/docs/XUL/Attribute/insertafter
> 

Cool, didn't know about that.

> @@ +20,5 @@
> > +  <hbox id="start-container">
> > +    <!-- Append topsites instruction just after topsites (position 2) -->
> > +    <box position="2" class="firstrun">
> > +      <box id="instruction-topsites">
> > +        <vbox align="center">
> 
> Do you need both boxes here, or could you use just a single <vbox
> id="instruction-topsites" align="center">?
> 

I started with less boxes, but I was only able to get the absolute positioning right with the extra box. :( 

> ::: browser/metro/base/content/startui/StartUI.js
> @@ +27,5 @@
> >        this.chromeWin.InputSourceHelper.isPrecise ? "precise" : "imprecise");
> >  
> > +    // NOTE: location.search doesn't work for about: pages
> > +    if (location.href.indexOf("?firstrun") > 0) {
> > +      document.loadOverlay("chrome://browser/content/FirstRunOverlay.xul", null);
> 
> Maybe we could check the prefs directly here, instead of mucking with the
> URI, if it makes things simpler.

I'll keep it like this for now in case we need an url for easy access to the first run experience. It simplifies testing too.

Comment 25

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: Patch v2

Addressed review comments and added watermarked empty history tiles. Opened bug 951818 to track your comment about it going away too fast. Carrying over r+.

Comment 26

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: Patch v3

Updating the patch as I accidentally removed a about:start check in browser-ui.js in the latest patch which caused some test failures.

Comment 27

[Rodrigo Silveira [:rsilveira] [:rodms]]

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

Comment 28

[Carsten Book [:Tomcat]]

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

Comment 29

[Rodrigo Silveira [:rsilveira] [:rodms]]

Comment on attachment 8349770 [details] [diff] [review]
Patch v3

[Approval Request Comment]
Bug caused by (feature/regressing bug #): no regression, adding first run experience to educate users on metro.

User impact if declined: Low, there will be no first run experience.
Testing completed (on m-c, etc.): yes
Risk to taking this patch (and alternatives if risky): Very low, metro code only.
String or IDL/UUID changes made by this patch: none

Comment 30

[Matt Brubeck (:mbrubeck)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/7153471fbb04

Comment 31

[Cornel Ionce [:noni] [Hubs QA]]

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0
Mozilla/5.0 (Windows NT 6.3; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0

Verified as fixed on latest nightly and latest aurora builds.
The start page of a fresh profile is now implemented accordingly to the design.