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.
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
You need to log in before you can comment on or make changes to this bug.