Research on Information Architecture Based on Graphic Reasoning and Mental Model

Abstract

The relationship between the formal structure of the graphical reasoning and the representation form of mental model is studied in this paper. Through comparative analysis of experimental samples, it is found that the layout, information classification and other elements of the mental model have a certain degree of commonality with the formal structure of graphical reasoning. Applying it to the interface design is the construction of information architecture. So that the user experience is optimal. And combining the formal structure of the graphical reasoning and the representation mode of mental model through usability testing is conductive to the establishment of the interface design prototype and improve user experience.

1 Research Background

With the rapid development of modern information technology and Internet technology, information product design has attracted more and more attention. As the important window of information product design and the important carrier of information presentation, UI design plays a more and more important role in communication of social culture. Graphic design language is an important component of interface design which can express various features of things and there is a change rule of expression pattern between them.

In interface design, abstract reasoning based on image reasoning is significant to reveal the essence of human intelligence and develop intelligence potential. The role of graphic reasoning in interface design has been gradually recognized. However, how to transmit information more quickly to users and make a better information structure of the interface, are worth to think about for researchers. At present, most of the research on interface uses mental model theory, and few people combine graphic reasoning with it. The purpose of this study is to research construction of interface design information architecture by exploring the construction of the interface design information architecture and the mental model representation. This provides more effective layout for the content of the interface design, making it more in line with the user’s cognitive habits.

2 Mental Model and Graphical Reasoning

2.1 Representation of Mental Model

The concept of “Mental Model” was originally proposed by Kenneth Craik. He believes that the mental model is used to explain the individual’s cognitive process of the inner relations of things in the real world [1]. Later, many scholars refined and supplemented it from different perspectives. For example, Young thought that the mental model is used to interpret the purpose of people’s behavior, the process of thinking, and the change of emotion and thinking in the course of carrying out the action [2].

The mental model is difficult to fully describe. With the different perception object, the expression method is different too. Therefore, there are variety of forms. For example, in the product design, people will determine the product’s use method and function according to the product’s shape, operation buttons, colors and other factors. In the interface design, designers guide user’s operations based on the colors, graphics, and text, which are transmit to users through the interface [3]. We can study information architecture from the representation mode and behavioral mode of the mental model.

The representation mode belongs to the explicit element of the mental model. It conveys the interface to the user by vision, carries the input and output of information, and provides a window for the user to interact with it. Explicit elements clearly convey the information to the user, and it is also easily accessible for users. It includes the layout, colors, symbols, graphics, information classification, animation, copywriting, comparison, and background in the interface design.

The behavior mode belongs to the invisible element of the mental model and it is the interaction mode between interfaces. The recessive element is neither easily accessible for users, nor can it be shown in a concrete manner. It includes acceptance of behavior and response behavior. Accepted behaviors include single-clicks, double-clicks, etc.; responsive behaviors include tactile, auditory, and visual; common are vibrations, sounds, and morphological changes (Fig. 1).

Fig. 1.

Representation of mental model

The form of mental model consists of the interface system, and the user interface system can also as be composed of organization system, labeling system, navigation system and search system. In these systems, patterns in various elements together constitute different sizes task flow, the task flow guide designers effectively to organize information, constitute the first dimension of information architecture.

2.2 Graphical Reasoning

Graphic reasoning is the thought process of infer other graphics or information from one or several known graphics. It is a comprehensive thinking process based on reasoning and other thinking modes; the validity of graphical reasoning considers not only the connection of the figure in the spatial structure, but also the connection between the graphics. Some conclusions of the graphical reasoning are certainly, and others may be uncertain. And graphical reasoning fosters divergent thinking [4].

In the process of figure reasoning, people seemingly complete the reasoning through objective carriers such as the flat composition of the graphic itself. In facts not only that, there is a very critical part that is the change of the structure between graphics [5]. People will first pay attention to the overall architecture, and then carefully analyze the changes in the internal details. After they find the relationship between the architecture of graphics, it will be very easy to do inferences. Thus, in graphic reasoning, it is an important part of reasoning activities that deducing the relationship of the formal structure between graphics, and it is the skeleton and architecture of graphic reasoning. Through the analysis of structure expression of graphic reasoning and information architecture, it is found that in the interface design, the structure form of graphic reasoning includes tree structure, matrix structure and linear structure, these structures can be used as another dimension of information architecture [6].

The relationship between the formal structure of the graphical reasoning and the representation form of mental model is studied in this paper. Through the analysis, it is found that the formal structure of graphic reasoning and the layout and information classification of the mental model in the form of expression have certain commonality, and the application of it in the interface design is the construction of information architecture (Fig. 2).

Fig. 2.

Speculation of information architecture

Through research the reasoning mode and implementation process of the information architecture, combining the formal structure of the graphical reasoning and the performance model of the mental model, the two latitudes of the information architecture construction are obtained. Combining graphical reasoning with mental models to study information architecture, assume that in today’s interface design, information architecture can be interpreted in the form of graphical reasoning. At the same time, this paper takes the Chinese largest social website-Qzone as an example to verify the conjecture.

3 Experimental Design

The experiment is based on the two dimensions of information architecture. First, extracting the product function of Qzone, and classifying the functions and analyzing the product architecture. From the Qzone architecture we can see that this product is mainly constructed by a tree structure (Fig. 3).

Fig. 3.

Product functional architecture of Qzone

The structure of single graph transfer relations in tree structure and graphic reasoning is similar (Fig. 4). The establishment of a graphical reasoning proposition must satisfy three conditions, which are premise, reasoning requirements, and conclusions. It can be seen from the figure that the premise of reasoning is the pattern A → a1 → a2 → a10, B → b1 → b2 → b10, the reasoning requirement is C, and the conclusion is c1 → c2 → c10.

Fig. 4.

Single graph transfer relation structure of graphic reasoning

Secondly, analyzing the page layout in Qzone, and the layout design of its organization system, navigation system, search systems and label systems can be explained by graphic reasoning, and It’s really built through mental models.

The organizational structure of information is very important in the design of a website. Although users generally do not feel it exists, it defines the main way users browse. The functional structure in the Qzone is a tree structure. After subdivision, it was found that the organizational structure adopted by Qzone is a shallow and narrow architecture (Fig. 5).

Fig. 5.

Organization structure of Qzone

The navigation system is composed of several subsystems and is divided into global, local and situational navigation systems, which are embedded navigation. Qzone uses global navigation (Fig. 6). At the same time we found that the process of graphical reasoning can be verified on this system. Assume that the premise of inference is the friend’s dynamic board and its secondary title. The other levels and its secondary title are becoming the result of reasoning. Taking the panel of special interest as an example, the interface of the second-level title conforms to the single-image transfer and the two-graph transfer relationship in graphical reasoning.

Fig. 6.

Navigation system of Qzone

Finally, through usability testing, the Qzone is verified on the basis of the application of the theory. The interface design of Qzone meets the needs of users, and the usability is great.

The purpose of this stage is to verify whether Qzone’s information architecture is well-available in the case of graphical reasoning and explanation. The satisfaction of user experience is the measurement result. The test material for this test was the Qzone website, and the same display was used as the carrier for testing. Thirty college students (18–24 years old) participated in this study. They are all from colleges and universities and are engaged in non-design industries.

Using user interviews and questionnaire surveys, users can complete typical tasks and evaluate the interactive design (ease of learning, efficiency, and task accuracy), interface design (content layout, menu style, etc.) and overall satisfaction after the operation, and give the assessment results. The task settings are as follows (Table 1).

Table 1. Experiment task settings

After the user conducts the task test, the questionnaire is filled in again. The questionnaire uses a 7-point scale and divides each item from very poor to very good into 7 levels with scores ranging from low to high. After statistics the data, the histogram of the satisfaction of the user task operation is produced (Fig. 7).

Fig. 7.

User satisfaction mean of five tasks

From the results of user satisfaction analysis, the user satisfaction of the five tasks exceeded the average of the 7-point scale during the completion of the mobile operating system tasks, which basically achieved a better user experience.

4 Conclusion

The experimental results show that the combination of mental model representation and formal structure of graphic reasoning can facilitate the establishment of interface design prototype, and make the users experiences achieve the optimal. This paper through study and comparison of forms and graphic reasoning form structure of mental model, find the hidden behind the reasoning system for information architecture guidance is a perspective from the origins of usability design. In the future research, the relationship between graphic reasoning theory and interface design is still worth exploring.