Analyze ten product details to see how big manufacturers design!

Preface

Meeting user needs and improving user experience are things that must be considered during the product design process. For example, how can we design products that are suitable for the elderly? How can we design products that are suitable for the elderly? How can we design products that are suitable for a specific scenario? Take a look at the design details in this article, which may inspire you.

WeChat

Quick Expressions – Keyword display, reducing interaction paths

1. Usage scenarios

In chat scenarios, emoticons are friendlier than text. Sometimes they can also ease the awkwardness of typing. How to quickly present emoticons to make communication barrier-free?

2. Design Thinking

Design goals: To solve the problem that the interaction path of emoticons is too long, which makes it difficult for users to choose, improve the usability of emoticons, enhance the fun of chatting, and reduce embarrassing scenes when expressing in text.

Design plan: When the user enters text, the emoticon package with relevant title content will be extracted and presented in the form of a dialogue window for 4 seconds and then disappears.

Two points here. First, the emoticon box is on the right, which means that I am sending content to the other party. There is a blank area on the left to better focus on the text box content. Second, the 4s display shows the emoticon content very well so that it is not invisible, and there is no need to close it again when there is no operation, which reduces the reading experience of long-term obstruction of the conversation content.

Just a small dot is displayed for the emoji package, which is a good experience. Each function of WeChat is used and then discarded, and the learning cost is very low. The reason is that it can understand user needs one step ahead and provide corresponding solutions. Use emoji packages more often to avoid awkward chats.

Bluebird

Owl Eyes – Move with your gestures to add highlights to your product

1. Usage scenarios

In focus mode, people are in a relatively concentrated working state, occasionally glancing at the remaining time to see how to integrate the product IP into the usage scenario.

2. Design Thinking

Design goal: To solve the problem of single page content in focus mode, combine with IP to increase interest, improve memory points and increase product stickiness.

Design solution: By moving the circular slider, the owl's eyes follow the slider's rotation. The eyes are a memorable point for the owl, so it does not go against the grain of the product. On the contrary, it helps to increase the fun of operation and add a memorable point to the product. The owl in the center is also in the visual center. Although the eyes are small, they are more prominent because of the focus.

WeChat Reading

Range perception – The current progress is clear in mind, and intelligent calculation is more attentive

1. Usage scenarios

When reading a book, if you read for a long time but only read a few dozen pages, your motivation to read will be reduced by half, especially for difficult books.

2. Design Thinking

Design goal: To solve the problem of not being able to perceive the reading time of the whole book and not being able to reasonably schedule reading, which leads to giving up halfway through reading. To positively improve the user's reading completion rate.

Design plan: WeChat Reading will record the reading time of the current book by the user. When reading 20%, 40%, 60%, 80%, and 100%, a Toast prompt will be given at the top, and there will also be an estimate of how long it will take to finish reading. These two points are to let users know the current stage of reading the book and let users arrange their reading time reasonably. The title is about the long way to go, but it is especially expected to use classical Chinese sentences to express a positive attitude to users, full of expectations and motivation for the future. Give users self-encouragement, so that they have continuous motivation to read.

Manman Comics

Male and female mode – switch at will to quickly view different content

1. Usage scenarios

When comics are divided by gender, it is easy to put the content you want to read into the corresponding gender mode, and you can only view it by switching between male and female modes.

2. Design Thinking

Design goal: Improve the convenience of switching between male and female modes, making it easier for users to choose and operate.

Design plan: Add a mode switching function on the left side of the top navigation area of ​​the homepage. Users can switch in real time by clicking, and there will be a pop-up window to remind them. After switching, the type of the current mode will be highlighted. If it is switched to Girl, Girl will be displayed at the top; if it is switched to Boy mode, Boy will be displayed at the top to give users a clear perception.

freely

Header image displacement – ​​Perfect combination with mobile phone functions, presenting an interesting viewing experience

1. Usage scenarios

Today’s banners are all rectangular in design, but the content inside is different, and the eye-catching design points are getting smaller and smaller.

2. Design Thinking

Design goal: Enhance the fun experience of the top banner, improve recognition, deepen user awareness, and achieve self-propagation effect.

Design: The Ziroom top header design is combined with the iPhone hardware gyroscope function. By twisting the phone left and right and moving it horizontally, the main character will be displaced horizontally on the X-axis, creating a sense of dislocation with the background to achieve a pseudo-3D space feeling.

It is undeniable that I played with this module for a long time when it was first released, and I still remember it vividly. Isn't this a revision attempt to deepen the user's mind? But then again, if you make such a request, you don't know whether the developer will chase you with a knife.

WeChat

Touch the text to read aloud – efficient chat, detailed content suitable for the elderly

1. Usage scenarios

When elderly people use the chat function, they may encounter unfamiliar characters or reading difficulties. How to achieve the principle of ease of use?

2. Design Thinking

Design goal: To improve the fluency of chatting for the elderly and assist them in communicating using WeChat in multiple scenarios.

Design plan: In the aging-friendly mode, in addition to the usual adjustments to shape, color, texture and movement, the chat content has also been changed. The purpose of enlarging the text is to make it clearer. It is undeniable that the elderly have difficulty with vision and text reading comprehension. WeChat provides this in the care mode. Click on the text box to play the voice content immediately, turn the text into voice, and improve chat efficiency.

Therefore, aging-friendly design is by no means a simple enlargement of the composition, but a design of aging-friendly functions that are segmented based on the target users of the product to help the elderly use it easily.

NetEase Cloud Music

Progress bar climax – Clearly perceive and directly locate the climax of the entire song

1. Usage scenarios

Every song has classic or climax sentences. When users listen to the song again, they want to directly locate the climax. How to inform users?

2. Design Thinking

Design goal: To solve the problem of not being able to accurately locate the climax through the progress bar when listening to a song, improve the usability of the progress bar positioning, and provide a visual perception of the climax point to serve users and increase usage stickiness.

Design plan: For the song, the lyrics are repeated in the first and second halves to facilitate user positioning. A small white dot is added at the climax of the first half of the song to indicate that this is the climax (memory point) of the entire song. Users can accurately locate the song by dragging the progress bar, which helps improve the efficiency of sliding positioning and brings a sense of certainty to known information.

Sound Encounter

Autoplay – Quickly improve efficiency, switchable and pauseable, fun interactive experience

1. Usage scenarios

When browsing in waterfall flow, I want to play the following audio, but the above one is already playing automatically. How can I switch it?

2. Design Thinking

Design goal: To solve the problem of weak perception of play and pause and improve the usability of voice.

Design plan: When you are browsing the singing page, the voice at the top of the current content will play automatically, the vinyl record will rotate 360 ​​degrees, and there will be a note animation on the left, indicating that this module is playing. The module below is paused, the vinyl record is on the far right and half is covered, and there is no note animation on the left, which is clearer than the pause of playback. Click on the vinyl record to pause playback; click on the lower vinyl record to swipe left to play, and swipe on the upper vinyl record to swipe right. The two interactions are related, which is a good interactive experience attempt.

Far right

Emotional details – Enter password, IP emotional actions

1. Usage scenarios

When entering account and password on the login page, how can we give users a sense of security and prevent password leakage?

2. Design Thinking

Design goal: Improve the fun feedback when entering the password, add memorable points to the product, and enhance the user's mind.

Design plan: Place an IP image of the product waving and greeting above the login page. When the user enters the password, the rightmost IP will become an image with eyes covered and a dialogue bubble with "Secret" written on it, indicating that the current user operation is very important and cannot be peeked. Although the product background has records, in order to express the product's respect for users and the perception of protecting user privacy, the IP is used to convey a sense of security to users, making the product closer to users. The same is true for the bilibili login page. This method can be tried to explore and use in any product.

BOSS Direct Hiring

Progress awareness – Read the article and know your current position at any time

1. Usage scenarios

When reading an article, you have to quickly scroll to the bottom to guess the approximate length of the article and give an expectation of reading time, which is quite troublesome.

2. Design Thinking

Design goal: Improve users' expectations of the length of article content they view, give users a better sense of progress, and help them arrange their reading time appropriately.

Design plan: Experience design should address the needs of users at the psychological level. When reading a very long article, users have no idea of ​​the progress, which is a poor experience design.

When reading articles on BOSS Zhipin, a progress bar is added for display. Users can move the progress bar on the X axis by moving the Y axis, thus forming a linkage effect. If the article is very short, the progress bar will move very long when the user slides, otherwise it will move very short.

Why not add percentages, which would be simpler and clearer? The author understands that percentages are displayed in numbers, which will cause visual interference to article reading, especially for articles with different layouts. The article itself is still mainly for reading. If the percentage is too obvious, it will interfere with the reading of the article itself, and people will just skim through it in order to reach 100%, which is putting the cart before the horse.

Conclusion

Designers must have eyes to discover beauty. Beauty is not only visual, but also a good experience process. Don't let users think, this is what every designer pursues. Carefully recording product details and understanding the thinking behind them is also a way to continuously improve your logical thinking and expression skills.