815152 - Homescreen icons give no visual feedback when tapped

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Homescreen, defect, P3)

Description

[Peter La]

What makes it feel slow/broken?

The icons should highlight when tapped, otherwise, it doesn't feel as responsive as it should.

Did it prevent you from doing what you wanted? Why?

No, but it's a small impression that adds up as it occurs throughout the system.  The result of this lack of feedback is reduced user trust that the intended action will be performed/increased uncertainty.

How does this make you feel?

[ ]  :)  I feel happy about it
[X]  :|  Meh
[ ]  :(  I'm upset
[ ] >:O  I'm angry

Device: Unagi, Nov. 22 Nightly.

Details: (technical factors, FPS, app startup time, ms elapsed, etc)

Bonus: can you attach a video of the problem?
Time permitting.

Comment 1

[Josh Carpenter [:jcarpenter]]

The lack of visual button feedback is a serious usability and satisfaction issue and should be addressed for release.

Do we have visuals for this?

Comment 2

[Josh Carpenter [:jcarpenter]]

Discussed this with visual design, and we're open minded on the best approach, but one simple option is to dim the icon when an app is tapped.

Comment 3

[Patryk Adamczyk [:patryk] UX]

Attachment: Image Tint Example

Can we add an image tint to the icons?
rgba(0,142,171, 0.65)

Comment 4

[Cristian Rodriguez (:crdlc)]

In this branch [1] by means of SVG filter we can have a approach to the final solution

[1] https://github.com/crdlc/gaia/tree/bug-815152

Comment 5

[Dominic Kuo [:dkuo]]

crdlc, are you going to take this one? if so, I have a suggestion.

In your branch, you are using classList.add to apply the svg filter, and remove it by window.setTimeout(), I think you can consider to use CSS pseudo-class, like: li:active {...}, then you don't have to add some "style" logic in the code. And this can end up with only a SVG and CSS patch.

And if you are not taking this one, please comment and I would like to take, thanks.

Comment 6

[Cristian Rodriguez (:crdlc)]

Yesterday I was working on it so I like to continue working on it as well

Comment 7

[Cristian Rodriguez (:crdlc)]

About active... it is a good idea that I thought yesterday but with this approach the icons are active not only when they are tapped, furthermore long press or panning. I want to ask to Patryk or Dominic. Thanks

Comment 8

[Cristian Rodriguez (:crdlc)]

Attachment: Patch v1

Josh has seen a demo of this patch and he likes

Comment 9

[Cristian Rodriguez (:crdlc)]

Thanks Dominic for your feedback. I used your idea.

Comment 10

[Dominic Kuo [:dkuo]]

no problem, and sorry to interrupt you, just make sure this issue is taken because yesterday it was assigned to nobody, thanks.

Comment 11

[Cristian Rodriguez (:crdlc)]

Don't worry, my bad memory forgot to assign me the bug before starting working on it :) I usually take the homescreen's bugs although anybody can as well jeje. Thanks Dominic!

Comment 12

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Comment on attachment 699623 [details]
Patch v1

Simple CSS change that brings a lot. Let's land it.

Comment 13

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

https://github.com/mozilla-b2g/gaia/commit/db7bc783b71f7a5bafdcc0c3a744ba17dc250216