What should be taken into account when designing easily identifiable symbols?

Question

I am currently designing a website with multiple filters. The first set will be Food, Shelter, Energy, Transport and Economy. Each of these will have five sub-sections and then there will be a long list of descriptive icons attached to each element within these sections. The sections and sub-sections will be used as filters, displayed on a web page. The icons can be attached to any element within any of these sections.

I have been discussing this with a few other project organisers and we think we have got the designs settled, but I wanted to ask what should be considered when designing symbols like these. They need to be easily recognisable because the site will initially only be in english, however it will be viewed by people all over europe and so we want to avoid the issue of language barriers.

Answer 1

That sounds like a good challenge! Icons are one of the most tricky things to design, since so much information must be conveyed in such a minimal way.

It's hard to tell how dependent people will be on the icons to understand the content. But I think the level of comprehension and resulting experience really depends on whether the icons are there to indicate functionality or encourage exploration.

Remember that icons can increase cognitive burden (because people need to figure out what they mean). Don't over-rely on them to convey the site's content.

If the icons are for functional purposes (like performing actions, completing tasks) it is good to use icons that people are already familiar with (eg a "play" button). Don't reinvent the wheel!

Be careful about using icons to convey a meaning that is different from a prexisting meaning (eg a globe icon often indicates the internet, etc). Also, are there any major cultural differences that will affect their interpretation?

Since your icons will also describe content (not just for functional purposes), then I think you have a lot more room to play with them - but you should definitely offer a "backup" method to convey meaning.

Also consider how accessibility/comprehension might be affected if people using screen readers cannot access the visual information on the icon. There should be a descriptive label (word) for each icon and this information should be included in image tags/tool tips. Content tagged in metadata can be captured by a translation program as well.

If you want, you can also add a text label to a hover state - but don't completely rely on text labels in image rollovers as this will impact the mobile experience.

I also recommend getting fresh eyes to look at the site and icons. If possible, do some usability testing on the site to observe the comprehension and response to the icons. This will be a good way to gauge whether the icons are effective - or causing frustration.

This usability testing can even be done informally. Even asking a few friends or colleagues to "check out the new site I'm working on" and inviting them to complete a task can be very helpful at revealing issues.

If that's not possible, quiz a some (non-involved) people on the icon meanings. You might be surprised to learn how people will interpret them!

Good luck!

Answer 2

If your target is "global" (Europe) I'll try to create a set of icons that are meaningful for all the countries. To use some simple graphic elements that clearly represents that particular section. Like the "Stop" sign, which is the same in all the Europe.

In addition, I'am thinking, that even your designed icons doesn't have "global meaning" you should carefully chose the name of each section, of course in English. What I mean is do not use some words that aren't hard to understand for your target.

Good luck with your project.