Responsive preview icons in Customizer need tooltips

[ahortin]

The new icons at the bottom of the Customizer for toggling the preview window of your site really need tooltips to indicate what they're for.

Just like the tooltips on the Visual Editor icons, other icons in the Dashboard should have tooltips as well. As leading usability expert Jakob Nielsen explains;

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

​https://www.nngroup.com/articles/icon-usability/

Even the Google Design Guidelines recommend tooltips for icons
​https://www.google.com/design/spec/components/tooltips.html#

I originally raised this as a post on the ​Beta forum but it was suggested that since it's getting late in the 4.5 release cycle it would be best to raise it as a Trac ticket.

[westonruter]

+1

I personally feel the tooltips would be helpful. The icons aren't totally clear what the buttons do. Here the accessible text is even more clear than the visual icons, I think. Here the visual users need an accessibility aid.

[celloexpressions]

Repeating my comment from Slack:

Because these buttons perform non-destructive actions that are visually obvious when clicked, I think the simplicity of not having tooltips is better. They would certainly become distracting once the user knows what the buttons do, and after using them a few times I would expect most users to remember their purpose. My only concern would be whether users try clicking them in the first place, and that could potentially be solved with a feature pointer or by the specific way it's highlighted on the about page.

I also wouldn't want to attach text to these as the specific buttons are intentionally ambiguous - the previewed sizes are arbitrary and not intended to represent specific devices, only provide a general idea of how the site behaves on different screen sizes.

If appropriately vague text labels could be found, we could look at doing this. I personally feel that the labels there for screen readers are a bit too specific (potentially mis-interpreted) already.

Full conversation: ​https://wordpress.slack.com/archives/core-customize/p1460024296000353.

[ahortin]

@celloexpressions the fact that they're non-destructive is irrelevant. People shouldn't have to click a button to find out what it does. That's the most annoying thing ever. Why is there a tooltip on the Distraction Free Writing icon in the Visual Editor? It's non-desctructive as well. By your way of thinking, this tooltip should be removed also.

You should know what an icon/button does BEFORE you click it. If I'm using an interface and I don't know what a particular button does, I'm less likely to click it at all, just in case it messes up my work. If I don't know what the icon/button does, how do I know if it's non-destructive?

Even though the sizes may be arbitrary, they'd still benefit from having labels like "Mobile view/Tablet view/Desktop view", or something along those lines. They're not device specific and will at least give people an idea of what the icon does.

Also, tooltips don't become distracting once you know what an icon/button does. I refer to the Visual Editor again. I don't find the tooltips on any of those buttons annoying and I've been using them for 10+ years. Once you know what an icon does, you simply click it and move on. Your mouse doesn't tend to hover over it. The tooltip will only display for a microsecond.

[rianrietveld]

Discussed this ticket in the wpa11y meeting:
Adding Tooltips seems like a good idea:
@iamjolly: I really like how GitHub does the icons with aria-label and tooltips.

[iamjolly]

GitHub icons in hover state showing tooltip text

[iamjolly]

GitHub icons with focus showing tooltip and appropriate VoiceOver output for icon

[Cheffheid]

Just to give this a bit of a push forward. I jacked some of the Github code and created a .tooltip class (limited to #customize-controls for now). Would definitely appreciate some design input on these things to help them match the admin look better.

One complication that I'm running into with these CSS-only tooltips is that when one of those buttons is clicked the tooltip sticks around. I think there are JS solutions to fix that (like ​https://marcysutton.com/button-focus-hell/), but I'm a bit too overwhelmed by the amount of Customizer JS to make that change properly.

Will add a patch with what I have so far, which adds the tooltip class CSS and adds the class to the device buttons.

[JoshuaWold]

We just discussed this in our #design triage. As long as the tooltips are created the same way as "tooltips" for the WordPress Gutenberg editor (with accessibility in mind), then it definitely makes sense to include in the Customizer.

Also, the text suggested seems to work well.

[estelaris]

This ticket has had design recommendations from 3 years ago. Can a developer please pick it up from here and add a patch with screenshots to see the patch working