Keywords

1 Introduction

With limited display space, icons used on conventional products always take abstract pictures or symbolic illustration to represent meanings of functions in terms of semantics. Today, the advancement of high definition display and touch technology allows more graphical user interface (GUI) on devices. Designers tend to use colors and detailed graphics to make icons look splendid and attractive. This leads to an issue: are the meanings of these icons still recognizable comparing to symbolic design? In 2007, Apple released the first iPhone, which changed the role of smartphone from business to consuming use with its intuitive, user-friendly and fascinating interface. Opening a program is simply touching the icon on the screen. Apple also defined the icons applied on iOS should design with colorful, real texture and more details to create aesthetic user experience. Later Google mobile system Android also took similar way on its interface design, but with more flexibility for developers, for instances, various icon stylings versus limited icon shape on Apple iOS.

Different from the competitors, Microsoft developed its new user interface named “Modern UI” and implemented on all the mobile devices and desktop products. The design language places emphasis on typography and semantics, and creates “living tiles” to represent “sleek, quick and modern” interaction. It is clear to see that this design language takes symbology as a main part of icon design, with simple graphics, single color, tile look and dynamic feedback. The different design language from the three types of icon design raises an issue worth to investigate: what types of icon design would provide better recognition and user preference? Horton (1994) indicated that meaningful icons overcome language barriers and yield their meaning with only a quick glance, saving search time and cognitive resources [1]. At limited area of smartphone display, it is critical that app icon should provide good recognition and user preference. Based on the key components of an icon (Horton, 1994, Fig. 1), this study investigated app icon design across different mobile operating systems (Apple iOS, Google Android and Windows Phone 8, with different icon design principles respectively) to understand recognition performance and user preference of different icon types.

Fig. 1.
figure 1

Components of an icon (Horton, 1994)

Full size image

2 Methods

In this study, current mobile app icons collected from app stores were characterized according to different classifications. All collected icons were then selected by experienced graphic designers for user testing. Finally, recognition time, accuracy and subjective opinion were recorded and analyzed statistically to understand the performance of different composition of icon design.

2.1 Icon Classification

Two classification principles were adopted to investigate different types of icon design. Based on the study conducted by Wang and Lin (2002) [2], this study set three categories as the “stylization” of icon graphics (pictorial illustration, graphic rendering and graphic symbology, see Table 1 for the difference of visual elements). The other one classification principle of icon design is “border shape” (two categories: open and close border, see Table 2 for the illustration), based on current design languages of the three OSs. Therefore, in total six categories of icons were classified (Stylization*3 versus Border shape*2).

Table 1. Icon stylization (adopted from Wang and Lin, 2002)
Full size table
Table 2. Icon border
Full size table

A broad search of current app icons across all mobile platforms was conducted in Jan. of 2013 to collect as many icons as possible. Three experienced graphic designers were then asked to classify collected icons according to the six categories. Finally 480 icons in 20 functions were collected, but only 96 icons in 16 functions were selected accordingly for later user testing.

2.2 Icon Recognition Experiment

A recognition experiment was then implemented to investigate performance and user preference of different composition of icons. In the experiment, as described above, the six icon categories (16 icons for each category) were implemented functionally on a smartphone. Performance and subjective opinion were recorded and analyzed statistically.

Implementation.

The experiment was conducted by simulating using smartphone interface. The Samsung GALAXY SII (4.3-inch, 480 × 800 pixel display) was used for loading the program. 16 app icons was arranged in 4*4 on a single frame without background to avoid visual interference. Figure 2 shows the six categories displayed on the smartphone (three stylizations vs. two borders).

Fig. 2.
figure 2

Six icon categories implemented on the smartphone

Full size image

Participants.

42 (16 male and 26 female, age from 20–40) smartphone users participated the experiment. All participants have at least two different mobile system using experience and without particular preference on either system.

Procedure.

The six icon categories take turns randomly to display on the smartphone screen. The participant needs to select corresponded icon which function the system assigns. The system automatically records recognition time and frequency of errors. The experiment finishes after all six categories are tested. The participants are then asked to score the six categories subjectively.

Measurement.

Three measures were recorded and analyzed statistically.

  • Accuracy – To record if the icon was recognized correctly, through calculating frequency of errors.

  • Recognition time – To record the time during the system instruction and the participant’s reaction to the system.

  • Preference – To calculate the score that participants gave on a 7-level Likert’s Scale.

3 Results and Discussion

3.1 Accuracy

Errors found on border shape and stylization are summarized in Table 3. Results show that more errors were found on icons designed with close border comparing to open border. It is possible that open-border icons can be correctly recognized through the characteristics of different shape. For stylization, errors raise with the increase of icon simplicity.

Table 3. Errors on border shape and stylization
Full size table

3.2 Recognition Time

Results show that icons designed with open border perform better than close border on recognition time. Various shapes of open-border icons may provide distinct characteristics for recognition. For stylization, significant differences were found under different border shape (as seen in Table 4). For both categories, however, icons designed with graphic rendering cost significant less recognition time than the others. This means extreme simplicity or details design on icons may not benefit recognition.

Table 4. The significance of recognition time on border shape and stylization
Full size table

3.3 Preference

Preference of border shape and stylization are shown in Table 5. Results indicate that user has no particular preference on either border shape design. For stylization, however, participants significantly prefer icons with pictorial illustration and graphic rendering to those with graphic symbology. Users may get used to colorful and detailed design icons on the smartphone.

Table 5. The preference of border shape and stylization
Full size table

4 Conclusion

In this study, it is clear to see that recognition difficulty and user preference do not perform coincidently on stylization. People prefer detailed icon design, although they are not benefited from recognition performance. Simplified icon design may improve recognition time, but cause more errors. In conclusion, the icon designed with open border shape and graphic rendering is better for users’ recognition and preference on the smartphone. Graphic symbolic icon needs carefully designed in terms of semantics to increase accuracy.