(UX Design)Balancing information and its expressiveness - Analysis of UI Information Presentation of Games

01 information level of game UI interface and its expressiveness

The information level of game UI interface is important for users to obtain effective information. It reflects the logical structure of information presentation in the game interface. The visual effect and visual method to deal with such information structure will affect the completion of game tasks, the psychological experience, and the efficiency of information communication.

Information design refers to the concept that the design makes complex information clear to present and easy to understand. As the amount of information on the Internet is huge and the user's time is limited, game designers want a game to be more eye-catching. To capture users, we must explore and improve the UI and how the information will present. The design of game UI cannot escape the limitation of the "container" of mobile interface.

If the information volume is too large than that the container can bear, the information structure will become complicated and users will need a longer time to understand the concepts. Therefore, designers need to design a reasonable information architecture to shorten the time for users to form a concept. Conversely, if the amount of information is small and the container can accommodate this amount of information, then the simpler the information architecture will be and the shorter the time for the user to form a concept will be.

So what kind of information structure and level is excellent, taking into account expressiveness and information?

"Excellent Information Level" mainly has these two features:

1. Moderate contrast between key information and secondary information

2. Clear hierarchy of information and modules.

02 Visual design and presentation methods

How to design the information hierarchy for better visual presentation?

1. Plan the element size of interfaces

In the initial stage, the designer needs to select the right elements and information and plan their internal logic. By arranging and planning the size and position of the visual elements, the importance of the information can be reflected visually which can guide the user's eyes. Therefore, designers can build element information layers by varying the size of the gradient. For the first-level headings or key information, we can appropriately increase the font size and thickness, which enables people to grasp the key points of the interface at a glance. In many cases, distinctions can be made with the help of color, word weight, and light and darkness. We can make the more important text larger, with a thicker font and more vivid colors to make the color contrast with the background.

2. Add graphics to emphasize the focus

Sometimes when there are many layers on one page or restricted by some design specifications, the change of font size and weight cannot distinguish the layers. We can add modifying elements to emphasize the focus of the page.

3. Use color to distinguish information

Good color matching often relies on the designer's aesthetics. But reasonable color matching must exist with the support of reasonable color matching laws and color matching methodology.

The light or darkness and the warm or cool color can help to distinguish the information hierarchy. When the information hierarchy of the interface is not strong enough, you could consider how to improve the visual hierarchy of the interface. In addition to the size and distance mentioned above, color, as a medium of information transmission, can play a role in regulating the visual hierarchy to a certain extent.

Color is not only an effective tool to divide space, but also can effectively infect users' emotions. Warm colors such as red can make people excited, while cool colors such as blue calm users down. Different color combinations can enhance the expressiveness of UI information.

Therefore, the reasonable use of color can produce more obvious effects in the construction of information hierarchy. Different colors can be placed on UI elements to create a subtle hierarchy. For example, colors such as white and gray can often be used as background colors for large areas to contrast with other colors.

Color can also play a role in information organization and personality expression. Using eye-catching contrasting colors in special elements (such as buttons, error messages, or hyperlinks) will draw more attention to users.

The following are some tips for color matching.

a. Follow the principle of 60% 30% 10% which is the best ratio to achieve color balance.

Using the main color in 60% of the space and auxiliary colors in 30% of the space can balance the visual fatigue caused by too much of the main color; the remaining 10% of the space is for the accent color, which is for less important elements but needing differentiation. In the actual UI design, we need to use a greater number of colors, but not more than 7 hues (note that not 7 color values). Each hue can also use its saturation, brightness changes to break down the rich color matching.

b. Get inspiration from nature

Try to use colors that people are familiar with, such as the common colors in nature. The color scheme inspiration from nature is natural, and it can make your design more suitable to user's aesthetics. Art is a direct reflection of nature, which is a very valuable resource and worth making good use of.

c. Monochromatic color matching

Use one color as the main color with several neutral colors.

d. Adjacent color matching

Choose adjacent colors such as blue and green, red and orange, yellow and orange in the color ring to match.

e. Low-saturation color scheme

Choose colors with a high degree of gray, also known as "Morandi colors".

f. Complementary color matching

Generally using similar colors in a large area and the complementary colors in a small area can help attracts users' attention. Or using cool and warm color matching makes work rich and colorful.

g. Readability is an important factor in any design

Colors should be clear and easy to read, especially when dealing with text. Therefore, contrast is critical to the visual effect; too little contrast will make the interface appear gray and blurry.

Clear contrast usually uses the two poles of color, black paper with white words or white paper with black words. To make the content clearly on the colored backgrounds, you need to match pure white or high brightness text rather than gray text. You should also pay attention to avoid colored backgrounds with complementary colors and brightness close to the text, because these two matches will produce a "tremor effect ", issuing a visual effect of halo, making it difficult for players to read.

Highly saturated colors tend to attract people's attention. In short, information that you wish to highlight can be differentiated by using color contrast, either by changing the hue, increasing the saturation, or increasing the contrast, thereby layering the information.

4. Bigger spacing to guide the sight

If you want to separate two irrelevant elements, is it natural to use dividers? Sure, but this approach introduces more information noise and may affect the overall hierarchy. It would be much more comfortable to use white space or negative space.

Among the Gestalt principles is the proximity principle, which refers to that we tend to consider elements in similar positions as a whole. And research has confirmed that the projects with close range is more likely to be considered as a whole than projects with similar shapes/colors. When elements are close to each other to a certain degree, even if they have completely different features, we are more inclined to consider them as related to each other. This principle can also be used in interface design. Spacing out the different modules appropriately makes the distinction between information modules more obvious. Also, use shadows and dividers to create hierarchy, and use white space to isolate elements.

If you feel that the content block is too monotonous, you can enhance the visual attributes of this block according to your purpose of design. Adding a color bar to one side of the content area can enhance the visual attributes while giving emotions to the content of this block.

The color bar can be single color or gradient, depending on the visual information one wants to convey. The color bar can also be functional. Of course, this is largely used on relatively plain pages and is less useful if the page itself is already fancy.

5. Utilizing dynamic conversion

Many game interfaces add special animation effects to enhance the user experience. In some scenarios, the use of special effects allows the game to interact well with players. Using dynamic transition effects in continuous pages can make it easier for users to remember the experience route, and smooth motion transition effects make users have a more coherent experience while using or playing.

Excellent game UI ensures the clarity of information modules and interface levels while highlighting the expressiveness. When designing, it is necessary to sort out the logical relationship between information and improve the expressiveness of the interface through graphic elements, color schemes, and dynamic special effects.