- Email: [email protected]
Factors affecting the design of computer icons
International Journal of Industrial Ergonomics 29 (2002) 211–218
Factors affecting the design of computer icons Shih-Miao Huang*, Kong-King Shieh, Chai-Fen Chi Department of Industrial Management, National Taiwan University of Science and Technology, 43, Kee-Lung Road, Section 4, Taipei 106, Taiwan, ROC Received 21 September 2000; accepted 10 September 2001
Abstract The purpose of this study was to identify and investigate the main factors involved in the design of computer graphic user interfaces (GUI), commonly known as computer icons. Nineteen elements related to icon design were extracted from the principles, criteria and guidelines for GUI design. Forty-three Taiwanese designers working in computer GUI design were recruited to rate the importance of each design element. Results from the principal components analysis showed that the subjects’ importance ratings for computer icon design elements were affected by five factors: styling quality, message quality, meaningfulness, locatability, and metaphor. In addition to comprehensibility and identifiability, which previous results have found to be important icon design considerations, styling quality may also be important. Analysis of variance of the importance ratings for elements within each factor found that meaningfulness and locatability were more important than styling quality, message quality and metaphor. Finally, the correlation results indicated that neither computer GUI design experience nor the designers’ gender were related to importance ratings for the icon design element Relevance to industry Although the essential considerations for icon design are comprehensibility and identifiability, the results of this research demonstrate that ‘‘style’’ should also be considered as a factor when creating a computer icon. These research findings could serve as a guide to design computer icons that are appropriate for children’s education programs, and that attract people to web sites and make web sites more user-friendly. r 2002 Elsevier Science B.V. All rights reserved. Keywords: Design elements; Icon design
Pictographic symbols are used to convey a broad range of meanings, especially in the
design of human–machine communication interfaces, such as product labels, traffic signs, computer icons, etc. Icons are extensively used because:
*Corresponding author. Industrial Design Department, Institute of Technology, 58 Szechuan Road, Sec 2, PanChaio, Taipei, Taiwan. Tel.: +886-02-2737-6332; fax: +886-02-27376344. E-mail addresses: [email protected] (K.-K. Shieh), [email protected] (S.-M. Huang).
(1) Icons can be easily recognized and remembered (Weidenbeck, 1999). (2) Images have more universal recognition than text, since icon interfaces confront fewer obstacles than language (Lodding, 1983; Wickens, 1992).
1. Introduction
0169-8141/02/$ - see front matter r 2002 Elsevier Science B.V. All rights reserved. PII: S 0 1 6 9 - 8 1 4 1 ( 0 1 ) 0 0 0 6 4 - 6
212
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
(3) Icons offer the perception of affordance, which can facilitate human–machine interaction in terms of ecological perception (Gaver, 1991; Lodding, 1983). (4) Users prefer icons to text for executing tasks even though their performance may be neither better nor worse (Kacmar and Carey, 1991; Nielsen, 1990). However, an improperly designed icon can degrade the merits listed above. Two common problematic concerns regarding icon design are: firstly, icons often have language barriers that do not ensure instant comprehension across, or even within cultures (Waterworth, 1993; Manes, 1985; Kolers, 1969; Karfhage and Karfhage, 1986; Dreyfuss, 1972); secondly, people cannot quickly locate the icons they need (Gittens, 1986; Wickens, 1992). Many principles, criteria, and guidelines for icons have been proposed to qualify the design of icons (Marcus, 1984; Tognazzini, 1992; The CD-I Design Handbook, 1992; Gittens, 1986; Preece et al., 1994; Foley, 1974). For example, Lin (1992) used college students with no design experience to investigate factors that affect icon quality. He found that the essential design factors included: identifiable, meaningful, concise, associable, eyecatching and symbolic factors. However, design experience may influence how people judge icons (Christle and Gardiner, 1991). Therefore, it may be difficult to obtain icon design criteria information from subjects who have no icon design experience. Due to the current popularity of the internet, more and more graphics designers are engaged in the design of computer icons for commercial home pages. Icons have become individual consumer products. The function of computer icons is no longer just limited to communication (which mainly stresses being memorable and understandable); commercial requirements are expanding the role of computer icons beyond communication to match the user’s preferences. In summary, most previous studies have used objective criteria such as meaningful, identifiable, concise, associable, and memorable to evaluate the appropriateness of icon design. Subjective and aesthetic aspects of icon design have been
neglected. With the popularity of icons for commercial purposes, subjective preference may play a crucial role in the success or failure of icon design. Furthermore, people with design experience may use different criteria to evaluate icon design than those without design experience. Most existing criteria and principles of icon design are based on research findings from studies using college students with no icon design experience as subjects. These criteria and principles may not apply to experienced designers. The intent of this study was to investigate whether aesthetic and subjective preferences are important factors in icon design, and whether design experience affects the relative importance of various icon design criteria.
2. Methods 2.1. Materials A questionnaire which included 19 items to be rated on their importance to icon design was developed. Table 1 lists the 19 items with their brief descriptions. The questionnaire was developed in the following manner. First, a set of 50 icon design principles, criteria and guidelines was collected from various sources (Marcus, 1984; Tognazzini, 1992; The CD-I Design Handbook, 1992; Gittens, 1986; Preece et al., 1994; Foley, 1974; Lin, 1992). Then, two experienced professional graphics designers were recruited to analyze and synthesize these principles, criteria and guidelines. Each designer was allowed to add or delete any design elements to develop his list of important computer icon design elements. Afterwards, the designers met, and after extensive discussion of their work, constructed the 19-item questionnaire. 2.2. Subjects Forty-three computer GUI designers completed the questionnaire; 21 were male and 22 were female. Their mean age was 27.62 (SD ¼ 3:69). Their mean years of icon design experience was 3.18 yr (SD ¼ 1:84).
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
213
Table 1 The 19 design elements and their brief descriptions
2.3. Procedure
Element
Description
Boundaries Color Communicativeness
The icon should have a clear boundary Color should be used in icon design The icon should express the intended messages clearly The meanings of the icon should be consistent with users’ mental models The icon should be easy to discriminate from other icons The icon should remind the user of things already known The icon should offer some kind of feedback to users. For example, after users delete a file, the trash icon bulges The icon should clearly be differentiated from the background Do not force users to accept, but give them options to use the icons they prefer. For example, user can change the unwanted icons into wanted ones easily The features in an icon should be arranged carefully. Their relative direction, location, etc., could affect icon quality The icon’s implicit meaning should be close to the intended ones When an icon is dynamic, the sequence of displaying the series of icons should be considered The icon should be easy to recognize The icon’s meanings should be stable. For example, if a red color is used to express passion, it should not be used to express other meanings, such as prohibition, in this system The icon features should be as simple as possible, consistent with the inclusion of features that are necessary The icon should be a pictorial that reliably depicts visually what it is intended to represent The icon should be tested before being used The icon’s typeface should be limited to one or two type families only Symbols should be as unified as possible. For example, when solid and outline figures occur together, the solid figure should be within the outline figure
After the researcher explained the purpose of the questionnaire and the meanings of the items to the subjects, they were asked to rate the design elements based on their importance to computer icon design. The subjects rated the elements on a 6point scale (1=not important at all; 6=very important).
Consistency Discriminability Familiarity Feedback
Figure/ground Friendliness
Layout
Metaphor Order
Recognizablility Reliability
Simplicity
Symbolicity
Test-before-use Typography Unity
2.4. Data analysis Principal component analysis (PCA) with varimax rotation of factors was conducted on the importance ratings. Analyses of variance (ANOVAs) and correlation analyses were employed when needed. All calculations were made with the Statistical analysis system (SAS).
3. Results Table 2 shows the results of PCA. Five factors with eigenvalues >1 were retained in the solution. Design elements which were related to each factor (with a correlation coefficient above 0.50) are also shown in the table. The factor pattern was clear. Each design element correlated with only one factor, with the exception of Unity. Unity had coefficients below 0.50 with all factors, and hence, was not included in Table 2. 3.1. Description of the factors Factor 1 included seven design elements: color, layout, order, figure/ground, boundary, symbolicity, and typography. Since these items determine the actual physical form, or style, of an icon, this factor was named ‘‘styling quality.’’ Graphics designers frequently use color, layout, order, figure/ground relationship and boundary to create icons that correspond to the needs of different users, even if, the icons are presented with symbolic or typographic shapes. Fig. 1 shows three computer icons in the shape of houses that mean ‘‘go back to the home page’’. The different styles result from different colors, line layout, figure/ground relationships and shapes. The style
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218 1.18
Metaphor
2.10 2.77
Familiarity Discriminability
3.21 4.16 Eigenvalues
Design elements
0.75 0.54 0.74 0.73 0.59 0.78 0.79
0.79 0.57 0.53 0.64 0.79 Consistency Simplicity Reliability Feedback Friendliness Color Layout Order Fig/ground Boundary Symbolicity Typography
Communicativeness Recognizability Test-before-use
0.54 0.78 0.79
3.9 (1.0) 3.3 (1.4) 3.1 (1.4)
4.2 (1.1)
Factor 2 message quality Factor 1 styling quality
Main factor name Mean (s)
Table 2 Loadings of elements on the 5 main factor after varimax transformation
Factor 3 meaningfulness
Factor 4 locatability
0.80 0.62
Factor 5 metaphor 3.0 (1.3)
0.85
214
Fig. 1. Three computer icons, which mean ‘‘go to home page’’. Left one is adapted from the Microsoft Internet Explorer browser; the right is adopted from the Netscape browser.
of the middle house may be cuter and thus more appealing than that of the other two. Style is not evaluated as good or bad, but as preferred or not preferred. Factor 2 was named ‘‘message quality’’ because it included items that describe how to faithfully convey the message to users. Five elements were considered in this factor: consistency, simplicity, reliability, feedback, and friendliness. Message quality concerned whether the icons and their conveyed messages were stable and whether the users could understand the messages without being confused. For example, the word ‘‘red’’ written in green could easily confuse the viewers because of the inconsistency between the word’s meaning (red) and the actual color (green) (Zimbardo, 1997). Without simplicity, a shape could have more than one possible meaning, which would confuse the viewers (Murray et al., 1998). People also need feedback from the computer to provide status information and to guide user input. The feedback must appear reliable and friendly to encourage user to interact further with the computer. Therefore, these elements are related to ensuring the message quality of an icon so that the users will use it. For example, Fig. 2 shows two icons with letters. In left icon, an opaque triangle partially obscures some critical features of the letters, and thus reduces the image quality, reliability and friendliness of the message. Factor 3 was labeled ‘‘meaningfulness’’ because the items in it have to do with the understanding of what icons mean. The items in Factor 3 are communicativeness, recognizability and test-beforeuse. Icons are tools to convey messages to users. Thus, an icon must first be easily recognized. For example, each icon in Fig. 3 is composed of three triangles. However, the left icon is more
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
Fig. 2. The left icon has some partially hidden letters.
Fig. 3. Two mountains constructed from three triangles. The left is more easily recognizable than the right.
recognizable than the right one because the left one is easily recognized as ‘‘mountain’’. Communicativeness could involve adding a particular context to a recognized icon to convey the desired messages. For example, the mountain sign could be used to indicate a place that sells hiking gear. However, it is not certain that the users would understand the message that the mountain sign was intended to convey because of cultural or individual differences, and the like. Thus, a testbefore-use should be performed to confirm that the target users understand the icon’s intended meaning. The items in Factor 4 are familiarity and discriminability. Factor 4 was named ‘‘locatability’’ (easy to locate) because these items can help users locate the required objects. Coren et al. (1979) concluded that the less familiar an object is, the more difficult it is to recognize; therefore, user
215
familiarity with an icon is important in icon design. For example, because the right icon in Fig. 3 appears less familiar to people than the left, it is more difficult to recognize. In addition, many researchers have agreed that symbols that are conspicuous, or salient relative to their context, facilitate user performance (Sanders and McCormick, 1993). For example, in Fig. 4, the context of the right deviant block includes more variable attributes than that of the left block, thus, the deviant block in the left rectangle is more easily detected than that in the right. Factor 5 includes only one item, metaphor, and is so named. An appropriate metaphor could exploit concepts, images, and relations with which the users are already familiar (Marcus, 1993). Hence, it should improve the users’ understanding of the symbolic relations or associations between an icon and its intended meaning (Carroll and Mack, 1985). Occasionally, it is difficult to design an icon that directly associates with the intended meaning of the icon. In such a case, it may be necessary to use metaphor to design icons that indirectly elicited the intended response. For example, one can use shapes that sound like the desired message. As shown in Fig. 5, the ‘‘star’’ sign could be used to stand for ‘‘start’’. 3.2. Importance of the factors The importance ratings for the design elements within each factor were averaged and the means and standard deviations (SDs) are presented in Table 2. The mean ratings and (SDs) were 3.1 (1.4), 3.3 (1.4), 4.2 (1.1), 3.9 (1.0), and 3.0 (1.3),
Fig. 4. The deviant block inside the left rectangle is more easily found than that in the right.
216
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218 Table 3 Comparison of obtained design factors with results from other studies
Fig. 5. One can use shapes that sound like the message they stand for. The ‘‘star’’ sign stands for ‘‘start’’.
This study
Lin (1992)
Styling quality Message quality Meaningfulness Locatability
Concise
Metaphor
respectively, for Factor 1–Factor 5. Results of ANOVA on the mean ratings indicated significant differences (F ð4; 210Þ ¼ 20:06; po0:01) among these factors. The Duncan multiple-range test showed no significant difference between Factors 3 and 4, and among Factors 1, 2 and 5. However, Factors 3 and 4 had higher importance ratings than Factors 1, 2 and 5. 3.3. GUI design experience and gender Correlation analyses of each design element with both designers’ experience and gender were conducted. Neither years of design experience, nor gender, were significantly related to the importance ratings for each design element.
4. Discussion The major objective of this study was to investigate factors that affect importance ratings for computer icon design features. The PCA of the importance ratings for design elements identified five factors: styling quality, message quality, meaningfulness, locatability, and metaphor. Compared with previous findings and literature, the results of this study were more specific and more suitable for computer icon design. For example, a comparison of Lin’s (1992) and this study’s results (see Table 3) indicated that meaningfulness is an important design factor in both studies. Locatability in this study is similar to ‘‘eye-catching’’ and ‘‘identifiability’’ in Lin’s study. Metaphor in this study is related to ‘‘associable’’ and ‘‘symbolic’’ in Lin’s study. ‘‘Concise’’ in Lin’s study is a part of styling quality in this study. Styling quality includes color, layout, order, figure/ground
Meaningful Eye-catching Identifiable Associable Symbolic
CIE (1988) Credibility Understanding Conspicuity Legibility
relationship, boundary, symbolicity, and typography. Clearly, styling quality is a more comprehensive and more suitable concept for icon design than is ‘‘concise’’. Finally, none of the factors in Lin’s study are related to the message quality factor in this study, possibly due to the essential differences between computer icon design and other GUI design fields. Computer icon design deals more with quality of messages than with other design areas because computers do not easily present the contexts in which the events take place. Some researchers have asserted that more natural and intuitive means are needed to support human–computer interaction (Hartson and Boehm-Davis, 1993; Jacob et al., 1993), such as contextual environments built into the computer to enhance the users’ performance (Miller and Stanney, 1997). For instance, a sign of a fish in a supermarket indicates the place where fish are for sale. However, when the sign is shown on a computer screen, it is difficult to realize what the sign means if the clue of contextual environment is missing or not clear. That is why the message quality of icons in the area of human– computer interaction is more important than in other areas. Also shown in Table 3 are the four principles for road sign design proposed by the CIE (1988), as cited by Bruyas et al. (1998): credibility, understanding, conspicuity, and legibility. The CIE’s Credibility principle seems to correspond to message quality in this study; likewise, understanding corresponds to meaningfulness; and conspicuity/legibility to locatability. The other two factors, styling quality and metaphor, are
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
not important considerations for the CIE because it emphasizes efficiency, safety, and reliability in road sign design. Previous research has not determined the relative importance of the various design criteria. Whereas, the present study addressed this issue and found that the rated importance of the five factors was not equal. It may be helpful for icon designers to evaluate their designs in terms of the order of importance of the five factors found in the present study. The ANOVA results found that Factor 3 (meaningfulness) and Factor 4 (locatability) were rated more important for computer icon design than were Factor 1 (styling quality), Factor 2 (message quality) and Factor 5 (metaphor). The importance ratings agree with other studies that have emphasized the importance of icon meaningfulness and locatability. Wickens (1992) identified two problems in screen design: the users cannot understand what the icons mean and the users have difficulty in locating the icons they need. Likewise, Sanders and McCormick (1993) indicated that icons should convey meanings that are easy for the users to comprehend, and that icons should be easily distinguished from other icons. Most GUI design literature has neglected the importance of attractiveness in icon design. With the spread of the internet, endless varieties of icons were created as symbols for commercial home pages. Icons were designed to be not only meaningful but also visually appealing to attract users to browse web sites. For example, there are two styles for the arrows shown in Fig. 6. Results from previous studies have shown that simple icons are better than complicated ones (Dewar, 1999). However, a child may prefer the left arrow to the right, although the right arrow is simpler than the
217
left. This finding should remind the designers that computer icons are no longer information signs only, but have become part of the consumer culture. Different personality types may prefer different design styles. This is an interesting issue for further study. This explains why designers have indicated that Factor 1 (styling quality) and Factor 5 (metaphor) are important for computer icon design. Finally, the results of correlation analyses indicated that years of design experience and gender were not related to importance ratings for design elements. A possible explanation is offered. In Taiwan, computer icon design is a relatively new field of work. Icon designers are generally younger people with limited experience (in this study the subjects’ average age was 27.6 yr; their average computer icon design experience was 3.2 yr). Such a homogeneous background (i.e., range restriction) may have contributed to the lack of relationship between work experience and importance ratings for computer icon design elements in this study.
5. Conclusions The results of this study showed that qualified computer icons should incorporate the following design criteria: styling, message quality, meaningfulness, locatability, and metaphor. These findings could be applied to the planning of a training program for computer icon designers. In particular, these findings could serve as a reminder that the training program should focus not only on training the designers to create icons with superior comprehension and identification, but also focus on training them to create stylish icons. Finally, neither experience in icon design, nor gender, was related to importance ratings for icon design elements.
Acknowledgements
Fig. 6. The left icon is more complicate than the right.
This study was supported by a Research Grant from the National Sciences Council of the Republic of China, Grant No. NSC-89-2213-E-161-001.
218
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
References Bruyas, M., Breton, B., Pauzie, A., 1998. Guidelines: ergonomic guidelines for the design of pictorial information. International Journal of Industrial Ergonomics 21, 407–413. Carroll, J.M., Mack, R.L., 1985. Metaphor, computing systems, and active learning. International Journal of Man-Machine Studies 22, 39–57. Christle, B., Gardiner, M.M., 1991. Evaluation of the human– computer interface. In: Wilson, J.R., Corlett, E.N. (Eds.), Evaluation of Human Work. Tylor & Francis, London, pp. 271–320 (Chapter 12). Coren, S., Porac, C., Ward, L.M., 1979. Sensation and Perception. Academic Press, NY. Dewar, R., 1999. Design and evaluation of public information symbols. In: Zwaga, B. (Ed.), Visual Information for Everyday Use. Tylor & Francis, London, pp. 285–303. Dreyfuss, H., 1972. Symbol Resources. McGram-Hill, NY. Foley, J.D., 1974. The art of natural graphic man–machine conversation. Proceedings of IEEE 62 (4), 462–471. Gaver, W.W., 1991. Technology affordances. In: Conference on Human Factors in Computer Systems, Addison-Wesley, New Orleans, pp.79–84. Gittens, D., 1986. Icon-base human computer interaction. International Journal of Man Machine Studies 24, 519–543. Hartson, H.R., Boehm-Davis, D., 1993. User interface development processes and methodologies. Behaviour and Information Technology 12, 98–114. Jacob, R.J.K., Leggett, J.J., Myers, B.A., Pausch, R., 1993. Interaction styles and input/output devices. Behaviour and Information Technology 12, 69–79. Kacmar, C.J., Carey, J.M., 1991. Assessing the usability of icons in user interface. Behavior and Information Technology 10, 443–457. Kolers, P., 1969. Some formal characteristics of pictograms. American scientist 57 (3), 348–363. Karfhage, R.R., Karfhage, M.A., 1986. Criteria for iconic languages. In: Chang, S.-K., Ichikawa, T., Ligomenides, P.A. (Eds.), Visual languages, Plenum, NY, pp. 207–231. Lin, R., 1992. An application of the semantic differential to icon design. Proceedings of the Human Factors Society 36th Annual Meeting, pp. 336–340.
Lodding, K., 1983. Iconic interfacing. IEEE Computer Graphics and Applications 4 (12), 13–23. Manes, S., 1985. Pushing picture-perfect programs: Smash That Icon! PC Magazine (June), 64. Marcus, A., 1984. Corporate identity for iconic interface design: the graphic design perspective. IEEE computer Graphics and Applications 4, 24–32. Marcus, A., 1993. Human communications issues in advanced UIs, the next generation GUIs. Communications of the ACM 36, 101–109. Miller, L.A., Stanney, K.M., 1997. The effect of pictogrambased interface design on human–computer performance. International Journal of Human-Computer Interaction 9 (2), 119–131. Murray, L.A., Magurno, A.B., Glover, B.L., Wogalter, M.S., 1998. Prohibitive pictorials: evaluations of different circleslash negation symbols. International Journal of Industrial Ergonomics 22, 473–482. Nielsen, J., 1990. Miniatures versus icons as a visual cache for videotext browsing. Behavior and Human Factors Society 33rd Annual Meeting, pp. 380–384. Preece, J., Rogers, Y., Sharp, H., Benyon, D., Holland, S., Carey, T., 1994. Human-Computer Interaction. AddisonWesley, NY. Sanders, M.S., McCormick, E.J., 1993. Human Factors in Engineering and Design. McGrawHill, New York. The CD-I Design Handbook, 1992. Philips Electronics UK LTD, Addison-Wesley, pp. 64–66. Tognazzini, B., 1992. TOG on Interface. Addison-Wesley, MA. Waterworth, J.A., 1993. Form icons to interface models: designing hypermedia from the bottom up. International Journal of Man-Machine Studies 39, 453–472. Wickens, C.D., 1992. Engineering Psychology and Human Performance. HarperCillins, NY. Weidenbeck, S., 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention. Behavior & Information Technology 18 (2), 68–82. Zimbardo, P., 1997. Psychology of Life. Scott Foresman, IL.
Factors affecting the design of computer icons Shih-Miao Huang*, Kong-King Shieh, Chai-Fen Chi Department of Industrial Management, National Taiwan University of Science and Technology, 43, Kee-Lung Road, Section 4, Taipei 106, Taiwan, ROC Received 21 September 2000; accepted 10 September 2001
Abstract The purpose of this study was to identify and investigate the main factors involved in the design of computer graphic user interfaces (GUI), commonly known as computer icons. Nineteen elements related to icon design were extracted from the principles, criteria and guidelines for GUI design. Forty-three Taiwanese designers working in computer GUI design were recruited to rate the importance of each design element. Results from the principal components analysis showed that the subjects’ importance ratings for computer icon design elements were affected by five factors: styling quality, message quality, meaningfulness, locatability, and metaphor. In addition to comprehensibility and identifiability, which previous results have found to be important icon design considerations, styling quality may also be important. Analysis of variance of the importance ratings for elements within each factor found that meaningfulness and locatability were more important than styling quality, message quality and metaphor. Finally, the correlation results indicated that neither computer GUI design experience nor the designers’ gender were related to importance ratings for the icon design element Relevance to industry Although the essential considerations for icon design are comprehensibility and identifiability, the results of this research demonstrate that ‘‘style’’ should also be considered as a factor when creating a computer icon. These research findings could serve as a guide to design computer icons that are appropriate for children’s education programs, and that attract people to web sites and make web sites more user-friendly. r 2002 Elsevier Science B.V. All rights reserved. Keywords: Design elements; Icon design
Pictographic symbols are used to convey a broad range of meanings, especially in the
design of human–machine communication interfaces, such as product labels, traffic signs, computer icons, etc. Icons are extensively used because:
*Corresponding author. Industrial Design Department, Institute of Technology, 58 Szechuan Road, Sec 2, PanChaio, Taipei, Taiwan. Tel.: +886-02-2737-6332; fax: +886-02-27376344. E-mail addresses: [email protected] (K.-K. Shieh), [email protected] (S.-M. Huang).
(1) Icons can be easily recognized and remembered (Weidenbeck, 1999). (2) Images have more universal recognition than text, since icon interfaces confront fewer obstacles than language (Lodding, 1983; Wickens, 1992).
1. Introduction
0169-8141/02/$ - see front matter r 2002 Elsevier Science B.V. All rights reserved. PII: S 0 1 6 9 - 8 1 4 1 ( 0 1 ) 0 0 0 6 4 - 6
212
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
(3) Icons offer the perception of affordance, which can facilitate human–machine interaction in terms of ecological perception (Gaver, 1991; Lodding, 1983). (4) Users prefer icons to text for executing tasks even though their performance may be neither better nor worse (Kacmar and Carey, 1991; Nielsen, 1990). However, an improperly designed icon can degrade the merits listed above. Two common problematic concerns regarding icon design are: firstly, icons often have language barriers that do not ensure instant comprehension across, or even within cultures (Waterworth, 1993; Manes, 1985; Kolers, 1969; Karfhage and Karfhage, 1986; Dreyfuss, 1972); secondly, people cannot quickly locate the icons they need (Gittens, 1986; Wickens, 1992). Many principles, criteria, and guidelines for icons have been proposed to qualify the design of icons (Marcus, 1984; Tognazzini, 1992; The CD-I Design Handbook, 1992; Gittens, 1986; Preece et al., 1994; Foley, 1974). For example, Lin (1992) used college students with no design experience to investigate factors that affect icon quality. He found that the essential design factors included: identifiable, meaningful, concise, associable, eyecatching and symbolic factors. However, design experience may influence how people judge icons (Christle and Gardiner, 1991). Therefore, it may be difficult to obtain icon design criteria information from subjects who have no icon design experience. Due to the current popularity of the internet, more and more graphics designers are engaged in the design of computer icons for commercial home pages. Icons have become individual consumer products. The function of computer icons is no longer just limited to communication (which mainly stresses being memorable and understandable); commercial requirements are expanding the role of computer icons beyond communication to match the user’s preferences. In summary, most previous studies have used objective criteria such as meaningful, identifiable, concise, associable, and memorable to evaluate the appropriateness of icon design. Subjective and aesthetic aspects of icon design have been
neglected. With the popularity of icons for commercial purposes, subjective preference may play a crucial role in the success or failure of icon design. Furthermore, people with design experience may use different criteria to evaluate icon design than those without design experience. Most existing criteria and principles of icon design are based on research findings from studies using college students with no icon design experience as subjects. These criteria and principles may not apply to experienced designers. The intent of this study was to investigate whether aesthetic and subjective preferences are important factors in icon design, and whether design experience affects the relative importance of various icon design criteria.
2. Methods 2.1. Materials A questionnaire which included 19 items to be rated on their importance to icon design was developed. Table 1 lists the 19 items with their brief descriptions. The questionnaire was developed in the following manner. First, a set of 50 icon design principles, criteria and guidelines was collected from various sources (Marcus, 1984; Tognazzini, 1992; The CD-I Design Handbook, 1992; Gittens, 1986; Preece et al., 1994; Foley, 1974; Lin, 1992). Then, two experienced professional graphics designers were recruited to analyze and synthesize these principles, criteria and guidelines. Each designer was allowed to add or delete any design elements to develop his list of important computer icon design elements. Afterwards, the designers met, and after extensive discussion of their work, constructed the 19-item questionnaire. 2.2. Subjects Forty-three computer GUI designers completed the questionnaire; 21 were male and 22 were female. Their mean age was 27.62 (SD ¼ 3:69). Their mean years of icon design experience was 3.18 yr (SD ¼ 1:84).
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
213
Table 1 The 19 design elements and their brief descriptions
2.3. Procedure
Element
Description
Boundaries Color Communicativeness
The icon should have a clear boundary Color should be used in icon design The icon should express the intended messages clearly The meanings of the icon should be consistent with users’ mental models The icon should be easy to discriminate from other icons The icon should remind the user of things already known The icon should offer some kind of feedback to users. For example, after users delete a file, the trash icon bulges The icon should clearly be differentiated from the background Do not force users to accept, but give them options to use the icons they prefer. For example, user can change the unwanted icons into wanted ones easily The features in an icon should be arranged carefully. Their relative direction, location, etc., could affect icon quality The icon’s implicit meaning should be close to the intended ones When an icon is dynamic, the sequence of displaying the series of icons should be considered The icon should be easy to recognize The icon’s meanings should be stable. For example, if a red color is used to express passion, it should not be used to express other meanings, such as prohibition, in this system The icon features should be as simple as possible, consistent with the inclusion of features that are necessary The icon should be a pictorial that reliably depicts visually what it is intended to represent The icon should be tested before being used The icon’s typeface should be limited to one or two type families only Symbols should be as unified as possible. For example, when solid and outline figures occur together, the solid figure should be within the outline figure
After the researcher explained the purpose of the questionnaire and the meanings of the items to the subjects, they were asked to rate the design elements based on their importance to computer icon design. The subjects rated the elements on a 6point scale (1=not important at all; 6=very important).
Consistency Discriminability Familiarity Feedback
Figure/ground Friendliness
Layout
Metaphor Order
Recognizablility Reliability
Simplicity
Symbolicity
Test-before-use Typography Unity
2.4. Data analysis Principal component analysis (PCA) with varimax rotation of factors was conducted on the importance ratings. Analyses of variance (ANOVAs) and correlation analyses were employed when needed. All calculations were made with the Statistical analysis system (SAS).
3. Results Table 2 shows the results of PCA. Five factors with eigenvalues >1 were retained in the solution. Design elements which were related to each factor (with a correlation coefficient above 0.50) are also shown in the table. The factor pattern was clear. Each design element correlated with only one factor, with the exception of Unity. Unity had coefficients below 0.50 with all factors, and hence, was not included in Table 2. 3.1. Description of the factors Factor 1 included seven design elements: color, layout, order, figure/ground, boundary, symbolicity, and typography. Since these items determine the actual physical form, or style, of an icon, this factor was named ‘‘styling quality.’’ Graphics designers frequently use color, layout, order, figure/ground relationship and boundary to create icons that correspond to the needs of different users, even if, the icons are presented with symbolic or typographic shapes. Fig. 1 shows three computer icons in the shape of houses that mean ‘‘go back to the home page’’. The different styles result from different colors, line layout, figure/ground relationships and shapes. The style
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218 1.18
Metaphor
2.10 2.77
Familiarity Discriminability
3.21 4.16 Eigenvalues
Design elements
0.75 0.54 0.74 0.73 0.59 0.78 0.79
0.79 0.57 0.53 0.64 0.79 Consistency Simplicity Reliability Feedback Friendliness Color Layout Order Fig/ground Boundary Symbolicity Typography
Communicativeness Recognizability Test-before-use
0.54 0.78 0.79
3.9 (1.0) 3.3 (1.4) 3.1 (1.4)
4.2 (1.1)
Factor 2 message quality Factor 1 styling quality
Main factor name Mean (s)
Table 2 Loadings of elements on the 5 main factor after varimax transformation
Factor 3 meaningfulness
Factor 4 locatability
0.80 0.62
Factor 5 metaphor 3.0 (1.3)
0.85
214
Fig. 1. Three computer icons, which mean ‘‘go to home page’’. Left one is adapted from the Microsoft Internet Explorer browser; the right is adopted from the Netscape browser.
of the middle house may be cuter and thus more appealing than that of the other two. Style is not evaluated as good or bad, but as preferred or not preferred. Factor 2 was named ‘‘message quality’’ because it included items that describe how to faithfully convey the message to users. Five elements were considered in this factor: consistency, simplicity, reliability, feedback, and friendliness. Message quality concerned whether the icons and their conveyed messages were stable and whether the users could understand the messages without being confused. For example, the word ‘‘red’’ written in green could easily confuse the viewers because of the inconsistency between the word’s meaning (red) and the actual color (green) (Zimbardo, 1997). Without simplicity, a shape could have more than one possible meaning, which would confuse the viewers (Murray et al., 1998). People also need feedback from the computer to provide status information and to guide user input. The feedback must appear reliable and friendly to encourage user to interact further with the computer. Therefore, these elements are related to ensuring the message quality of an icon so that the users will use it. For example, Fig. 2 shows two icons with letters. In left icon, an opaque triangle partially obscures some critical features of the letters, and thus reduces the image quality, reliability and friendliness of the message. Factor 3 was labeled ‘‘meaningfulness’’ because the items in it have to do with the understanding of what icons mean. The items in Factor 3 are communicativeness, recognizability and test-beforeuse. Icons are tools to convey messages to users. Thus, an icon must first be easily recognized. For example, each icon in Fig. 3 is composed of three triangles. However, the left icon is more
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
Fig. 2. The left icon has some partially hidden letters.
Fig. 3. Two mountains constructed from three triangles. The left is more easily recognizable than the right.
recognizable than the right one because the left one is easily recognized as ‘‘mountain’’. Communicativeness could involve adding a particular context to a recognized icon to convey the desired messages. For example, the mountain sign could be used to indicate a place that sells hiking gear. However, it is not certain that the users would understand the message that the mountain sign was intended to convey because of cultural or individual differences, and the like. Thus, a testbefore-use should be performed to confirm that the target users understand the icon’s intended meaning. The items in Factor 4 are familiarity and discriminability. Factor 4 was named ‘‘locatability’’ (easy to locate) because these items can help users locate the required objects. Coren et al. (1979) concluded that the less familiar an object is, the more difficult it is to recognize; therefore, user
215
familiarity with an icon is important in icon design. For example, because the right icon in Fig. 3 appears less familiar to people than the left, it is more difficult to recognize. In addition, many researchers have agreed that symbols that are conspicuous, or salient relative to their context, facilitate user performance (Sanders and McCormick, 1993). For example, in Fig. 4, the context of the right deviant block includes more variable attributes than that of the left block, thus, the deviant block in the left rectangle is more easily detected than that in the right. Factor 5 includes only one item, metaphor, and is so named. An appropriate metaphor could exploit concepts, images, and relations with which the users are already familiar (Marcus, 1993). Hence, it should improve the users’ understanding of the symbolic relations or associations between an icon and its intended meaning (Carroll and Mack, 1985). Occasionally, it is difficult to design an icon that directly associates with the intended meaning of the icon. In such a case, it may be necessary to use metaphor to design icons that indirectly elicited the intended response. For example, one can use shapes that sound like the desired message. As shown in Fig. 5, the ‘‘star’’ sign could be used to stand for ‘‘start’’. 3.2. Importance of the factors The importance ratings for the design elements within each factor were averaged and the means and standard deviations (SDs) are presented in Table 2. The mean ratings and (SDs) were 3.1 (1.4), 3.3 (1.4), 4.2 (1.1), 3.9 (1.0), and 3.0 (1.3),
Fig. 4. The deviant block inside the left rectangle is more easily found than that in the right.
216
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218 Table 3 Comparison of obtained design factors with results from other studies
Fig. 5. One can use shapes that sound like the message they stand for. The ‘‘star’’ sign stands for ‘‘start’’.
This study
Lin (1992)
Styling quality Message quality Meaningfulness Locatability
Concise
Metaphor
respectively, for Factor 1–Factor 5. Results of ANOVA on the mean ratings indicated significant differences (F ð4; 210Þ ¼ 20:06; po0:01) among these factors. The Duncan multiple-range test showed no significant difference between Factors 3 and 4, and among Factors 1, 2 and 5. However, Factors 3 and 4 had higher importance ratings than Factors 1, 2 and 5. 3.3. GUI design experience and gender Correlation analyses of each design element with both designers’ experience and gender were conducted. Neither years of design experience, nor gender, were significantly related to the importance ratings for each design element.
4. Discussion The major objective of this study was to investigate factors that affect importance ratings for computer icon design features. The PCA of the importance ratings for design elements identified five factors: styling quality, message quality, meaningfulness, locatability, and metaphor. Compared with previous findings and literature, the results of this study were more specific and more suitable for computer icon design. For example, a comparison of Lin’s (1992) and this study’s results (see Table 3) indicated that meaningfulness is an important design factor in both studies. Locatability in this study is similar to ‘‘eye-catching’’ and ‘‘identifiability’’ in Lin’s study. Metaphor in this study is related to ‘‘associable’’ and ‘‘symbolic’’ in Lin’s study. ‘‘Concise’’ in Lin’s study is a part of styling quality in this study. Styling quality includes color, layout, order, figure/ground
Meaningful Eye-catching Identifiable Associable Symbolic
CIE (1988) Credibility Understanding Conspicuity Legibility
relationship, boundary, symbolicity, and typography. Clearly, styling quality is a more comprehensive and more suitable concept for icon design than is ‘‘concise’’. Finally, none of the factors in Lin’s study are related to the message quality factor in this study, possibly due to the essential differences between computer icon design and other GUI design fields. Computer icon design deals more with quality of messages than with other design areas because computers do not easily present the contexts in which the events take place. Some researchers have asserted that more natural and intuitive means are needed to support human–computer interaction (Hartson and Boehm-Davis, 1993; Jacob et al., 1993), such as contextual environments built into the computer to enhance the users’ performance (Miller and Stanney, 1997). For instance, a sign of a fish in a supermarket indicates the place where fish are for sale. However, when the sign is shown on a computer screen, it is difficult to realize what the sign means if the clue of contextual environment is missing or not clear. That is why the message quality of icons in the area of human– computer interaction is more important than in other areas. Also shown in Table 3 are the four principles for road sign design proposed by the CIE (1988), as cited by Bruyas et al. (1998): credibility, understanding, conspicuity, and legibility. The CIE’s Credibility principle seems to correspond to message quality in this study; likewise, understanding corresponds to meaningfulness; and conspicuity/legibility to locatability. The other two factors, styling quality and metaphor, are
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
not important considerations for the CIE because it emphasizes efficiency, safety, and reliability in road sign design. Previous research has not determined the relative importance of the various design criteria. Whereas, the present study addressed this issue and found that the rated importance of the five factors was not equal. It may be helpful for icon designers to evaluate their designs in terms of the order of importance of the five factors found in the present study. The ANOVA results found that Factor 3 (meaningfulness) and Factor 4 (locatability) were rated more important for computer icon design than were Factor 1 (styling quality), Factor 2 (message quality) and Factor 5 (metaphor). The importance ratings agree with other studies that have emphasized the importance of icon meaningfulness and locatability. Wickens (1992) identified two problems in screen design: the users cannot understand what the icons mean and the users have difficulty in locating the icons they need. Likewise, Sanders and McCormick (1993) indicated that icons should convey meanings that are easy for the users to comprehend, and that icons should be easily distinguished from other icons. Most GUI design literature has neglected the importance of attractiveness in icon design. With the spread of the internet, endless varieties of icons were created as symbols for commercial home pages. Icons were designed to be not only meaningful but also visually appealing to attract users to browse web sites. For example, there are two styles for the arrows shown in Fig. 6. Results from previous studies have shown that simple icons are better than complicated ones (Dewar, 1999). However, a child may prefer the left arrow to the right, although the right arrow is simpler than the
217
left. This finding should remind the designers that computer icons are no longer information signs only, but have become part of the consumer culture. Different personality types may prefer different design styles. This is an interesting issue for further study. This explains why designers have indicated that Factor 1 (styling quality) and Factor 5 (metaphor) are important for computer icon design. Finally, the results of correlation analyses indicated that years of design experience and gender were not related to importance ratings for design elements. A possible explanation is offered. In Taiwan, computer icon design is a relatively new field of work. Icon designers are generally younger people with limited experience (in this study the subjects’ average age was 27.6 yr; their average computer icon design experience was 3.2 yr). Such a homogeneous background (i.e., range restriction) may have contributed to the lack of relationship between work experience and importance ratings for computer icon design elements in this study.
5. Conclusions The results of this study showed that qualified computer icons should incorporate the following design criteria: styling, message quality, meaningfulness, locatability, and metaphor. These findings could be applied to the planning of a training program for computer icon designers. In particular, these findings could serve as a reminder that the training program should focus not only on training the designers to create icons with superior comprehension and identification, but also focus on training them to create stylish icons. Finally, neither experience in icon design, nor gender, was related to importance ratings for icon design elements.
Acknowledgements
Fig. 6. The left icon is more complicate than the right.
This study was supported by a Research Grant from the National Sciences Council of the Republic of China, Grant No. NSC-89-2213-E-161-001.
218
S.-M. Huang et al. / International Journal of Industrial Ergonomics 29 (2002) 211–218
References Bruyas, M., Breton, B., Pauzie, A., 1998. Guidelines: ergonomic guidelines for the design of pictorial information. International Journal of Industrial Ergonomics 21, 407–413. Carroll, J.M., Mack, R.L., 1985. Metaphor, computing systems, and active learning. International Journal of Man-Machine Studies 22, 39–57. Christle, B., Gardiner, M.M., 1991. Evaluation of the human– computer interface. In: Wilson, J.R., Corlett, E.N. (Eds.), Evaluation of Human Work. Tylor & Francis, London, pp. 271–320 (Chapter 12). Coren, S., Porac, C., Ward, L.M., 1979. Sensation and Perception. Academic Press, NY. Dewar, R., 1999. Design and evaluation of public information symbols. In: Zwaga, B. (Ed.), Visual Information for Everyday Use. Tylor & Francis, London, pp. 285–303. Dreyfuss, H., 1972. Symbol Resources. McGram-Hill, NY. Foley, J.D., 1974. The art of natural graphic man–machine conversation. Proceedings of IEEE 62 (4), 462–471. Gaver, W.W., 1991. Technology affordances. In: Conference on Human Factors in Computer Systems, Addison-Wesley, New Orleans, pp.79–84. Gittens, D., 1986. Icon-base human computer interaction. International Journal of Man Machine Studies 24, 519–543. Hartson, H.R., Boehm-Davis, D., 1993. User interface development processes and methodologies. Behaviour and Information Technology 12, 98–114. Jacob, R.J.K., Leggett, J.J., Myers, B.A., Pausch, R., 1993. Interaction styles and input/output devices. Behaviour and Information Technology 12, 69–79. Kacmar, C.J., Carey, J.M., 1991. Assessing the usability of icons in user interface. Behavior and Information Technology 10, 443–457. Kolers, P., 1969. Some formal characteristics of pictograms. American scientist 57 (3), 348–363. Karfhage, R.R., Karfhage, M.A., 1986. Criteria for iconic languages. In: Chang, S.-K., Ichikawa, T., Ligomenides, P.A. (Eds.), Visual languages, Plenum, NY, pp. 207–231. Lin, R., 1992. An application of the semantic differential to icon design. Proceedings of the Human Factors Society 36th Annual Meeting, pp. 336–340.
Lodding, K., 1983. Iconic interfacing. IEEE Computer Graphics and Applications 4 (12), 13–23. Manes, S., 1985. Pushing picture-perfect programs: Smash That Icon! PC Magazine (June), 64. Marcus, A., 1984. Corporate identity for iconic interface design: the graphic design perspective. IEEE computer Graphics and Applications 4, 24–32. Marcus, A., 1993. Human communications issues in advanced UIs, the next generation GUIs. Communications of the ACM 36, 101–109. Miller, L.A., Stanney, K.M., 1997. The effect of pictogrambased interface design on human–computer performance. International Journal of Human-Computer Interaction 9 (2), 119–131. Murray, L.A., Magurno, A.B., Glover, B.L., Wogalter, M.S., 1998. Prohibitive pictorials: evaluations of different circleslash negation symbols. International Journal of Industrial Ergonomics 22, 473–482. Nielsen, J., 1990. Miniatures versus icons as a visual cache for videotext browsing. Behavior and Human Factors Society 33rd Annual Meeting, pp. 380–384. Preece, J., Rogers, Y., Sharp, H., Benyon, D., Holland, S., Carey, T., 1994. Human-Computer Interaction. AddisonWesley, NY. Sanders, M.S., McCormick, E.J., 1993. Human Factors in Engineering and Design. McGrawHill, New York. The CD-I Design Handbook, 1992. Philips Electronics UK LTD, Addison-Wesley, pp. 64–66. Tognazzini, B., 1992. TOG on Interface. Addison-Wesley, MA. Waterworth, J.A., 1993. Form icons to interface models: designing hypermedia from the bottom up. International Journal of Man-Machine Studies 39, 453–472. Wickens, C.D., 1992. Engineering Psychology and Human Performance. HarperCillins, NY. Weidenbeck, S., 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention. Behavior & Information Technology 18 (2), 68–82. Zimbardo, P., 1997. Psychology of Life. Scott Foresman, IL.