1174638 - [notification] Improve usability/performance of Airplane mode icon

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System::Status bar, Utility tray, Notification, defect)

Description

[Bobby Chien]

Improve bad response on airplane mode icon

Comment 1

[Szu-Yu Chen [:aknow] (inactive)]

The observation of togging airplane mode from quick setting (notification tray):

off -> on
icon color change : white -> dim blue -> blue

on -> off
icon color change : blue -> white

The problem is that when switching off, a transitional state (dim blue) is lacked. That means the icon remains in blue for several seconds and then finally turn into white after the phone finish all the works. 

It seems to me that it's difficult for the users to make sure whether they indeed click the button because the color doesn't change immediately.

I would suggest to introduce a transition state when turning from on to off. That makes it symmetric and leads to a better user feeling.

Let me ni UX for the experts' ideas. If the proposal sounds good, what is a good presentation of that transitional state. Which color or ...? The presentation should indicate users that it's toggling now and prevent them click the icon again during the period.

Comment 2

[Guillaume Marty [:gmarty]]

Eric worked on the quick settings. I'm sure his thought will be valuable here.

Comment 3

[Tori Chen [:tori]]

After I discussed with our designers, I found we have similar issue in the Settings app and we already have a solution for it. If you open the settings app and switch the airplane mode, it will apply a 50% transparency and disable the button during the period.

So, actually there is no dedicate color for transition mode, it changes based on original color and background color. I think we can make things consistent here. 

Proposal: 
off -> on
icon color change : white -> white + 50%transparency -> blue (icon is disable during the period)

on -> off
icon color change : blue -> blue + 50%transparency -> white (icon is disable during the period)

Comment 4

[Szu-Yu Chen [:aknow] (inactive)]

I guess we might only need to adjust the style here
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/quick_settings/quick_settings.css

Add the color setting for these two rules.
#quick-settings-airplane-mode[data-enabling]
#quick-settings-airplane-mode[data-disabling]

However, I am not familiar with gaia code and the patch process. I'd like to have someone to help and take the bug. Fred, could you help this bug since you know more about the settings?

Comment 5

[[e-mail]]

per offline discussion, add white(#fff) with 50% transparency for [data-disabling] state could change all icons disabling state.

Comment 6

[Szu-Yu Chen [:aknow] (inactive)]

confirmed with UX, the policy should be

off -> on: white -> blue (50%) > blue
on -> off: blue -> white (50%) -> white

Comment 8

[Szu-Yu Chen [:aknow] (inactive)]

Attachment: PR 31251

Comment 9

[Szu-Yu Chen [:aknow] (inactive)]

Comment on attachment 8643546 [details] [review]
PR 31251

:gmarty,

Would you please review my pull request?

Per discussion with UX team, we would like to introduce a transient state and the icon color change when switching off airplane mode from quick setting. It could serves as good hit state to indicate the user that the icon is clicked.

Comment 10

[Guillaume Marty [:gmarty]]

Comment on attachment 8643546 [details] [review]
PR 31251

LGTM. Many thanks!

Comment 11

[GitHub Autolander Bot]

Autolander could not locate a review from a user within the suggested reviewer list. Either the patch author or the reviewer should be in the suggested reviewer list.

Comment 12

[[e-mail]]

merged to master https://github.com/mozilla-b2g/gaia/commit/497fe3f938722b0aa49c93f975fad5d9ed3b0a82