3

I'm a newbie in the UI world, and recently I have been asked to create nutrition icons that are clear and can be easily identified by the users.

I have been having some problems trying to differentiate between Vegan and Vegetarian alongside Wheat vs. Gluten, Dairy vs. Lactose. Another tough one is making a Healthy choice icon.

Here are the icon variations I did

I wanted to use several items in an icon but have been told to stick with one minimalist item.

  • 2
    Hi Sarah, welcome to Vegetarianism SE. There already is a somewhat similar question on this site - answers there might help you out. – Alexander Rossa Dec 30 '19 at 11:13
  • 1
    I would be very confused between the vegan and vegetarian icons presented here. Both have different abstraction levels. One shows a plant suggesting "plant based", the other one shows specific plants. Both could be anything. Perhaps you should show eggs/cheese in the vegetarian one. BTW, sprouts grow straight up, the angle makes it look like a falling tree leave. – istepaniuk Jan 2 at 10:43
  • 3
    I don't know why this was migrated. I feel the "similar question" @AlexanderRossa linked to is a pretty good duplicate with good answers. – Scott Jan 3 at 14:43
  • 1
    there's also a similar question here about vegan x vegetarian graphicdesign.stackexchange.com/questions/87572/… – Luciano Jan 6 at 12:59
4

As for Wheat / Gluten labels unless you specifically want to convey that the product contains these, you should cross them out to signify wheat-free or gluten-free products. Not sure what your full assignment for this is but it is very hard to differentiate between these two pictorially and for people with Celiac disease this difference is a big deal. I would therefore strongly suggest to at least use letters W and G in your icons to make clear what each label represents, if, for some reason, full words are not an option. If letters are prohibited completely you can potentially spell them out with the stalks of wheat? Unless these labels have to be international and representative of many languages but in that case there are many other complications to this.

For Dairy / Lactose I'm again not sure if the label should mean contains or is free of so I'd just suggest to cross out accordingly. The rest of my suggestion would be tied to what they should represent so feel free to comment on my answer and I can elaborate later.

I think with your Vegetarianism / Veganism logos you should put focus on what differs between the two rather than putting more vegetables to vegetarianism. Having vegan label any vegetable and vegetarian label same as vegan but with added milk/eggs/cheese should do the trick. It makes it clear what group each icon refers to without ambiguity. Right now your vegetarian label could easily be vegan label as there is only a bunch of vegetables, which are OK for either group.

Your Healthy choice is as good as any that I can think of. I am not sure how many people would understand what is being conveyed since it is not very common to put Healthy choice label on food packaging but I don't see how that could be mitigated without spelling it out somewhere.

All in all I would say it is always preferable to be precise when making logos such as these by spelling stuff out. It is true that logos should ideally be pretty, but they should first and foremost be informative. Food intolerance, allergies and dietary requirements labels are what many people rely on to avoid potentially fatal complications so for me, clarity will always come first in cases like these. But if that's not an option just try to make things as unambiguous as possible.

| improve this answer | |
  • 1
    I generally agree with the advice, but I would probably not "cross out" the icon. I would only use icons on verified products and no logo otherwise. The in-store brand for a chain called Wegmans does this pretty well (wegmans.com/health-nutrition/special-diets.html) and the icons are easily recognized at arms length on a shelf at sizes of about than 1/8 inch. – Yorik Jan 3 at 15:36
  • Bear in mind that the industrial food chain is so vast and contaminated that you absolutely cannot label something e.g. gluten free unless it is certified and tested. If normally gluten free ingredients are transported in a non-dedicated railcar (almost never), they are not going to be gluten free. For so-called lifestyle considerations, this does not matter. For Celiac sufferers, this is poison. – Yorik Jan 3 at 15:40
2

Not every concept can easily be drawn into an icon.

Material things, meaning actual physical objects can easily be associated with a symbol (laptop, car, dog, hat), but more abstract notions don't always have a direct symbol that everybody will recognize. Particularly hard when you're pairing similar concepts with subtle differences between them (vegan vs. vegetarian).

Just look at the Amazon homepage where 95% of their main navigation, categories, subcategories, account information, all of this is spelled out in plain text and the usage of icons is minimal.

So instead of creating confusion with an icon that nobody understands, I would just use text buttons.

enter image description here

| improve this answer | |
  • 1
    I agree but also I think it heavily depends on a usage scenario... If it's a packaging, text would work better; if it's a menu I'd go with icons; a list on a website probably icons with alt-text; an item on a website — text. OP's icons are quite large and won't be readable in a list and they used a term 'users' so I presume the icons are for a web site: text tag-like icons maybe with different colors would be so much easier to perceive... – Sergey Kritskiy Jan 4 at 10:24
1

There is a language that is a little complex to learn. Chinese. The point is that it has ideograms instead of phonetic symbols.

Trying to put icons for everything is a bit complex. It is easier for people to read a text than to learn new symbols and styles.

Even making icons for an application, like software, making icons for every command is complex. It is faster for the user to use a text menu. Sometimes you need to wait for the hover text to pop to see if you are trying to press the right button.

In my opinion, leave the icons for the navigation of the program, the usual suspects, scroll, hamburger menu, etc.

Icons like this are too dependant on the context. What makes that milk cardboard different from a juice one? or two wheat plants meaning gluten instead of whole grain? Does a vegan-only eat leaves and not roots, or seeds, or fruit?

You yourself needed o put text to your image so a bunch of graphic designers understands what those icons are for.


I want to add something. You can not risk making an icon that is just invented for you in this case. Let us think about a person that has an intense allergic reaction to gluten. It is way safer for everyone having a label clearly saying "Gluten-Free" or "Lactose-Free" or something clear, than having an icon that can be misunderstood.

| improve this answer | |

Your Answer

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