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.
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.
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.
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.
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.
Post cover image credit: Hand drawn icons