New icons - a small selection of the concerns

[bobbingwide]

Describe the bug
At the WordPress Portsmouth Online Meetup there were a number of concerns expressed over the new icons.
I'd like to be able to raise comments from some people regarding their misunderstanding of the purpose of the changed icons.

I mentioned this on Slack. Mark Uraine ( @mapk ) suggested I raise this issue.

Examples:

• Heading icon being misinterpreted as bookmark.

• Heading icon appearing similar to Save icon ( Slack uses an outline of the same shape )

• Users asking where the paper clip icon has gone; not recognizing the new link icon.

• There were discussions on most of the changed icons used in the heading and paragraph blocks.

  • Why change them?
  • Has it really improved the interface?

• Why is the ellipsis horizontal in blocks but vertical in the top toolbar?

• There were also a number of concerns mentioned by dyslexic people

  • loss of context with the popups / dropdowns for Text and Media Alignment. See screenshot
  • mistaking the paragraph symbol for a Pi sign

• Most attendees agreed that the Italic icon just looked like a slash.

Additional examples from Manchester WordPress User Group

• Comments on Alignment icons for text and images ... not knowing that there are other options because the down arrow's no longer there.

To reproduce
Steps to reproduce the behavior:

1. Install either WordPress 5.5. beta3 or Gutenberg and open the block editor.
2. Have a good look at the icons for blocks like paragraph and heading.
3. Do they make more or less sense than the ones in WordPress 5.4?
4. If not, document your thoughts
5. Repeat

Expected behavior
We weren't at all sure that anything would come of this issue. But we wanted to raise it just to be heard.

It may be necessary to reconsider the question of context for dsylexic readers.
Is it an accessibility issue?

Also, I've taken a screen capture where the popup is nowhere near the toolbar. This should probably be raised as a separate issue.

It's pretty clear that there's a ton of documentation that needs to be updated and a whole load of tutorials are needed as well.

Screenshots
The heading block - before and after. In WordPress 5.4 there's an arrow to give context to the popup. It's not there in the new version.

Playing with the Text colour icon.

• Why does the icon appear in the block's toolbar then disappear?
• Should the popup stay still as I scroll the page?

• And why is the tool tip for Text Colour in UK English but everything else is in US English?

If applicable, add screenshots to help explain your problem.

Editor version (please complete the following information):

• WordPress version: 5.5-beta3 and/or Gutenberg 8.5.1 or later

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome / Firefox
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
#20284

PS. We have no idea what is meant by the term G2.

[bobbingwide]

More examples. The icon used for Heading looks just like the Instagram icon for a photo that’s been Saved to your collection.

[paaljoachim]

Thank you very much for creating this issue, Herb @bobbingwide !
I brought up the issue in the design channel on Slack and hopefully we will have a few folks go through it, and give some good reasons to why things are as they now are.

[hedgefield]

Hey @bobbingwide, thanks for raising these issues. As a start, the design team discussed that an H is probably a better icon for heading than the bookmark icon, which indeed clearly has a different connotation on the web these days. Here's a quick mockup for that.

We'll soon look at the rest of those icons too.