The Influence of the Interface Button Design of Touch Screens on Operation and Interpretation by Elderly and Middle-Aged Adults

Abstract

Body function begins to decline in middle age, with changes becoming increasingly noticeable over time. With the popularization of educational and information technology, people know more about healthcare and are becoming accustomed to self-testing using health equipment. Technological changes are reflected in products, which present innovations including the switch from traditional to touch-controlled interface designs. This can cause difficulties in the interpretation and interface operation for older adults, who may be facing physiological and psychological alterations. Understanding users’ physiological limitations has become an important aspect of product design. This study explored the effects of physiological limitations on touch-screen operation in middle-aged and elderly people, specifically regarding button type, display position, and button size. A total of 64 participants were included in the study: 32 middle-aged people (aged 45–64 years) and 32 elderly people (65 years of age and older). Each participant was asked to complete 32 tasks (two button categories × four button sizes × four presentation positions). The results revealed no differences between the elderly and the middle-aged groups with regard to the interpretation of image buttons and text buttons; however, button size affected the operation and interpretation time. Middle-aged participants demonstrated good interpretation performance when the buttons were displayed in the upper or lower part of the screen, whereas elderly participants only had a good interpretation performance when the buttons were in the upper part. For both groups, the ideal image button size was 16 mm with a text font size of 22.

1. Introduction

1.1. Social Status

Between 2011 and 2015, Taiwan’s population increased by 243,000. During this time, the younger population (0–14 years of age) decreased by 291,000, while the working-age population (15–64 years of age) increased by 167,000, and the elderly population (65 years of age and older) increased by 367,000. The elderly population increased each year, while the younger population decreased due to a decline in fertility, leading to the phenomenon of population aging. This will become a major social problem for Taiwan in the future.

According to the National Development Council [1], 72.5% of the working population are aged 15–64 years, and 14.6% are 65 years of age and older (2017 data). By 2065, this is expected to change to 49.7% and 41.26%, respectively, indicating that most people will likely delay their retirement age, and many elderly people will be living alone.

1.2. Status of the Elderly

The definition of middle-aged and elderly varies by country. Typically, middle age is defined as 45 to 65 years of age [2]. Taiwan’s amended Elderly Welfare Act issued in 1997 defined “elderly” as 65 years of age. The current trend, therefore, is to regard those who are 65 and older as elderly [3].

Aging inevitably leads to a decline in physiological functions [4], which may include impairments in vision, hearing, limbs, and mental functioning [5]. The Taiwan Ministry of Health and Welfare [6] reported that 60.9% of patients with chronic diseases are middle-aged adults between 55 and 64 years old. The most prevalent chronic diseases are high blood pressure, hyperlipidemia, osteoporosis, and diabetes. Aging contributes to the deterioration of the cardiovascular system, which is the main cause of the increase in diseases associated with chronic high blood pressure [7,8]. This phenomenon is apparent in both developing and developed countries [9].

Self-monitoring is becoming an increasingly important component of individual health care. The home-based medical electronic market accounted for 20% of the total market of medical electronics in 2010 [10]. As electronic products need to be operated through interfaces, interface design is extremely important.

1.3. Interface Design

Interfaces are composed of various elements, including text, images, colors, and videos. The aesthetic quality of the composition of elements enhances the usability of the product and improves the interaction between the product and the users. Traditional interfaces were primarily presented in plain-text mode, whereas the current trend in interface design is to emphasize graphics display, i.e., a graphic user interface (GUI). Ware [11] suggested that image icons are not only more beautiful but also easier to recognize and remember. On the other hand, Islam and Bouwman [12] found that images could also make it difficult for users to understand their meaning. A user-friendly interface design should be user-centered to ensure quick and accurate interpretation [13,14,15].

Legibility and readability are the keys to interface design, presenting a simple display [16,17] and easy operation options [18,19]. Factors affecting interpretation are message position, message volume, and character size [20,21]. The message is more noticeable when it appears on the right or at the top center and least noticeable when it appears at the bottom right. Bernard, Chaparro, Mills, and Halcomb [22] compared characters in font sizes 10 and 12 and demonstrated that font size 12 was preferred by users. Ramadan [23] found that a white background with black font, size 14, was the most legible.

The popularization of the Internet has driven the development of mobile devices and especially the increasing use of touch-based mobile phones and tablets [24], making communication through interfaces an integral part of daily life [18,25]. Other than the number, size [26], and position of buttons, the touch area is the most important factor affecting the operation of touch screens [27]. In past studies, users have expressed concern regarding the touch area of the screen, as the size of the touch area affects performance and operation [28,29].

Changes in products interface affect not only younger age groups. In fact, with the gradual changes in related products, the user group age range has gradually expanded to include middle-aged and elderly individuals [30,31,32,33]. Elderly people accept the use of technology products to interact with others. However, aging affects their ability to use technology products; they often require more time [29] and experience difficulties when searching for information [34,35]. Elderly users’ interpretation rate is affected by the information presentation time and font size [36,37,38]. Johnson and Finn [39] found that the sans-serif font is easier to read for older users; Charness and Bosman [40] found that, among older users, black and white text and background improved the accuracy of interpretation compared with colorful text and background; no differences were noted for younger age groups.

Touch-screen products are influencing the design of medical and other related products. Touch-screen products have been developed for patients [41,42] and caregivers to help users [43] and practitioners better perform caretaking tasks [44]. With increased knowledge and familiarity, people have become accustomed to using health instruments for self-detection of health changes. However, elderly users may experience difficulties in the operation of these instruments. Therefore, this study uses the interface of health instruments as a research basis and explores the visual and physiological limitations encountered by middle-aged and elderly adults in operating touch interfaces, with the following objectives:

• Elucidating the effect of different categories of interface on the interpretation time.
• Understanding the operational differences between image and text buttons.
• Understanding the operational differences based on button sizes and display positions.

2. Methods

2.1. Testing and Stimuli

The study design was based on the current interface operation mode of medical products. After the participants operated three image buttons (start, measure, end), they were asked to read the numbers presented on the screen. The participants had to evaluate three independent variables: button category, button size, and display position. These varied as follows:

• Button category: two types, the text button and image button; the text button used the sans-serif font; the text and image button are shown in Figure 1.
• Button size: four sizes of text buttons, four sizes of image buttons (text button: 22 pt, 18 pt, 14 pt, 10 pt; image button: 16 mm, 12 mm, 9 mm, 5 mm);
• Presentation position: four positions (top, bottom, left, right).

The order of operation was as follows: start, measure, press end after interpretation, and read the numbers presented on the screen. In order to prevent the subject from interpreting the next button while waiting for the screen to appear, the button was rearranged after the subject operated it. The sequences of appearance of the three buttons and the numbers to interpret were random. The color matching of buttons was based on Ramadan [23], with a combination of white background and black font.

Table 1. CIE coordinate values (L, a, b) and RGB codes.

Color	Code
	CIE (L, a, b,)			RGB code value
	L	a	b	R	G	B
Background
White	99	0	0	254	254	254
Text
Black	0	0	0	0	0	0

presents the Commission internationale de l’éclairage (CIE) coordinate values (L, a, b) and RGB color model (RGB ) codes.

2.2. Subjects

According to Gay, Mills, and Airasian [45], a minimum of 30 subjects are required for comparative and relationship studies. A total of 64 participants were recruited for the study: 32 subjects aged between 45 and 64 years (mean: 54.12; SD = 7.54) and 32 subjects aged 65 years and above (mean: 70.59; SD = 3.62). The inclusion criteria were the following: familiar with using touch technology (mobile phones, tablets, etc.) with over six months of experience; literate; corrected visual acuity over 0.8 and no major visual dysfunction (color blindness, amblyopia, blindness); right-handed.

2.3. Instruments

The experimental stimulus was presented on a 9.7 inch tablet computer (Asus T101HA), mounted on a 70 cm-high table. The center of the screen was located 23 cm away from the desktop, and the screen inclination was set at 30°. The subjects completed the test on the screen using one hand, and the responses were recorded by researchers sitting beside them. During the test, the visual distance was fixed at 40 cm by using a support frame. To reduce the test error, there was no glare on the screen.

2.4. Experimental Environment

The study was conducted in the classrooms of a university for elderly people. To avoid interference from surrounding factors, an environment with adequate sunshine, slight noise, and a controlled indoor temperature of 26 °C was chosen as the experiment site. Only one participant and one researcher were present at any time during the test (Figure 2).

2.5. Procedure

Prior to the formal test, researchers introduced subjects to the experimental tools, test samples, and operation instructions. The participants were given time to practice the operation to ensure that they understood the entire procedure and content of the experiment.

During the formal test, the participants were asked to focus on an “X” in the center of the screen. When the participants were ready, they touched the blank area of the screen. The stimulus would then appear in the center of the screen. The stimulus screen was composed of three buttons labeled “start,” “test,” and “end.” The participants needed to touch the “start” button with one hand, at which point, the interpretation position showed the image “000”; at the same time, the three buttons were rearranged. The participants would then re-interpret and press the “test” button. After 3–5 s, a set of numbers appeared on the screen. The three buttons were rearranged again. After interpreting these numbers, the participants touched the “end” button and read out the numbers presented on the screen to complete the test. A computer program was used to control the test sequence; the test sequence needed to follow the order “start”, “test”, and “end”, and, if an error occurred, the operation would not proceed. The operation time was recorded by the computer program. The operation time was calculated from the time the participants touched the “start” button to the time they touched the “end” button. Each participant completed 32 tasks (two button categories × four button sizes × four presentation positions). A total of 32 interface types and a group of numbers were presented randomly. The total test time was approximately 30 min.

3. Results

A total of 64 participants were included in the study: 32 participants each, in the middle-aged and elderly groups. A statistically significant difference in the operation time was observed between the groups (F = 328.69, p = 0.00, <0.001). The operation time for the middle-aged subjects (M = 4.02, SD = 2.07) was shorter than that of the elderly subjects (M = 5.99, SD = 2.81).

There was no significant difference based on the interface type between middle-aged subjects (F = 1.701, p = 0.192 > 0.05) and elderly subjects (F = 0.000, p = 0.985 > 0.05). Both the display position and the button size had significant effects, and they also had interactive effects (

Table 2. ANOVA table for button categories, presentation positions, button sizes.

Source	SS	df	MS	F	p	Effect Size
Middle-aged
button categories	7.263	1	7.263	1.701	0.192	0.002
presentation positions	7.209	3	2.403	5.126	0.002*	0.015
button sizes	3831.080	6	638.513	1361.953	0.000*	0.892
presentation positions × button sizes	45.644	18	2.536	5.409	0.000*	0.089
Elderly
button categories	0.003	1	0.003	0.000	0.985	0.000
presentation positions	35.322	3	11.774	17.013	0.000*	0.049
button sizes	7270.762	6	1211.794	1751.011	0.000*	0.914
presentation positions × button sizes	67.793	18	3.766	5.442	0.000*	0.090

SS: Sum of Squares; df: Degrees of Freedom; MS: Mean Squares; F: F Ratio; p: p Value; *< 0.001.

).

Left-stochastic decomposition (LSD) clustering revealed that the middle-aged participants performed better at interpretation when the display position was in the upper (M = 3.904, SD = 2.052) or lower position (M = 3.969, SD = 2.124) than when it was on the right (M = 4.083, SD = 2.056) and left sides (M = 4.111, SD = 2.04). Performance was better when the text button used character size 22 (M = 2.209, SD = 0.500) and when the image button display was size 16 mm (M = 2.357, SD = 0.439). Performance was inferior when the image button size was 5 mm (M = 7.339, SD = 0.738).

The elderly participants performed better at interpretation when the display position was in the upper position (M = 5.689, SD = 2.700) compared to the lower (M = 6.105, SD = 2.882) and left positions (M = 6.175, SD = 2.797). Performance was better when the text button was presented with character size 22 (M = 2.192, SD = 0.457) and the image button size was 16 mm (M = 2.359, SD = 0.626). Performance was worse when the image button size was 5 mm (M = 9.566, SD = 1.141) and when the text button character size was 10 (M = 9.659, SD = 0.946) (

Table 3. Left-stochastic decomposition (LSD) table of presentation positions and button size for the two groups.

Source	M	SD	LSD Group
Middle-Aged
Presentation positions
top	3.904	2.052	A	B
bottom	3.969	2.124	A	B		C
right	4.083	2.056		B		C		D
left	4.111	2.04				C		D
Button size
22 pt	2.209	0.500	A
16 mm	2.357	0.439	A
18 pt	2.582	0.708		B
12 mm	2.884	0.635			E
9 mm	3.822	0.771				C
14 pt	3.837	0.888				C
10 pt	7.101	0.960					D
5 mm	7.339	0.738							F
Elderly
Presentation positions
top	5.689	2.700	A
right	5.999	2.841		B		C
bottom	6.105	2.882		B		C		D
left	6.175	2.797				C		D
Button size
22 pt	2.192	0.457	A
16 mm	2.359	0.626	A
18 pt	5.002	0.697		B
12 mm	5.434	0.759			C
9 mm	6.603	1.212				D
14 pt	7.121	0.963					E
5 mm	9.566	1.141							F
10 pt	9.659	0.946							F

).

Further analysis of the interaction between the position and the size of the buttons indicated that both the position and the size were significant (

Table 4. Interaction between presentation positions and button size.

Source	SS	df	MS	F	p	Effect Size
Middle-aged
top	903.965	7	129.138	188.159	0.000*	0.842
bottom	1030.021	7	147.146	301.994	0.000*	0.895
left	974.268	7	139.181	397.166	0.000*	0.918
right	990.481	7	141.497	402.804	0.000*	0.919
Elderly
top	1658.262	7	236.895	292.573	0.000*	0.892
bottom	1958.240	7	279.749	433.153	0.000*	0.924
left	1809.926	7	258.561	347.033	0.000*	0.907
right	1917.005	7	273.858	482.470	0.000*	0.932

).

Table 5. LSD table of presentation positions and button size for the middle-aged participants.

Source		M (SD)	LSD Group
Middle-aged
top	22 pt	2.131 (0.580)	A	B
	18 pt	2.193 (0.616)	A	B
	16 mm	2.408 (0.512)	A	B	C
	12 mm	2.813 (0.458)		B	C
	9 mm	3.791 (0.971)				D
	14 pt	4.064 (1.005)				D
	10 pt	6.388 (1.304)					E
	5 mm	7.446 (0.808)						F
bottom	22 pt	2.168 (0.425)	A	B
	16 mm	2.373 (0.410)	A	B
	18 pt	2.483 (0.692)	A	B	C
	12 mm	2.756 (0.480)		B	C
	9 mm	3.568 (0.713)				D
	14 pt	3.756 (1.222)				D
	10 pt	7.228 (0.515)					E
	5 mm	7.417 (0.757)					E
left	22 pt	2.223 (0.328)	A	B
	16 mm	2.441 (0.360)	A	B
	12 mm	2.632 (0.444)		B
	18 pt	3.232 (0.648)			C
	9 mm	3.684 (0.562)				D
	14 pt	3.981 (0.487)					E
	5 mm	7.282 (0.792)						F
	10 pt	7.409 (0.876)						F
right	16 mm	2.205 (0.443)	A
	22 pt	2.315 (0.609)	A
	18 pt	2.421 (0.382)	A
	12 mm	3.339 (0.844)		B
	14 pt	3.547 (0.568)		B
	9 mm	4.243 (0.634)			C
	5 mm	7.214 (0.581)				D
	10 pt	7.379 (0.568)				D

presents the LSD clustering of button positions and sizes for the middle-aged participants. When the button appeared on the top, bottom, and right side, performance was the same for the 16 mm image button and the text button character sizes of 18 or 22.

Table 6. LSD table of presentation positions and button size for the elderly participants.

Source		M (SD)	LSD Group
Elderly
top	22 pt	2.013 (0.377)	A
	16 mm	2.391 (0.434)	A
	12 mm	5.049 (0.833)		B
	18 pt	5.183 (0.613)		B
	9 mm	5.760 (1.057)			C
	14 pt	6.518 (1.352)				D
	10 pt	9.238 (0.867)					E
	5 mm	9.362 (1.175)					E
bottom	16 mm	2.220 (0.662)	A
	22 pt	2.284 (0.515)	A
	18 pt	4.642 (0.677)		B
	12 mm	5.523 (0.720)			C
	9 mm	7.308 (1.153)				D
	14 pt	7.486 (0.536)				D
	5 mm	9.576 (0.968)					E
	10 pt	9.796 (0.965)					E
left	22 pt	2.344 (0.401)	A
	16 mm	2.641 (0.704)	A
	18 pt	5.110 (0.811)		B
	12 mm	5.840 (0.703)			C
	9 mm	6.495 (1.259)				D
	14 pt	7.380 (0.707)					E
	5 mm	9.371 (1.212)						F
	10 pt	10.222 (0.774)							G
right	22 pt	2.127 (0.464)	A
	16 mm	2.183 (0.592)	A
	18 pt	5.072 (0.558)		B
	12 mm	5.323 (0.560)		B
	9 mm	6.848 (0.818)			C
	14 pt	7.101 (0.774)			C
	10 pt	9.383 (0.879)				D
	5 mm	9.954 (1.145)					E

presents the LSD clustering of the position and size of buttons for the elderly participants. Performance was best with the 16 mm image button and the character size 22 for the text button at any position.

4. Discussion

This study explored the interpretation ability of users operating touch-based interface buttons. In contrast to Ware [11], no difference between the elderly and the middle-aged participants in the interpretation of image and text buttons was found. This result may be due to the fact that elderly and middle-aged participants can, nowadays, readily accept technology products [30,31,32,33] and, being used to them, they are able to promptly adapt to interface changes, so that their interpretation of two different interfaces is not affected.

Button size affects operation and interpretation time. These results are consistent with previous findings [29,34,35]. The interface design recommendations reported below are based on the results of this study.

The display position of buttons designed for middle-aged users can be at the top or at the bottom; for elderly users, locating the button at the top of the screen can improve the interpretation performance.

• Whether it is the text button or image button, elderly users need the largest size button (22 pt and 16 mm), whereas middle-aged users can accept the 18 pt text button.
• Buttons designed for middle-aged users should not be displayed on the right or left side; those for elderly users should avoid the bottom and the left sides of the screen.

It is worth noting that the interface button designs of many medical products (e.g., sphygmomanometer) currently on the market position buttons at the bottom and on the right side, contrary to the suggestions of this study. Further analysis may be required to determine whether this touch interface configuration or other factors affect outcomes.

The physiological changes caused by aging cannot be rectified by surgery and technological accessories. People are becoming increasingly familiar with technology products; however, it is often more difficult for elderly and middle-aged people to use these products. Touch-based interfaces have changed the market of interface products in recent years. Understanding the capability and physiological limitations faced by users is a topic that requires further investigation. The results of this study can be applied to the touch interface design of products such as sphygmomanometers and measuring instruments. The conclusions of this study provide important references for future research and design work by interface researchers and designers and for care workers for the elderly, to ensure that suitable products for older users are designed, benefitting both users and the medical electronics industry.