Using Icons

Icons are a visual language used throughout interfaces, recently becoming more noticeable in touch screen devices, whether it be an app or a responsive website. However, sometimes what an icon represents can be hard for a user to interpret, causing confusion, hesitation or cause it to be completely overlooked.

So why are some icons harder to understand/design than others? Rogers (1989) defined a taxonomy of icon types explaining that some icons directly depict their meaning while others are completely abstract bearing no relationship, such as biohazard. To summarise the findings, the effectiveness of an icon depends on the level of visual mapping between the physical form and the function it is used for. This can prove particularly difficult for a navigation menu as every business has different goals, values, and organization structure. As Schröder and Ziefle state ‘whereas the designer has to translate a concept into an icon, the user has to translate an icon into a concept’ (p. 140, 2008).

Figure 1: PlayStation Android app 2016, text removed

Consider this PlayStation app menu with the text removed (figure 1). While the icons look nice it is not obvious what is being represented. A trial and error method would be a likely method used to understand each panel.

A simple solution would be to just use a text label as an alternative, a recommendation frequently made when the hamburger icon first emerged. However, there is a proven value of using a more visual representation such as icons. There is evidence that an increase of user performance in response to menu systems that use learnt visual representations, particularly for smaller screens (Setlur, Rossoff and Gooch, 2011). One reason for this is icons help reduce the visual complexity of the interface making it more useable (Lodding, 1983, in Rogers, 1989). However, while there is evidence for the benefit of icons, this still doesn’t solve the issue of users struggling to intemperate them.

Figure 2: PlayStation Android app 2016, icons removed

Now considering the PlayStation app again but this time with the icons removed (figure 2). While it is now clear what is being represented, it is more taxing to read each item and also visually dull.

The ideal solution is to use a dual representation of both icon and text labels where possible. This helps the user learn unfamiliar icons while still benefiting from those commonly understood. It is thought that information presented in a visual format may require less working memory resources than text, which relies more on language resources. Dutke and Rinck (2006) show evidence for this, observing participants who were able to judge pictorial information quicker than text.

Figure 3: PlayStation Android app 2016, icons with text labels

This is the true version of the PlayStation app (figure 3). It is clear that using both icons and text labels helps understanding, performance, and the visual standard.

In summary, there is a benefit to using icons in interface design. However, consider using a text label where possible to aid those users who struggle to interpret the meaning of less familiar icons. Try to avoid reinventing the wheel for the users; reference some existing icons libraries such as ‘font awesome’ or ‘the noun project'. While there are many ways a shopping basket could be visually depicted, using the most commonly understood icon will help avoid confusion, hesitation and being overlooked. Overall it would be best to test icon designs early on in the project. There are also earlier opportunities in workshops to use participatory designs to help understand how a variety of people would depict certain functionality.

References

Dutke, S. and Rinck, M. (2006) ‘Multimedia learning: Working memory and the learning
of word and picture diagrams’, Learning And Instruction, 16(6), pp. 526-537.

Rogers, Y. (1989) ‘Icons at the interface: their usefulness’ Interacting with Computers, 1(1), pp. 105-117.

Schröder, S. and Ziefle, M. (2008) ‘Making a completely icon-based menu in mobile
devices to become true: a user-centered design approach for its development’ In:
Proceedings of the 10th international conference on Human computer interaction with
mobile devices and services (MobileHCI '08), New York. New York: ACM, pp. 137-146.

Setlur, V., Rossoff, S. and Gooch, B. (2011) ‘Wish I hadn't clicked that: context based icons for mobile web navigation and directed search tasks’, In: Proceedings of the 16th international conference on Intelligent user interfaces (IUI '11), New York. New York: ACM, pp. 165-174.