949213 - On-boarding screen part 2

Status: VERIFIED FIXED

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

Description

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

The on-boarding help tips in bug945364 introduce new users one part of the browser, including FX start page, tabs, and menu icon. But there are still a few other UI not introduced. 

This second part of on-boarding is to introduce the on-screen buttons, bookmarks, and pin to start when a webpage is loaded on Firefox Metro the 1st time. 

This bug is created to coordinate all UX related work, including interactions, copy, visual, etc.

Design draft from Yuan: 
http://cl.ly/image/2H140w392h0h
http://cl.ly/image/2k2n1H1X3S0O

Comment 1

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

Hi Matej,

Could you please take a look at the wording and let us know your thoughts? 
http://cl.ly/image/2H140w392h0h

Thanks!

Comment 2

[Matej Novak [:matej]]

Hi Yuan,

Happy to help. There's some copy from https://bugzilla.mozilla.org/show_bug.cgi?id=945364#c14 that we could reuse here. I also have some ideas for the other bits.

When do you need this by?

Comment 3

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

Thanks Matej!
It would be very helpful to have it early next week, so we can get the design done before holiday starts. Thanks!

Comment 4

[Matej Novak [:matej]]

How's this?


[tabs]

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


[previous page] 

Tap to go back to the previous page


[bookmarks]

Use bookmarks to save pages for later


[pin]

Pin any site to your start screen for quick access


[new tab]

Add a new tab to explore a new site

Comment 5

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

(In reply to Matej Novak [:matej] from comment #4)
> How's this?
> 
> 
> [tabs]
> 
> Looking for your tabs? Just pull down or right-click
> 
> 
> [previous page] 
> 
> Tap to go back to the previous page
> 
> 
> [bookmarks]
> 
> Use bookmarks to save pages for later
> 
> 
> [pin]
> 
> Pin any site to your start screen for quick access
> 
> 
> [new tab]
> 
> Add a new tab to explore a new site


Looks good to me! Thanks for getting back to us so fast :)

Comment 6

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

Attachment: Metro_Onboarding_p2.zip

Metro Onboarding Part 2 


This Zip file contains the following:

• Onboarding p2 mock
• Spec
• Arrow assets

Comment 7

[Matt Brubeck (:mbrubeck)]

We can't land this in Firefox 28, which is already in string freeze.  We can land this in Firefox 29 while it is on the Nightly channel.

Comment 8

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

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

Adding mockup image for localization reference.

Comment 9

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

Attachment: Strings Patch

Strings only patch.

Yuan, the text for pin site says: "Pin any site to your start screen for quick access". Do you think we need to clarify that we mean window's start and not firefox's start?

Comment 10

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

Good catch. If we can fit the strings in two lines, let's use "Pin any sit to your Windows Start screen for quick access".

For reference, MSDN uses "Start screen" not "start screen". We should keep that standard as well.

Comment 11

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

Attachment: Strings Patch v2

Updated after comment 10.

Comment 12

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

Strings only: https://hg.mozilla.org/integration/fx-team/rev/d5e121bea690

Comment 13

[Tim Taubert [:ttaubert] (inactive)]

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

Comment 14

[Francesco Lodolo [:flod]]

Is there an easy way to test this? I'm scared by the mockup and need to check what happens when strings are much longer than the original.

Comment 15

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

We have a very similar behavior for first run experience (bug 941284) and the issue of long strings has bitten us and is being worked on bug 962236. We'll make sure we have a solution here too.

Comment 16

[Marco Mucci [:MarcoM]]

Hey Rodrigo, can you provide a point value.

Comment 17

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

Attachment: Patch v1

Couldn't find a way to get instruction positioned relative to pin/start button.

Made sure it works well with longer strings. Haven't tried rtl, I'm sure it'll be disastrous, but not sure if we should handle it on a separate bug.

Comment 18

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

Attachment: Patch v2

Removed some left over debug console logs.

Comment 19

[Matt Brubeck (:mbrubeck)]

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

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

Let's make sure this works in RTL before landing it.  See also bug 962283, though I don't think the work there will directly conflict with the work here.  Aside from that, everything looks great!

::: browser/metro/base/content/browser-ui.js
@@ +171,5 @@
>        } catch(ex) {
>          Util.dumpLn("Exception in delay load module:", ex.message);
>        }
>  
> +      BrowserUI._initFirstRunContent();

This seems a little abrupt... some sort of fade in would be nice.

Comment 20

[Matt Brubeck (:mbrubeck)]

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

Sorry, mid-air collision.

Comment 21

[Matt Brubeck (:mbrubeck)]

Comment on attachment 8371747 [details] [diff] [review]
Patch v2

See comment 19.

Comment 22

[Matt Brubeck (:mbrubeck)]

One more thing... We should consider users who started using Metro Firefox in version 28, and already saw the initial first-run screen from bug 941284.  Do we want to show them this additional first-run screen when they upgrade to Firefox 29 or 30?  Or should we show this only to true "first run" users by (based on the "browser.firstrun.count" pref)?

Comment 23

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

Good point. Although it's pretty harmless, I don't think it would be useful for someone that has been using it for a full release.

Comment 24

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

Attachment: 949213.patch

With rtl support.

Comment 25

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

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

Comment 26

[Ryan VanderMeulen [:RyanVM]]

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

Comment 27

[Manuela Muntean [Away]]

Verified as fixed for iteration IT-30C-29A-28B.1 (# 24) with latest Nightly 30.0a1 on Win 8 32-bit. It seems that this on-boarding screen part isn't yet available for Beta and Aurora.