Iconography for user interfaces

II THE Journey

As there was no dedicated icon design team, I took it upon myself to at least kickstart something. Something that takes on a holistic approach and works on a solution that not only benefitted my current needs (thus adding yet another set of different looking icons), but serves everyone in the design community.

Before jumping right into it, however, I had to get some refreshers and do additional research on the visual and especially the usability of an icon.

Icons in user interfaces provide a clearly visible click target and contain a lot of meaning for the often small real estate they occupy, making them a popular solution for toolbars, menus, and minimalist design approaches.

Yet, all that simplicity shown in a crisp icon hides the actual complexity that goes into its design. The main issue of an icon is its recognition: almost no icon is universally understood, and users have to be able to recognize or learn the meaning of a tiny illustration within a couple of seconds of looking at it. Failing to do so can lead to road blocks on their journey and to frustration.

To increase recognition, the symbol choice for an icon should factor in the context it's being used in, the social and cultural background of the audience it's being used by, and the symbols of icons it's being used with. This is an especially hard task when some or all of these factors are "unknown" or "all".

Aesthetics and style play a large role as well and often create a conflict with recognition and usability. Icons represent the brand/style and increase the notion of a product family the same way fonts, colors, and imagery do, so they tend to be designed in a very "specific" way and are used for all kinds of contexts.

Finally, there is (of course) personal bias, which can lead to long and winding discussions about how an icon should look in order to look "right" - everyone sees the world a little bit differently, after all.

With a basic plan for how to sort out the chaos of the current icon library, I gathered some colleagues to start setting up guidelines for designing product icons, and conveniently got more buy-in from colleagues and stakeholder.

Together, we examined the product portfolio to decide upon the width and breadth of iconography needed, taking into account supported form factors, user types, and of course brand guidelines.

We defined base dimensions to design in, a minimum line and gap width, and other details such as corner radius, exceptions, and workarounds. Every guideline set in place was informed by the need for a unified set of icons that will be rendered as sharp as possible in the UIs we build and ship.

On the visual side, the decision was made to make them appear as neutral as possible, both in shape and content: no icon should feel wide or tall, or express too much personality. This rule was introduced to ensure icons can be used across the HERE product family and work in close proximity to each other.

When it came to distribution, we decided to only make the final assets available through GitHub and in Sketch libraries, giving the icon team full control over the content and absolving other teams from finding and replacing outdated icons ever again.

As a final “mantra”, we approached every icon request with utmost scrutiny to figure out with the stakeholder which metaphor to use, or if there was even need for a new icon in the first place. We didn’t want to blow up this set with icons that will only see a limited use.

IV the takeaways

After releasing the first set we established multiple channels to collect feedback, all in a collaborative manner. For example, we asked teams to embed and test the icons in their set and conduct usability tests to check whether or not an icon is accurately understood in their respective environments.

On our side, we started to set up quantitative usability tests to collect evidence on the recognition and understanding of metaphors, especially for more questionable icons.

After a year of working on these icons as a side project, the set now contains about 1000 icons, including system UI, weather, places of interest, and transportation. It has been widely adopted by the design community and external and internal product teams.