Make tiles hover effect less jarring

VERIFIED FIXED in Firefox 43

Status

()

Firefox
New Tab Page
VERIFIED FIXED
3 years ago
3 years ago

People

(Reporter: dao, Assigned: dao)

Tracking

(Blocks: 1 bug)

Trunk
Firefox 43
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox43+ verified)

Details

Attachments

(2 attachments, 2 obsolete attachments)

(Assignee)

Description

3 years ago
Created attachment 8651403 [details] [diff] [review]
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.
Attachment #8651403 - Flags: review?(msamuel)
(Assignee)

Comment 1

3 years ago
[Tracking Requested - why for this release]: See comment 0. I think this looks bad enough that we should do something about it before release.
tracking-firefox43: --- → ?
(Assignee)

Updated

3 years ago
Attachment #8651403 - Flags: ui-review?(athornburgh)

Comment 2

3 years ago
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.
(Assignee)

Comment 3

3 years ago
(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.
(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?
(Assignee)

Comment 5

3 years ago
(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/dgottwald@mozilla.com-0f7cc3e1914a
https://ftp-ssl.mozilla.org/pub/mozilla.org/firefox/try-builds/dgottwald@mozilla.com-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.
Flags: needinfo?(kghim)
(Assignee)

Comment 7

3 years ago
(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

3 years ago
Created attachment 8651935 [details]
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?
Flags: needinfo?(kghim)

Comment 9

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

Thank you!
(Assignee)

Comment 10

3 years ago
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.
Attachment #8651403 - Attachment is obsolete: true
Attachment #8651403 - Flags: ui-review?(athornburgh)
Attachment #8651403 - Flags: review?(msamuel)
Attachment #8652253 - Flags: review?(kghim)
(Assignee)

Updated

3 years ago
Summary: Remove hover glow from tiles → Make tiles hover effect less jarring

Comment 11

3 years ago
(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?
Flags: needinfo?(athornburgh)

Comment 12

3 years ago
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).
Flags: needinfo?(athornburgh)
(Assignee)

Comment 13

3 years ago
Created attachment 8652423 [details] [diff] [review]
patch v3
Attachment #8652253 - Attachment is obsolete: true
Attachment #8652253 - Flags: review?(kghim)
Attachment #8652423 - Flags: review?(kghim)
(Assignee)

Comment 14

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

Comment 15

3 years ago
(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.
(Assignee)

Updated

3 years ago
Attachment #8652423 - Flags: review?(kghim) → review?(msamuel)
Comment on attachment 8652423 [details] [diff] [review]
patch v3

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

Thanks dao
Attachment #8652423 - Flags: review?(msamuel) → review+
https://hg.mozilla.org/mozilla-central/rev/4cf995d36573
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox43: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 43
Tracking, though this got resolved before I got to it in triage. Great!
tracking-firefox43: ? → +
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

3 years ago
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!
Status: RESOLVED → VERIFIED
QA Whiteboard: [bugday-20151014]
status-firefox43: fixed → verified
You need to log in before you can comment on or make changes to this bug.