Open Bug 1412020 Opened 2 years ago Updated 2 years ago

Make paused/active state more obvious

Categories

(DevTools :: Netmonitor, defect, P3)

defect

Tracking

(firefox58 affected)

Tracking Status
firefox58 --- affected

People

(Reporter: Harald, Unassigned)

References

Details

Attachments

(1 file)

Attached image 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)
UX r?
Flags: needinfo?(victoria)
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)
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.
Flags: needinfo?(victoria)
(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
> 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.
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
Priority: -- → P3
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.
Flags: needinfo?(hkirschner)
(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
Great, thanks Honza!
Flags: needinfo?(hkirschner)
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.