The author of this thesis focuses on what is the scene design, what are the examples of the scene design, and why the scene design and the scene design are comprehensively interpreted and analyzed.
Editor’s note: This article is from the WeChat public account “banquet” (ID: Sheyandesign), author poppy, the original title is: “ interaction designer must get the scene design big decryption, with detailed case “.
1. What is a scene design
“Scene” is defined in Baidu Encyclopedia: drama, film scenes, and general scenes. The scene also refers to (1) feelings and scenery. (2) Situation; sight. (3) Environment: The assumption is in this scenario. In drama or film and television dramas, scenes consist of elements such as people, time and space, events (behavior), and environment (social environment and natural environment).
The “scene” in the Internet I divided it into two categories:
A type of scenario is created to achieve user goals. This type of scenario needs to clarify the user’s goals. It may not need to cover how the user achieves the goal. Such scenarios refer to the user’s precise needs. Accurate service, with a clear differentiated service to provide users with a motivation to use the product. For example, Weibo and WeChat, WeChat positioning is acquaintance socializing, Weibo is stranger socializing;
Another category is a more refined scenario where such scenarios require a clear user action flow. This article focuses on the second type of scenario.
Scenario design refers to the analysis of the scene, the user’s pain points and needs, combined with the front and back scenes to predict the user’s goals, improve user efficiency through design, give users surprise and touch.
Scene elements include: 4W+1H, which is Who, When, Where, What, How, Who, When, Where, What, and the environment. Among them, Whereher includes online and offline locations. The offline refers to the actual positioning, which can be obtained through mobile phone tower data (GPS), Wifi connection, etc.; online refers to the specific page where the user is located.
For example: the user (who) goes to work in the morning (when) to see the e-book on the subway (where), the subway is noisy and inconvenient to operate (how). Another example is the user (who) at noon (when) in the office (where) point of takeaway (what), the stomach is very hungry and do not know what to eat (how). The five elements are like mouths, helping us to describe the scene in a comprehensive and rapid way.
Second, what are the examples of scene design?
To help you better understand the scene design, here are some examples based on the five elements mentioned above:
People are variables
Users are different and see different information.
With the popularity of big data and smart recommendation technologies, more and more products generate user images by mining the preferences of different users, providing each user with personalized content of “Thousands of People”. Such products are familiar to everyone, such as vibrato, Taobao, Weibo, today’s headlines.
Time is a variable
The time is different and the information you see is different.
For example, Xiaomi MIUI11’s efficiency innovation function “smart travel”, when the travel time is set on the travel app, MIUI11 will automatically record the trip on the negative screen and synchronize the calendar, and according to the time of the trip, Update the prompt in the notification bar:
When you open navigation in the Google Maps app, if the destination hasn’t opened yet at the estimated time of arrival, or if you want to close/close it, there will be a pop-up reminder.
The ant forest page will change according to the time the user opens (day and night mode), etc. These are the variables that take into account the time in the scene, so that there is such an efficient and warm design.
Location is a variable
The same user sees different information in different locations.
For example, the public comment APP predicts that the user may be in a tourist state according to the user’s previous scene and the current scene when the user is located in the permanent residence of Beijing (where), and predicts the user’s next goal. It is “eat, drink, and play” in Hangzhou, so the contents of the homepage and the Raiders page have changed, recommending the “eat, drink, and play” of the travel destination.
Environment is a variable
The information seen by different environments is different. For example, when the device environment changes: the memo page in Ios13 moves the “Add” button to the lower right corner. Why? Because the screen of the mobile phone is getting bigger and bigger, moving the button from the upper right corner to the lower right corner is more convenient for the user to operate with one hand.
More example: In the driving environment, we must keep our attention and avoid or reduce traffic accidents caused by distracted driving. Therefore, based on the driving environment ios11, the driving mode function is on-line, when the iPhone is connected to the USB or Bluetooth in the car. , or when the iPhone senses the speed of the person’s movement, the iphone will automatically enter the driving mode;
In this mode, if anyone sends a text message, we will not receive a prompt. The other party will receive an automatic reply that “I am driving, replying to you later”. At the same time, the iphone will add a text message to remind the other party. By replying to the “emergency” keyword, we can receive their message prompts immediately.
Third, why should we design based on the scene?
With the above example, you must have already learned the benefits of designing based on the scene. Because of the distance from the user’s space, the designer is not aware of the specifics of the user’s use of the product in a real-life scenario.
The method of scene design, analysis and expectation of user usage scenarios can help designers find the inner connection between users and scenes, and explore new functions and interaction methods.
Fourth, how to carry out scene design
can be summarized as the following four steps:
1. Exhausting the scene according to the user’s usage flow and behavior path
List the scene according to the user’s usage process and behavior path. Take the flight (mobile phone ticket purchase) as an example to list the key scenarios involved in the flight:
1 passenger (who) buys a ticket on the navigation page (where), and it is troublesome to find a flight.
2 passengers (who) dragged their tired body early in the morning (where) on the way to the airport (where), and encountered a morning peak traffic jam, inner heart anxiety (how).
3 Before (when) passengers (who) had a security check at the airport (where), the security check process was complicated, and the items that did not meet the boarding regulations were detected, which made people upset and confused.
4 Before (when), passengers (who) are waiting at the waiting place (what), noisy people, no seats, heavy luggage, and always pay attention to flight information (how) .
5 minutes before departure (when), passengers (who) are carrying a baggage (how), showing boarding pass (paper/electronic) and ID card to the staff (what), staff ( Who) At the entrance (where) began to check each passenger’s boarding pass and identity card (what).
6 After checking the ticket (when), the passenger (who) took the ID card and the boarding pass, and carried the shuttle bus with the baggage (how). The shuttle bus was noisy and crowded.
After the hem, the passengers took out the boarding pass, checked the baggage with the baggage (how), and the staff (who) stood in front of the plane (where) to check each passenger. Boarding pass (what).
8 30 minutes before departure (when), passengers (who) boarded (who), carrying luggage in a narrow and crowded passage (how) to find their own seat (what). After finding the seat, put the heavy baggage on the upper shelf. After putting your luggage, sit in your seat, tie the seat belt, adjust the seat back, and wait for the plane to take off.
9 During the flight, the airflow caused the aircraft to bump and the passengers felt panic and uncomfortable. During the flight, passengers watch movies, read books, and sleep to spend time.
10 When the destination arrives, the passenger (who) removes the baggage from the high disposal rack and takes the heavy baggage (how) to line up the airplane. At this time, the passengers are not clear about other conditions such as the weather of the destination.
11 passengers walked out of the plane and arrived at the terminal. At the strange airport (where), follow the signs to find their own baggage. It is difficult to find a sign with a baggage.
By detailed description of the key scenes, we will not be able to see the user scenes in front of the movie like a movie, which helps us find many details that we can’t think of or can’t get through the research, helping us to discover the real pain points of the users. With the demand, insight into the design opportunity points.
2. Excavator points according to the scene
Complete the first step of the scene enumeration, we have a deep understanding of the scene involved in the process, the next step is to judge and analyze the scene, the excavator will point.
The opportunity point mining has two directions. One is to analyze the pain points and the demand excavator points in the current scene, and the other is to find the opportunity points through the pre-judgment of the user’s next goal.
1 by analyzing the pain points and demand excavators in the current scene
Example 1: Alipay “Friends” interface, when the user enters a certain value, the “Transfer to the other party” button will be automatically displayed above the input box, the user can click this button to complete the transfer.
This is because there are often users who mistakenly believe that the input value is sent and the transfer is completed, resulting in a lot of defects. Based on the pain points and needs in this scenario, Alipay made this improvement, and it is intimate and easy to use.
Example 2: When the IOS system switches the APP operation, some financial applications will be blurred to ensure user information security.
This design detail also fully considers the user’s scene when switching the APP, and relieves the user from worrying about being sneaked in the announcement and leaking personal wealth information.
Also, when we listen to music or play video with headphones, the headphones are unplugged and the sound is automaticallyStop, so even if you listen to music or watch videos in a quiet place, the headphones will accidentally fall down and will not make a squeaky sound. These are all considering the scenes of the user’s current use, and then make a thoughtful design.
2 Find opportunities by pre-judgement of the user’s next goal
The second method is to predict the user’s next behavior and goals by analyzing the current scene of the user, so as to find the opportunity point of the current scene.
How do you anticipate the user’s next goal? There are three ways:
-
Experience through group actions, such as copy-paste, edit-save.
-
Predicting through the user’s cognitive process, such as sliding backwards while browsing → ending browsing/back to top; for example, when Google Translate is in pronunciation, the first pass is normal speech rate, the second pass speed Slow down, the third time to return to normal speed, is it very intimate, very in line with user expectations?
-
Expecting through the product use process, such as order take-out – take-away-evaluation.
Example 1: In Google Chrome, when we open multiple browser windows, we usually need to manually close the tabs one by one.
chrome takes full account of the user’s usage scenario. When the user closes a tab, the user is expected to close the next tab, so when a tab is closed, the adjacent tab will automatically approach, ensuring that the closed button is always located. The current position of the mouse, so that the user does not need to move the mouse to close the next tab, which improves the user’s efficiency.
3. The opportunity to convert to a landing design
When turning a point of opportunity into a specific design, there are two design principles that can be used as a basis for efficiency and emotionality.
There are several ways to achieve efficiency:
1 action point front, through the prediction of the user’s next target, the user target is displayed in the current scene, shortening the operation process and achieving an efficient goal. For example, the tab bar of Taobao’s homepage will predict the user’s goal according to the browsing history of each user, and the personalized display of thousands of people will shorten the path for users to find goods and improve the purchasing efficiency of goods.
2 action point replacement, or take Taobao as an example, the first navigation at the bottom of Taobao, when the user slides the product stream below the home page, the button changes from the home page to the top.
3 action point related prompts, meaning to make relevant prompts according to the user’s current target or next step target. For example, when you are on the Alipay friend page, you will be prompted to “find someone to transfer money”, click on the pure mode of the friend list (remove the service notification and other useless list of transfer), which improves the efficiency of the user’s search.
For example, NetEase mailbox, when the attachment is mentioned in the email, but when the attachment is not uploaded, after clicking Send, the system pops up the prompt below, which solves the problem that the user often forgets to add the attachment.
4 highlights the action point, highlights the key button according to the user’s current goal or the next goal, helps the user to quickly find the key operation, attracts the user to click, reduces the user’s thinking cost, and improves efficiency. There are too many examples of designing with this method. For example, Taobao’s product listing page highlights the purchase button in red.
5 Direct execution, directly executed according to the user’s current target or next step. For example, the sweeping interface of the drip will automatically turn on the flashlight when it detects dark light, which improves the efficiency of the sweep.
6 emotionalization
Tonard Norman mentioned three levels of design in Emotional Design: instinct design, behavioral design, reflective design, emotional design can impress people, it can convey emotions It reminds people of memories and surprises. Emotional design helps build emotional bonds between products and users, strengthens users’ perception of brands, and fosters loyalty to brands.
The steps of emotional design are: refining the emotional indicators that affect the product → focusing on the user’s emotional appeal to the product → output design plan → verifying the design value (from Zhou Wei – knowing the ant gold service experience technology department) Share once).
Example 1: After entering the five letters “Pride” at the beginning of each column of Google Tables, the table will become a rainbow style
Example 2: Netease cloud music will become a “Happy Birthday” cake style on the user’s birthday. Click on the music list. The first song is a birthday song, which makes people feel warm.
4. Design Inspection
The final step is the verification of the design. Can the design help the user shorten the operation process? Reduce user thinking costs? Help users complete tasks efficiently? Can you impress users and bring surprises and warmth to them? Through usability testing and data feedback after going online, we can help us better optimize the design.
Last
The article is longer, let’s review it again:
First, what is the scene design?
The five elements of the scene: 4W+1H, that is, Who, When, Where, What, How, Who, When, Where, What, What is the environment?
Second, what are the examples of scene design?
Three, why do you want to design the scene?
Four, how to carry out scene design?
-
Exhausting the scene based on usage flow and behavior path
-
Extracting design opportunities based on scenes
-
Converting Opportunity Points to Landing Design
-
Design verification
Okay, I’m talking about it today, the article is longer, I hope everyone can patiently digest, I hope this article will help you a little.
Description: Part of the article cites the sharing in the UED team blog of Ali China Station.