Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block category icons are distracting #14180

Closed
iandunn opened this issue Mar 1, 2019 · 12 comments
Closed

Block category icons are distracting #14180

iandunn opened this issue Mar 1, 2019 · 12 comments

Comments

@iandunn
Copy link
Member

@iandunn iandunn commented Mar 1, 2019

Is your feature request related to a problem? Please describe.

#10651 added support for category icons in the Block Inserter. For example:

Screenshot of Inserter with blocks that have icons

When I'm searching for a block, my eye is instantly drawn away from the names of all the block categories, and to the green Jetpack logo, because it stands out far more than anything else. This pulls my eye away from the information that I need in order to complete my task, and towards information that is not useful.

At best, it makes things look a little nicer without any functional benefit to users.

At worst, it creates a race-to-the-bottom where every plugin competes for the user's attention by adding their own brightly-colored logos. At that point, the Inserter will look cluttered, garish, and visually inconsistent.

Describe the solution you'd like

I think the ideal solution is to remove support for these icons, because they hurt UX and serve no functional purpose.

Describe alternatives you've considered

As a compromise, forcing the icons to be black-and-white would remove the worst parts while preserving the ability to have icons.

@boemedia
Copy link

@boemedia boemedia commented Mar 11, 2019

We had a discussion about this in today's ticket triage on the design channel. I do agree that adding coloured icons distract and can end up in a competition of brands. This can lead to cognitive overload for users. Therefore I endorse removing support for these icons.

@cathibosco
Copy link

@cathibosco cathibosco commented Mar 11, 2019

  • The design team discussed this today with strong opinions... we are concerned the colorful icons at this category level add cognitive load.
  • We are also unsure the icons add anything significantly useful to users
    -For some of us with dyslexia - the incorporation of icons at this level only helps (some of us) if EVERY entry has them.
  • The alternative to use black and white only seems a bit better but still not worth the cognitive load.

I agree I think the ideal solution is to remove support for these icons, because they hurt UX and serve no functional purpose.

@boemedia
Copy link

@boemedia boemedia commented Mar 13, 2019

I also noticed these branded icons come in on other places in the editor, like the sidebar. Maybe this needs a different ticket, or else we could go about the use of coloured, branded icons in general.
image

@sarahmonster
Copy link
Member

@sarahmonster sarahmonster commented Apr 15, 2019

The use of colour often means these icons are the most prominent item on the page. This isn't necessarily helpful unless that panel is what the user is looking for at the time, which won't always be the case. (I'd also agree with @boemedia that we might want to consider how colour is used in branded icons elsewhere, but that's probably worth discussing as a separate ticket.)

Since there won't always be icons for every panel, it also creates a mismatch in the overall weight of these headings, making it harder to parse them as equal elements.

The potential value here in making the distinction between panels more clear isn't sufficient to warrant the additional noise and cognitive load created by adding the icons. I'd be on board with removing them entirely.

@karmatosed
Copy link
Member

@karmatosed karmatosed commented May 7, 2019

I am removing the 'User Experience (UX)' label as part of a label cleanup. It's not being used anymore consistently so let's try and keep to 'needs design' and 'needs design feedback'. If we find a need for another label we can consider it but having those 2 should cover this.

@mapk
Copy link
Contributor

@mapk mapk commented May 30, 2019

While I completely agree with all these comments, I will note that the icons have helped me discover where new blocks (from a recently installed plugin) are located. Because I tend to use the same blocks most of the time, they are regularly located in the top "Most Common" blocks category. It isn't until I see a new icon that I realize, "Oh look, there's some new stuff!"

But seeing as these are more distracting once users knew they have new blocks, I'm in favor of removing them, or at the very least filtering all icons to greyscale.

@mapk
Copy link
Contributor

@mapk mapk commented Jun 13, 2019

By adding a CSS filter; filter: grayscale(1); it could look something like this. Any thoughts or reservations around this?

Screen Shot 2019-06-13 at 8 08 09 AM

mapk added a commit that referenced this issue Jun 13, 2019
@iandunn
Copy link
Member Author

@iandunn iandunn commented Jun 14, 2019

That sounds good to me 👍

Part of me worries about people overriding that CSS rule (either intentionally, or without knowing why it exists), but forcing things to be the way we'd prefer is probably too heavy-handed. If someone really wants to be obnoxious, 🤷‍♂, it's their plugin, and users can always "vote with their feet".

It might be worth making sure that the documentation mentions that it should be greyscale, though, and also having a CSS comment next to the rule explaining why it exists, and recommending that it's left in tact.

@boemedia
Copy link

@boemedia boemedia commented Jun 14, 2019

Looks les intrusive, so yes. Also agree with what Ian says: explain in the documentation and css file why this choice was made and encourage plugin owners to leave the rule in tact.

@mapk mapk closed this in #16163 Jun 14, 2019
mapk added a commit that referenced this issue Jun 14, 2019
* Fixes #14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
jg314 added a commit to jg314/gutenberg that referenced this issue Jul 19, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
sbardian added a commit to sbardian/gutenberg that referenced this issue Jul 29, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
dd32 pushed a commit to dd32/gutenberg that referenced this issue Sep 27, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
@iandunn
Copy link
Member Author

@iandunn iandunn commented Jan 6, 2020

Re-opening, because #16163 was reverted in #17415.

Is there a win-win solution that addresses the concerns in this issue as well as those in #17415?

@mapk
Copy link
Contributor

@mapk mapk commented May 12, 2020

It looks like this is no longer an issue with the new Inserter. Icons are not a part of it anymore from what I can tell.

Screen Shot 2020-05-12 at 4 35 54 PM

@mapk mapk closed this May 12, 2020
@iandunn
Copy link
Member Author

@iandunn iandunn commented May 13, 2020

It looks like they're still supported, but the categories aren't collapsable anymore, so the icons doesn't seem distracting in that context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

7 participants