User Experience analysis: structure design in Interface Design

　　

 

The elements at the visual level of the build interface have the color visibility, the size of the image and text, and the most basic content structure.

Structure Design refers to the process of grouping the interface content and designing the information and data in the interface to make it structured.

A good structure design can make the Interface Information clearer and faster. What if we design the structure?

Structure Design-content grouping

Group by line, frame, and background color

This is the most common grouping method and has a long history in the UI design.

Group by line

　　

 

Use box to group

　　

 

Use background color grouping

　　

 

Whether it is a line, a box, or a background color, it is a visible boundary. The purpose of introducing these visible boundary is to make the information clearer, however, the addition of these visual elements also increases the clutter of the interface to a certain extent. Therefore, more and more users are grouping interface content using the distance of space.

Use the distance of the space to group the interface content

　　

 

From XP to win7, the change is obvious.

　　

 

The same is true in web design. More and more new interfaces adopt minimalism, with only a few lines and background colors retained. More often, they are grouped by widening the distance between blocks.

People who like to explore it may ask why we can clearly group information based on distance without the visible boundaries?

In the early 20th century, a German team of psychologists studied this phenomenon in an attempt to explain how human vision works. They observed many visual phenomena and proposed the Gestalt principle. To address this phenomenon, it is the "closeness" principle.

Style tower principle: closeness

It is said that the direct relative distance of objects will affect our perception of whether they are and how they are organized together. Close objects seem to belong to a group, but those that are far away are not.

　　

 

The stars on the left side are relatively close in the horizontal direction, so we see three rows of stars. The stars on the right side are closer in the vertical direction, so we see three stars.

I wonder if the reader has noticed another phenomenon. We naturally think of the stars as the group on the left and the Group on the right. Why? The distance between the two groups is the same as that between the columns on the right. In fact, this is another principle "similarity" in the format tower principle ".

Style tower principle: similarity

The similarity principle points out another factor that affects our perception grouping: if other factors are the same, similar objects seem to belong to a group. In, the grouping factor is the arrangement direction.

Group interface content by element Similarity

Application of this principle

　　

 

The "document view" group has similar icons, and the "show/hide" group has the same checkbox. The two groups of information are clearly differentiated.

Another application in verification code

　　

 

Group by text color.

The above section describes one layer of structure design, content grouping, structure design, and structural presentation of information and data.

Structural design-structured presentation of information and data

When people browse the Web page, they often do not read every word carefully, but scan quickly to find the target information. The information related to the target is very sensitive, but other information will not be noticed even if it is seen. Therefore, it is important to easily browse and highlight the key points.

Structured data can be viewed and understood faster

　　

 

With the same data, the left side is messy and difficult to distinguish.

Structured numbers are easier to read and remember

Card number design for bank cards

　　

 

You can view the postal savings card and the bank card number of the Industrial and Commercial Bank Card respectively. I believe that the number of the postal debit card is hard to be reported at one time without error, and I am not sure whether it is correct or not.

In addition, even if it is not a whole piece of data, separate fields can provide a useful visual structure.

　　

 

Easy to understand the structure of information at the visual level

　　

 

In the left and right sections, the structure on the right is clear.

In the web environment, structured information and data are very necessary. Users can quickly find the desired information during the process of quick browsing.

Among the three elements of the interface design, the structure is the foundation, which deserves in-depth research. In addition, the use of color and size can be used to design a friendly interface.