Editor's Guide: For a product, the most important thing besides its own content is design. Everyone has their own different aesthetics and ideas for design, so how to make a good design? This article introduces how to do a good job in design from the perspective of subtext, let's take a look at it!
In my design work, I often hear a variety of design suggestions, including but not limited to:
"This page doesn't feel right"
"Need to add a little more ambience"
"This information is a bit dry"
…
These questions are as elusive as the colorful blacks. This article tries to observe these seemingly uncertain problems from another perspective, and talk to you about the role of "subtext" in UI design.
Article Outline:
Why think about the subtext in design
What is the subtext in design
The role of subtext
Write at the end
First, why think about the subtext in design
My thinking about subtext originated from the design of the "WeChat Game Business Card" - the WeChat game business card is a business card that displays the player's game information in the game app, so that the player can view other people's WeChat game information in different games, so as to facilitate social activities between players.
At that time, the design adopted a design language consistent with the style of the WeChat client, which strengthened the channel cognition of WeChat, and the information structure of the interface was simple and clear.
However, this design did not get good feedback after it went online: some users said that it felt too blunt, like a small advertisement; some users said that they did not want to click on this thing when they were playing a game.
Why is there a problem with simple and clear design, which makes me start to think: Are we missing something when we do design? To know what's missing, you need to figure out what the UI design is designing.
What UI design is designing, it is not difficult to get the following answer from the book and network materials:
Packaging and arrangement of design information
Design is the art of organizing information
The essence of design is communication, that is, the exchange of information
…
One of the words that cannot be avoided is "information".
"Information" is the most basic element of visual design, designers through the integration of text, photos, sounds and other information, to attract the user's attention, so that users can more easily pay attention to the core content of the page.
I've found that a lot of times, in addition to intuitive and readable information such as text and photos, the user's attention is often drawn to other things, and I think it can be summarized as subtext in the UI.
Second, what is the subtext in the design
There have long been discussions in the industrial design world about "subtexts of objects", such as don Norman, who is familiar with everyone, saying:
Objects can exhibit two kinds of affordance, one is the physical quality that the object actually assumes, and the other is the indicative quality that the user perceives the object. ...
The suggestive qualities here are the subtext conveyed by the object.
Two examples, both from Naoto Fukasawa's design: the left picture does not have any text to let people know that this is a bottle of banana juice, because it is painted like a banana, conveying the suggestive "this is a bottle of banana juice". The picture on the right is a table lamp, and the user will naturally put the key, watch and other small objects on the base of the lamp, because the shape of the base is like a tray, conveying the promptness of "small objects can be held".
Just as the information of an item can be divided into "physical characteristics" and "indicative characteristics", I think the information in the UI meter can also be divided into "direct information" and "subtext information" in the same dimension.
Designers construct visual subtexts through color, shape, pattern, texture, etc., in order to create an atmosphere, evoke user emotions, or trigger users' memories and thinking.
Third, the role of subtext
Here I would like to explore the three roles of the subtext I feel in my daily work: to convey hidden information, to build emotional connections, and to reduce cognitive costs.
1. Pass hidden information
Back to the WeChat game business card mentioned earlier, looking at this interface through the subtext, I found that the interface of the first few games is mostly dark style, and the subtext is like saying: Start playing intently. You want to give players a focused, immersive flow experience.
The design of the game business card is bright and clear, and the subtext is an efficient and calm platform function. The difference in subtext between the two may be the reason why users find it strange.
If you want the player's flow experience not to be disturbed, you need to let the business card pass a visual subtext that is consistent with the game UI. So I added a generic game element embellishment, and changed the card to a dark mode as a whole, getting the design of the new version of the game's business card.
The following is a comparison between the old and new schemes, the new game business card through the transmission of the same subtext (focus, immersion) and the main page of the game, reducing the sense of abrupt insertion, compatible with most of the game style, so that players have a more coherent experience in the transition between play and social.
As can be seen from this project, subtexts convey hidden messages, and the use of these subtext messages can make the experience path more fluent.
2. Make an emotional connection
The example here is the design of the game gift station - the gift station is a small program that supports the giving of game props and game peripherals between players.
When in charge of the design of the gift station, the product manager often asks the question: Can this page have a more atmospheric feeling?
What is ambience? The question is as hard to fathom as colorful black. From the perspective of subtext, the problem seems to be simpler: in addition to conveying "direct information", more emotional information is transmitted to the user through visual language. Then I have a relatively clear design goal: to heat up the user's emotions through visual subtext.
The first step is to comb through the page and look for the power point.
Emotional warming is not to make all pages popular, we need to comb the use path of the gift station and find the design entry point.
According to the emotional concentration carried, the page of the gift station can be divided into a tool page that prioritizes efficiency, as well as a page that uses gifts to complete the user's emotional transmission. The latter is clearly the key to completing the emotional design.
Below is a screenshot of the main page of the old version, and I started with the core "open gift" page.
The second step is to tap into the emotional connection and complete the transmission of the subtext.
Back in real life, how do we wrap gifts? It's not going to be a plastic bag and you're going to put a gift in, but it's not too elaborate layer after layer.
I think the good packaging is appropriate, while expressing my heart, do not let the other party feel simple or too cumbersome and flashy. Simple and neat gift boxes plus cards with my heart written on them are often a good choice.
I tried to abstract the "gift box" and "card" into UI elements, the gift box expressed the act of gift-giving, the card with the names of both sides connected the relationship between the two people, put these two core elements in the page, and got a new "open gift" page. Just like the bottle of Banana Juice mentioned earlier, even if I don't read the interface text, I know that it is the friend of this avatar who gave me a heartfelt gift.
The final step is to use the exposure effect to unify the visual language.
After identifying the gift box as an emotional symbol, I expanded the graphic representation of three different dimensions: flat, micro-imitation, and strong imitation. In different pages, different weight-sensitive graphics are used, and the exposure effect is used to make the visual elements of "gift boxes" and "cards" appear repeatedly on various pages of the gift station, so that users can generate memory points for the gift station.
To summarize, by tapping the core emotional elements to convey subtext, you can amplify the emotional connection between users, enhance the user's sense of substitution, and then make the gift-giving behavior worthwhile.
3. Reduce cognitive costs
Taking the "Peace Elite Season Battle Report" as an example, at the end of the Peace Elite S12 season, we produced a season war report to review the player's wonderful performance during the season.
When designing the Peace Elite Season Battle Report, the challenge is how to express complex game data in a more intuitive and concise way, which in turn generates the desire to share.
Thinking about this problem from the perspective of subtext, the cold season data can be compared to the user's familiar things through visual subtext, and the subtext of familiar things can be used to explain the unfamiliar data, so as to facilitate user cognition.
For example, in the page of the total number of kills in the season, in order to visually display the total number of players killed in this season, we found the well-known concept of "floor height" in reality to visualize the game data, and the height pushed up by the box was equal to "several floors" to replace the number of kills, highlighting the number of people who were defeated. (In the Peace Elite game, the destroyed player becomes a small wooden box for storing equipment)
In the final sharing card, in order to more clearly show the player's strength level, the equipment level color system that gamers are familiar with is adopted: gray represents ordinary, green represents excellent, blue represents rare, purple represents epic, and gold represents legend. Different colors represent different levels of subtext in the game context, distinguishing the rarity of different sharing cards, in order to show the player's comprehensive game performance this season.
Summarize this case: when we want to explain an unfamiliar concept, we can visualize it as something familiar to the user, and use the familiar subtext to evoke the user's memory, so as to accelerate the user's cognition.
These are the three functions of the subtext that I often use:
Fourth, write at the end
Thinking about the subtext that may be implied in the design can help us look at the information in the interface in more dimensions. Sometimes, the most streamlined interface is not necessarily the best, the use of graphics, color and other design means to more intuitively depict the page story, convey accurate visual subtext, may help us better communicate with users.
Finally, I tried to answer the question that had bothered me at the beginning: Why is there a problem with simple and clear design?
At present, the answer I can give is: the "simplicity" we pursue is not the simplicity of the graphical arrangement, but the simplicity of the user's perception. Design is not just about establishing order, but about giving people a better feeling and experience with limited resources.
Author: WeChat game design; public number: WeChat game design
This article is published by @WeChat Game Design with permission from Everyone is a Product Manager. Reproduction without permission is prohibited.
The title image is from Unsplash, based on the CC0 protocol.