Homescreen icons give no visual feedback when tapped

RESOLVED FIXED

Status

Firefox OS
Gaia::Homescreen
P3
normal
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: Peter La, Assigned: crdlc)

Tracking

(Blocks: 1 bug, {perf})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: interaction, visual design, UX-P2, BerlinWW)

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
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.

Updated

5 years ago
Component: Gaia → Gaia::Homescreen
Priority: -- → P2
(Reporter)

Updated

5 years ago
Summary: [Gaia::Homescreen][ux-trust] Homescreen icons give no visual feedback when tapped → [Gaia::Homescreen] Homescreen icons give no visual feedback when tapped
Keywords: ux-trust
Priority: P2 → P3
Whiteboard: perf, ux-trust → interaction
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?
Flags: needinfo?(padamczyk)
Whiteboard: interaction → interaction, visual design, UX-P2, BerlinWW
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.
Summary: [Gaia::Homescreen] Homescreen icons give no visual feedback when tapped → Homescreen icons give no visual feedback when tapped
Flags: needinfo?(padamczyk)
Created attachment 699143 [details]
Image Tint Example

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

Comment 4

5 years ago
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

5 years ago
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.

Updated

5 years ago
Assignee: nobody → dkuo
(Assignee)

Comment 6

5 years ago
Yesterday I was working on it so I like to continue working on it as well
Assignee: dkuo → crdlc
Status: NEW → ASSIGNED
(Assignee)

Comment 7

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

Comment 8

5 years ago
Created attachment 699623 [details]
Patch v1

Josh has seen a demo of this patch and he likes
Attachment #699623 - Flags: review?(21)
(Assignee)

Comment 9

5 years ago
Thanks Dominic for your feedback. I used your idea.

Comment 10

5 years ago
no problem, and sorry to interrupt you, just make sure this issue is taken because yesterday it was assigned to nobody, thanks.
(Assignee)

Comment 11

5 years ago
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 on attachment 699623 [details]
Patch v1

Simple CSS change that brings a lot. Let's land it.
Attachment #699623 - Flags: review?(21)
Attachment #699623 - Flags: review+
Attachment #699623 - Flags: approval-gaia-master+
You need to log in before you can comment on or make changes to this bug.