16

I was looking at the Material Design 3 Icon design principles and they have an example that seems like bad UX to me. I'm sure I'm wrong but I'd like to know if (and how) the "Do" is better designed than the "Don't", in terms of UX.

I understand the design principle they are showcasing about organic shapes but the "Do" example seems a little too stylized and I struggle more to recognize it at a zoomed out distance, as compared to the "Don't" example.

If the "Don't" had a thicker stroke, I would say it's better UX since it has better iconographic readability. Can someone with more experience weigh in? Do's and Don'ts for Icon design

1
  • 1
    lol, the Do version looks like a poorly done Image Trace operation in Illustrator... Jun 30 at 13:09

3 Answers 3

12

Material Design has generated a lot of controversy in its history, and each version has some "controversial" decisions (to say the least), although it gets better with each version. But you've to keep in mind that these are just guidelines, not something you've to follow to the letter.

Now, as for your specific example, you're absolutely right that the Material Design icon needs some work and is quite hard to spot. In fact, I'm a bit shocked that they did that.

But the "Don't" example, while more recognizable, looks a bit disjointed, and I'm pretty sure it'll look bad at small sizes and probably have accessibility issues. Please note, I say "probably" because I haven't really tested it. I just did a zoom out in my computer and I can barely make out what the icon is, while the "Do" version has retained its visibility and recognizability.

3
  • Thank you for answering! I did some more research based on your comment and now I've learned about the controversial nature of Material Design. I overestimated the positive reception of MD, specifically within the UX community.
    – FrontDeer
    Jun 29 at 21:17
  • @FrontDeer What did you find? Even searching literally for "material design controversy" will find (for me) criticism of specific elements at best, or designers complaining that it (used to) take too much design out of UX (but that's not a UX problem, that's if anything the goal). Jun 30 at 9:25
  • @DavidMulder Along with the criticisms of specific, which were also insightful to me, I found a few Quora questions, medium articles and this post. Now I don't know about the credibility of any of them and maybe 'controversial nature' was a bit of an overstatement but it did serve to open my eyes to be more critical of design languages in general.
    – FrontDeer
    Jun 30 at 13:33
7

Thin icons can be less perceivable

The guideline likely conforms to an accessibility requirement on Minimum Informational Graphic Contrast:

If a graphic is needed to understand the content or functionality of the webpage then it should be perceivable for people with low vision or other impairments.... Graphics that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker or are solid shapes have a lower requirement of 3:1.

The guidelines suggest balancing the darkness of the icon with its line thickness for best readability.

WCAG icon guidelines

1
  • Why should you make it greyer when you make it smaller?
    – wizzwizz4
    Jul 2 at 17:36
2

I think it is very difficult to come up with a consistent visual language for icons because many applications have some specific use cases, features or user requirements that force designers to create something that isn't just one of the common system or standard icons.

What Material Design has done generally is to provide the guidelines that will help with overall consistency and coherence of your visual language. This has the benefit of:

  • ease of maintenance so you can quickly scan through your library and identify what is covered and what is missing when you need an icon
  • extensibility so you can create new or variations to extend you library
  • strong alignment or reinforcement of your brand due to ease of use and consistency of the icons

Perhaps instead of saying "Do" and "Don't", maybe the language should be "Preferred" and "Try to avoid". But I think if you look at the whole visual style of the entire icon library rather than individual examples, you'll find that the three key principles make sense and can be applied to those examples.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.