Keywords

1 Introduction

The progress of Internet development has made our daily hand-held intelligent products become more functional. In general, these products such as smart phones, global positioning systems (GPS), driving recorders and smart watches have a specific screen with digital content information to allow users to operate the interface and view information, and even support functions for entertainment and leisure activity [1]. Among these products, the way of presentation on digital contents is usually a combination of pictures, characters, voices and dynamic image displays, such as electronic books, e-news and e-articles. Although the pictures can attract people more attention than characters, Tomioka [2] noted that only characters can communicate accurate information to people. Since characters in digital contents are most suitable for presenting abstract and objective information and transmitting accurate and subtle meaning of message, an appropriate presentation of characters absolutely plays an important role in displaying information and would be a valuable issue to research. Sanders and McCormick [3] stressed that the cognitions of visibility, readability and legibility are important criteria for character content design, especially on color matching between characters and the corresponding background. Preece et al. [4] suggested that a good design should optimize the user’s interaction with a usable interactive product system in a way of easy to learn, effective to understand and enjoyable to use. Stone et al. [5] indicated that some factors such as typeface, type size, letter spacing, line spacing, line length and color will affect the legibility of text in current digital displays. Jung and Im, [6] recommended that character icons with suitable touch area and desirable hit rate be important guidelines for a smart phone user interface design. Crundall et al. [7] observed that larger text sizes will have high relatively short glances, whereas smaller text will lead to have long glances. In general, familiar typefaces such as Times New Roman and Arial will have a better cognition [5, 8]. Darroch et al. [9] also found that the aged people prefer character size to be 9 to 12 pts (points, 1 point = 0.35 mm). Based on the observation of interfaces of existing hand-held intelligent products, current character representation of digital contents is usually restricted in a specific scale of adjustment and some character colors associated with background colors do not show a high degree of visibility. Besides, most arrangements of characters in digital contents rely on the designer’s subjective opinion, knowledge and experience and seldom consider users preferences. The above mentioned situations will make the character representation cannot achieve the most suitable viewing effect, especially for specific groups of users. To help users accurately read and conveniently operate the hand-held intelligent products in relatively a short time, the designer need to consider factors including characters and background color matching, sizes of characters, distances between characters, line distances and typefaces of characters. As such the objective of this research is to explore the optimum character representation of digital contents display model for specific size of hand-held intelligent products that can help users improve better viewing and operating display.

2 Development Procedures

The research will involve the above mentioned design factors in the optimum combination of parameters for a most suitable character content representation model. The proposed model is designed to be changeable and adjustable for specific size of displays. In this research, typefaces of characters include three types of Chinese and English, respectively. As to the units, the millimeter and point will be used in the measurement and experiment. Note that the position of characters will be placed in center of the display. The development of the research divides the process into three stages. They are (1) organization of experimental parameters and design of simulation display, (2) experimental interface design and implementation, and (3) back-propagation neural network for optimum character contents recommendation. In the first stage, the research collects and summarizes characteristics of character contents of current hand-held intelligent products, defines threshold values for character parameters, investigates and clusters the color matching between characters and backgrounds, and designs representation interfaces of experiments and outcomes. The second stage includes experimental design and interaction interface design, experimental programming, optimum character representation for experiment, and experimental data collection and analysis. As to the third stage, the research will apply back propagation neural network to data training and simulation, and then derive an optimum display of character contents representation. The research will use Microsoft Visual Basic 6.0 or higher version to plan the interaction interface experimental system for hand-held intelligent products.

3 Organization of Experimental Parameters and Design of Simulation Display

In the development procedure, the research will focus on determining the most suitable combination of character content characteristics for hand-held intelligent products. The identified character content characteristics are regarded as experimental parameters and will be used in defining and designing an adjustable user interface simulation mode for the research experiment.

3.1 Organization of Experimental Parameters

According to the research objective, the character content attributes to be involved in the research include: (1) character typeface, (2) character size, (3) distance between two words, (4) distance between two lines and (5) character and background color matching. To determine the threshold ranges of these character content attributes for the design of simulation display, the research collected and investigated relevant data from several brands of intelligent hand-held products on GPS navigations, driving recorders, MP4 and smart phones such as Garmin, Mio, HTC, Samsung and Apple iPhone. Based on the summarized data, the threshold ranges of the character content attributes can be defined. In this research, the character typefaces will consider three types of Chinese and English as illustrated in Fig. 1. Note that in Fig. 1, Chinese typefaces of Mingliu, Kaiw and SimHei and English typefaces of Times New Roman, Arial Unicode MS and Calibri are chosen respectively for further experiment. Based on the chosen typefaces associated with the data collection and investigation on existing intelligent hand-held products, the character sizes will be set at 5 to 26 points/pts. Note that 1 pt = 1/72 in. = 0.352 mm (mm). As such the typeface sizes will range from 1.76 mm to 9.15 mm. Figure 2 illustrates the conceptual representation of character sizes. The distance between two words will be set at 0.4 to 8 points/pts, or 0.14 mm to 2.82 mm. Figure 3 illustrates the conceptual representation of the distance “d” between two words. Similarly, the distance between two lines is set at 1 to 25 points/pts, or 0.35 mm to 8.8 mm. Figure 4 illustrates the conceptual representation of the distance “d” between two lines. As to the character and background color matching, the research used a color measurement function in software CorelDraw associated with a popular RGB (R: Red, G: Green, B: Blue) color system to help define colors for character contents as well as the corresponding backgrounds. The RGB color system is used in representing digital color images with scale values range from 0 to 255 for red, green and blue colors, respectively. In other words, any color can be defined by combining each specific scale value of red, green and blue colors. In this research, a total of 48 current color combinations of character and the corresponding background were collected from existing intelligent hand-held products. Figure 5 illustrates a sample of collected color combination of character and the corresponding background. Note that the numeric values in Fig. 5 denote R, G and B color scale values for a specific character and the corresponding background.

Fig. 1.
figure 1

Three typefaces of Chinese and English characters

Full size image
Fig. 2.
figure 2

Illustration of defined character sizes

Full size image
Fig. 3.
figure 3

Illustration of defined distance between two words

Full size image
Fig. 4.
figure 4

Illustration of defined distance between two lines

Full size image
Fig. 5.
figure 5

A collection of character and background color combination

Full size image

A cognition evaluation questionnaire was designed with assistance of the Internet network MySurvey to help select better cognition of color combinations. The research remained 26 color combinations. To cluster the above 26 color combinations, the research designed a legibility 5-priceple-questionnaire regarding adjustable character content attributes of character typefaces, character sizes, distance between two words, distance between two lines, and character and background color matching for digital content preference measurements. The questionnaire evaluation criteria include personal preference, color combination feeling, viewing custom, color combination appropriation and reading comfort [10]. Again, the questionnaire was distributed to the Internet tested subjects for evaluation of the 26 color combinations. The questionnaire results were forwarded to the hierarchical clustering analysis to generalize some groups of represented digital contents [11]. Note that the statistical analysis software SPSS 17 was used and 10 groups of color combinations were determined. Table 1 illustrates representative color combinations for these 10 groups. The representative color combinations will be used in the design of simulation display.

Table 1. 10 Groups of character and background color combinations
Full size table

3.2 Design of Simulation Display

After character content characteristics having been determined, the research considered a suitable scenario for the design of a simulation display.

Since driving navigation systems in hand-held intelligent products perform a dynamic representation and can display instantly different pictures, the research decided to choose a popular driving navigation system as a targeted scenario and design a representative display for further simulation and experiment. According to the collection of possible locations that character contents frequently show up in a driving navigation system, the research chose eight similar displays of current navigation systems and designed a questionnaire for a preference evaluation on these displays. It appears that a display illustrated in Fig. 6 is a most favorable one. Based on the display shown in Fig. 6, the research defined eight blocks in a display for presenting character contents. Figure 7 illustrates the conceptual framework for the design of a display in the character content cognition experimental process. According to the defined framework shown in Fig. 7, Fig. 8 presents a conceptual display. A selection menu display that will be used in the experimental simulation process is designed including choice of (1) character typeface, (2) character size, (3) distance between two words, (4) distance between two lines, (5) character and background color matching and (6) area selection

Figure 9 illustrates the designed selection menu display for experimental simulation. The designed selection menu Display was developed by Microsoft Visual Basic 6.0. As to the driving simulation display, the research used 60 GIF (Graphics Interchange Format) pictures and pooled to be an animated display that can run circularly with two pictures per second and about 30 s per cycle time. Note that during the adjustment period, the driving animation will not proceed until the tested subject satisfies the adjustment of each character content attributes.

Fig. 6.
figure 6

Representative display for design of simulation

Full size image
Fig. 7.
figure 7

Conceptual framework of character contents representation

Full size image
Fig. 8.
figure 8

Conceptual simulation display based on framework of Fig. 7

Full size image
Fig. 9.
figure 9

Representation of experimental simulation display

Full size image

4 Experimental Interface Design and Implementation

In the conduction of experimental design, the tested subject will first input about 15 questions, including (1) name, (2) sex, (3) age, (4) residence area, (5) education, (6) occupation, (7) monthly income, (8) academic background, (9) visual acuity, (10) type of vehicle used, (11) frequency of evening driving, (12) number of driving navigation devices or recorders used, (13) understand degree on driving navigation or recording systems, (14) expected budget for purchasing a driving navigation or recording system and (15) most favorable function. The tested subject who responds the above 15 questions at the first stage of questionnaire will request to get into the experimental system. During the experiment, the tested subject can adjust each character content attribute value based on his or her visual preference and cognition. All tested subjects should be able to easily adjust the character-blocks in the simulated display by the system of optimum experiment and re-adjust the character-blocks until the optimum display is determined. In the experimental environment, one laptop computer connects with a screen. The laptop computer displays a static map when the tested subject uses the screen to adjust character content attributes or displays an instantly updated map when he or she runs the simulation on the screen. Figure 10 illustrates representational displays for the laptop computer associated with the screen during the conduction of an experimental simulation. The environment scene is shown in Fig. 11. A total of 48 tested subjects including 25 male and 23 female college students are voluntarily invited to participate in this experiment. All tested subjects have at least some sort of experiences on using hand-held intelligent products especially the driving navigation system and corrected normal visual acuity. Each run of the experiment, the adjusted values of character content attributes will be stored in the tables of Microsoft Excel 2007. Table 2 illustrates experimental data of tested subject No. 1. Note that the values of charter size, line distance and word distance shown in Table 2 are denoted as 1 unit equals to 1 point (pt). The information of subjects’ features and experimental data will be applied in the training-stage of neural network to generate an optimum display of character characteristics.

Fig. 10.
figure 10

Representation of displays in experimental simulation

Full size image
Fig. 11.
figure 11

Experimental environment scene

Full size image
Table 2. Example showing experimental data of tested subject No.1
Full size table

5 Back-Propagation Neural Network for Optimum Character Contents Recommendation

According to the collected data characteristics of tested subjects and character content attributes, a three-layer back-propagation neural network with multiple-input neurons is selected [12]. The neuron model selected for the experiments is a 14–10–5 type of network, which means that there are fourteen input signals regarding tested subjects’ information in the input layer, ten actual outputs of neurons in the hidden layer, and five actual outputs of neuron regarding parameter attribute values of digital contents in the output layer [13, 14]. The fourteen input signals are: (1) sex, (2) age, (3) residence area, (4) education, (5) occupation, (6) monthly income, (7) academic background, (8) visual acuity, (9) type of vehicle used, (10) frequency of evening driving, (11) number of driving navigation devices or recorders used, (12) understand degree on driving navigation or recording systems, (13) expected budget for purchasing a driving navigation or recording system and (14) most favorable function. As to the five actual outputs, they are: (1) character typeface, (2) character size, (3) distance between two words, (4) distance between two lines, and (5) character and background color matching. Note that the concept of binary code transformation for genetic algorithms is incorporated with the neural network learning and simulation. The data of fourteen inputs regarding questionnaire results of tested subjects associated with outputs of eight blocks of five character attributes are normalized, respectively. To simplify the study, 48 tested subjects are divided into male and female groups. The computer software Matlab 7.0 is used for the analysis of back-propagation neural network training and simulation. In Matlab 7.0, the research defined transfer function, number of neurons and transfer function variable settings. As to the expected goal values, they are all defined as less than 0.05. Having finished the training and simulation process of back-propagation neural network, the research derives two optimum combinations of five parameters of character contents for respective male and female group of users. Figure 12 illustrates one optimum combination of character attributes for male group. It appears that most typefaces presented in Fig. 12 are in Chinese are primarily because the experiment was implemented by Chinese tested subjects.

Fig. 12.
figure 12

An optimum representation of character contents for male group

Full size image

6 Conclusions

Hand-held intelligent products have become part of our daily essentials. Many newly technologies as well as applications are introduced to be functions of hand-held intelligent products. These functions share more spaces than ever in a limited size of screen and will cause the users much burden on reading and cognition. The digital contents involve a combination of pictures, characters, and dynamic images. Although pictures or images can be more attracted than characters, only characters can communicate accurate information to people. Therefore, good presentation of character characteristics in digital contents can help enhance the user ability in legibility and cognition. The research proposed an integrated procedure to explore an optimum combination of character attributes including typefaces, character sizes, distance between two words, distance between lines and character and background color matching. The parameter attributes and values for the above mentioned character characteristics are identified and defined for designing an experimental simulation display. Some experienced voluntarily male and female college students are invited as tested subjects. The experimental data including their basic information and preferable settings of character attributes are then forwarded to the process of back-propagation neural network training and simulation. Two optimum combinations of character attribute values for male and female are obtained. It is noted that the outcomes of this research are all experiment-oriented so that the optimum character contents are highly objective results, which can be applied to the process of development in digital contents, and reduce the time in setting attributions of digital contents. However, more experiment data collection and validation are needed for further studies so that the final results can be more reliable and useful. It is expected that through the implementation of this research, the following results can be obtained: (1) a suitable interaction interface connection between digital contents and users, (2) an optimum structure of digital contents on operation performance, and (3) an appropriate mode of digital contents information display on hand-held intelligent products. In addition, this research will provide referencing information and research process with designers to help establish users’ awareness on the digital content information interface and make human-computer interaction be more humanized and intelligent.