Console log toggles are incomprehensible without labels

RESOLVED INCOMPLETE

Status

DevTools
Console
RESOLVED INCOMPLETE
4 years ago
a month ago

People

(Reporter: Florens Verschelde, Unassigned)

Tracking

Trunk

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
Created attachment 8474783 [details]
color-dots-alternative.png

When the devtools are narrow, the console log toggles (Net, CSS, JS, Security, Logging) switch to a more compact design: from “small color dots + label + dropdown triangle” to “big color dot + dropdown triangle”. This design has many issues:

- It’s arcane information. Users will have to have remembered the order of buttons or the color of the dots to know what they’re clicking on. From a usability perspective (ease and *speed* of use), that’s very costly and error-prone.
- It’s not accessible. Information coded with color only may be lost to users with color blindness. (I’m not colorblind myself, but I tried Color Oracle’s simulations for Deuteranopia and Protanopia, the most common forms of color blindness, and they’re not encouraging.)
- Less importantly, when buttons are not differentiated by different background colors, the triangles that trigger the dropdowns are shown squarely between two dots and it’s hard to tell to which “dot” it belongs.

I suggest a different design:

1. Use short labels. Most labels are short already but there would need to be a 2-to-4 letter short label for each button in addition to the normal label.
2. Drop the color dots. Optionally, use a different reminder of the color code, such as an underline.
3. On hover, use different styles when hovering the left part (label) or the right part (dropdown) of the button.

I’m attaching a mock-up showing that.

I suspect the main challenge here would be internationalization for #1.

Updated

4 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

4 years ago
OS: Mac OS X → All
Hardware: x86 → All
We're currently redesigning the web console filter, so this will be addressed as part of that work.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → INCOMPLETE

Updated

a month ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.