Closed Bug 1044602 Opened 5 years ago Closed 5 years ago

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

Categories

(Firefox :: New Tab Page, defect)

x86_64
Linux
defect
Not set
Points:
1

Tracking

()

VERIFIED FIXED
Firefox 34
Iteration:
34.2
Tracking Status
firefox33 --- verified
firefox34 + verified

People

(Reporter: smaug, Assigned: Mardak)

References

Details

(Keywords: regression)

Attachments

(6 files)

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.
Component: Tabbed Browser → New Tab Page
[Tracking Requested - why for this release]:
Blocks: 1036284
Keywords: regression
(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.
Flags: needinfo?(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.
Flags: needinfo?(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.
Duplicate of this bug: 1045559
Could we improve the title of this bug with something more explicit? Childish is really not a useful description.
Is the UI/UX teams aware of this bug? Does it need a uiwanted flag?
(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.
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.)
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.
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.
Attached image Example_1.png
Attached image Example_2.png
Attached image Example_3.png
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?
Flags: needinfo?(edilee)
Summary: about:newtab tiles look childish and different than anything else in the browser → about:newtab tiles look different than anything else in the browser
(In reply to :Gavin Sharp [email: gavin@gavinsharp.com] 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.
(In reply to :Gavin Sharp [email: gavin@gavinsharp.com] 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.
Flags: needinfo?(edilee)
Flags: needinfo?(clarkbw)
Flags: needinfo?(athornburgh)
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.
Flags: needinfo?(clarkbw)
(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?
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%
I believe dcrobot will be providing an updated pdf with specs on the gear size, glow, etc.
Blocks: 1030832
Duplicate of this bug: 1044555
Carrying-over firefox-backlog+ from bug 1044555.
Flags: firefox-backlog+
(In reply to :Gavin Sharp [email: gavin@gavinsharp.com] 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
Attached image v1 screenshot
Includes style changes from bug 1045769 bug 1048148 bug 1045751 bug 1048137 bug 1040369
Attached image before screenshot
Attached patch v1Splinter Review
Assignee: nobody → edilee
Status: NEW → ASSIGNED
Attachment #8472749 - Flags: review?(adw)
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.
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?
(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.
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.
Flags: needinfo?(athornburgh)
Attachment #8472749 - Flags: review?(adw) → review+
Blocks: 1054098
Blocks: 1054099
Blocks: 1054100
Blocks: 1054101
https://hg.mozilla.org/mozilla-central/rev/fbaf8105fa2c
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 34
Points: --- → 1
Iteration: --- → 34.2
QA Whiteboard: [qa?]
QA Whiteboard: [qa?] → [qa+]
QA Contact: cornel.ionce
(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?
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.
Status: RESOLVED → VERIFIED
QA Whiteboard: [qa+] → [qa!]
Blocks: 1057602
Uplift has been managed in bug 1057602
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.
Blocks: 1060707
You need to log in before you can comment on or make changes to this bug.