10 product details analysis to show you how big manufacturers design

As designers, we are dealing with various applications all the time. In the process of experience, there are actually many small details that need to be explored and thought about, so we must not underestimate it. Many product details are behind the purpose of attracting more new users to join, browse, retain, pay/convert, etc., so as to ultimately achieve the improvement of user service/experience, the interests of content producers and the commercialization of the enterprise itself.

「WeChat」Text Input: Intelligent Matching of Emojis

1. Product experience:

When you enter text in the text box of WeChat chat, the system will intelligently filter out emoticons with similar meanings to the text in the added emoticon album based on the meaning of the text, and you can send it directly with a click.

2. Design Thinking:

WeChat is the most mainstream social software, and it is a must-have for everyone, from children who have just learned to walk to the elderly who are 80 years old. The main function of WeChat is to chat (not to mention the many other functions). I believe that many users have added a lot of emoticon albums to the WeChat toolbar, which can be used for chatting, picture battles, simple text replacement, etc. However, because there are too many emoticons added, it is often difficult to find emoticons with similar meanings to the text you want to send in a short time.

When typing in a WeChat chat, the system will automatically match emoticons with similar meanings to the text. Although this feature has been around for a long time, its significance is definitely not just the "convenience" it seems on the surface. For example:

• Sometimes, in order to avoid typing, you can just reply with an emoticon, which is simple and clear;
• Deriving meanings similar to the text, emoticons can be used to enhance the tone and supplement the text;
• Compared with cold and temperatureless text, emoticons are closer to the user's psychological model, creating effects such as fun and empathy.
• Words that are difficult or embarrassing to say can be expressed through emoticons, which can avoid causing unpleasantness in the communication process in a playful way.
• …

It is precisely because of these functions that the importance of "automatically matching emoticons when typing" can be highlighted. The operation is more convenient during use, especially when adding too many emoticon albums, you no longer have to spend time searching for suitable emoticon packages. The automatic matching function brings a pleasant experience to users, increasing the frequency of use and user stickiness.

"Bodong" top navigation: clever transition of underline

1. Product experience:

When experiencing the Bodong APP, for all pages with a top navigation bar, when switching navigation, the underline of the title smoothly transitions in the alien style of sound waves.

2. Design Thinking:

The top tab navigation of an APP is second only to the navigation of the bottom tab bar. It is similar to the module classification of a main page. When there are many but not too many types, the top tab navigation is the most appropriate method. It is not only easy to attract users to operate, but also can be fully displayed by sliding left and right to convey more information.

The Bodong APP also uses this popular navigation style with underlined top labels, but the most eye-catching thing is the transition style when switching. When switching navigation, the underline of the title smoothly transitions in the shape of a sound wave, like a wriggling worm. This style is used to differentiate and increase the frequency of user operation. Using the brand element in the shape of a sound wave as the transition of the underline can make users have a deeper impression during the operation, and what they remember is the brand itself.

"Lying flat" brand elements: Integrating into the user's psychological model

1. Product experience:

From the desktop startup icon to the startup page, and then to the flat images, empty states, system avatars, etc. of each page, Tangping APP perfectly integrates the user's psychological model and brand elements, leaving a deep impression on users.

2. Design Thinking:

Most APP applications have integrated brand genes, but they are basically for publicity and promotion, to make users remember or show themselves, and often ignore the experience the product itself brings to users and the commercial value it generates. It is like a person with a gorgeous appearance but no soul, and the final result is far from the company's expectations.

Tangping APP has done an outstanding job in integrating brand elements. Desktop icons, startup pages, system elements and empty pages are all displayed to users in the form of visual elements based on the user's psychological model, which is closer to the real environment. Graphics are used to express psychological feelings in advance, allowing users to have psychological changes to increase emotional memory. For example: let the words, phrases and concepts familiar to users be graphically represented instead of system-oriented terms, and follow the conventions of the real world through graphical descriptions, so that information appears in a natural and logical order, giving users a more intuitive feeling, lively and interesting, and making users unforgettable.

JD.com adds a new address: access the clipboard and import address information

1. Product experience:

When creating new consignee information in the JD APP, enter this page and the system will automatically access the clipboard. If you have copied information similar to the address type, a pop-up window will prompt you to confirm the information content. Click Paste Now and the system will automatically separate the information type and enter it into the corresponding form input box. It is very practical.

2. Design Thinking:

Among the many e-commerce apps we use, most of them have entered address information. In addition to buying goods for ourselves, we may also buy goods for others or buy them as gifts. Regarding the delivery address, the most common way is for others to send us the delivery address through QQ or WeChat, and then we add the address in the APP ourselves. However, it is difficult to remember so many types of information at once, so we need to switch back and forth between the APP for adding the address and the APP for receiving information to finally complete the entry of the address. Some of the devices are relatively old, and when switching between multiple applications, the application will automatically end the process or crash. It is hard to explain in a few words.

JD APP eliminates this trouble when adding a user's delivery address. You only need to copy the address information and enter the new recipient page. The system will automatically access the clipboard and display the copied information through a pop-up. After pasting, it can automatically distinguish the information type and automatically enter it into the corresponding form input box. If there is an error, you can modify it. This makes adding new addresses easier, greatly improves operational efficiency, and saves time costs.

Checking logistics on Taobao: The transportation track on the map brings psychological comfort

1. Product experience:

In Taobao orders waiting to be delivered, when checking the logistics, pull down the text area of ​​logistics to see the vehicle's transportation track information on the map.

2. Design Thinking:

After we buy the products we like in e-commerce applications, the most important thing we care about is the logistics information. From the moment we place the order, we will check it from time to time. Many users do not do it for urgent needs, but want to quickly experience the psychological satisfaction after receiving the products. However, things often go against our wishes. After checking it more than a dozen times, we will feel more anxious.

When checking the order logistics on the Taobao APP, scroll down the page and drag the text information to the bottom, you can see the movement track of the logistics vehicle on the map. Compared with the pale and powerless text information, there will be a sense of reality that the goods are getting closer and closer to you, which brings users a sense of psychological comfort. In addition, the update of map track information is relatively delayed because when the goods arrive at a station, the staff needs to manually enter the information to change the status before the map track is updated. Because express delivery companies often operate in large quantities, they will update together after many express parcels arrive. Therefore, it takes a long time for the previously arrived express parcels to see the updated track on the map. Although it is delayed compared to the real information, it is very likely to reduce the user's time expectation and bring unexpected surprises. Speaking of unexpected surprises, some people may not understand or agree. Let me give you an example:

When we shop on an e-commerce platform, the merchant says that we can receive the goods in 2 days, but it takes 3 days to receive them. At this time, we will be upset and give bad reviews, complaints and complaints. However, if the merchant says that it will take 4 days to receive the goods, we may go to other stores to check or make a few complaints and place an order. We will also receive the goods in 3 days. At this time, we must be excited. Good service and fast logistics have become synonymous with our mood at that time. This is an unexpected surprise. In the same way, the track information on the Taobao logistics map is relatively delayed. It is very likely that the map shows that the courier is still in the next city, but the next minute you receive a call from the delivery person saying that it has arrived downstairs. At this time, wouldn’t you be excited?

Tencent Maps navigation logo: super fun theme switching

1. Product experience:

When using Tencent Maps for navigation, click on the car logo to select your favorite theme. After downloading and using it, the original car logo on the map will become your favorite image, which is funny and interesting.

2. Design Thinking:

Almost every young user has a map application installed on their phone. They will open the map application whether they are driving, cycling, walking or looking for a location. Conventional map functions can meet the needs of users, but what are the better details that can increase user stickiness? Although Tencent Maps has a much smaller user base than a certain German map, it still has a large number of users through innovative design and promotion through various original channels.

Tencent Map APP adds various themes to the navigation logo in an interesting way. After downloading your favorite theme and switching, the original logo on the map will become your favorite image. As we all know, Tencent Games is an insurmountable mountain in the entire industry. Among many themes, the images of "Peace Elite" and "Honor of Kings" are the most familiar to users. Users can choose game characters, motorcycles, karts, etc. as logos in map navigation. You can imagine what it feels like to ride a motorcycle, Angela sprints, and drive a kart on the map. By integrating various existing resources as themes, the Tencent team has created an interesting and personalized experience for users, bringing surprises to users to enhance user stickiness.

(When you are tired of driving, the navigation changes to a "chicken-eating" character image. Do you feel refreshed and have the urge to play a few rounds of chicken when you arrive at the service area?)

"Tencent Animation" Cancel Collection: Is it that easy to cancel successfully?

1. Product experience:

Experience the Tencent Comics APP. When you click to collect a favorite animation, a frosted glass effect will pop up from the top to indicate that the collection has been completed successfully. If you cancel the collection, the system will pop up a window to remind you, and combine emotional and provocative copy to persuade users to give up the current operation.

2. Design Thinking:

Collecting (following, liking) is an operation that every user has done, and it is also the most common function of every application. Although it is common in various applications, the interactive style of collecting is the same. The commonly used toast style is to click "Collected successfully" and then click "Cancel Collection".

The collection interaction of Tencent Comics APP is different. When you click on the collection, a successful collection prompt will pop up from the top to the bottom, which is in line with the user's regular visual browsing habits from top to bottom and from left to right, and the operation results will be fed back to the user for the first time. When canceling the collection, the system will pop up a window prompt, and combine it with a teasing copy to try to retain the user to give up the operation. Compared with the previous conventional way of canceling the success immediately after clicking, this pop-up window-style secondary operation will definitely have a retention effect, just like there is no loss if the retention fails, because the user comes to cancel the collection; if the retention is successful, it will achieve its own purpose. In addition, the user's main operating motivation is "cancel the collection", and Tencent Comics' pop-up window reduces the main motivation to a secondary level, and "continue to collect" rises to the main operation, which is easy for users to misjudge. In the case of a fast operation speed, the user quickly clicks the main operation button, thinking that the collection has been successfully cancelled. In fact, the operation is not successful at all, which is equivalent to blocking the user's operation in disguise.

(At this time, some users may complain that misleading user behavior is not friendly, which is actually not difficult to understand. I remember that before, I downloaded a PC software named "xxx". Later, when I uninstalled it, 5 pop-up windows repeatedly appeared to retain it. The misleading way annoyed me, so I made up my mind to uninstall it no matter how useful it is. From the perspective of the enterprise, it can be explained like this: you want to abandon me after you use me, and I have tried to retain it several times but it didn't work. Do you still have the right to blame me for being unfriendly?)

「Alipay」Ant Forest: Take a walk through the shortcut

1. Product experience:

By browsing Ant Forest using your payment account, you can quickly jump to the Ant Forest page of your friends who have energy to collect. After all energy has been collected, continue the same operation until all your Alipay friends' Ant Forest pages have no energy to collect.

2. Design Thinking:

Ten years ago, the first thing many users did when they woke up every morning was to enter QQ Farm to steal vegetables. Looking back a few years later, it seems so childish. But ten years later, many users still pick up their phones as the first thing they do when they wake up in the morning, but this time they don’t steal vegetables, but enter Ant Forest to collect energy. Ant Forest is a public welfare game that makes many users feel a sense of accomplishment for contributing to public welfare, and it is deeply loved by the people.

When I was playing Ant Forest recently, I found a "visit" button in the lower right corner. Click it to quickly jump to the friend's Ant Forest page (provided there is energy to collect). After the energy is collected, continue to repeat the same operation until there is no energy to collect. It is very convenient. Before collecting energy, you need to click on the friend list in Ant Forest separately to enter, and then return to change friends after the operation is completed. Repeat the operation. The launch of the "visit" function entrance simplifies the complex operation of repeatedly clicking one by one to collect energy, making energy collection more efficient and convenient, saving a lot of time.

"Taobao" Tab Bar: Hidden Icon Secrets

1. Product experience:

Enter the Taobao app, the homepage icon in the bottom tab bar is the brand logo. When the page slides to 1.5 times the size of one screen, the homepage icon turns into a small rocket. Click it to return to the top directly.

2. Design Thinking:

Among the apps we have used, at least 80% of them have a bottom tab bar, which is divided into several large modules. As we all know, many large companies use their logo as the homepage icon of the bottom tab bar when the app stays on the homepage. After entering other functions of the tab, the logo is replaced with the homepage icon style, which is equivalent to playing a dual role, that is, it can be used as a module entrance and can also be used for brand communication. Taobao APP is one example, but the product team does not seem to be satisfied with the existing dual functions, and is still exploring more value and improving user experience.

The third function of the homepage icon in the Tab bar of Taobao APP is "Back to Top". When the page slides to 1.5 times the content of one screen, the homepage icon turns into a small rocket, and you can click it to go back to the top directly. In fact, before Taobao, there were a few apps that had this operation, but they were all hidden. iPhones can also go back to the top by directly clicking the status bar. But Taobao's user experience is indeed much better: ① The icon automatically changes after sliding up, and the clear visual prompts can save users' thinking time and quickly understand at a glance through visual communication; ② It is placed in the bottom Tab bar, very close to the thumb, shortening the distance between the finger and the device operation, making it easier to operate and improving convenience.

"Ziru" function icon: a light gradient full of mystery

1. Product experience:

Entering the homepage of the Ziru APP, the lightweight gradient icons in the King Kong area have a slow rhythm and a natural and soft transition, exuding a fashionable and mysterious atmosphere. At the same time, the cards in the porcelain area also have beauty through the lightweight gradient color matching.

2. Design Thinking:

An APP homepage is the core part of the application, responsible for attracting and converting users, and has a direct relationship with the company's benefits. Therefore, a product team will put a lot of effort into the homepage. Whether it is users or designers, the various and endless homepage design styles and styles they see will cause visual fatigue after a long time.

The visual style of the Ziru APP homepage is unique in the industry, especially the King Kong area icon (other page icons and illustrations) creates a soothing and healing immersive feeling through flattened light gradients. At the same time, light gradients are also a very popular color combination at the moment, making the overall color uniform and rich, revealing a fashionable and mysterious atmosphere. It can also reduce the visual burden of users, not only beautify the interface, but also play a role in emphasis and eye-catching, making users want to control and increase click-through rate.