1044602 - about:newtab tiles look different than anything else in the browser

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Olli Pettay [:smaug][[e-mail]]]

The new about:newtab tiles looks rather odd especially when hovering over them.
And some have light gray titles, and some harder-to-read light blue.

Comment 1

[Dão Gottwald [:dao]]

[Tracking Requested - why for this release]:

Comment 2

[Benjamin Kerensa [:bkerensa]]

(In reply to Dão Gottwald [:dao] from comment #1)
> [Tracking Requested - why for this release]:

Hi Dao,

Could you provide some justification around tracking? It is not evident looking at 1036284 or checking the about:newtab experience in nightly as to why we would want to track this.

Comment 3

[Dão Gottwald [:dao]]

Basically I agree with what this bug was filed about. The visual design of the New Tab page looks substandard and like a regression from what we had before. "Childish" seems like an adequate characterization in that I think the design tries to incorporate too much eye candy (gradients, rounded corners, colorful border and shadow on hover). This should get another pass before we ship it.

There's also a related accessibility regression for visually impaired users because the tile labels are too faint.

Comment 4

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #3)
> There's also a related accessibility regression for visually impaired users
> because the tile labels are too faint.

Bug 1048137 has been filed on this.

Comment 6

[Benjamin Kerensa [:bkerensa]]

Could we improve the title of this bug with something more explicit? Childish is really not a useful description.

Comment 7

[Paul [pwd]]

Is the UI/UX teams aware of this bug? Does it need a uiwanted flag?

Comment 8

[Olli Pettay [:smaug][[e-mail]]]

(In reply to Benjamin Kerensa [:bkerensa] from comment #6)
> Could we improve the title of this bug with something more explicit?
> Childish is really not a useful description.
The summary says what the current UI looks like and dao explained it more in comment 3.

Comment 9

[Olli Pettay [:smaug][[e-mail]]]

Also, I think newtabs look worse on a default linux/Fedora installation than on Win7 for example, since
Win7 has, at least in my configuration, some blue or gray-blue in the UI. On linux the base color
for UI elements is light gray, and the strong blue->light blue gradients in the newtab look really odd.
(And I don't know why some labels have different colors.)

Comment 10

[Paul [pwd]]

I think we're all agreed that the huge corners, hover effects and oversized graphics look terrible. Reading the original bug, it seems these were done for the sake of differentiating Firefox from Chrome at a glance, but it's almost like wearing pants on your head just because all your friends are wearing them normally. It was a plan that wasn't thought through properly and actually gets in the way of what was achieved through Australis. The person that implemented it failed to grasp the overall design language of Australis and that's a problem. On top of that, it takes us significantly away from the feel of Firefox for Android. Again at-a-glance on any platform, Firefox should be recognisable and users should get a sense of familiarity. The new tab page isn't something that should be worked on independently in terms of platform (desktop versus mobile) and in terms of desktop, the UX/UI team need to stop doing Mac based implementations. We need to work on reharmonising Firefox for Desktop and Firefox for Android/Firefox OS. The benefits of that for users takes precedence of the desire to look different for the sake of looking different.

Comment 11

[vvdun18]

I also think that the newtab looks awful. The design and style was popular a few years ago. Unnecessary glowing border, rounded corners look like iPhone OS 2007. 

A newtab is well implemented in Yandex.Browser (for example) (http://browser.yandex.com/?lang=en).
I added screenshots.

Comment 12

[vvdun18]

Attachment: Example_1.png

Comment 13

[vvdun18]

Attachment: Example_2.png

Comment 14

[vvdun18]

Attachment: Example_3.png

Comment 15

[:Gavin Sharp [email: [e-mail]]]

My understanding is that the current design is not final.

Ed, can you confirm that understanding, and provide a pointer to the bugs tracking improvements to the visual appearance of the new tab page?

Comment 16

[Jim Porter (:squib)]

(In reply to :Gavin Sharp [email: [e-mail]] from comment #15)
> My understanding is that the current design is not final.

I hope so, although it's curious why a new, harder-to-read design was necessary given that we had a decent one already. On the other hand, the UI reminds me (unfavorably) of the new Preferences tab, which at least initially led me to believe that this wasn't a placeholder. Luckily I found this bug. :)

This case is somewhat worse than the Prefs tab though, since it's not only less aesthetically pleasing, but considerably harder to read (and I have very good vision). Not only that, I see the new tab page quite a bit more often than the Preferences tab, so the change is somewhat more "in your face".

I've largely been happy with Firefox's UI design, but some of the recent in-tab visual changes seem at odds with Australis' attempts to fit in with the platform Firefox is running on. It's rather jarring.

Comment 17

[Ed Lee :Mardak]

(In reply to :Gavin Sharp [email: [e-mail]] from comment #15)
> My understanding is that the current design is not final.
dcrobot is providing UX for the new styling implemented in bug 1036284. There are some followup bugs blocking that bug such as bug 1048148 and bug 1043399 although I'm not sure which are prioritized.

There's a mockup linked from bug 1048148 http://ytjbre.axshare.com/enhanced_view_-_concept_1.html that has some different styling as well as additional items, so it's still unclear what is desired from that for initial release of enhanced tiles.

Comment 18

[Bryan Clark (DevTools PM) [:clarkbw]]

These two bugs should help move toward the final design.
bug 1045769: Adjust new tab white space
bug 1048148: Reduce rounded corners and glow

And I think it's worth looking at bug 1048137 if people are having a hard time with the contrast.

Comment 19

[Paul [pwd]]

(In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #18)
> These two bugs should help move toward the final design.
> bug 1045769: Adjust new tab white space
> bug 1048148: Reduce rounded corners and glow
> 
> And I think it's worth looking at bug 1048137 if people are having a hard
> time with the contrast.

But as the Firefox PM, what is the plan to retain synergy with other Firefox branded projects, namely Fennec? And if there isn't one, what is the upside of this pursuit at the cost of diverging from a unified design language, in real terms?

Comment 20

[Ed Lee :Mardak]

Notes:

Size of Gear icon
Glow - needs update
Delete/Pin icons - make 70% smaller, unpinned = gray, pin rollover = black, pinned = blue
rollover border = white
No background image! use #F9F9F9 for bg color
make the gradient on thumbnail tiles shorter (go up 2/3 of way instead of all the way) 35%

Comment 21

[Ed Lee :Mardak]

I believe dcrobot will be providing an updated pdf with specs on the gear size, glow, etc.

Comment 23

[Ed Lee :Mardak]

Carrying-over firefox-backlog+ from bug 1044555.

Comment 24

[Ed Lee :Mardak]

(In reply to :Gavin Sharp [email: [e-mail]] from comment #15)
> provide a pointer to the bugs tracking improvements to the visual appearance of the new tab page?

The bugs are blocking the initial style bug 1036284:

bug 1043399 pinned title red -> blue
bug 1044602 (this) rollover border, bg image, gradient
bug 1045751 shrink icons
bug 1045769 adjust whitespace / move undo box
bug 1046693 change gear hover
bug 1048137 tile title contrast
bug 1048148 rounded corners and glow

Comment 25

[Ed Lee :Mardak]

Attachment: v1 screenshot

Includes style changes from bug 1045769 bug 1048148 bug 1045751 bug 1048137 bug 1040369

Comment 26

[Ed Lee :Mardak]

Attachment: before screenshot

Comment 27

[Ed Lee :Mardak]

Attachment: v1

Comment 28

[Paul [pwd]]

A huge step in the right direction. The gradient still doesn't work though and neither does the circled iconography. We have a style, it's featured prominently in the toolbar. Also the gear icon is still slightly too large.

Comment 29

[Ed Lee :Mardak]

What's not working with the gradient? That it's a gradient or that it causes the thumbnail to be partially faded?

What style are you referring to in the toolbar?

And what would make an appropriately sized gear icon?

Comment 30

[Paul [pwd]]

(In reply to Ed Lee :Mardak from comment #29)
> What's not working with the gradient? That it's a gradient or that it causes
> the thumbnail to be partially faded?
That it's a gradient. The only other place a gradient is featured in the primary or even secondary UI is on the refresh button. I'd suggest taking a queue from how we highlight tiles in the menu panel.

> What style are you referring to in the toolbar?
The lack of or the hover state of toolbar buttons.

> And what would make an appropriately sized gear icon?
Shrink it down so that it's the same size as the toolbar buttons.

Comment 31

[Aaron]

1. The gradient is an intentional, unique element that was designed to de-emphasize screenshot tiles and focus the user's attention on the Enhanced Tiles. While this may not be a design convention found elsewhere in the browser, this is also in-browser content. Some things will not always have to mimic browser tool interactions.

2. The over state for doorhanger menu items is text color = #333333

3. I worried that the gear icon would get lost if we made it smaller. The icons in the browser toolbar are identifiable because they're grouped together. This icon is all by itself, and is the only control that allows them to opt out of this experience.


(In reply to Paul [pwd] from comment #30)
> (In reply to Ed Lee :Mardak from comment #29)
> > What's not working with the gradient? That it's a gradient or that it causes
> > the thumbnail to be partially faded?
> That it's a gradient. The only other place a gradient is featured in the
> primary or even secondary UI is on the refresh button. I'd suggest taking a
> queue from how we highlight tiles in the menu panel.
> 
> > What style are you referring to in the toolbar?
> The lack of or the hover state of toolbar buttons.
> 
> > And what would make an appropriately sized gear icon?
> Shrink it down so that it's the same size as the toolbar buttons.

Comment 32

[Ryan VanderMeulen [:RyanVM]]

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

Comment 33

[Thomas Stache]

(In reply to Aaron from comment #31)
> 1. The gradient is an intentional, unique element that was designed to
> de-emphasize screenshot tiles and focus the user's attention on the Enhanced
> Tiles. While this may not be a design convention found elsewhere in the
> browser, this is also in-browser content. Some things will not always have
> to mimic browser tool interactions.

I don't see how this about:newtab design fits into Australis.
Firefox has in-content UI already in form of about:preferences and about:customizing. Both share a rather flat and squarish design, the preferences using a 1px blue outline for indicating hover and/or focus for input controls, and even subtler styling for buttons.
about:newtab is however doing too much. Is the tile hover effect of Firefox 33 not good enough?

Comment 34

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

Mozilla/5.0 (X11; Linux x86_64; rv:34.0) Gecko/20100101 Firefox/34.0

Verified issue fixed on Ubuntu 14.04 64bit using latest Nightly, build ID: 20140818030205.

Comment 35

[Sylvestre Ledru [:Sylvestre]]

Uplift has been managed in bug 1057602

Comment 36

[Ed Lee :Mardak]

https://hg.mozilla.org/releases/mozilla-aurora/rev/d2e63337dbf2

Comment 37

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

Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0

Verified fixed on Ubuntu 14.04 using latest Aurora, build ID: 20140828004002.