With the release of the new brand image upgrade of Tencent Weiyun 6.0 version, the 6.1 update will be dedicated to enhancing the brand experience. While the project members carefully considered how to optimize the overall brand experience, they also did not forget to unify and refine the details of each module. Among them, empty pages are also being planned. The following will comprehensively analyze the design of empty pages from the three dimensions of "experience-innovation-design".
1. Experience - very easy to understand
Empty states don't exist all the time, and not many users can see them. However, the design of an empty page is necessary. The meaning is to explain the current page status to the user. Users need to know their current location, environment, and situation at the first time, and then judge their next behavior. From the most basic functional point of view, an empty page should tell the user: what is the content of this page? Why is the content empty? How can I get the content?
Due to the rich functions and scenarios of Tencent Weiyun, there are correspondingly many empty pages in the APP. In order to improve the good experience of empty pages in the whole APP, in the early stage, we re-collected and integrated all empty scenes in Weiyun, and also analyzed the user's behavior according to the scenes, and simplified the types of empty pages into three types:
Indicative graphics + operation button guidance;
Pure description text.
In the process, it is hoped to guide the user to complete the operation as quickly as possible and reduce the cognitive burden of the user.
The copywriting has also been optimized, and the original "XXX is empty" has been adjusted to "no XXX". The purpose is to inform users of the "no" status of this page more quickly and bluntly, and the second is to design a series of creative illustrations. In conjunction with it, concise copywriting can help to set off the splendor of the illustrations.
Second, innovation - intriguing
It is not easy to create an innovative design for empty pages, especially empty pages are a relatively normal and boring link... Of course, analyzing user psychology first is the key. We divide users into two categories: new users & old users.
A new user is exploring the product, and any operating experience will affect whether they want to stay. Maybe he doesn't know what the function here is, why he jumps here, how to use the function here and a series of unknown items;
Old users are relatively familiar with functions, content, operations, etc. In a sense, an empty page is just a conditioned reflex prompt for them, and they will not pay attention to the content of the screen at all, and even some old users hardly When there are empty scenes.
But no matter what type of user it is, there must be one thing in common – curiosity. Curiosity is enough to drive a person's attention and favorability to what is produced, so that he can directly transform from passively receiving information to actively understanding information.
We think with "curiosity" as the starting point, and extract the design key word - "intriguing". The design goal of the empty page is also positioned as "empty egg page". I hope that users can find some small surprises in the boring, and smile knowingly.
According to Tencent Weiyun's brand tenet of "intelligence into emotion", during the design of the brainstorming session, we constantly think about the commonalities between things in life and the scenes that appear on empty pages, and collect them all (the following are all for Empty state indicates). When the picture is read together with the copy, the sense of humor and picture is still very interesting, and the simple picture and text can increase the imagination.
Creative Ideas & Sketches
Here's a creative explanation:
a. File-Time: The Rabbit in the Magic Hat
b. Notes: pencil sharpening (waiting for you to create new notes)
c. Sharing group: plug-in row full of smiling faces (share at any time, full of joy)
d. New folder: swimming pool without water (there is no space here)
e. File - root directory: the hourglass that has been leaked (not touched for a long time)
f. Share link: Unfolded paper airplane (unfinished content so paper airplane can't take shape and take off - can't share)
g. Search: Lonely Lighthouse (can't find anything nearby)
h. Video: Unscheduled slate (waiting for you to start shooting)
i. Recycling Bin: Empty Milk Crate (No bottles in the recycling bin)
j. Photo-Album: A pile of photos stacked into a tower (not yet organized into a book)
k. Location-city: Lego building simulation building (you came to a fake city)
l. Photo-Location: Explore the labyrinth (no location information)
m. Favorites: blank stamps (no collection significance)
n. Search-Picture: Empty frame in the exhibition (no content displayed)
o. Album - Character: Scarecrow (Dummy - no character info)
p. search-music: guitar with broken strings (can't produce music)
q. Search - document: printer that prints out or white paper (no content to print)
r. Downloaded file: Empty Egg Carton (Download - Laying Eggs)
s. File Safe: Cardboard boxes packed in layers (multiple protection)
t. Task list: The astronomical telescope is empty (no target)
u. Album - intelligent classification: Rubik's cube that cannot be completed (difficult to identify the complete appearance)
v. Search - other: just one piece of the puzzle can be completed (the result is only one piece is obviously not correct)
Of course, in the process of brain explosion, due to the continuous divergence of creative thinking, many other interesting related objects are also associated in the middle, and the final selected objects are also carefully selected, which are relatively well-understood representative objects.
3. Design - keep improving
After the creation, how to choose a suitable design style to match so that the effect can be highlighted without being eye-catching? After several rounds of drawing attempts, the team decisively chose a single-line minimalist style that can represent the b2b data attribute of "geek" as the main visual style (the surface is neat and cold, and the inner emotion is rich). Below is the redrawn illustration style.
Overview of the illustrations, although the style is the same, but you will find that it produces two different visual angles (front view + parallel perspective). In order to strengthen the unity of the overall style of painting and to satisfy the compatibility of the angles of all elements, we have unified the angles as "parallel perspective", and only use a specific angle as the drawing standard, which is better in the embodiment of details.