ARTICLE IN PRESS Available online at www.sciencedirect.com

Displays xxx (2007) xxx–xxx www.elsevier.com/locate/displa

Factors influencing the usability of icons in the LCD touchscreen Hsinfu Huang *, Hsin-His Lai Department of Industrial Design, National Cheng-Kung University, No. 1, Ta-Hsueh Road, Tainan 701, Taiwan, ROC Received 20 February 2007; received in revised form 25 August 2007; accepted 11 October 2007

Abstract Touchscreens are widely used in electronic products. The purpose of this study is to investigate factors influencing the usability of icons in the LCD touchscreens. In this study, subjects had to answer a questionnaire and rate questions on a five-point Likert scale. Twenty evaluation items were collected from relevant interface design guidelines. Thirty subjects participated in this test, including 10 non-experienced users, 10 click-experienced users (PDA users), and 10 touch-experienced users (LCD touchscreen users). Principal component analysis (PCA) was performed with SPSS/ PC as the main statistical test. The PCA results showed that the usability of touch icons was affected by seven factors: touch field, semantics quality, dynamics, hit quality, tactility, color quality, and shape quality. Among these, touch field was rated as being the most important. Finally, the results of correlation analyses indicated that the user experience affected the importance ratings for usability. In particular, the subjects’ ratings exhibited significant differences with regard to the size element (p < 0.05). Further, click-experienced users such as PDA users continued to rate a better performance for touchscreens even if smaller icons were used.  2007 Elsevier B.V. All rights reserved. Keywords: LCD touchscreens; Touch icons; Usability; Factors analysis

1. Introduction Computer graphic user interfaces (GUI) allow users to visually operate computers; such interfaces often use icons [8]. We generally execute tasks using a cursor by the normal display–control relation in the working environment of a video display terminal (VDT). The development of touch panel technology has led to the development of LCD touchscreens that employ a different type of interaction. When compared to previously used gray screens, current colored screens (16.7 million colors) appear to be more complicated. Moreover, LCD touchscreens are often used in specialized working fields such as point-of-sale (POS), kiosk, medical environment, and industrial control [12]. Therefore, a good touch icon design will improve the user’s performance and reduce faults.

*

Corresponding author. Tel.: +886 6 2757575x54325; fax: +886 6 2746088. E-mail address: [email protected] (H. Huang).

Some relevant studies determined the anthropometry for touchscreen workstations in order to increase their efficiency [1,13]; Schultz et al. [16]. Schultz et al. [16] reported that the optimal viewing angle for a touchscreen is between 19 and 54.5 off the horizontal. However, touchscreen systems are a complicated human–computer interface (HCI). Instead of HCI workstation analysis, this study focuses on the usability of touchscreens. Furthermore, icons play an important role in computer GUIs irrespective of the type of interface. Some important icon design elements such as styling quality, message quality, meaningfulness, locatability, and metaphor have already been reported [4]. The interface designer can design useful icons using these principles. However, it will be useful to design icons on normal screens. Therefore, certain principles were not applied in the design of touchscreen icons. The operation of a touchscreen is obviously different from that of a normal screen. Apart from visual search, the use of a touchscreen also involves a ‘‘touch’’ action. However, few studies have been conducted on issues

0141-9382/$ - see front matter  2007 Elsevier B.V. All rights reserved. doi:10.1016/j.displa.2007.10.003

Please cite this article in press as: H. Huang, H.-H. Lai, Factors influencing the usability of icons in the LCD touchscreen, Displays (2007), doi:10.1016/j.displa.2007.10.003

ARTICLE IN PRESS 2

H. Huang, H.-H. Lai / Displays xxx (2007) xxx–xxx

related to touching the target and icons using fingers. From the interface designer’s perspective, in order to create a highly user-friendly interface, he/she must understand the usability requirements, which must first be obtained from the users [14]. Therefore, the purpose of this study is to investigate factors affecting the usability of icons in LCD touchscreens. The results could serve as a guide for designing computer icons that are appropriate for touchscreen interfaces and make such interfaces more user-friendly. 2. Methods 2.1. Subjects Thirty subjects participated in this experiment. These subjects included 10 non-experienced users, 10 click-experienced users (PDA users), and 10 touch-experienced users (LCD touchscreen users). Their mean age was 19.18 (SD = 2.67). 2.2. Materials and stimuli The materials were displayed on a 3M touchscreen system (LCD/MD17-5MS) with a maximum pixel resolution of 1600 · 1200 and frame rate of 80 Hz. The pixel size was 0.264 mm · 0.264 mm. The other specifications are as follows: LCD display size (337.92 mm · 270.34 mm), contrast ratio (450:1), brightness (260 cd/m2), and response time (16 ms). In this study, we designed a touchscreen interface and conducted experiments using it. The pixel resolution was 1024 · 768 and the frame rate was 70 Hz. The

experimental interface contained various design icons with different feedback levels, and they were classified along the axis, as shown in Fig. 1. Subjects can experience the differences between operating various touched icons. 2.3. Subjective evaluation This study measures the usability of elements for touchicons using items obtained from related journals (Displays; Applied Ergonomics; International Journal of Industrial Ergonomics; Advances in Human–Computer Interaction) or design guidelines for HCIs (Dix et al. [17]; Paiva, [18]); [14,15]. Table 1 lists 20 elements. 2.4. Procedures Before the experiment, subjects were briefed on the rules and purpose of the experiment and were asked to provide their personal details. Before the start of every test, the accuracy of the touchscreen was adjusted by the adjustment software. Subjects began by touching an icon from one’s left side (Freeze/None feedback style). The touch icons required progressive interaction in the experimental interface. The subjects were required to touch every icon on the touchscreen, as shown in Fig. 2. They experienced all different interaction styles, and perceived the differences in usability when operating the various touched icons. After the touch task was finished, the subjects were asked to rate the usability elements based on the importance of the touch icon. Finally, subjects were required to answer the questionnaire and rate the questions

Fig. 1. Touchscreen icons used in the experiment.

Please cite this article in press as: H. Huang, H.-H. Lai, Factors influencing the usability of icons in the LCD touchscreen, Displays (2007), doi:10.1016/j.displa.2007.10.003

ARTICLE IN PRESS H. Huang, H.-H. Lai / Displays xxx (2007) xxx–xxx Table 1 Twenty elements of usability Elements

Description

Location Quantity Density Values Chroma Hue Size Space Sweet spot Shape Edginess Speed Depth Flash Sound Haptics Displacement

The location of the icon on the touchscreen The quantity of icons on the touchscreen The icon state is intensive or loose The icon color is light or deep The icon color is light or deep The type of icon color Area of an icon on the touchscreen Distance between neighboring icons Sensitive point where the icon is touched Form of the static icon Resolution of the icon edge The response time of the icon is fast or slow Three-dimensionality of the icon Flashing effect on the icon surface Sound after the icon is touched The user has psychologically simulated the sense of touch The icon position will change after it is touched, e.g., throb The icon surface has accompanying words The icon surface has visual guides The icon strategy that the user can touch (land-on/lift-off)

Ideogram Symbol Operation

Fig. 2. Experimental situation.

on a five-point Likert scale (1 = not important at all; 5 = most important). 2.5. Data analysis Some effective cases were found in the data analysis process. The following statistical methods were applied in the data analysis: descriptive statistical analysis, principal component analysis, and ANOVA. 3. Results 3.1. Factors of usability This study used principal components analysis to extract the factors influencing the usability of icons in LCD touch-

3

screens. The factor-loading matrix was created using the varimax orthogonal rotation method. The number of factors was determined based on Kaiser’s rule [5] with an eigenvalue greater than 1 for factor loading. The explained variation of seven factors was 75.67%. The results of relational analysis are listed in Table 2. Among these seven factors influencing the usability of icons, Factor 1 was named ‘‘touch field.’’ It described the size, location, space, and density. Lindberg et al. [6] reported that factors such as icon spacing and size influenced human visual search when users viewed graphic interfaces. Therefore, such factors are important even in touchscreens since they influence the usability of touch icons, especially finger touch, which leads to inaccurate movements. Since the use of touchscreens by the finger is less accurate than the use of a mouse, the space between the icons directly influences the usability. Moreover, the usability of icons was reduced if they were located at the corner of the touchscreen. Factor 2 was named ‘‘color quality’’. It described the hue values and chroma. On touchscreens, icons with apposite colors are found to be attractive to users and can display status changes. According to the connotations of different colors [3], we can add positive and negative connotations to touched icons. For example, red icons may appear attractive (positive connotations) or alarming (negative connotations). On the other hand, blue icons may appear refreshing (positive connotations) or aloof (negative connotations). Therefore, color attraction is an important principle of usability when users operate touchscreens. Factor 3 was named ‘‘tactility’’. It described the depth, haptics, and operation. As opposed to mouse-controlled interfaces, users directly touch icons on the screen with their finger. This produces faster and more accurate performance in HCIs when haptic (touch and force) feedback is added [2,9]. In order to improve the usability of touch icons, they can use three-dimensional forms to simulate psychological haptics. During the experiment, subjects reported that three-dimensional icons were better than two-dimensional ones. Factor 4 was named ‘‘dynamics’’. It described the displacement, quantity, speed, and sound. Marcus and Aaron [7] reported that dynamics is a guide for icon design. Icons can also have associated sounds. Therefore, dynamic interaction directly influences the usability of icons. Factor 5 was named ‘‘hit quality’’. It described the sweet spot and flash. When using touchscreens, users must touch the icons with their fingers. If the hit point (sweet spot) of the icons is instable or insensitive, the users will face setback problems. Therefore, hit quality is a serious issue in touchscreens. Factor 6 was named ‘‘shape quality’’. It described the form of the static icon and the resolution of the icon edge. Touchscreen are often used in digital learning environments where children can touch various shapes on the screen. User preferred uncomplicated and simple icons when using touchscreens.

Please cite this article in press as: H. Huang, H.-H. Lai, Factors influencing the usability of icons in the LCD touchscreen, Displays (2007), doi:10.1016/j.displa.2007.10.003

ARTICLE IN PRESS 4

H. Huang, H.-H. Lai / Displays xxx (2007) xxx–xxx

Table 2 Loadings of elements for the seven main factors Factor

1

Elements

Size Location Density Space

Cumulative % Eigenvalues

21.58 4.31

2 0.80 0.75 0.64 0.54

Values Hue Chroma

3 0.83 0.82 0.65

36.20 2.92

4

Operation Deep Haptics

0.89 0.61 0.59

5

Displacement Quantity Speed Sound

48.22 2.41

0.78 0.67 0.60 0.53

56.38 1.63

6

Sweet spot Flash

0.76 0.73

63.77 1.48

7

Shape Edginess

0.85 0.58

70.29 1.31

Ideogram Symbol

0.89 0.69

75.67 1.07

Finally, Factor 7 was named ‘‘semantics quality’’. It described the ideograms and symbols. Icons with accompanying words are effective in computing situations [10]. This is obviously suitable for touch icons as well. On the other hand, the use of symbols in icons is also popular. Therefore, semantics quality is a decisive factor in determining whether information can be transmitted correctly. The ANOVA results for the mean ratings exhibited significant differences (F(6, 527) = 6.67, p < 0.01) among the seven factors. The results of the Duncan t-test are shown in Table 3.

Table 4 Ranking of elements

3.2. Importance of the usability of elements

(6.30), PDA (6.00)} > {PDA (6.00), Non-exp (5.10)}. Other elements have no significant effect. Special attention should be paid to the comparison of different experiences with regard to each factor. For example, with regard to Factor 2, non-experienced users emphasized color quality to a greater extent than others. With regard to Factor 3, LCD touchscreen users emphasized haptic feedback when they touch the icons. Moreover, the lower mean value indicated that non-experienced users are unaware of the operation strategy of icons (landon/lift-off). With regard to Factor 5, all subjects considered the sweet spot to be a major factor influencing the usability of icons.

The importance of the usability of elements was evident from the results of descriptive statistics (Table 4). Users considered the sweet spot to be a major guide, followed by the space, location, size, and sounds. Users considered elements such as operation, values, shape, and hue to be less important. The flash effect was ranked as being the least important. The ANOVA results for the mean ratings exhibited significant differences between the 20 elements (p < 0.01). 3.3. The difference in subjects’ experience This study classifies subjects as touch-experienced and non-experienced. Further, the touch-experienced subjects include LCD touchscreen users and PDA users (clickexperienced on small screens). The usability evaluation results based on different experiences are shown in Fig. 3. With regard to the icon size, a significant difference was observed between the different experiences using one-way ANOVA (p < 0.05) and the Duncan t-test {Exp Table 3 Result of the Duncan t-test Factor

Mean

Duncan grouping

Touch field Semantics quality Dynamics Hit quality Tactility Color quality Shape quality

5.76 5.32 5.13 5.03 4.97 4.68 4.63

A A

B B B B

C C C C C

Element

N

Mean

Element

N

Mean

Sweet spot Space Location Size Sound Density Haptics Symbol Displacement Ideogram

30 30 30 30 30 30 30 30 30 30

6.10 5.90 5.90 5.80 5.77 5.43 5.43 5.40 5.23 5.23

Chroma Depth Speed Quantity Edginess Operation Values Shape Hue Flash

30 30 30 30 30 30 30 30 30 30

5.03 4.83 4.77 4.77 4.73 4.63 4.63 4.53 4.37 3.97

(1.12) (0.92) (1.06) (1.16) (1.50) (1.14) (1.41) (1.25) (1.45) (1.57)

(1.54) (1.21) (1.38) (1.59) (1.66) (1.61) (1.47) (1.33) (1.63) (1.85)

4. Discussion and conclusions In the field of computers, icons are usually small (less than 1 in2 or 64 · 64 pixels). Smaller icons are often used to save space or for integration within other objects Shneiderman and Plasisant [14]. However, small icons are not suitable for touchscreens because they reduce the usability. In this study, subjects indicated the preferred usability of touch icons by means of a subjective evaluation using the Likert scale. For subjects, the elements that directly interact with the finger are the main factors influencing the usability of icons; these include the sweet spot, size, location, and displacement. On the other hand, subjects were not in favor of visual elements on the touch-icons, such as shape and color, especially flash effect. Therefore, touchscreens differ from traditional screen since in addition to the operation

Please cite this article in press as: H. Huang, H.-H. Lai, Factors influencing the usability of icons in the LCD touchscreen, Displays (2007), doi:10.1016/j.displa.2007.10.003

ARTICLE IN PRESS H. Huang, H.-H. Lai / Displays xxx (2007) xxx–xxx

Fig. 3. Differences in seven factors based on subject experience.

Please cite this article in press as: H. Huang, H.-H. Lai, Factors influencing the usability of icons in the LCD touchscreen, Displays (2007), doi:10.1016/j.displa.2007.10.003

5

ARTICLE IN PRESS 6

H. Huang, H.-H. Lai / Displays xxx (2007) xxx–xxx

In this paper, the usability principles of touch icons are constructed from experimental results. These results can serve as a guide for designing touch icons. A further study was conducted on the effects of fingertip pressure on touch performance. Acknowledgements

Fig. 4. Example of a touch icon.

style, touchscreen users focus on interaction with the finger. Moreover, the seven usability factors were rated in terms of decreasing importance based on their averages as follows: touch field, semantics quality, dynamics, hit quality, tactility, color quality, and shape quality. These results indicated that subjects favor icon types that have practical functions and high reliability. In order to clarify this description, an actual example was provided. Fig. 4 shows an example of an icon with higher usability (large touch field, intelligible semantics, dynamic effects, accurate sweet spot, simulated haptic feedback, apposite color attraction, and uncomplicated shape). The results of this study showed that the color quality of the touch icon was not the most important factor. Shneiderman et al. [14] also reported that greater controversy exists with regard to the benefits of color for userinterface components. Instead of showing meaningful relationships, inappropriately colored fields misled users into searching for nonexistent relationships. The results of this study agreed with suggestions from Shneiderman et al. [14]. Moreover, a high-usability touchscreen should consider the requirements of color-deficient users. Olson and Brewer [11] suggested monochrome designs in order to avoid these color impairments. Based on the results described above, interface designers should conservatively use colors in touch icons because inexperienced users may be confused by too many color codes. A significant difference was observed with regard to the icon size between users with different levels of experience. LCD touchscreen users consider that the icon size strongly affects the usability. On the other hand, PDA users are accustomed to using small screens and highly accurate input devices such as a stylus. Therefore, they focused on the icon size to a lesser extent than LCD touchscreen users did. Novices, i.e., non-experienced users considered that the icon size weakly affects the usability. This may be because such users are still at a stage where they are exploring touchscreens. They have no experience about the difficulties in using touchscreen interfaces and are therefore unable to provide accurate feedback. However, all the subjects still indicated that the size is an important factor for the usability of icons in touchscreens (mean = 5.10).

This study was partially supported by the National Science Council of Taiwan, ROC under Grant No. 95-2221-E006-140 NSC. The authors would like to acknowledge the contributions of Prof. Chang-Franw Lee and Mr. WangChin Tsai in providing guidelines for material of this paper. References [1] D.B. Beringer, J.G. Peterson, Underlying behavioral parameters of the operation of touch-input devices: biases, models, and feedback, Human Factors 27 (4) (1985) 445–458. [2] Frederick Brooks, Grasping reality though illusion: Interactive graphics serving scienceHuman Factors in Computing Systems, ACM, New York, 1988, pp. 1–11. [3] V. Go¨tz, Color and Type for the Screen, RotoVision, Berlin, 1998. [4] Shih-Miao Huang, Kong-King Shieh, Chai-Fen Chi, Factors affecting the design of computer icons, International Journal of Industrial Ergonomics 29 (2002) 211–218. [5] H.F. Kaiser, An index of factorial simplicity, Psychometrika 30 (1974) 1–14. [6] Tomas Lindberg, Risto Na¨sa¨nen, The effect of icon spacing and size on the speed of icon processing in the human visual system, Displays 24 (2003) 111–120. [7] Aaron Marcus, Graphic Design for Electronic Documents and User Interface, ACM, New York, 1992. [8] Risto Na¨sa¨nena, Helena Ojanpa¨a¨, Effect of image contrast and sharpness on visual search for computer icons, Displays 24 (2003) 137–144. [9] Haruo Noma, Tsutomu Miyasato, Fumio Kishino, A palmtop display for dexterous manipulation with haptic sensation, in: Proceedings of the CHI’96 Conference: Human Factors in Computing Systems, ACM, New York, 1996, pp. 126–133. [10] Kent Norman, The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface, Ablex, Norwood, NJ, 1991. [11] J. Olson, C.A. Brewer, An evaluation of color selections to accommodate map users with color vision impairments, Annals of the Association of American Geographics 87 (1997) 103–134. [12] A. Sears, C. Plaisant, B. Shneiferman, A new era for touchscreen applications: high-precision, dragging, and direct manipulation metaphors, Advances in Human–Computer Interaction vol. 3 (1992) 1–33. [13] A. Sears, Improving touchscreen keyboards: design issues and a comparison with other devices, Interacting with Computers 3 (3) (1991) 251–269. [14] Shneiderman Ben, Plasisant Catherine, Designing the User Interface, Addison-Wesley, USA, 2004. [15] Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha, User Interface Design and Evaluation, Morgan Kaufmann Publishers, USA, 2005. [16] Kevin L. Schulz, David M. Batten, Thomas J. Sluchak, Optimal viewing angle for touch-screen displays: Is there such a thing? International Journal of Industrial Ergonomics 22 (1998) 343–350. [17] Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale, HumanComputer Interaction, Pearson Education Limited, England, 1998. [18] Ana Paiva, Affective Interactions, Towards a New Generation of Computer Interfaces, Springer, 2000.

Please cite this article in press as: H. Huang, H.-H. Lai, Factors influencing the usability of icons in the LCD touchscreen, Displays (2007), doi:10.1016/j.displa.2007.10.003