1150228 - UX/UI Updates to Tiles for Fx 39

Status: RESOLVED FIXED

(Content Services Graveyard :: Tiles, defect)

Description

[Aaron]

Attachment: Initial Style Guide (search bar + static/active tile UI)

For Fx 39, the following changes are being requested.

1.) New Tab controls - styling and arrangement changes only

2.) Search Bar - styling changes only

3.) Tile UI - new Web address bar and other styling changes

4.) On-boarding

Note: All of the above require some minor readjustments of the overall page layout.

The latest comps will be provided via dropbox in the following folder: https://www.dropbox.com/sh/qytsdfoqide7095/AAA42KJdgI-DqRin3hYl3J1ja?dl=0

Include here is an initial Style Guide to get Marina started. I'll provide further updates to this document as I add specs.

Comment 1

[Aaron]

Also, the On-boarding portion depends on BUG 1147476 (https://bugzilla.mozilla.org/show_bug.cgi?id=1147476).

Comment 2

[Ed Lee :Mardak]

(In reply to Aaron from comment #0)
> Created attachment 8587018 [details]
> 2.) Search Bar - styling changes only
A few releases ago, I thought we already had logos/wordmarks next to the search bar and in the dropdown.

adw, do you know what changed and why? I believe this was around the time of switching default search.

dcrobot, were you told to add it back?

Comment 3

[Drew Willcoxon :adw]

You're right, it changed with the new "one-off" search UI that was released along with the Yahoo change (which also included the new UI in the main search bar).  If you need info on the design decisions there, I'm not sure who to ask (I didn't have anything to do with it), but Philipp is probably a good choice.

Comment 4

[Ed Lee :Mardak]

(In reply to Drew Willcoxon :adw from comment #3)
> You're right, it changed with the new "one-off" search UI that was released
> along with the Yahoo change (which also included the new UI in the main
> search bar).
Thanks. phlsa, do you have links to bugs/documentation around the removal of logo/wordmark next to the new tab's search bar? With the designs in attachment 8587018 [details], "Yahoo!" image is placed inside the search box and removes the search/magnifying-glass icon that's currently next to the in page search bar.

If we were to make the change, should the about:home search UI change as well?

Comment 5

[Aaron]

Attachment: UX:UI_Tile_Updates_Fx39_V1.pdf

Everyone - I simply made an error by including specs for the Yahoo! logo. Please disregard. Just ensure that the specs for the input field and button match, if they don't already.

An updated spec has been provided.

Comment 6

[Aaron]

Attachment: UX:UI_Tile_Updates_Fx39_V2.pdf

V2: Additions to original Style Guide (New Tab page controls).

Comment 7

[Aaron]

Attachment: UX:UI_Tile_Updates_Fx39_V2.pdf

Comment 8

[Aaron]

Attachment: images_Tiles_Fx39.zip

All images specified in the Style Guide are included here.

Comment 9

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

I love the tiles styling with the integrated titles!
The two PDFs still include the Yahoo word mark. Am I getting a cached version or something like that, or is that intentional?

Comment 10

[Aaron]

Again, please disregard what's show in the comps. 

By stating "inherit current styling", I meant to imply that we should continue to show the eyeglass icon and NO logo currently in production.

What's depicted is just for "show"... But I imagine a day when the eyeglass is replaced by an arrow which would launch a list of other search engines. Selecting any search engine would display the provider's logo in the field to remind them of their choice.

Comment 11

[Ed Lee :Mardak]

Comment on attachment 8587045 [details]
UX:UI_Tile_Updates_Fx39_V1.pdf

Does there need to be a way to retrigger the onboarding experience? It seems that the Learn about New Tab is just a link that loads in the current page.

I would also assume we would probably just use the system/OS checkbox for the Include suggested sites option.

Comment 12

[Aaron]

Since testing has shown that on-boarding does not help users understand New Tab, I vote that we do NOT need to allow users to retrigger it. If anything, Learn About New Tab should be where they go after to learn more.

As for the UI tweaks - I would need to see it before agreeing (or proposing a compromise). Is that possible?

Comment 13

[Ed Lee :Mardak]

(In reply to Aaron from comment #12)
> I vote that we do NOT need to allow users to retrigger it.
Sounds good. I suppose we store the show-yet value as a pref, so if someone /really/ wanted to see it again, they could go to about:config. ;)

> As for the UI tweaks - I would need to see it before agreeing (or proposing
> a compromise). Is that possible?
Not a problem. We'll attach screenshots and tryserver builds to the implementation bugs. And even after landing where then you can test in Nightly, we can tweak things too. (Although probably better to check before actually committing to mozilla-central.)

Comment 14

[Tim Nguyen :ntim]

Comment on attachment 8587538 [details]
UX:UI_Tile_Updates_Fx39_V2.pdf

You should probably consider updating the search box to the new one off UI.

Comment 15

[Aaron]

Attachment: UX:UI_Tile_Updates_Fx39_V3.pdf

This final version includes all the on-boarding stuff.

Comment 16

[Aaron]

Attachment: images_Tiles_Fx39.zip

All final images are included here.

Comment 17

[Ed Lee :Mardak]

Attachment: inline examples

Here's a quick copy/paste hack of an inline example instead of highlighting something in the tile grid layout. This avoids depending on the actual layout of the new tab page where some users might have pinned or moved things around.

So the high level concept is, can we do the highlighting inline in space that doesn't change based on the user?

Comment 18

[Ed Lee :Mardak]

(In reply to Aaron from comment #15)
> Created attachment 8591127 [details]
> UX:UI_Tile_Updates_Fx39_V3.pdf
The pin/block locations on the tiles are swapped (currently pin in top left, block top right; attached design has pin top right, block top left). Not sure if this is intended.

Can you also provide the expected messaging as text (as opposed to as images) for onboarding new users 1a,2a,3a as well as existing users 1b,2b,3b?

Comment 19

[Aaron]

Attachment: UX:UI_Tile_Updates_Fx39_V4.pdf

NEW page 18-20 show what the on-boarding experience should look like on small screens.

Comment 20

[Aaron]

RAW TEXT

1A

Welcome to New Tab on Firefox!

In order to provide this service, Mozilla collects and uses certain analytics information relating to the sites you visit in accordance with our [link] Privacy Policy [/link].

You can turn off this feature by clicking the gear (COG) button and selecting "Show blank page" in the [bold] New Tab Controls [/bold] menu.


1B

New Tab will show the sites you visit most frequently, along with sites we think might be of interest to you. To get started, you'll see several sites from Mozilla.

You can [bold] Delete [/bold] or [bold] pin [/bold] any site by using the controls available on rollover.


1C

Some of the sites you will see may be suggested by Mozilla and may be sponsored by a Mozilla partner. We'll always indicate which sites are sponsored. [link] Learn more [/link]

Firefox will only show sites that most closely match your interests on the Web.

+++++

2A

New Tab got an update!

Now when you open New Tab, you'll also see sites we think might be interesting to you.

Firefox will only show sites that most closely match your interests on the Web.


2B

Some of the sites you will see may be suggested by Mozilla and may be sponsored by a Mozilla partner. We'll always indicate which sites are sponsored. [link] Learn more [/link]


[bold] Delete [/bold] and [bold] pin [/bold] controls are available on rollover.


2C

In order to provide this service, Mozilla collects and uses certain analytics information relating to the sites you visit in accordance with our [link] Privacy Policy [/link].

You can turn off this feature by clicking the gear (COG) button and selecting "Show blank page" in the [bold] New Tab Controls [/bold] menu.

Comment 21

[Aaron]

Attachment: UX:UI_Tile_Updates_Fx39_V4.pdf

Fixed the comps to show the correct text.

Comment 22

[Aaron]

Comment on attachment 8592303 [details]
inline examples

Ed, I've updated the original bug with an updated Style Guide. Lemme know if you have any questions!

Comment 23

[Aaron]

Swapping the "delete" and "pin" controls was NOT intentional. My bad.

Please change the text in the on-boarding to reflect the correct order the user will see (left to right).

Comment 24

[Ed Lee :Mardak]

The current hover text on the new tab tile controls:

5 newtab.pin=Pin this site at its current position
6 newtab.unpin=Unpin this site
7 newtab.block=Remove this site

In particular the string for "block" says "Remove" -- so not sure if we should change that hover text to "Delete" or change the introduction to say "Remove"

Although I have no idea how it's translated to all the other languages given that "block" is in the internal string name but l10n tends to translate from the english version. Sample size of 2 says it was translated as "remove"

de:      7 newtab.block=Seite entfernen
entfernen = remove
http://hg.mozilla.org/l10n-central/de/file/tip/browser/chrome/browser/newTab.properties

fr:      7 newtab.block=Supprimer ce site
supprimer = remove
http://hg.mozilla.org/l10n-central/fr/file/tip/browser/chrome/browser/newTab.properties

Comment 25

[Aaron]

I'm cool with "remove".

Comment 26

[Marina Samuel [:emtwo]]

As per meeting today, we decided to do a couple of things:

1) Have the compact/small screen design as higher priority and the highlighted tiles as a less high priority to be done afterwards

2) Since we can't guarantee the placement of suggested tiles to be highlighted, we will place a unicorn tile in their spot.

Comment 27

[Kevin Ghim]

Additionally, concerning the new in-tile title bar treatment, we should:

1) display domain name: strip out any leading "www" and display domain.com (.org, .net, .edu, .gov or other new gTLDs). Subdomains such as drive.google.com or bugzilla.mozilla.org should be included. No pages or paths should be included.

2) long domain names: we should come up with some logic that truncates long domain names. For example, superlong.superfantasticdomain.community. Perhaps, we can just display the domain name or use ellipsis if the name exceeds a certain character.

3) favicon should be precede the domain name: when not available, use the generic globe icon.

Comment 28

[Marina Samuel [:emtwo]]

Aaron, do you have updated images for the small screen design? In particular, a background image for the onboarding panel with the grey gradient?

Comment 29

[Aaron]

There are no new images. In fact, for the small screen experience, you'd be removing the blue gradient image. Also, the gray to white gradient shown should be code based, not image based.

Comment 30

[Marina Samuel [:emtwo]]

Ok thanks Aaron,

Kevin, when you have the following links for on-boarding, please let me know:

'Learn more'
'More about New Tab'
'About your privacy'
'Privacy Policy'

(I assume the last two are the the same link)

Comment 31

[Aaron]

On-boarding FYI - "Privacy Policy" should instead "Privacy Notice". The comps on dropbox have been updated.

Comment 32

[Aaron]

For Fx38 > Suggested Tiles - Contextual statement should say "Suggested for <mobile phone> visitors"

For Fx39 > Suggested Tiles - Contextual statement changes to "Because you're interested in <mobile phones>"

Comment 33

[Ed Lee :Mardak]

Any reason not for the shorter "Suggested for <mobile phone> interest" ?

Comment 34

[Aaron]

That isn't a proper sentence. Personally, I'm not sure why we need to say "Suggested" at all since the label already says so. I anticipate much debate around this. Not sure who would have the final say...

Comment 35

[Kevin Ghim]

I suggest leaving the way it is. We'll have to go to the drawing board again for 39.

Comment 36

[Aaron]

UNIVERSAL CHANGES REQUESTED

1.) All fonts for Mac desktop computers should be Helvetica - NO Lucida Grande or Arial

2.) All fonts for PC desktop computers should be Segoe - NO Arial

Once Firefox ships with Fira, we can update individual text elements.

Comment 37

[Aaron]

Please note that there is a NEW link to the current comps for New Tab on Firefox 39:
https://www.dropbox.com/sh/w4a7rbrvm9x6hse/AAAcx1BACed10LrtqL69KZHxa?dl=0

The comps now reflect the correct placement of "pin" and "delete" icons.

This is the last time I will change this link - sorry for any inconvenience.

Comment 38

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to Aaron from comment #36)
> UNIVERSAL CHANGES REQUESTED
> 
> 1.) All fonts for Mac desktop computers should be Helvetica - NO Lucida Grande
>  or Arial
> 
> 2.) All fonts for PC desktop computers should be Segoe - NO Arial
> 
> Once Firefox ships with Fira, we can update individual text elements.

Segoe isn't available by default on Windows XP (~14% of users). Are we falling back to Tahoma there?

Comment 39

[Aaron]

phlsa: Yes, Tahoma is suitable.

Comment 40

[Ed Lee :Mardak]

Sounds like the designs are done for 39, so resolving fixed. The implementation will be handled in the blocked bugs.