For the convenience of firefighters&rsquo; decision-making and operation, touch screen display was chosen as the preferred interface for a fire information display system. Few studies were conducted to determine comfortable button/icon size on touch screens. This experiment investigated the effect of four factors on operators&rsquo; performance with touch screen: 1) button size (20*20, 30*30, 40*40, and 50*50 pixels 2), spacing between buttons (0, 5, 10, and 20 pixels), 3) button/icon types (digit buttons only, picture icons only, combination), and 4) glove wearing (wearing vs. not wearing). 14 males were asked to accomplish a series of matching tasks on touch screen with the forefinger of right hand. Results showed that the spacing between buttons/icons, and wearing or not wearing a glove did not affect performance. Subjects pointed to the digit buttons faster than the other two kinds of buttons/icons. There was a significant difference among button/icon sizes. People performed best when it was equal to or bigger than 40*40 pixels

Tom Plocher

Weina Qu

Xianghong Sun

English

Institutional Repository of Institute of Psychology, Chinese Academy of Sciences

N. Aykin (Ed.): Usability and Internationalization, Part I, HCII 2007, LNCS 4559, pp. 615–621, 2007. © Springer-Verlag Berlin Heidelberg 2007 An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen  Xianghong Sun1, Tom Plocher2, and Weina Qu1 1 State Key Laboratory of Brain and Cognitive Science, Inst. of Psychology,  Chinese Academy of Science, Beijing 100101, China  {sunxh,quwn}@ psych.ac.cn 2 Honeywell ACS Labs, Minneapolis MN 55418, USA tom.plocher@honeywell.com  Abstract. For the convenience of firefighters’ decision-making and operation, touch screen display was chosen as the preferred interface for a fire information display system. Few studies were conducted to determine comfortable button/icon size on touch screens. This experiment investigated the effect of four factors on operators’ performance with touch screen: 1) button size (20*20, 30*30, 40*40, and 50*50 pixels 2), spacing between buttons (0, 5, 10, and 20 pixels), 3) button/icon types (digit buttons only, picture icons only, combination), and 4) glove wearing (wearing vs. not wearing). 14 males were asked to accomplish a series of matching tasks on touch screen with the forefinger of right hand. Results showed that the spacing between buttons/icons, and wearing or not wearing a glove did not affect performance. Subjects pointed to the digit buttons faster than the other two kinds of buttons/icons. There was a significant difference among button/icon sizes. People performed best when it was equal to or bigger than 40*40 pixels.  Keywords: touch screen, button size. 1   Introduction The touch screen is not used as an input device nearly as widely as the mouse. The mouse is very easy to use for dragging, drawing, and accurately pointing to some specific position on the screen [2]. Touch screens lack pointing accuracy, but are very intuitive for consumers [6]. They are especially useful for novices, who may be unfamiliar with mouse and keyboard operations, and for software systems with very limited control interactions [5]. User interface designs for touch screens must carefully consider the size of and spacing between touch-activated buttons and icons so that the user’s inputs will be accurate. Usually, the larger the button, the easier it is for users to accurately point to it. But often, computer screen space is limited. Designs must trade off between button size and spacing that maximizes accuracy, and the ability to support the desired functionality for a given screen [2]. Those tradeoffs need to be guided by knowledge of how button size and spacing affects performance. Bender and Gregory [3] investigated people’s performance on touch screen, they found an appropriate auditory feedback signal might help compensate for the reduced auditory feedback and increase touch screen performance. From other literature we found, few studies have been done that provide such design guidance [1]. 616 X. Sun, T. Plocher, and W. Qu In this experiment we investigated the smallest comfortable button size on a touch screen for firefighters’ to activate using their forefinger. Four factors were considered:  1. The size of the button. With the resolution of 1280*1024, there were four levels: 20*20, 30*30, 40*40, 50*50 pixels.  2. The spacing between any two buttons/icons, there were also four levels: 0, 5, 10, and 20 pixels. We think there could be some trade off between the button size and the spacing between buttons. 3. The type of buttons/icons. Three levels: 10 digit buttons only, 10 picture icons only, and a combined case with the 10 digit buttons and 10 picture icons together. The ten digit buttons were: 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. The ten picture icons were: . 4. Wearing vs. not wearing a cotton waved glove. Firefighters usually wear some special uniform and a pair of gloves to the site. Typically, they have no time to take off their gloves before using the touch screen at the fire scene.    Fig. 1. Sample experimental task screen 2   Method 2.1   Experimental Τask On the computer screen, 10 buttons appeared in a stimulus row at the top of the screen. The buttons in this row consisted of 10 digit buttons or 10 picture icon buttons, or a combination of 5 digit and 5 picture icon buttons.  The order of the 10 stimulus buttons was randomised from trial to trial. Below this, in the middle of the screen, appeared a keypad. The keypad consisted of the same 10 digit buttons in order from 0-9 and the same 10 picture icon buttons, arrayed in a 4 x 5 matrix. Subjects were asked to use the keypad to match each button in the stimulus string at the top of the screen, using their forefinger to point and select matching buttons from the  keypad. The size and spacing of the buttons on the keypad was varied from trial to trial. The subject’s selections from the keypad were displayed, one by one, in a results row immediately below the stimulus row. The reaction time to each button/icon and the percentage of correct inputs were recorded automatically by computer software.   An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen 617 Figure 1 is a sample screen from the experimental task and shows the stimulus row at the top, the results row below it, with two of the ten responses completed, and the 4 x 5 button keypad used to perform the matching task. 2.2   Experimental Design   The experiment used a 2 (wearing vs. not wearing glove)× 3 (digit buttons, icon buttons, mixed digit and icon buttons) × 4 (button sizes 20*20, 30*30, 40*40, 50*50) × 4 (button spacing 0, 5, 10, 20) within subjects design. 2.3   Participants Since all the firefighters in China are male soldiers, and their age is around 18 to 36 years, 14 male subjects at the same age participated in this experiment. Each subject took half an hour to accomplish the experimental task. Table 1. Percentage of correct inputting digits/icons with forefinger on touch screen Not wearing glove Wearing glove  Size  Inter-val digit icon digit+ icon total digit icon digit+ icon total 0 83.8 86.0 88.5 86.1 74.3 72.7 77.5 74.6 5 96.4 95.3 94.6 95.5 91.3 93.3 94.5 92.9 10 92.9 96.4 97.9 95.7 91.3 95.6 91.8 93.1 20 95.0 88.3 95.0 93.0 93.8 97.9 95.6 95.8  20 * 20 total 92.2 91.6 94.1 92.6 87.7 89.8 89.3 88.9 0 96.9 93.3 98.3 96.0 90.7 89.4 92.5 90.7 5 97.9 96.7 93.1 96.0 96.4 95.3 99.1 96.8 10 90.8 98.7 92.9 94.3 95.8 98.0 95.5 96.6 20 91.4 99.3 90.8 93.9 95.7 93.8 96.4 95.1  30 * 30 total 94.3 96.9 93.7 95.0 94.6 94.0 95.8 94.7 0 98.6 98.6 96.9 98.0 97.7 95.6 99.2 97.3 5 99.2 99.3 97.1 98.5 97.9 98.8 94.5 97.3 10 97.5 98.0 99.2 98.3 94.3 95.0 96.7 95.2 20 93.1 98.6 92.9 94.9 98.7 95.6 100.0 97.9  40 * 40 total 97.1 98.6 96.5 97.4 97.1 96.3 97.6 96.9 0 93.6 99.3 97.7 96.8 94.7 97.5 96.7 96.3 5 99.2 98.7 100.0 99.3 99.3 99.3 99.1 99.3 10 96.7 98.7 90.7 95.4 96.9 96.3 100.0 97.5 20 93.1 96.4 92.9 94.1 99.2 98.7 100.0 99.3  50 * 50 total 95.6 98.3 95.3 96.4 97.5 97.9 98.9 98.0 0 93.3 94.1 95.3 94.2 89.3 89.0 91.5 89.8 5 98.1 97.5 96.3 97.3 96.1 96.7 96.8 96.5 10 94.3 98.0 95.1 95.9 94.4 96.2 96.0 95.6 20 93.1 95.9 93.0 94.0 96.9 96.4 98.1 97.0  total total 94.7 96.4 94.9 95.4 94.2 94.6 95.5 94.7  618 X. Sun, T. Plocher, and W. Qu 3   Results 3.1   Percentage of Correct Inputs Table 1 shows the percentage of correct inputs for the digit/icon matching task. From the data, the percentage correct was stable whether or not the subjects wore gloves and no matter what kind of string, digit or iconic, the subjects were asked to match. But it increased significantly from 89% to 98% with the button/icon size (F= 29.2, p = .000 < .01) and with the button/icon spacing (F= 14.1, p = .000< .01). From the post hoc test, it was found that the percentage reached a stable point when button size was equal to, or bigger than 40*40 pixels. Compared to the other three spacing, only when the spacing size was zero was the percentage lower. button/icon size (pixel)50*5040*4030*3020*20Percentage of correct inputting (%)100989694929088868482GLOVEnot wearinwearinginterval size between buttons (pixel)201050Percentage of correct inputting (%)100989694929088868482GLOVEnot wearingwearing(a)                                     (b) button/icon size (pixel)50*5040*4030*3020*20Percentage of correct inputting (%)100908070interval size 051020(c)  Fig. 2. (a-c) Variation and interactions in percentage of correct inputs between different factors  An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen 619 The interaction between button spacing and button/icon size was significant  (F = 9.1, p = .000 < .01). Also the interactions between button spacing and glove-wearing (F= 7.8, p = .000 < .01) and between button/icon size and glove-wearing were significant (F = 3.6, p = .014 < .05). As shown in 2(a) and 2(b), the percentage of correct inputs was lowest at the smallest button size (20*20 pixels). Input performance improved differentially as button size and interval increased for subjects who wore a glove compared to those who did not. In Figure 2(c) it can be seen that the percentage correct also was lowest at the smallest button size, but increased differentially compared to other button spacing as button size increased. The percentage of correct inputting remained almost constant, when the spacing was 5, 10, and 20 pixels. 3.2    Reaction Time (RT) Table 2 listed the mean reaction time to each button on the touch screen when subjects followed the stimulus string and matched them with the forefinger. All the reaction times ranged from 800ms to 1800ms. Based on the ANOVA for repeated measures, it was found that the RT was not affected by glove-wearing or by button spacing. However, RT was 200ms faster when matching digital stimuli as compared to iconic or mixed digital and iconic stimuli (F= 59.0, p = .000 < .01). The RT was shortened significantly as button/icon size increased (F = 148.0, p = .000 < .01). From the post hoc test, it was found RT to buttons at 30*30 pixels was significantly faster than to buttons at 20*20 pixels. RT to buttons at 40*40 and 50*50 pixels was significantly faster than to buttons at 30*30 pixels. RT was fastest when button size  was equal to, or greater than 40*40 pixels. But considering the trade-off between the button size and cost of RT, the size 30*30 pixels was also a good choice for accurate and comfortable operations.  button/icon size (pixel)50*5040*4030*3020*20Means of Reaction time (ms)18001600140012001000800string typedigit onlyicon onlydigits + icons Fig. 3. Variation of RT with button/icon size increased when coping different types of strings 620 X. Sun, T. Plocher, and W. Qu Table 2. Reaction time for inputs of digits/icons with forefinger on touch screen Not wearing glove Wearing glove Size Interval Digit icon digit+icon Digit Icon digit+icon 0 1325.5 1682.4 1708.8 1382.7 1665.5 1630.8 5 1338.6 1553.7 1708.9 1425.1 1816.8 1452.4 10 1431.7 1524.3 1589.6 1565.6 1764.0 1591.2  20*20 20 1281.3 1490.7 1657.9 1377.7 1708.1 1805.0 0 955.4 1260.5 1263.1 1009.0 1326.4 1205.9 5 1106.9 1317.5 1426.4 945.4 1204.4 1131.7 10 988.3 1206.5 1222.1 1105.8 1125.2 1315.7  30*30 20 966.5 1303.4 1374.0 1095.5 1336.7 1250.2 0 889.6 1219.7 1022.3 883.5 1098.7 1139.8 5 923.7 1116.8 1205.0 891.9 1077.0 1098.3 10 870.3 1101.1 1063.1 986.9 1112.4 1084.9  40*40 20 908.8 1188.9 1245.4 894.9 1126.2 1045.9 0 918.8 1102.4 1179.4 933.0 1044.8 1077.6 5 852.9 1039.7 1094.1 847.6 1026.2 1022.7 10 883.2 1173.5 1177.3 884.5 1076.5 935.3  50*50 20 808.6 1155.2 1219.5 881.0 1069.6 1153.9          4   Conclusion and Discussion Based on the results above, we can conclude that performance of a matching task with the forefinger on a touch screen was mainly affected by button/icon size, and button iconography, digital or iconic. Button spacing did not significantly affect performance. When the button/icon was equal to, or bigger than 40*40 pixels, the reaction time was the fastest and the percentage of correct responses was the highest, around 98%. But the size 30*30 pixels also was a good choice for button/icon design if a reaction time of around 1200ms is acceptable for system efficiency. Button iconography did not affect the percentage of correct responses, but subjects responded to digits on buttons 200ms faster than icons or icon-digit combinations. Almost all the subjects felt that the performance when wearing gloves was not as good as when they were not wearing gloves. The results contradicted this subjective impression. The data indicated that glove-wearing was not a problem for firefighters interacting with the computer touch screen except with the smallest buttons and spacing of zero. The design of screen layouts for touch screen interfaces is always a trade off between the available screen space and the functionality that must be supported. This is particularly a problem for small screen displays. Our results indicate that the designer should attempt to maintain button size at a minimum of 30*30 pixels in favour of tradeoffs in spacing between buttons, which will have much less impact on performance than reducing button size.  An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen 621 References 1. Aftab, E.P, Sebastian, S., Tomescu, Milad, G.A.: Ishac: What visual information is used for navigation around obstacles in a cluttered environment? Canada Journal of Physiology and Pharmacology 82, 682–692 (2004) 2. Bay, S., Ziefle, M.: Children Using Cellular Phones: The Effects of Shortcomings in User Interface. Human Factors 47(1), 158–169 (2005) 3. Bender, Gregory, T.: Touch screen performance as a function of the duration of auditory feedback and target size, Ph.D.Dissertation, Wichita State University, 108 pages (1999) 4. Comerford, R.: Touch screen technologies for big size display. Electronic Products China 1, 4–10 (2005) 5. Yao, G.: Application of touch screen in HCI. Construction Machinery & Maintenance 10, 16–20 (2004) 6. Zhang, E., Zhang, A.: Development and application of touch screen technology. Journal of Shandong Normal University (Natural Science), 1 (2002) 

An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen

Institute of Psychology,Chinese Academy Of Sciences

http://ir.psych.ac.cn/bitstream/311026/14275/1/10.1007_978-3-540-73287-7_71%5b2%5d.pdf

An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen

Abstract

Similar works

Full text

Available Versions

Institutional Repository of Institute of Psychology, Chinese Academy of Sciences

Institute of Psychology,Chinese Academy Of Sciences