Advertisement

Study on the influence of different menu sizes on the operation performance of touch screen

  • Ning Li
  • Yingwei Zhou
  • Kaili Yin
  • Deqiang Fu
  • Chen Guo
  • Li Wang
  • Guangquan ChengEmail author
Open Access
Special Issue
  • 67 Downloads

Abstract

The key size of the touchscreen menu will significantly affect the user’s operation experience and task completion performance. This paper explores the influence of different shortcut menu sizes on users’ operation performance in the touch-screen application situations with two tilting angles \((6.6^{\circ }\,\hbox {and}\, 18^{\circ })\). The results show that the tilt angles of the two display screens have no significant influence on the response time of operators and the change trend of menu size. When the shortcut menu size is less than \(2.5\times 2.5\,\hbox {cm}\), the operator’s response time increases significantly with the reduction of shortcut menu size. When the shortcut menu size is more than \(2.5\times 2.5\,\hbox {cm}\), the increase of size has no significant impact on the operator’s response time. The shortcut menu recommends sizes between \(2.0\times 2.0\,\hbox {cm}\) and \(2.5\times 2.5\,\hbox {cm}\), with \(2.25\times 2.25\,\hbox {cm}\) being a key size value. The research content can be used as the supporting condition of information system design.

Keywords

Menu sizes Touch screen Operation performance Human–computer interaction Information system design 

1 Introduction

In recent years, the touch screen gradually reflects its operational advantages and becomes a trend of human–computer interaction design [1]. Touch operation brings users a new humanized operation experience different from that of physical keys and satisfies the ideal effect of human pursuit of one-point instant access. Therefore, touch operation and touch screen devices are quickly accepted by users. Typical devices include mobile phone terminal, ATM, campus terminal equipment, etc. [2]. For novice users, touch operation is easier to use than traditional interaction mode, while for old users, touch operation can save more time and energy and improve operation efficiency.

There have been some previous studies on the size of menu/key on touch screen. Experimental studies by MachKenzie and Zhang showed that there was no significant difference in the effect of text input on QWERTY keyboard with the width of 6.4 mm and 10 mm respectively with the touch pen, because the size of these keys was large enough for the stylus needle [3]. After research, Josh Clark proposed that the reasonable size of iPhone interface design controls should be at least 44pix (44pix is about 7 mm on the device at that time) [4]. Colle and Hiszem for 10 mm on target size to 15 mm buttons study found an interesting conclusion, namely when the test task for 4 to 10 consecutive click on error rate would decrease due to the increase of the size, but when testing tasks for a single click on error rate is unchanged, it illustrates the testing task of continuous single click and click the difference [5]. Parhi and Karlson proposed after the experiment that the minimum size of the target key should not be less than 9.2 mm when performing discrete operation or single click [6]. The target minimum size should not be less than 9.6 mm when performing a continuous operation [3]. For finger-based touch operation, the key size of menu can significantly affect the task completion performance of the operator. The above researches are all based on the touch screen of mobile phones, but there is little research on the touch screen menu size of PC host of information system, especially the touch screen placed horizontally with a small tilt Angle is almost absent.

Based on the design requirements of touch screen menu of information system PC host, this study takes the menu as the research object to explore the influence of different shortcut menu sizes on the user’s operation performance in the application situation of touch screen with two tilt angles, so as to provide scientific basis for the button size design of touch screen menu.

2 Experimental methods

2.1 Experimental device

The experiment was conducted in a quiet professional test room. The computer was used to control the experimental process and record the experimental data of the operator. The display was a flat LCD touch screen display (size: 20.1 inch, resolution: \(1600 \times 1200\), refresh frequency: 60 Hz), and the interface display area was \(21.1 \times 15.8\,\hbox {cm}\).

2.2 Experimental variables and design

This test is a \(2 \times 7\) hybrid design. There are two test variables. Variables in the group are the size of the shortcut menu, with a total of 7 levels (\(1.5 \times 1.5\,\hbox {cm}\), \(2.0 \times 2.0\,\hbox {cm}\), \(2.5 \times 2.5\,\hbox {cm}\), \(2.75 \times 2.75\,\hbox {cm}\), \(3.0 \times 3.0\,\hbox {cm}\), \(3.5 \times 3.5\,\hbox {cm}\), \(4.0 \times 4.0\,\hbox {cm}\)). The intergroup variables were the angles (\(18^{\circ }\) and \(6.6^{\circ }\)) between the horizontal plane and the display screen. The test indexes are correct rate of click and correct time of click. Control variables include lighting, display resolution, distance between the shortcut menu and the origin of the cursor, and the color and shape of the shortcut menu.

2.3 Experimental operators

The mean age of 16 male participants was \(20.81 ({\pm } 2.45)\) years. No color blindness or color weakness, visual acuity above 5.0 or corrected visual acuity, all were right-handed.

2.4 Experimental materials and tasks

In the test, the computer presented the target shortcut menu in seven directions in the center of the screen, and the seven directions were randomly distributed on the circle around the center point of the screen. The distance between the center of the target shortcut menu and the center of the screen is random between 4.5 and 6 cm. There are seven types of target shortcut menus: \(1.5 \times 1.5\,\hbox {cm}\), \(2.0 \times 2.0\,\hbox {cm}\), \(2.5 \times 2.5\,\hbox {cm}\), \(2.75 \times 2.75\,\hbox {cm}\), \(3.0 \times 3.0\,\hbox {cm}\), \(3.5 \times 3.5\,\hbox {cm}\), \(4.0 \times 4.0\,\hbox {cm}\). The radius of the circular start menu is 1.5 cm. The text content of each target shortcut menu in each task is random on 7 menu contents, and the ratio of text size and button size on each shortcut menu remains consistent. The background color of the whole operation area is gray (200.200.200), and the background size is \(50\,\hbox {cm} \times 28\,\hbox {cm}\).

Each time the operator sees the position of seven sizes and the position of the shortcut menu of different sizes are random and not fixed. The task of the operator is to touch and click the required target shortcut menu as soon as possible according to the test process and requirements under the premise of ensuring the correctness.

2.5 Experimental process

After the operator enters the test room, under the guidance of the tester, 20 practice tests are carried out according to the test requirements. The practice tests are the same as the formal test process, which mainly helps the operator to get familiar with the test process and enter the formal test after the completion of the practice.

In the test, the instruction is first presented in the middle of the screen. After the operator presses the enter key, the formal test begins. In each task, the operator first sees a 2 cm diameter dot, the center, in the middle of the screen. The seven dimensions of the shortcut menu appear randomly in seven directions around the center point. When the operator clicks the center point, the shortcut menu name required to be clicked by the operator will be displayed at the top of the page. The operator needs to click the required shortcut menu as quickly and accurately as possible to complete the test task. The screen then renders the center point again, and the operator starts the next try. In this loop, the operator completes all test tasks. The basic process is shown in Fig. 1.
Fig. 1

Basic flow chart

The entire test will be presented at random 210 times. In the test, the shortcut menu instructions for each size appeared 30 times, for a total of 210 times for seven sizes. Each operator completed only one task when the display was tilted at an angle of \(18^{\circ }\) or \(6.6^{\circ }\). The inclination angle of the display screen is shown in Fig. 2.
Fig. 2

Schematic diagram of display screen inclination angle

The entire test lasted about 20 min.

The test program is written in C language.

3 Experimental results

3.1 Click accuracy rate under different shortcut menu sizes

Under the conditions of seven shortcut menu sizes, the correct rate of operators’ clicking is shown in Fig. 3. The overall accuracy of task click on shortcut menu was 0.99 and the standard deviation was 0.01. Under the seven conditions, the accuracy rate of operators is above 98%, and the statistical test shows no significant difference in the accuracy rate \((p> 0.05)\).
Fig. 3

Click accuracy rate under seven shortcut menu sizes

3.2 Click response under different shortcut menu sizes

The response of operators under seven shortcut menu sizes under two Angle conditions is shown in Table 1. The mean response time and standard deviation were 2332.76 ms and 831.75 ms respectively. The response time in the table is the time when the target shortcut menu name appears until the operator clicks the specified target shortcut menu. The data in the table are represented by mean (standard deviation), the values outside brackets are mean, and the values inside brackets are standard deviation.
Table 1

Reaction time of touch and click under different conditions

Shortcut menu size (cm)

Mean response time (standard deviation)

\(18^{\circ }\)

\(6.6^{\circ }\)

On average

1.5

2829.25 (891.68)

2684.87 (706.67)

2753.98 (803.01)

2.0

2443.98 (798.03)

2472.33 (796.36)

2458.24 (796.52)

2.5

2226.04 (722.95)

2234.64 (704.84)

2230.21 (713.43)

2.75

2175.88 (696.85)

2285.17 (729.68)

2231.44 (715.07)

3.0

2204.41 (802.65)

2216.56 (813.19)

2210.59 (807.16)

3.5

2330.74 (878.43)

2073.22 (907.93)

2206.08 (901.14)

4.0

2192.4 (975.22)

2227.41 (816.77)

2209.62 (900.03)

As can be seen from the above table, no matter the screen tilt Angle is \(18^{\circ }\) or \(6.6^{\circ }\), when the shortcut menu size is \(1.5 \times 1.5\,\hbox {cm}\), the operator’s response is the largest.

Under the condition of two tilt angles, the trend of the operator’s reaction with the shortcut menu size is shown in Fig. 4.
Fig. 4

Response time of shortcut menus of different sizes under two tilting angles

It can be seen from Fig. 4 that the trend of change with the size of shortcut menu under the two tilt angles is basically the same. Mann-whitney U test test of independent samples was performed to respond to different tilt angles under seven shortcut menu sizes respectively [7, 8]. The results showed that there was no significant difference in the response of the two inclination angles under various shortcut menu sizes (\(\hbox {size}\,1: p= 0.505 > 0.05\), \(\hbox {size}\,2: p= 0.959 > 0.05\), \(\hbox {size}\,3: p= 0.798 > 0.05\), \(\hbox {size}\,4: p= 0.328 > 0.05\), \(\hbox {size}\,5: p= 0.878 > 0.05\), size 6: p= 0.105> 0.05\(, \hbox {size}\,7: p= 0.328 > 0.05\)).

After averaging the reaction time of two tilting angles under different shortcut menu sizes, the trend of operator’s reaction time changing with shortcut menu sizes is shown in Fig. 5.
Fig. 5

Click response time under different shortcut menu sizes

According to Fig. 5, when the shortcut menu size is less than \(2.5 \times 2.5\,\hbox {cm}\), the operator’s response time decreases significantly with the increase of shortcut menu size. When the shortcut menu size is more than \(2.5 \times 2.5\,\hbox {cm}\), the change of shortcut menu size has no significant impact on the operator’s response time. The trend was consistent with those seen at \(18^{\circ }\) and \(6.6^{\circ }\) .

Paired sample bidirectional Friedman test [9, 10], and the results showed that the shortcut menu size had a significant effect on the response \((p= 0.001 < 0.01)\). Further analysis showed that there were significant differences between the average reaction time of 1.5 cm and other sizes \((p= 0.000 < 0.001)\), and between the reaction time of 2.5 cm, 2.75 cm, 3 cm, 3.5 cm and 4 cm in the reaction time of 2.0cm. The differences were \(p= 0.006 < 0.01\), \(p= 0.001 < 0.01\), \(p= 0.005 < 0.01\), \(p= 0.005 < 0.01\), \(p= 0.010 < 0.01\), 2.5 cm and 2.75 cm, respectively.

Therefore, the results show that as the size of the shortcut menu increases, the change of the operator’s click response starts to decrease significantly and then tends to stabilize. And the key size point tends to be between \(2.0 \times 2.0\,\hbox {cm}\) and \(2.5 \times 2.5\,\hbox {cm}\).

3.3 Supplementary test

3.4 Experimental purpose

According to the above analysis of test results, in order to determine the optimal size more accurately, further test subdivision is needed to compare the task performance of operators when the shortcut menu size is between 2 and 2.5cm.

3.5 Experimental variables and experimental design

The test design for supplementary tests is a \(2 \times 3\) hybrid design.There are two test variables. The variables in the group are the size of the shortcut menu, with a total of 3 levels (\(2.0 \times 2.0\,\hbox {cm}\), \(2.25 \times 2.25\,\hbox {cm}\), \(2.5 \times 2.5\,\hbox {cm}\)). The intergroup variables were the angles (\(18^{\circ }\) and \(6.6^{\circ }\)) between the horizontal plane and the display screen. The test indexes are correct rate of click and correct time of click. Control variables include lighting, display resolution, distance between the shortcut menu and the origin of the cursor, and the color and shape of the shortcut menu.

3.6 Experimental operators

The mean age of 16 male participants was \(20.75 ({\pm } 2.65)\) years. No color blindness or color weakness, visual acuity above 5.0 or corrected visual acuity, all were right-handed.Had not participated in the previous phase of the test.

3.7 Experimental tasks and test procedures

The results are the same as in the previous stage.

3.8 Experimental results

The test results are shown in Figs. 6 and 7.
Fig. 6

Accuracy rates of three shortcut menu sizes and tilt angles

Fig. 7

Response times of three shortcut menu sizes and tilting angles

Figure 6 is the click accuracy rate under the three shortcut menu sizes and tilt angles. It can be seen from Fig. 6 that there is no significant difference in the accuracy rate under different angles and menu sizes. The independent sample Whitney U test for the accuracy rate under different tilt angles shows that there is no significant difference in the accuracy rate of the two tilt angles under different shortcut menu sizes \((p > 0.05)\). Furthermore, paired sample bidirectional Friedman test analysis showed that there was no significant difference in accuracy between the three sizes \((p > 0.05)\).

Figure 7 shows the click response results under three shortcut menu sizes and tilting angles. According to Fig. 7, the reaction time at \(18^{\circ }\) is slightly longer than that at \(6.6^{\circ }\). The response time under the shortcut menu size of 2 cm was larger than that under the condition of 2.25 cm, and the response time under the condition of 2.5 cm was the smallest. An independent sample Whitney U test was conducted for the reaction of different tilt angles, and the results showed that there was no significant difference in the reaction time of the two tilt angles under different shortcut menu sizes \((p > 0.05)\). Further paired sample bidirectional Friedman test and analysis results showed significant difference in reaction time under three sizes \((p < 0.01)\), significant difference in reaction time under 2 cm condition than that under 2.25 cm \((p < 0.05)\) and 2.5 cm \((p < 0.001)\), and insignificant difference in reaction time under 2.25 cm and 2.5 cm \((p > 0.05)\).

4 Conclusion

  1. 1.

    While maintaining a high rate of click accuracy, the tilt angles of the two display screens (6.6 and \(18^{\circ }\)) have no significant impact on the response time of operators and the change trend of menu sizes.

     
  2. 2.

    When the shortcut menu size is less than \(2.5 \times 2.5\,\hbox {cm}\), the operator’s response time increases significantly with the decrease of shortcut menu size. When the shortcut menu size is \(2.5 \times 2.5\,\hbox {cm}\), the increase of shortcut menu size has no significant impact on the operator’s response time.

     
  3. 3.

    Further supplementary test results showed that when the shortcut menu size was \(2.0 \times 2.0\,\hbox {cm}\), the response time was significantly longer than when the shortcut menu size was \(2.25 \times 2.25\,\hbox {cm}\) and \(2.5 \times 2.5\,\hbox {cm}\), while when the shortcut menu size was \(2.25 \times 2.25\,\hbox {cm}\) and \(2.5 \times 2.5\,\hbox {cm}\), the difference was not significant. Therefore, between \(2.0 \times 2.0\,\hbox {cm}\) and \(2.5 \times 2.5\,\hbox {cm}\), \(2.25 \times 2.25\,\hbox {cm}\) is a key size value.

     

Notes

Acknowledgements

This study was supported by the project (No.41412040304), (No.JCKY 2016206A001) and (No.6141B03020602).

References

  1. 1.
    Walker G (2012) A review of technologies for sensing contact location on the surface of a display. J Soc Inf Dis 20(8):413–440CrossRefGoogle Scholar
  2. 2.
    Allvin RE (2014) Technology in the Early Childhood Classroom. YC Young Children. 69(4):62Google Scholar
  3. 3.
    MacKenzie SI, Zhang SX (2001) An empirical study of the novice experience with soft keyboards. Technology 20(6):411–418Google Scholar
  4. 4.
    Tapworthy CJ (2010) Designing Great Iphone Apps [M]. Canada: O Reilly Media, Inc pp. 62–75Google Scholar
  5. 5.
    Colle HA, Hiszem K (2004) Standing at A kiosk: effects of key size and spacing on touch screen numeric keypad performance and user preference. Ergonomics 47(13):1406–1423CrossRefGoogle Scholar
  6. 6.
    Parhi P, Karlson AK, & Bederson BB (2006) Target size study for one-handed thumb use on small touchscreen devices. In: Proceedings of the 8th conference on Human-computer interaction with mobile devices and services pp. 203–210Google Scholar
  7. 7.
    Parhi P, Karlson AK, BedersonGoogle Scholar
  8. 8.
    Fay MP, Proschan MA (2010) Wilcoxon-Mann-Whitney or t-test? On assumptions for content tests and multiple interpretations of decision rules. Stat Surv 4:1MathSciNetCrossRefGoogle Scholar
  9. 9.
    Mann HB, Whitney DR (1947) On a test of been one of two random variables is stochastically larger than the other. 50–60Google Scholar
  10. 10.
    Milton F (1939) A correction: the use of ranks to avoid the assumption of normality implicit in the analysis of variance. J Amer Stat Ass 34(205):109Google Scholar

Copyright information

© The Author(s) 2019

Open AccessThis article is distributed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license, and indicate if changes were made.

Authors and Affiliations

  • Ning Li
    • 1
    • 2
  • Yingwei Zhou
    • 1
  • Kaili Yin
    • 1
  • Deqiang Fu
    • 1
  • Chen Guo
    • 1
  • Li Wang
    • 1
  • Guangquan Cheng
    • 2
    Email author
  1. 1.Marine Human Factors Engineering LaboratoryChina Institute of Marine Technology and EconomyBeijingChina
  2. 2.College of Systems EngineeringNational University of Defense TechnologyChangshaChina

Personalised recommendations