I have the following puzzle. There is the main icon for the field and icons for specific item in drop-down menu. I depict them in this way:

enter image description here

Are there any examples of such ui? What could you advise me to improve my ui?


  • 2
    It looks to me like the skill level icons could be omitted, are they really providing meaningful information to understand the option? – Alvaro Feb 28 '17 at 13:15
  • 4
    It's a trick question! The answer is to not use any icons, right? :) – Ken Mohnkern Feb 28 '17 at 13:47
  • The field icon is conflicting semantically with the icon for the specific item. The graduate's hat implies an advanced level of skills. – Ideogram Feb 28 '17 at 15:42
  • 2
    @Ideogram I have seen such hats used in academic ceremonies starting in kindergarten. It does not universally signify advanced knowledge. – SPavel Feb 28 '17 at 16:40

I cannot think of another UI that I have seen using icons for both the field and the specific item.

My advice to you is to think why you really use icons. UI design has been moving from using the icons to using only the words. A good example is spotify that has kept only the words. I believe that icons should be used when they are easy for the user to remember and conventional. In the example that you have used, I am not even sure what the icon for the advance represents.

Icons are fast to recognize at a glance (if well designed) — particularly true for standard icons that people have seen and used before.

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

I had one goal in mind when writing this article: to remind us all to ask ourselves why we're using icons on websites we create. For many of us it has become an automatisation to include them in our projects as a matter of course. Next time, ask yourself what the added value of that extra icon is and how it compares to the other icons on the website.

Resource: https://webdesign.tutsplus.com/articles/use-and-abuse-of-icons-in-the-modern-age--webdesign-17064


Following on @Dimitra Miha's answer:

The icon in the dropdown menu just adds clutter to the interface and no comprehension benefits (the icon for "Advance" doesn't signify advanced academic level). Therefore, my suggestion is to remove the skill level dropdown icon.

enter image description here


Edward Tufte came up with a concept called the data-ink ratio in his 1983 book Visual Display of Quantitative Information.

Good graphics should include only data-Ink. Non-Data-Ink is to be deleted everywhere where possible. The reason for this is to avoid drawing the attention of viewers of the data presentation to irrelevant elements.The goal is to design a display with the highest possible data-ink ratio (that is, as close to the total of 1.0), without eliminating something that is necessary for effective communication.

This concept was adapted by Stephen Few to be more aligned with digital displays, so he talks about the data-pixel ratio in his book Information Dashboard Design.

However, in both cases you want to maximise the data-ink/data-pixels, and minimise the non-data-ink/non-data-pixels.

So in your situation, the icons are essentially non-data-pixels, so unless you can really justify their purpose (and "they look good" is not a good justification), they should be removed as they are not providing any tangible value.

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.