1750911 - Clarify that the displayed browsers in the Compatibility panel have an issue

Status: RESOLVED FIXED

(DevTools :: Inspector: Compatibility, task)

Description

[Julian Descottes [:jdescottes]]

There is more discussion about reworking the information from the panel to clearly say which browser supports what at Bug 1636274, but I am not sure this will fit in the timeframe for 98 (especially not sure if we have all the information ready).

So tentatively filing this to address the first issue which came from the feedback, which is that users can't tell if the listed browsers are browsers which are "fine" with the property, or browsers which might have a problem.

Some suggestions discussed:

• make browser icons red
• add a badge on the browser icon (red cross, warning sign)
• add a label, similar to the prefix needed and deprecated ones. Could be Unsupported in, limited or missing support...

I think that when a prefix needed or deprecated label is shown, there is less ambiguity about the fact that the UI is focusing on showing where there are problems and not where you can use something. So for the last proposition, I don't think we would need two labels.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: UI proposal

Here's something I tried today:

• Adding an "error" badge to the browser icon; makes it clear that something is not supported
• Moving the title attribute from individual browser icon to the list of browser icons, showing all the unsupported versions explicitly. Not sure about the red cross emoji, but that something that may help? I don't know if that would show up correctly in all platform though. As an alternative, we could remove the red cross, and have a "Not supported in:" line before all the versions

What do you think?

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1750911 - [devtools] Reduce confusion around displayed browser icons in compatibility panel. r=jdescottes.

In order to make it more clear what the browser icons mean in the compatibility
panel, this patch adds a red error badge next to them so it's clear we show
unsupported browsers.
We take this opportunity to move the title attribute that was set on individual
browser icon to the browser icon list instead, in which we put the full list of
unsupported browser with their name and version, on separate lines.

Comment 3

[Julian Descottes [:jdescottes]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

Created attachment 9260801 [details]
UI proposal

Here's something I tried today:

• Adding an "error" badge to the browser icon; makes it clear that something is not supported
• Moving the title attribute from individual browser icon to the list of browser icons, showing all the unsupported versions explicitly. Not sure about the red cross emoji, but that something that may help? I don't know if that would show up correctly in all platform though. As an alternative, we could remove the red cross, and have a "Not supported in:" line before all the versions

What do you think?

In the end I am not sure about the badge for the following reasons:

• the badge will be displayed on all browser icons, so once the user knows how the panel works, it becomes redundant information
• too small and blurry on low-DPI screens (it's not clear it's an exclamation point)

But I really like your second idea, to modify the title to make it a global "browser section" title. I would suggest to go for that in a first step. Let's avoid the red cross emoji, because sometimes that would be too strong (eg if a property is partially supported).

I would try to find a sentence that works for all cases, eg "Compatibility issues in:".

Then if we still receive feedback that users are confused we can change it further. But it feels like it's something users need to be taught once, so having the information in a global title could be a perfect compromise here!

And I think we should also reuse this approach for Bug 1750914

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Julian Descottes [:jdescottes] from comment #3)

In the end I am not sure about the badge for the following reasons:

• the badge will be displayed on all browser icons, so once the user knows how the panel works, it becomes redundant information
• too small and blurry on low-DPI screens (it's not clear it's an exclamation point)

Good call, I removed it for now.
I kinda liked that it was quite discoverable (in comparison with the tooltip) while being minimal.
I wonder if we could switch to a simple red circle (yellow for partial support ?) Or some kind of yellow/light-red background on the icons container? Or something else? I was trying to replicate the mdn compat table, displaying version number, but it wasn't looking great (Safari version numbers, 15.1 is taking too much space, which highlighted that with 3 digits version numbers coming up it would be a bit too dense)

Comment 5

[Julian Descottes [:jdescottes]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)

(In reply to Julian Descottes [:jdescottes] from comment #3)

In the end I am not sure about the badge for the following reasons:

• the badge will be displayed on all browser icons, so once the user knows how the panel works, it becomes redundant information
• too small and blurry on low-DPI screens (it's not clear it's an exclamation point)

Good call, I removed it for now.
I kinda liked that it was quite discoverable (in comparison with the tooltip) while being minimal.
I wonder if we could switch to a simple red circle (yellow for partial support ?) Or some kind of yellow/light-red background on the icons container? Or something else? I was trying to replicate the mdn compat table, displaying version number, but it wasn't looking great (Safari version numbers, 15.1 is taking too much space, which highlighted that with 3 digits version numbers coming up it would be a bit too dense)

Let's try the red/yellow circles. We should remember that using only colors to convey meaning is not accessible.
My biggest worry there is that the browser icons might become less recognizable. They are already small and monochrome so overlaying badges on them might hurt readability. Maybe put the circle on the bottom left of the icons (to avoid hiding the head of the fox :) helps distinguishing it from other icons)

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: red dot

Meh, it's not great. The dot clashes with the mobile icon and it would be hard to have information about a same browser having no support in release and partial support in beta for example.

For now, let's go with the updated tooltip only, as an MVP
We may think of something better if people tell us they're still confused about it

Comment 7

[Julian Descottes [:jdescottes]]

Sounds good to me, sorry about the back and forth here!

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a14acd1c787e
[devtools] Reduce confusion around displayed browser icons in compatibility panel. r=jdescottes,fluent-reviewers,flod.

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/a14acd1c787e