Keywords

1 Introduction

1.1 Research Background

In the information environment, the interface is the carrier for information analysis and processing by users, and is the medium for transferring and exchanging information between people and machines. The interface becomes the initial level of user contact with the product, and the interface design is the outermost representation of the interaction design. Interface design is a kind of design extension and extension with visual perception design as the core. It is a design language with visual consciousness as its expression form. It has a certain influence on the user’s initial perception and user experience.

This paper is based on the interface design project of the stadium monitoring system, and analyzes the interface layout as the background. The venue monitoring interface has problems such as large amount of information and messy information. How to enable users to quickly recognize information and obtain demand information in a short period of time becomes a major problem affecting the user experience. Gestalt psychology is an important theory of cognitive psychology. It connects people’s perception and visual perception and has a key influence in visual design. Therefore, starting with Gestalt psychology, the Gestalt principle can provide a theoretical basis for the layout of the interface design and design criteria that are more user-friendly.

1.2 Related Literature Review

Gestalt psychology is one of the main schools of modern Western psychology. The concept of “formatting tower quality” was first proposed by the Austrian philosopher Christian von Ehrenfels in the 1890 paper “On Gestalt Qualities”. In 1912, German psychologists Marx Wertheimer, Kurt Koffka and Wolfgang Kohler published their paper “Experimental Studies of the Perception of Movement” to discuss their findings. This marked the rise of the school of Gestalt psychology, and Wertheimer, Kaufka and Kohler became the three founders [1].

Kurt Koffka introduced Gestalt psychology in detail in the book Principles of Gestalt Psychology. Through systematic analysis and analysis of Gestalt psychology principles, it laid a solid foundation for this study and became the strong support of the theoretical part of this article [2]. The German scholar Rudolf Arnheim’s “Art and Visual Perception” first applied the theory of Gestalt psychology to the field of art vision. He believes that the process of perception is actually the physiological process of the cerebral cortex according to the organization principle (proximity, similarity, closure, directionality), transforming visual stimuli into an organized whole process [3]. In “Cognition and Design: Understanding UI Design Guidelines,” Johnson Jeff talks about the relationship between Gestalt psychology principles and interactive interface design, and the important principles of Gestalt principles, pointing out the use of Gestalt principles to perceive interfaces. It allows us to understand things and events faster. Combining methodologies in the field of psychology and behavioral science can effectively improve the design level of products and services and enhance the user experience [4]. Wang Peng, Pan Guanghua and others wrote “The Gestalt of Experience: Gestalt Psychology”, which systematically introduces the development process of the Gestalt School and summarizes its ideological viewpoints, theoretical systems and research methods. development trend. It is of great inspiration to apply the Gestalt principle to interface design in this paper. In “Human Interface: Interactive System Design”, Jeff Ruskin proposed to introduce the principle of cognitive psychology into interface design, and rethink the interface design method from the aspects of interface unification, quantification and navigation [5].

1.3 Research Content and Architecture

The article is divided into four parts: The first part is the introduction, which discusses the research background, related literature review and research content, etc. The second part is an overview of Gestalt psychology, Gestalt psychology and interface design. The relationship and its basic principles are summarized, including the definition of Gestalt psychology, from the two parts of perception and perception, visual perception, analysis of Gestalt, the specific analysis of the four basic principles of Gestalt, and the following The actual design application leaves the foundation; the third part is to apply the four basic principles of Gestalt psychology to the layout design of the main interface of the stadium monitoring system; the fourth part is a summary of the theoretical viewpoint of this article. The overall framework of the article is shown in Fig. 1.

Fig. 1.
figure 1

(Source: Editor’s self-painting)

Article overall architecture diagram

Full size image

2 Overview

2.1 Gestalt Psychology Overview

Gestalt Psychology was founded in the 20th century and provides the basis for modern perception research. Gestalt is intended to mean a form, a shape, or a whole that is visually separated. The theory emphasizes the overall, the nature of the overall decision part, and partly depends on the whole. The starting point of Gestalt psychology research is based on “shape”, but it is not limited to the general form or shape, but also the whole of the experience organized by the perceptual activity. Therefore, the translation is “whole or gestalt”, so Gestalt psychology is also called gestalt psychology [6]. Gestalt psychology emphasizes the initiative of perceptual activities and the integrity of psychological phenomena. The basic theory is that human visual systems can automatically input and construct structures, and organize visual elements such as shapes, figures and objects, rather than a single element is analyzed [7].

Gestalt Psychology advocates the study of direct experience and behavior, emphasizes the integrity of behavior and direct experience, and advocates the use of overall motivation to observe and study psychological phenomena. In the development of Gestalt psychology, Gestalt psychologists have summarized many organizational principles applicable to visual graphics. The “Pinguistic Tendency Principle” is the most important and basic organizational principle. The “finished tendency principle” refers to the tendency for those organizations to be poor, untidy, ambiguous, and complex. Perception has a tendency to transform the best, most symmetrical, and simplified graphics into the organization [8].

Gestalt psychology can be understood from two parts: perception and perception, and perception. First of all, it is perception and feeling. Feeling is the direct reflection of the human body on the physical and psychological aspects of the object. It is the basic reaction to the individual attributes of the object, including visual, auditory, olfactory, taste, and skin feeling. Perception is the reaction of the human body to the overall attributes of things, and it is a comprehensive and holistic reaction that combines various sensations organically. Feeling and perception are two inseparable basic psychological processes. Generally speaking, they appear at the same time, which are direct reflections on objective things. Objective things act on the senses, and perceptions will occur. Second, it is visual perception. Visual perception is the observation of the information received through the eyes, through the brain to perceive the characteristics of things, to understand and analyze things, to abstract, combine, separate, simplify and other comprehensive processing, and evolve into a process of thinking.

2.2 The Relationship Between Gestalt Psychology and Interface Design

Interface design is the visual representation layer in human-computer interaction, which is an important aspect to determine visual perception. The interface design is based on the visual experience. The basic purpose is to meet the user’s usage habits, to obtain the user’s demand information more quickly and effectively, and to make the user have a good user experience in the interface interaction process. Rudolf Arnheim, a representative of Gestalt theory, believes that the combination of visual research and the study of art forms, visually becomes the sensory ability to grasp the overall structural style of visual objects [9]. Gestalt psychology has a key influence in visual design. It mainly studies human body visual information reception process with human perception and visual perception. It is an important theory of cognitive psychology. Gestalt aesthetics is a scientific interpretation of the perception of human visual aesthetics. Therefore, based on this principle, the principle of introducing and applying the psychology of the format tower in the interface design is systematically analyzed and discussed.

2.3 Gestalt Psychology Principle Analysis

Gestalt theory puts forward four basic principles through the physiological research on visual perception: the principle of proximity, the principle of similarity, the principle of closure, and the principle of simplicity.

Principle of Proximity. The principle of proximity means that the parts that are close in distance tend to form a whole. It is believed that the distance between elements affects people’s perception of their state. Elements that are adjacent to each other and relatively close to each other are easily perceived as a whole object; conversely, elements that are not adjacent to each other and far away from each other are easily separated by perception. As shown in Fig. 2, elements of the same size, color, and shape are arranged together, and visually distinctly divided into two parts according to the distance.

Fig. 2.
figure 2

(Source: Editor’s self-painting)

The brief illustration of proximity law

Full size image

The principle of proximity is usually used to classify content elements for interface design. The general application is embodied by grouping the content elements of the interface by using the edge of the interface area, and creating different element unit groups according to the distance of the relative distance. In this way, the design interface has no visible boundary or separation frame, which not only reduces the visual clutter in the interface design, but also makes the overall planning of the interface more standardized and easy to identify, and more fully satisfies the audience’s clear and complete interpretation of the interface content information demand.

Principle of Similarity. The principle of similarity means that parts that are similar in one aspect tend to form a whole. That is, when other factors are the same, people tend to regard visual objects having similar shapes, sizes, colors, materials, and the like as a whole or a combination. As shown in Fig. 3, in the case where the distance distribution of each element is the same, elements of different shapes and colors are visually clearly divided into four groups.

Fig. 3.
figure 3

(Source: Editor’s self-painting)

The brief illustration of similarity law

Full size image

The principle of similarity is often used for the division of elemental regions of interface design. The area is divided by categorizing the element size, background color, shape, structural features, and the like. By designing the interface in this way, the picture can be neat and unified, and the grouping of different style elements can be highlighted, so that the user can find the relevant information required in a large amount of information.

Principle of Closure. The principle of closure means that when the element is incomplete or obscured, the human perception system automatically fills in the obscured or missing part according to past experience and perceptual tendency to approach the integrity, so that the element looks complete. Overall. As shown in Fig. 4, the graph consists of four incomplete circles with a blank space between the four circles, but the human visual system automatically fills the blanks into a white square. At the same time, the visual system will automatically judge that the circle is blocked by a square, rather than being incomplete.

Fig. 4.
figure 4

(Source: Editor’s self-painting)

The brief illustration of closure law

Full size image

The principle of closure is often applied in interface design. This “complete form” trend helps users to transform visual elements that are not easily perceived into familiar ones. This design method can make the interface clear and clear, and not too many elements, and follow the user’s usage habits.

Principle of Simplicity. The principle of simplicity holds that human perception has a tendency to “simplify”. This simplification does not mean simplicity, but rather the tendency to organize the construction by constructing elements that are perceived and accepted in as simple a way as possible. When there are too many visual elements or cognitive possibilities in a person’s field of vision, the visual system will actively simplify the graphic elements and combine the various units to make them a perceptually sensible whole. For example, symmetry is a common form of organization in the “simplification” tendency. As you can see in Fig. 5, there are six positive and negative “c” elements, and the vision system automatically combines the graphical elements into three sets of symmetrical graphics.

Fig. 5.
figure 5

(Source: Editor’s self-painting)

The brief illustration of simplicity law

Full size image

This simplification tendency, in the application of interface design, generally uses symmetrical, balanced or appropriate proportions of the composition method, which can simplify the process of user cognitive page layout, highlight key points, and speed up the user identification information.

Flexible use of the four basic principles, has an important guiding role in the interface design, can more rationally design the interface layout structure, clarify the primary and secondary relationship of each interface element, thereby designing the user to more easily obtain the required information and experience a better interface.

3 Application of Gestalt Psychology in Layout Design of Main Interface of Stadium Monitoring System

3.1 Venue Monitoring System Interface Function Requirements

The article relies on the venue monitoring system interface design project for design and application research. The project design requirements have the following three points: the interface visual effect is innovative, which is different from the conventional interface and effect; the interface style needs to reflect digital, scientific and intelligent; The user experience of the interface system is good. When there is important information, the user can be reminded at any time, and the function menu is convenient and eye-catching. At the same time, the human-machine interface of the stadium monitoring system has many characteristics of visual information elements and complex visual information. According to the design requirements and characteristics of the interface in the project, here are mainly the three main interfaces - comprehensive data display, data monitoring, system management, combined with the basic principles of Gestalt introduced in the above analysis to study the layout design of the main interface of the stadium monitoring system.

3.2 Application of Gestalt Organization Principle in Three Main Interface Layouts

Comprehensive Data Display Page (First Page). As a comprehensive data display page, as the home page of the system interface, the information to be presented is more complicated, including temperature and humidity, people flow, operation status of major equipment, current energy consumption, the situation of each branch, and schedule. Therefore, in the layout design, the interface should summarize and sort out various information, and provide users with a variety of modules for finding information, thereby highlighting the hierarchicalization of information and making the interface expression clearer. As shown in Fig. 6 is a comprehensive data display interface. The overall interface layout utilizes the principle of simplicity, and the grid layout is formed by the distribution ratio of the sizes of different regions to form a layout frame structure. This attributes elements of different content, color, form, size, format, and so on to a unified and orderly grid, and ensures that as many of them are displayed in an effective space. Cleverly reduces interference between elements, greatly improving visibility [10] will highlight the module of information in its central location, simplifying the process of user-aware page layout, highlighting key points, reducing visual confusion and speeding up user identification.

Fig. 6.
figure 6

Integrated data display interface (Source: Editor’s self-painting) (Color figure online)

Full size image

The navigation bar at the top of the interface contains multiple function panels, each of which contains a large number of information display modules. The diversity of functional interfaces increases the complexity of the design. In order to make the interface simple and convenient, and the information transmission is clear, according to the principle of similarity, three different functional modules are arranged in a line, and the whole blue light-emitting wire frame is used to attract the line of sight, highlighting the digitization, technology sense and intelligence. The interface style, on the one hand, is grouped with elements that are emphasized in a uniform frame. It is illuminated on the background of the selected function module, which reflects the interactivity and brings comfort to the user. It conforms to the user’s first use of the navigation function classification and then pay attention to the usage habits of the content. The environment monitoring system module interface in the upper left corner of the interface, in which the ring graphic uses incomplete ring graphics combined with small light spots to represent information data and functions. According to the principle of closure, we can see the incomplete ring visually, but it does not strongly feel the fragmentation of the ring figure, and automatically fills in the blank part in the perception, so that the information transmission is clear and clear.

Data Monitoring Display Page. Figure 7 is the data monitoring display interface. On the left side of the interface, because this interface needs to display the monitoring interface display of various functions such as building automation, elevator system, HVAC, public lighting, video monitoring, etc., the diversity of functions is often Will increase the complexity of the design [11]. According to the principle of similarity, the information of these different functions is expressed in the same blue wire frame to unify the picture. Each function module is distinguished by size and brightness, and at the same time, the selected function information is illuminated and the form is enlarged to highlight its state. Make the overall functional area, the information is orderly and clear.

Fig. 7.
figure 7

Data monitoring interface (Source: Editor’s self-painting) (Color figure online)

Full size image

On the machine state display interface at the right end of the interface, using the principle of similarity, the shape and arrangement of different mechanical categories are consistent, so that the interface remains neat and orderly, and that each module has the same properties. However, the colors of different states in the module are distinguished from each other. During the use, the user can clearly understand the different state feedback of the machine represented by each color, and meet the requirement of quickly obtaining information.

System Management Display Page. The system management display interface is shown in Fig. 8. The layout information module is located in the middle of the interface. The entire module interface does not use segmentation lines to distinguish each piece of information. Instead, the proximity number is used to adjust the number, personnel, time, and location. The left and right spacing of information such as content, notes, etc., allows the user to clearly know the corresponding top information. Using the principle of similarity, the bottom color distinguishing module is used at the top, and the function of the top navigation is distinguished while the same form of expression. In the same way, the light color background color is used at the lower end to indicate the effect of the information selection, so that the interface is clear and clear.

Fig. 8.
figure 8

(Source: Editor’s self-painting)

System management interface

Full size image

4 Conclusion

Firstly, the paper analyzes and introduces the research background, and at the same time puts forward the problems existing in the monitoring interface of the stadium. Through the reading and research of related literatures, the feasibility and necessity of applying Gestalt psychology to the interface of the stadium monitoring system is theoretically determined. Secondly, it summarizes the psychology of Gestalt, analyzes the relationship between Gestalt psychology and interface design, and analyzes the four organizational principles of Gestalt theory. Thirdly, the specific design requirements of the actual project main interface design are put forward. Based on the Gestalt psychology theory, the basic principles are applied to the interface design of the stadium monitoring system, and the Gestalt psychology theory is analyzed and verified. The interface design information is more clear and clear, and the user can quickly and conveniently obtain the demand information, so that the user has a good user experience in the interface interaction application process. The main conclusions of the study include:

  • Based on Gestalt psychology, this paper analyzes the characteristics of the human visual system to understand and simplify the overall organization of things. Analysis of human-machine interface design has learned that its fundamental purpose is to enable users to obtain demand information more quickly and efficiently, and to provide a good interactive experience. The principles of the two are just right, so the enlightenment of applying the basic principles of Gestalt psychology to the interface design of the stadium monitoring system is generated;

  • According to the design requirements of the venue monitoring system interface, the basic framework of its main interface layout is derived;

  • Through the analysis and summary of the four principles of Gestalt psychology: the principle of proximity - element classification, similarity principle - regional division, closed principle - complete form, concise principle - highlight key points, Apply these four aspects to the actual case interface, and analyze and verify the Gestalt psychology theory.

Through the discussion of this article, although many knowledge about Gestalt psychology and interface design has been enhanced, based on the format tower psychology, the layout design of the main interface of the stadium monitoring system is studied, but there are many shortcomings. It is hoped that the relevant research results can provide some theoretical basis and reference for the venue monitoring interface design.