Creating unbreakable links for successful icons

Mar 21, 2016. | By: Dongmei Hu

In interface design, a good icon creates a link between users and components being displayed, and a successful icon makes that link unbreakable. The question of how to create a successful icon design is actually how to create unbreakable links.

"It doesn’t matter if the feature an icon represents is immediately and intuitively obvious; what matters is that once you’ve made the link in your head - once you’ve learned what an icon does - some quality of the icon makes that link unbreakable." Susan Kare

Delivering useful information

When icons are for information, make sure they are giving users what they want, in a clear and simple form. For example, the green and red lights at a junction clearly tells drivers and pedestrians whether they can proceed or not. Similarly, the view icons in Steam indicate three different formats to display information for user’s selection. Moreover, the current selection is highlighted in a bright blue color for indication.

Veiw icons in Steam for user to select

Assistance in navigation

A good icon assists users in the navigation by giving direction for further interaction or acknowledging users on possible interaction opportunities. In the real world, we follow all the signage board to find directions and get to our destination. In the virtual world, lots of icons inheriting from the real world direct us to navigate in the 2D world. On Spotify website home page, the little arrow icon tells users to go below for further information either by clicking the icons or scrolling down the mouse for more tech-savvy users.

Drive left direction sign
Pulling down icon on Spotify website for further interaction

Another example can be found in pages. The little downward-pointing arrow in the insert button tells user that there are more options available, compared to other buttons for direct actions.

Pulling down icon on Spotify website for further interaction

Raising interest

Not all icon designs give a pleasant experience - only if they are the good ones. Decoration is only one of icon’s many functions. Designers must understand that aestheticising is only the method, stirring up user’s interest and helping users focus on the key function or message are the purpose. Pleasing the eyes is the first step, pleasing the mind is essential. Microinteraction has been popular recently. It introduces movement to the static beautifully-designed icons, like giving a birth to the design and make it speak for itself. One of my favourite design in Notes is the Plus icon to collapse the hidden editing options, and the Cross icon to hide these options again. The grey color similar to the keyboard is adopted to make these two icons less prominent but more elegant by integrating with the overall APP design. The micro interaction of transition from collapsing (Plus icon) to hiding (Cross icon) triggers my interest while allowing me to focus on the text field. Good icon does not let the design itself (color or shape) nor the microinteractions override the core components as a distraction to users.

Microinteraction applied for the more opiton icon for further editting in iOS Notes

Prior to being pretty, consistency comes first. Icon design shall be consistent not only across different pages but also with other components such as logo, branding, typography and some times even different product by the same company for different platforms. Examples can be found in iBook and APP Store, in which the same design and arrangement are applied for the navigation tab. This consistency leverage on the past learning experiences for faster adaption, and reduces users’ cognitive load by avoiding the unnecessary changes in design. Again, distraction fails the icon design.

Same icons are used across different applications in OS system.

Post cover image credit: Hand drawn icons

Around the web

© 2016 All Rights Reserved.