Keywords

1 Introduction

The touch screen, as a medium capable of supporting the simpler and more convenient human-computer interaction mode, has been playing its unique advantage in more and more fields in recent years. With the continuous development of the touch screen manufacturing technology and gradual fall in the price, the application of the touch screen has expanded from the handheld devices to the desktop computers and other large-size displays. Currently, most researches on the design specifications of the touch screen interface are based on handheld terminals (like mobile phones) and other small-size screens, while there is hardly any research related about design specifications of displays of the desktop-computer touch screens. Since the operating environment, the sight distance and the operating mode of the desktop-computer touch screen are different from the handheld small-size terminals, the design specifications of its interface elements cannot simply follow the research results-of the handheld terminals. Therefore, this paper studies the influence of the basic Chinese text attribute (the word size and the word spacing) of the interaction interface on the user cognitive performance and the optimal configuration based on the large-size desktop-computer touch screen through experiments, so as to provide reference for the in-depth study on the design specifications of the display interface of the desktop-computer touch screen in a wider scope in the future.

2 Overseas and Domestic Research Status

Text is one of the most basic elements of user interface design, and nearly all interface products use characters, from error, warning and prompt messages to project introduction, navigation and titles. Design of characters in the interface involves the font, word size, word spacing and line spacing, all of which impact the readability and intelligibility of the text and the availability of information search.

In spite of few researches on the text elements of the interface of the large-scale touch screens, there are some representative research results based on different media, such as paper products, non-touch screen products and handheld small-size touch screens. For example, Legge et al. [1] verified that the English font size influenced the reading cognitive efficiency through experiments; Susana TL Chung thought that the reading speed tended to be stabilized after the font size increased to a certain degree; Fletcher et al. [2] studied the reading cognition from aspects of interface color matching, the view angle, the character structure, the font and the word size, and concluded with the interactive interference between these elements and the cognition efficiency. Moreover, Humar et al. [3] provided a certain design reference for web character design, by conducting a special research of the influence of common color matching and polarity color matching on readability of web texts. The result of their research shows that the strongly contrastive text and background color can quicken the search efficiency and bring positive evaluation for readers.

As to Chinese text elements, Wang and Shao [4] made researches by exploring the physical characteristics, such as the character size, structure, complexity and contrast, and the interactions of these elements, and founded that these elements impact the visual recognition. Liu [5] verified the influence of the font size, the font type and the text spacing on the reading efficiency of patients with maculopathy through experiments. Wang [6] demonstrated by experiments that in mobile phones font size, word spacing, row spacing affect the reading behavior of the elderly and concluded that when size of Chinese characters on mobile phones is 15px*15px (8pt), the line spacing and the word spacing of 6–8px and 2–4px can respectively better improve the readability for the elderly. Zou [7], et al. studied color matching between the brightness of PPT background color and word color, finding that the subjective resolution is higher when the brightness difference between the PPT foreground color and the background color is bigger, and the higher indoor illuminance is helpful for improving the subjective resolution of the PPT. Guo et al. [8, 9] discovered that the font, the word size, the line spacing and the Chinese character features of the display and control interfaces of EMU influence drivers’ recognition efficiency.

In sum, the overseas and the domestic researches on the influence of the text attribute on the interface reading recognition involve many elements, such as the font, the word size, the word spacing, the line spacing, color matching of the interface, the text structure, the textual carrier, the lighting condition and the circumstance of use, etc. Among all these, the word size is regarded as the most basic attribute in a lot of researches. The referred media are mainly common paper media, electronic products for daily office work and handheld electronic products (like mobile phones). There are few overseas and domestic researches about the influence of the text attribute of the Chinese interface in the desktop-computer touch screen on the cognitive efficiency. Although the research results based on Chinese characters and English letters provide reference for each other and cannot be followed directly due to their difference, the research method and results of the early studies can still provide reference for the study of this paper.

3 Study of Design Elements of Chinese Text Based on Desktop-Computer Touch Screen

This paper explores the optimal setting of Chinese text parameters in Chinese interface based on the desktop-computer touch screen. With two basic text attributes—word size and word spacing as the independent variables, and the black character on a white background as the display environment, this paper provides reference for the study on design specifications of text elements of the Chinese interactive interface.

3.1 Calculation of Sight Distance

When the desktop computer monitor with a large screen size is used, the distance S between the operator and the farthest side of the touch screen can be calculated with the following formula, as shown in Table 1:

Table 1. Definition list of letters used in the calculation formula of the distance between the operator and the touch screen
Full size table
$$ {\text{S}}^{2} = \left( {{\text{L}}_{3} } \right)^{2} - \left( {{\text{H}}_{2} } \right)^{2} - [({\text{L}}_{1} + {\text{L}}_{2} )/2]^{2} $$
(1)
$$ {\text{H}}_{2} = {\text{H}}_{1} { \cos }\uptheta + {\text{H}}_{3} - {\text{H}}_{4} $$
(2)

According to the current national standard Human Dimensions of Chinese Adults GB 1000-1998 [10], related data of human dimensions can be obtained, as shown in Table 2.

Table 2. Relevant human dimensions parameters
Full size table

Given the non-specific property of the groups, the design principle of average dimensions of the human dimension data application approach is used, i.e. the 50th percentile human dimension data are used for reference when calculating the relationship between the operator and the touch screen. The result is that the distance between the middle position of the operator shoulder and the farthest side of the display of the touch screen is 48 cm, and the sight distance between the eyes and the screen is about 40 cm (Fig. 1).

Fig. 1.
figure 1

Simple graph of operator and touch screen of display console (left), and Chart of operation at typical sitting position (right)

Full size image

3.2 Selection of Font

The several common types of font applied to interface design of the digital products include serif, sans-serif and monospace. The most commonly used Chinese fonts in serif include Song typeface and various derivatives, and the common Chinese fonts used in sans-serif include boldface and various derivatives [11]. Although font selection is affected by the characters of character and the context, the majority of current research results of interface design hold that serif and sans-serif have their own features for continuous reading. Sans-serif shows its advantages in terms of the small-size continuous text, and it is extensively applied to signage, information graphs and screen interfaces. Due to its unique modeling and high identifiability, Serif is mainly applied to titles. This paper chooses the reading context as the study object so that the boldface in Arial is adopted here.

3.3 Calculation of Word Size

The minimum height of characters is calculated with the formula (Table 3):

Table 3. Definition list of letters in the character height calculation formula
Full size table
$$ {\text{H}} = 0.0022{\text{D}} + 25.4 * ({\text{K}}1 + {\text{K}}2)\;[13]; $$
(3)

The calculation results is:

$$ {\text{H}} = 0.0022 * 400 + 25.4 * \left( {0.06 + 0} \right) = 2.4\,{\text{mm}}\, < \,2.6\,{\text{mm;}} $$

Considering that:

  1. 1.

    The word size cannot be smaller than 2.6 mm [13] if D < 500 mm;

  2. 2.

    According to the word size conversion method in the display, the corresponding word size of characters with H = 2.6 mm is 11.15px, and the value of the word size is an even number generally;

Thus, the value of the tested word size takes 12px, 14px, 16px and 18px, and the word spacing chooses 1px, 2px, 3px and 4px. After permutation and combination, the match of the word size and the word spacing is shown as follows (Table 4):

Table 4. 16 types of match of the word size and the word spacing in experiment
Full size table

In sum, this paper tests the optimal configuration of the word size and the word spacing of Chinese Arial text with black characters and a white background in the display interface of the touch screen through experiments.

The pixel values and physical dimension values of the word size and the word spacing are shown in Appendix.

4 Design of Experimental Scheme

4.1 Design of Experimental Procedures

  • Determine the basic influence factors of single-line text reading and operation performance: the word size and the word spacing

  • Calculate the man-computer relationship when the touch screen is used;

  • Choose the word size and the word spacing according to the interval of the threshold value of the word size during human-computer interaction on the touch screen obtained through the word size calculation formula, and conduct permutation and combination for the word size and the word spacing;

  • Design reading questions of the reading text materials, edit the format of the single-line text materials according to configuration of the word size and the word spacing, number these materials, and realize the functions of timing and record options through programming;

  • Determine the basic use environment of the experiment and set up a test platform;

  • Test the objects with the guide materials and understand the test process;

  • Test: Record the reading speed and the answering results through software;

  • Experiment ended: Collect and analyze data.

4.2 Subjects

A total of 16 undergraduates at 162–178 cm height, with similar subjectivity in the test experience, educational level and reading ability and normal vision or corrected vision, and speaking Chinese as the mother tongue participated in the test. None of them had contacted the materials used in this experiment.

4.3 Experimental Materials

  • Reading materials: 48 long sentences about definitions with about 70 characters and the similar understanding difficulty coefficient. The content of the test text selected in this paper is about definitions of military and politics norms.

  • Material editing and processing: place each reading material in the middle of the line and editing them into the single-line text in line with the experimental demand, present one sentence in one interface, and choose the Arial; take one key word or word group from each sentence by aid of the programming language according to the standard of each kind of word size and word spacing corresponding to three sentences, place these key words or word groups at the left, middle and right positions of the sentences, respectively, then divide the 48 sentences into 3 groups (each including 16 sentences with 16 kinds of match between the word size and the word spacing) randomly, prepare the test webpage with each group of materials, collect the corresponding key words to form the corresponding PPT, and display the PPT in the surface as one of the experimental materials (Table 5);

    Table 5. Selection of target characters in the test materials
    Full size table

4.4 Realization of Material Edit Codes

Material code editing includes 4 parts: the material position in the interface, the basic pattern of materials, the staying time in the interface and option acquisition by the operator, and the countdown during interface transition and buffering, as shown in the below:

  1. (1)

    The material position in the interface

figure a
  1. (2)

    The basic pattern of materials

figure b
  1. (3)

    The staying time in the interface and option acquisition by the operator

figure c
  1. (4)

    The countdown during interface transition and buffering

figure d

4.5 Experimental Facilities

  1. (1)

    Software

  • IE or Firefox: Record detailed time and event content (including the reaction time and results) of the test objects during test through JavaScript/html/CSS and other programming languages (Fig. 2);

    Fig. 2.
    figure 2

    Setup of the test platform

    Full size image

  • QuickTime: Since the above programming displays the reaction time and results but cannot export data, the screen recording software is needed to export the detailed time and event content of the test object during test in the form of video and then collect and record the test result after test;

  1. (2)

    Hardware

  • Wacom Cintiq 27QHD, screen size 27 in. (596.7 * 335.6 mm), screen resolution 2560 * 1440;

  • Surface 3;

4.6 Experimental Environment and Test Process

  1. (1)

    Experimental environment

In the laboratory, temperature was kept at 28 °C. The touch screen was free from interference of the external abnormal light source. The height of the desktop where the touch screen is placed was 72 cm, the included angle between the touch screen and the vertical direction was 10~20°, and the sight distance was 40 cm. The touch screen and surface 3 were placed side by side. The height of the desktops and the position of the desks and chairs were fixed to ensure that all the sight distances of the experiment were the same. An absolute quiet environment was maintained during the whole process of the experiment.

  1. (2)

    Test process

All the test objects were informed with the experimental process in details 1–2 days before the formal experiment. They were also taken to the laboratory to be familiar with the experimental environment, as shown in Fig. 3.

Fig. 3.
figure 3

The real test scene

Full size image

Each test object received 2 tests, and each test follows the following process:

  • Before experiment preparation, adjust the sitting positions, sight distance and view angle of the test objects after they entered the laboratory, and remind them of the experiment content and the issues that need attention in the experimental process;

  • Before the formal experiment, guide the test objects to do the group of exercise experiment to help them get familiar with the experimental process and understand the instructions, and then start the formal experiment;

  • Start up the experimental facilities, to display the instructions firstly:

  • Check the prompt on the surface, and then read a line of words displayed on the touch screen from left to right; click to choose the word as same as the prompt; the finish time and the choice accuracy will be recorded during the experiment; after you are ready, please click to start the test (Fig. 4). (The test assistant will click to change the experiment prompt when the test object waits for page jump. The transition jump time is 3 s, and the test object can check the prompt during the 3 s.)

    Fig. 4.
    figure 4

    Stimulus presentation process

    Full size image

  • Classify and store the experimental data after the test objects finish the test.

  • After the test is finished, show sentences with match of 16 kinds of word size and word spacing to the test objects in one interface. The test objects will mark each sentence on the 5-point Likert scale (Fig. 5): 1 point—very poor, 2 points—poor, 3 points—average, 4 points—good, and 5 points—very good.

    Fig. 5.
    figure 5

    Test scene

    Full size image

4.7 Data Analysis and Sorting

This section lists the descriptive statistical results of all dependent variables of the experiment, including the mean and the standard deviation of these dependent variables.

According to Table 6, the mean and the standard deviation of three dependent variables—the completion time of the search task, the operation mistake rate and the readability are calculated in the experiment.

Table 6. Mean and standard deviation of dependent variables of word size and word spacing parameter setting experiment
Full size table

The result shows that when the match of the word size and the word spacing is (16px, 2px), (16px, 3px), (18px, 2px) or (18px, 4px) in the experiment, the average time needed to complete the task is relatively small. Time consumption for the match of (16px, 3px) is the smallest, followed by (18px, 2px), and then (16px, 2px) and (18px, 4px) with the same performance. As to the operation mistake rate, the match of (18px, 4px) is the only match with operation mistakes. Besides, with respect to the average score of the readability in the 5-point Likert scale, the match of (16px, 3px) and the match of (18px, 4px) are ranked at the last two positions, mainly due to the negative influence of the large word spacing on reading. Moreover, compared with the match of (18px, 2px), the match of (16px, 2px) is accepted by the test objects due to its good readability, and this match can carry more information in the limited space. Therefore, the test result prefers the optimal setting of the match of (16px, 2px).

5 Conclusion and Prospect

This study aims to test the influence of changes in two basic elements of the interface texts—the word size and the word spacing for the human cognitive performance based on the application environment of the desktop-computer touch screen. The 27-in. (resolution: 2560px*1440px) and the approximate 40 cm sight distance are selected to test and compare the human cognitive performance with 16 kinds of match between the word size and the word spacing in Chinese Arial. The conclusion is that in the experimental conditions, after comprehensively considering the elements of visual search and the average value of the completion time, the operation mistake rate and the readability evaluation, the optimal match between the word size and the word spacing is (16px, 2px).

The touch screen is developing towards large scale from the handheld device terminal, but the research on the interface design specifications of the desktop-computer touch screen has not started formally. This research only studies the basic condition of the word size and the word spacing in the text with black characters and a white background. However, the utilization environment of characters is diversified in the practical application. So the experiment scenes and parameter setting should be further enriched in the future, and the studies can cover more conditions. For all this, the research direction, the research methods and the research process of this paper can still provide reference for the study of the text element design specifications based on the Chinese interactive interface of the desktop-computer touch screen.