Keywords

1 Introduction

The progress of Internet technology has made the hand-held intelligent devices become the mainstream of 3C (Computer, Communication, and Consumer Electronics) electronic products. Most of these kinds of products, especially the smart phones are operated by senses of fingertip and finger touch and seeing based on a touch screen. The factors that affect the tactual identification will include shape, texture, and size [1]. To accurately and efficiently operate a hand-held intelligent device, the user needs to pay more attention to his or her hand activity and will cause safety problems especially when the user is in walking or driving situation [2]. In general, a smart phone has a touch screen with 5 to 6 in. of size to display human-computer interaction information for the user. The information is presented in specific digital contents which make the user can view and operate according to its instantaneous message display. Most digital contents are represented in multimedia types including pictures, characters, voices and dynamic images that enrich the satisfaction of user requirements. Even though picture images can present direct, subjective, emotional and visual feelings, characters which present abstract and objective message can help transmit accurate and complicated information to the user [3]. Stone et al. [4] 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. It appears that the characters share a large portion in digital contents and also become an important factor in the human-computer interaction process. Jung and Im [5] 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. [2] observed that larger text sizes will have high relatively short glances, whereas smaller text will lead to have long glances. Preece et al. [6] 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. However, any poor design of digital contents in characters and color matching of the corresponding background can cause problems in legibility and cognition.

Since the designer has his or her own subjected opinion, the integration of knowledge Since most information interfaces in digital contents are primary an image-based design, it will be worthy of exploring a better form of character representation for serving an auxiliary information communication. In addition, determining the optimum combination of characteristic levels is a known issue in research. It is also noted that the concept of the back-propagation algorithm in neural network (NN) research offers a useful search tool for engineering optimization problems. The back-propagation algorithm requires a sufficient number of correct and efficient training samples to complete the training process and calibrate the system such that it will have suitable prediction capacity [7]. The application of NN has gradually turned towards design improvement [8, 9]. This improvement could greatly enhance the quality of digital content design, especially for determining more precise settings of the characteristic values in character design. Therefore, it might be possible to more effectively develop “better” character design by providing designers with a neural network approach that can recommend more suitable character design. As such, the objective of this research is to proceed with an integrated study of neural network approach on the legibility of characters in digital content representation for the smart phones to help identify the most suitable mode of parameter combination in interaction interface design. The character properties to be considered in this research will include (1) color matching of character and the corresponding background, (2) spacing between lines, (3) spacing between words, (4) character size, and (5) typeface [10]. The proposed concept of the optimum experimental training, simulation, and inference procedure on character representation research will be able to apply in various hand-held intelligent products that provide users with greater viewing comfort.

2 Development Procedure

According to the research objective, the proposed approach will use interactive experiments to obtain the optimum operational data of character representation from smart phone tested subjects. The collected data will then be forwarded to the back propagation neural network training, simulation, and inference for recommending the optimum parameter combination of character representation. To conduct the experimental procedure, the research has three stages of development. They are (1) definition of experimental parameters, (2) development of simulation displays and conduction of experimental design, and (3) back propagation neural network process for optimum character representation. At the first stage, the research will collect and summarizes characteristics of character contents from a variety of current smart phone representation displays to figure out threshold values of common characteristics for designing a representative display in the experimental design. Note that several pairs of colors regarding character/background color matching, current character attribute values including candidate spaces between lines and words, typeface and character sizes are also collected. The second stage includes definition of experimental interface, development of experimental programming, conduction of optimum character display experiment, and collection and summary of experimental data. At this stage, the research develops an interactive interface for the experimental design and arranges the tested subjects to perform the experiment. During the experimental process, the tested subjects input their characteristic data and get into the adjustable interface to choose typeface, character/background color matching, character size, spaces between lines and words based on their preferences. The inputted data will be stored in the file of Microsoft Excel 2007. As to the third stage, the research applies the concept of back propagation neural network in the process of data manipulation and analysis to explore the optimum combination of character attribute values. At this stage, the research will use Microsoft Visual Basic 6.0 to establish an input interface for retrieving characteristic data of tested subjects. Besides, the software of MATLAB 7.0 will be used for the back propagation neural network training and simulation process. The output data of the simulation results will be restored and adjusted to represent the optimum combination of character attribute values. Figure 1 shows the overall development procedures for the exploration of optimum representation of digital contents on smart phones.

Fig. 1.
figure 1

A conceptual development framework for the proposed approach

Full size image

3 Definition of Experimental Parameters

To construct an optimum inference system for exploring the most suitable character representation of smart phones, the research collected 55 existing types of smart phones from Websites of different brands. Since 31 of 55 types of smart phones have sizes equal or larger than 5.5 in., this research decided to use the most popular size of 5.5 in. as a representative display and computer software of Illustrator CS 6 to help develop a simulation environment for further experimental design. The research also collected characteristics of character contents from these 31 types of smart phones. Note that the collection of character/background color matching is based on the measurement of RGB (R: red; G: green; B: blue) index values directly from smart phone display interfaces. The tools for use in measuring the RGB values include (1) use the software AdobeIllustrate CC to measure RGB values directly from sample displays, and (2) use APP free software Pixel Picker to measure RGB values directly from smart phone build-in trim picture function. Figure 2 illustrates a targeted orange color background that is measured to have a RGB value of (255/149/0) from a sample display when using the Pixel Picker in App. As to the character characteristics, the research directly extracted samples both Chinese and English from smart phone pictures and placed them in categories to determine representative character characteristics. The definition of threshold values for character parameters is based on the collection of 234 display pictures of current smart phones. Figure 3 illustrated some extracted samples of display pictures from collected smart phones.

Fig. 2.
figure 2

Measurement of display RGBs by the Pixel Picker in App (Color figure online)

Full size image
Fig. 3.
figure 3

Extraction of display pictures from collected smart phones

Full size image

3.1 Definition of Colors for Character and Background Color Matching

Statistical analysis of pair-wise colors on characters associated with backgrounds found that close color matching is frequently used. This situation made the RGB value cannot be measured separately. As such, the research first asked 7 experienced designers to record 63 types of character/background RGB values and then summarized to 20 representative color blocks for the experiment. Figure 4 illustrates the identified 20 colors of characters and backgrounds.

Fig. 4.
figure 4

Illustration of identified colors for character/background color matching (Color figure online)

Full size image

3.2 Definition of Spaces Between Character Lines

The research invited 124 people (67 males and 57 females) between ages 13 and 65 years to choose acceptable ranges of line spaces from 124 extracted displays of 5.5″ smart phones. Figure 5 illustrates the distribution of line spaces based on character size 12 pt of Microsoft JhengHei with fixed 12 pt of word spaces. According to the survey result shown in Fig. 5, the research decided to use 12, 14, 16, 18, 20, 22, and 24 pts of line spaces for the experiment.

Fig. 5.
figure 5

Distribution of character line space survey

Full size image

3.3 Definition of Spaces Between Words

A similar survey of spaces between character lines is used to define spaces between words. Figure 6 defines the word space for Chinese words. The character size 12 pt of Microsoft JhengHei with fixed 16 pt of line spaces is considered. The survey result is illustrated in Fig. 7. Note that current smart phones have built-in functions to increase or reduce the space between words based on the increase or reduce of character/word size. In other words, the space between two words is flexible and will depend on the size of the words. Based on the result shown in Fig. 7, the research also decided to use 12, 14, 16, 18, 20, 22, and 24 pts of word spaces for the experiment.

Fig. 6.
figure 6

Definition of word space in Chinese

Full size image
Fig. 7.
figure 7

Distribution of word space survey

Full size image

3.4 Definition of Character Sizes

According to the survey of word spaces, the research chose character sizes of 12, 14, 16, 18, 20, 22, and 24 pts for reading purpose. Since the survey analysis regarding in the icon display of smart phones showed the need of relative small of character sizes, the research also involves character sizes of 6, 8, 10, 12, 14, and 16 pts for the experiment of touch button and accessory display.

3.5 Definition of Typefaces

To choose representative typefaces for experiments, the research extracted 234 pictures from smart phone displays and used computer software Illustrator CS6 built-in character typefaces to make an inductive comparisons. The result is illustrated in Table 1. Since the typefaces of Century Gothic, Gadugi, Arial, and Calibri do not make significant difference, the research decided to use Arial as a representative typeface.

Table 1. Summary of popular typefaces
Full size table

4 Development of Simulation Displays and Conduction of Experimental Design

The framework of the operational interface is developed based on the definition of character contents. To insure that the experiment can be fitted to the real situation, the research designed an APP operational interface display corresponding to a 5.5″ of smart phone. The research defined 20 RGB color codes for character and background color matching, set the line space around 12–24 pts, the word space around 0.6 mm–1.0 mm (refer to 12–24 pts), and the character size around 12–24 pts (regular reading) and 6–16 pts (touch button and icon display), respectively. The legibility questionnaire is designed with a five-scale evaluation form and its contents are based on user preference, aesthetic color matching, appropriate color matching, viewing habit and reading cognition. Note that Chinese typefaces of DFKai-SB, PMingliU, and Microsoft JhengHei and English typefaces of Arial and Times New Roman are chosen respectively for further experiment. In this operational interface design, three major interface displays in Chinese mode are illustrated in Figs. 8, 9, and 10, respectively. They are (1) recommendation of character size, (2) recommendation of line space and word space, and (3) recommendation of character color and background color and submission of final survey result.

Fig. 8.
figure 8

Interface display of Chinese character size selection

Full size image
Fig. 9.
figure 9

Interface display of Chinese line and word spaces selection

Full size image
Fig. 10.
figure 10

Interface display of character and background color selection (Color figure online)

Full size image

Since current smart phones are popular to the young people, the research chose a total of 36 tested subjects including 12 male and 24 female college students to be 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 smart phones and corrected normal visual acuity. Each tested subject is first asked to input personal data and then sequentially measures the character size, line space, word space, and character color/background color matching. 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. Having finished the experiment, the tested subject is asked to do a five scale of satisfactory questionnaire. Each run of the experiment, the adjusted values of character contents will be stored in the tables of Microsoft Excel 2007. 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 contents.

5 Exploration of Optimum Character Content Representation

In the third stage, the information of users’ features and experimental data will be applied in the training and simulation stages of the back propagation neural network to generate an optimum display of character characteristics representation. The frame development of training and simulation in neural networks include type of network, input data, target data, training function, number of layer, adapting learning function, performance function, and number of neurons. According to the collected data characteristics of tested subjects and character contents, a three- layer of back propagation neural network with multiple input neurons is selected [10]. Table 2 illustrates a list of neural network function configuration. In this research, the prediction of character typeface, size, line space and word space has 4 input neurons, 2 output neurons and 3 hidden neurons, while the prediction of character/background color has 22 input neurons, 2 output neurons and 2 hidden neurons [9, 11].

Table 2. List of neural network function configuration
Full size table

To simplify the study, 36 tested subjects are divided into male and female groups. Figure 11 shows the input data of tested subjects. Note that the data illustrated in Fig. 11 are transformed into numerical values for the purpose of statistical manipulation 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 illustrated in Fig. 12. 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 the optimum combination of character contents as presented in Table 3. The analysis of Chinese and English legibility prediction obtained 77.2% and 66.2% of accuracy on character typeface, character size, line space, and word space, respectively. However, only 13.3% of average accuracy on character and background color matching.

Fig. 11.
figure 11

Input data of tested subjects

Full size image
Fig. 12.
figure 12

Example showing Matlab functional settings

Full size image
Table 3. Summary of recommended character contents
Full size table

6 Conclusion

Smart phones have become part of our daily essentials. People whoever they are young or old, female or male use smart phones all the time. In general, the ease of setting conditions will affect the operation time of uses. It appears that the user always needs to spend more time in adapting interface operation for different brands or models of smart phones. The research proposed an integrated procedure to explore an optimum combination of character parameters including character and background color matching, space between lines, space between words, character sizes, and typefaces. The parameter values for the above mentioned character characteristics are identified and defined for designing an experimental simulation display. The tested subjects were selected from experienced voluntarily male and female college students. In the experiment, data including basic information of tested subjects and preferable settings of character values are forwarded to the process of back-propagation neural network training and simulation. It is noted that the outcomes of this research are all experiment-oriented so that the optimum character contents are highly objective. 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 the result of exploration of character contents on smart phones this will provide designers with design references in (1) designing a more suitable interaction interface connection between character contents and users, (2) organizing an optimum structure of character contents in operation performance, and (3) developing an appropriate mode of character content information display. In addition, this research will help user reduce the time in setting attributions of character contents and establish users’ awareness on the digital content information interface so that the human-computer interaction can be more humanized and intelligent.