(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)
Created attachment 9260801 [details]
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