1197510 - Make tiles hover effect less jarring

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Dão Gottwald [:dao]]

Attachment: patch

Bug 1186596 made the title bar for tiles black on hover. I think that's a fine change, but the combination with the other style changes on hover makes it visually overwhelming. Altogether it looks like a collection of bells and whistles that speak no clear design language and don't improve usability. I think we can improve this significantly by removing the blue glow, keeping these style changes as hover feedback:

- title bar color change
- pin and remove buttons appear
- hand cursor

Who does UI reviews for the New Tab page these days? Trying Aaron since he provided the UI spec for bug 1186596.

Comment 1

[Dão Gottwald [:dao]]

[Tracking Requested - why for this release]: See comment 0. I think this looks bad enough that we should do something about it before release.

Comment 2

[Aaron]

The glow should stay - although it should be at 60% opacity (or lighter).

This effect was intended to reinforce the interactivity of the site/tile.

Comment 3

[Dão Gottwald [:dao]]

(In reply to Aaron from comment #2)
> The glow should stay - although it should be at 60% opacity (or lighter).
> 
> This effect was intended to reinforce the interactivity of the site/tile.

Could you please give my patch a try? The remaining changes give perfectly fine feedback about the interactivity as far as I can tell. It's unclear to why something would need to be reinforced there.

Comment 4

[Marina Samuel [:emtwo]]

(In reply to Dão Gottwald [:dao] from comment #3)
> (In reply to Aaron from comment #2)
> > The glow should stay - although it should be at 60% opacity (or lighter).
> > 
> > This effect was intended to reinforce the interactivity of the site/tile.
> 
> Could you please give my patch a try? The remaining changes give perfectly
> fine feedback about the interactivity as far as I can tell. It's unclear to
> why something would need to be reinforced there.

Dão, would you be able to provide a screenshot and/or build with your changes so Aaron and myself can take a look?

Comment 5

[Dão Gottwald [:dao]]

(In reply to Marina Samuel [:emtwo] from comment #4)
> (In reply to Dão Gottwald [:dao] from comment #3)
> > (In reply to Aaron from comment #2)
> > > The glow should stay - although it should be at 60% opacity (or lighter).
> > > 
> > > This effect was intended to reinforce the interactivity of the site/tile.
> > 
> > Could you please give my patch a try? The remaining changes give perfectly
> > fine feedback about the interactivity as far as I can tell. It's unclear to
> > why something would need to be reinforced there.
> 
> Dão, would you be able to provide a screenshot and/or build with your
> changes so Aaron and myself can take a look?

Sure. Try builds will be available here once they're finished (takes a couple of hours):

https://ftp-ssl.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-0f7cc3e1914a

Comment 6

[Marina Samuel [:emtwo]]

https://ftp-ssl.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-0f7cc3e1914a/try-macosx64/firefox-43.0a1.en-US.mac.dmg

Mac build above^ (dao's link for windows and linux). Kevin and Aaron, could you please give feedback?

We need a final say on what we want here. I personally do agree with Aaron after trying the build that a tiny bit of glow brings more focus to the hovered tile.

Comment 7

[Dão Gottwald [:dao]]

(In reply to Marina Samuel [:emtwo] from comment #6)
> We need a final say on what we want here. I personally do agree with Aaron
> after trying the build that a tiny bit of glow brings more focus to the
> hovered tile.

Well yes, it certainly draws attention. Is there some particular need for that here? It seems like there's a concern that with the remaining feedback users wouldn't perceive a hovered tile as a click target? Maybe this could be A/B tested?

Comment 8

[Kevin Ghim]

Attachment: Hover, titlebar treatment

The hover effect is in line with other visual treatment address & search bar on-click. I think we can reduce the on-hover radius by a pixel and/or use a softer color. For the screenshot, I used 

box-shadow: 0 0 6px 1px #ADD6FF;

We could also try use a dark grey instead of black for a less jarring effect. Aaron?

Comment 9

[Aaron]

Kevin, yes - a softer blue glow, as you've shown, works for me.

Thank you!

Comment 10

[Dão Gottwald [:dao]]

Attachment: patch v2

(In reply to Kevin Ghim from comment #8)
> We could also try use a dark grey instead of black for a less jarring
> effect. Aaron?

Good idea. I'm using #444 in this patch. Also applied your suggested change to the box-shadow.

Comment 11

[Kevin Ghim]

(In reply to Dão Gottwald [:dao] from comment #10)
> Created attachment 8652253 [details] [diff] [review]
> patch v2
> 
> (In reply to Kevin Ghim from comment #8)
> > We could also try use a dark grey instead of black for a less jarring
> > effect. Aaron?
> 
> Good idea. I'm using #444 in this patch. Also applied your suggested change
> to the box-shadow.

I'm OK with this. Aaron, are you ok with the titlebar bgcolor #44444?

Comment 12

[Aaron]

I'm okay with #333333... #444444 isn't quite dark enough to provide sufficient contrast between the rollover title bar and dark tile backgrounds (like Facebook blue).

Comment 13

[Dão Gottwald [:dao]]

Attachment: patch v3

Comment 14

[Dão Gottwald [:dao]]

Oops, I accidentally started requesting reviews from kghim instead of msamuel. Not sure if kghim does code reviews...

Comment 15

[Kevin Ghim]

(In reply to Dão Gottwald [:dao] from comment #14)
> Oops, I accidentally started requesting reviews from kghim instead of
> msamuel. Not sure if kghim does code reviews...

Looks good to me, but better to have msamuel actually review it.

Comment 16

[Marina Samuel [:emtwo]]

Comment on attachment 8652423 [details] [diff] [review]
patch v3

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

Thanks dao

Comment 17

[Pulsebot]

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

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/4cf995d36573

Comment 19

[Liz Henry (:lizzard) (relman/hg->git project)]

Tracking, though this got resolved before I got to it in triage. Great!

Comment 20

[Khalid Syfullah Zaman [:khalid32]]

I have reproduced this bug on Nightly 43.0a1 (2015-08-22) on ubuntu 14.04 LTS, 32 bit!

Build ID: 20150822030206
User Agent: Mozilla/5.0 (X11; Linux i686; rv:43.0) Gecko/20100101 Firefox/43.0

Also reproduced this bug on Aurora 42.0a2 (2015-08-22)!

Build ID: 20150822004009
User Agent: Mozilla/5.0 (X11; Linux i686; rv:42.0) Gecko/20100101 Firefox/42.0

The bug's fix is now verified on Latest Aurora 43.0a2 (2015-10-11)!

Build ID: 20151011004016
User Agent: Mozilla/5.0 (X11; Linux i686; rv:43.0) Gecko/20100101 Firefox/43.0

[bugday-20151007]

Comment 21

[Rezaul Huque Nayeem]

Reproduced the bug in 43.0a1 (2015-08-22) on windows 10 x64

Verified as fixed with latest Firefox Aurora 43.0a2 (Build ID: 20151015004024) 

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:43.0) Gecko/20100101 Firefox/43.0

As it is also verified on Linux (Comment 20), Marking it as verified!