1412020 - Make paused/active state more obvious

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[:Harald Kirschner :digitarald]

Attachment: paused state

The paused icon feels non-obvious as it doesn't have any button styling without hover and just shows 2 disconnected lines.

As it is a stateful button, maybe use the filter style of gray/blue background.
More clean up ideas:

Just to make it stand out, add space next to the trashcan to separate the filters better (as comparison the checkboxes are better spaced)

Comment 1

[:Harald Kirschner :digitarald]

UX r?

Comment 2

[:Harald Kirschner :digitarald]

Reusing the existing styling for the "enabled" state I propose the following:

- Only have use the paused icon, remove the play icon
- For the paused state use existing "active" styling; the gray-background/blue-icon similar to paint-flashing in icon bar (or color picker in inspector)

Comment 3

[Victoria Wang [:victoria]]

Ah, so maybe instead of pause (which is so connected to a "play" state, and seems to necessitate the play button) it could be a stop sign or something. And it would appear gray by default, but if you click it to pause, it turns blue?

It's a little weird that the active state is paused, so it could make sense to do the Chrome-style recording icon that is bright for the normal state of recording, and gray when you pause.

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Victoria Wang [:victoria] from comment #3)
> Ah, so maybe instead of pause (which is so connected to a "play" state, and
> seems to necessitate the play button) it could be a stop sign or something.
> And it would appear gray by default, but if you click it to pause, it turns
> blue?
> 
> It's a little weird that the active state is paused, so it could make sense
> to do the Chrome-style recording icon that is bright for the normal state of
> recording, and gray when you pause.
I like the idea to be consistent with chrome-style.

Btw. there is also bug 1410351, but already in landing process. So, let's use
this report as a follow up.

Honza

Comment 5

[:Harald Kirschner :digitarald]

> Ah, so maybe instead of pause (which is so connected to a "play" state, and seems to necessitate the play button) it could be a stop sign or something.

I have doubts on how Play maps to the mental model of pausing recording and struggle myself saying which state I am in with the Play icon. My mental model is pausing/unpausing recording.

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I am not fan of pause/resume icon either. I rather prefer a 'light-bulb' concept. Having an icon that shines to indicate that the entire feature (panel) is on. I think that's what Victoria is suggesting in comment #3 - using a stop icon:

> "And it would appear gray by default, but if you click it to pause, it turns blue?

Yep, we can use simple circle or square icon (in Chrome it turns Red btw. we can use it too for consistency)

Honza

Comment 7

[Victoria Wang [:victoria]]

Now that we're moving some Network panel design tasks to Q1, I'm assuming this will be saved for Q1 as well. If I'm wrong, let me know.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Victoria Wang [:victoria] from comment #7)
> Now that we're moving some Network panel design tasks to Q1, I'm assuming
> this will be saved for Q1 as well. If I'm wrong, let me know.
Yep, I just appended this bug into the UI Analysis doc
Honza

Comment 9

[Victoria Wang [:victoria]]

Great, thanks Honza!