Proactive/pr not ˈ aktiv/adj.

(of a person, policy, or action) creating or controlling a situation by causing something to happen rather than responding to it after it has happened. 

Of (a person or policy) being active; 2. On the offensive; preemptive

— From the Oxford Dictionary

Terms such as “artificial intelligence” and “smarter, more user-aware products” have become a kind of Hashtag as we’ve entered the digital era, and many of us have noticed that “Proactive” can come with intelligence-intelligent. We’ll try to answer questions such as how to understand the word from a design perspective, its role in a so-called smart product, and how to design a “Proactive” product as a designer.

The word “Proactive” appears in the iOS 11 update description

01

A brief description of the design area of “Proactive”

Before we can understand what a “Proactive” actually means, it’s worth starting with another word — Reactive.

As we know, the interaction between users and products has a basic logical relationship: a User uses Media actions to achieve a certain Purpose in a specific Context. User, scene, media, behavior, and purpose are also known as the five basic elements of interaction design, which define who, where&when, what, how, and why respectively. In this group of relations, users and media usually act as the Subject and Object in a group of interactive objects. The Subject provides behavior input to the Object (in fact, demand input), and correspondingly, the Object provides feedback output to the Subject (to respond to this demand), as shown in the figure.

Basic Interactive Logic Relation (author’s own drawing)

It should be pointed out that Reactive Interaction, which is reflected in this basic theory and discussed most of the time, is a conventional, basic and mechanical Interaction: In the current scenario, the user to create a demand (purpose), and then to the media input requirements through behavior, medium passive response to output feedback, after complete the closed loop, to the next scene appeared, and then on to the next stage of the user interaction process of active input, media passive response, plows until there is the ultimate goal of the user. This is an interaction design thinking that only focuses on the same dimension of independent scenes and is linearly closed, as shown in the figure below.

Reactive Interaction

Where n represents the phase of the interaction

(Painted by the author)

Let’s take a simple example. Imagine a user who has to listen to a song on his or her iPhone using headphones. Let’s say the phone is running iOS 8. Basically, to complete the overall task, the user needs to have three sub-interaction relationships with his mobile phone, including three sub-scenes, three sub-demands and three sub-behaviors. We can analyze them as follows:

The complete interaction of listening to mobile music through headphones,

Where P is the purpose, A is the behavior, M is the medium and C is the scene

(Painted by the author)

Sub-interaction of the first stage:

The first scenario, the user first to reach the purpose of a (P1) is to make himself a man could hear the music of the illicit close space, hearing with this demand, the user to insert the headset line corresponds to the mobile phone headphone jack (A1), medium at this time, also is the object of the user interaction object is the hardware device in his hand and his headphones (M1), After inserting the headset, the user enters the next stage.

Sub-interaction of the second stage:

The second scenario, users want to achieve the purpose of the next (P2) is in the multifarious mobile application to find the right music broadcast application, with the demand, users under the environment of mobile phone system interface slip action such as screen, search to find the music application (A2), the medium is the mobile phone operating system interface (M2), users find music after application, To move to the next stage;

Sub-interaction of the third stage:

The third scenario, the user again to achieve the purpose of the application (P3) is to enter the music, choose to his next want to listen to songs, with this demand, the user to open that music applications, and through a series of the application within a specific interaction processes to find songs, click play (A3), medium is at this time the music application (M3), After the user starts playing the music, he eventually achieves the ultimate goal of “listening to the songs on his phone through headphones.”

From the above analysis and description, we can roughly understand the Mechanical mechanism of “Reactive interaction”, which is “waiting for the user to operate”, Reactive → Mechanical interaction. Ok, and then we can look at another mechanism.

Internet applications, artificial intelligence language assistants, intelligent cars, home appliances connected with things, etc. In the endless system of intelligent products, we find that in addition to conventional passive interaction, there is another interaction mechanism, and it is the existence of this mechanism that makes these products can be named as “intelligent” :

It is across the scene dimension, nonlinear and open interaction design thinking, interaction of user input is active and passive response type, medium passive output the difference is that the mechanism of subject and object interaction of I/O order upside down and the displacement happened, also is the media to provide customers with the demand and output in advance, anticipation and even created a user next may demand and behavior, In addition, the Source of output of the media is usually not the behavioral input of the user’s current scene. (1) it may be the indirect behavioral input of the user in the previous scene (or even another scene), and (2) it is more likely not the behavioral input of the user. It is a variable input collected from other elements, such as a scenario, a context, another user, whatever it is. Interestingly, the output of this pre-occurring requirement usually helps the user achieve the purpose of that scenario at the next point in time or when the scenario appears. We call this Interaction mechanism Proactive Interaction, as illustrated in the figure below.

Diagrams of Proactive Interaction

(Painted by the author)

Let’s take a look at the example of a user listening to music on their phone through headphones: It is assumed that the user still follows the three sub-requirements of “insert the earphone, find the app and play the song”. However, different from the previous requirements, the user’s iPhone is equipped with iOS 9 this time. In this system, when the user inserts the earphone in the lock screen, the lock screen interface immediately evokes the default music app playing interface. Users can directly enter the stage of selecting songs and playing music, as shown in the image on the left below. If you find that you are in headphone mode in a multi-app switching scenario, iOS 11 will also provide a shortcut to the default music app, as shown in the image on the right below.

The left picture shows the music playing interface of iOS9 lock screen.

The figure on the right shows the shortcut of the default music application in the multi-application switching scenario of iOS11

Ok, let’s take an abstract view now. This time, the user only needs to have two sub-interactions with his mobile phone, two sub-scenes, two sub-demands and two sub-behaviors, to achieve the overall purpose of the user. Let’s analyze it through the following figure:

This section describes how users listen to mobile phone music through headphones in iOS 9

(Painted by the author)

Sub-interaction of the first stage:

The same as before, the user first needs to achieve the goal (P1) is to prepare in advance the private auditory space where only one can hear the music. With this sub-requirement, the user plugs the headphone cable into the corresponding headphone jack of the mobile phone (A1). However, the media at this time, namely the hardware of the mobile phone with iOS9 (M1), After analyzing and interpreting the behavioral input of the user inserting the headset in the current scene and predicting that the user is going to find the music playing application in the next scene, this operation is actually to select a song and listen to it in the application in the next scene, a series of “thinking” was completed in the Backstage. As the input object of the current scene, the mobile phone hardware (M1) not only outputs the hardware somatosensory feedback to the user of the current scene conventionally and responsively, but also outputs the demand instructions directly evoked by the next scene to the default music application (M2) in the mobile phone.

Sub-interaction of the second stage:

Son have just completed the first phase of interaction of the user at this time instead of passively accepting to “lock screen interface directly raise play music application interface (M2)” information input, exceed expectations (the original) must go through the second phase of demand directly to select and play songs demand scenarios (P2), with the demand, the user directly on the lock screen scenarios, Determine the song through a series of specific interactive processes, click Play (A2), and finally achieve the ultimate goal of “listening to the song in his mobile phone with headphones”.

Figure that across the scene, series connection has the output stream of media between (the horizontal arrows), I call it “decision-making shortcuts (or decision wormhole)”, this shortcut (wormhole) in addition to surface shortened the user behavior on the path, one of the more important features of beginning and end of the road is the shortest cut (wormhole), subject and object of the relationship between input and output was reversed displacement, the subject to object between active input, The end is active input from the object to the subject.

Based on the above analysis and description, we can generally understand the Intelligent mechanism of anticipating user needs as Proactive → Intelligent, i.e., Proactive → Intelligent.

If this still seems a little hard to understand, let’s take the simplest example: Reactive is like when it gets dark and the user walks into his room to find the light switch and turns it on. This light is called “candle” (” candle “is used in Shanghai to describe a person who is passive, inactive and pushed to move forward). On the contrary, the light could kind of reflect on itself as it gets dark and the user will have to work on a kind of Proactive kind of anticipating, even without the user having to look for or open it. This is called a “Proactive” kind of anticipating. Actually, the word “Proactive” can be used to describe a person’s psychology or philosophy of dealing with a situation.

02

The main functions and application scenarios of proactive design mechanism

There are many examples of products that have “Proactive” features, such as the Volvo Autopilot Assist that prompts the driver to switch back to manual mode from Autopilot just before ending a stretch of highway and entering a city stretch, as shown in Figure 1 below; Based on the underlying AI technology “Adobe Sensei”, Adobe Analytics can collect any abnormal operation behavior of customers when using online products, explain the market impact of such behavior, and actively feed back to the Marketing Department or product developers. IOS9 system can automatically add the meeting invitation emails received by users to the calendar schedule, and give appropriate departure time reminders according to the user’s possible travel routes and corresponding real-time road conditions before departure, as shown in Figure 2 below, etc.

Figure 1. Volvo Autopilot Assist’s dashboard active prompt

Figure 2. CraigFederighi talking about Proactivity in iOS 9 at WWDC 2015

After careful observation, it is not difficult to conclude that such proactive design mechanism is applied to products mainly for the following two purposes :(1) Risk Prevention; (2) Connect Seamless Connection. The case of iOS 9 reminding the departure time of a meeting mentioned just now is a risk of avoiding the risk of being late for the meeting due to traffic congestion caused by normal departure. As for “connection”, it can be expanded as follows according to the requirement scenario:

A. In a single demand scenario, behavioral connection in a closed environment, in order to achieve the single demand more efficiently by the user. For example, in online shopping, users with relatively single “shopping” needs interact with an online shopping application in a relatively closed environment. The application can be used to “predict users’ shopping needs and connect users’ behaviors” based on the behavioral traces or information data left by users in the application environment. If we picture an intelligent medium that is responsible for “connecting”, it is like Alexa in the Amazon App, which can help you meet your needs relatively quickly in the single-need scenario of shopping. (Of course, Alexa is a cross-scene life assistant, We refer specifically to its role in the Amazon shopping app);

B. In the scenario of composite needs, the behavioral connection between open environments enables users to smoothly and seamlessly connect each demand in life. For example, when driving home, I receive “Shall I turn on the air conditioner at home in advance” on the central control screen, or “I recommend the following menu based on your physical examination report last week” when ORDERING food online. In such cases, the “initiative” of the media is based on user input in a single scene and a closed interactive environment. More cross-scene traces of user behavior or environment variables are used to provide shortcut decisions for users in the current scene, which of course requires a larger interwoven product system and cloud support.

03

Discuss the design method of active proactive design mechanism

In fact, proactive design is like A stream flows on the backstage, invisible and ubiquitous, that somehow enters your scene A when it’s time, To actively prompt, direct (linking), or force A break from your scenario A behavior (hedging) into scenario B.

As a matter of fact, you can take this kind of initiative in your design. If you can manage to manage this kind of Proactive design, you’ll have a good idea of how to manage this kind of Proactive design. If you can manage to manage this kind of Proactive design, you can manage to manage this kind of Proactive design.

(1) Why, to connect or to avoid: insight into the purpose behind the user’s current behavior, to find out what breakpoints or risk points may lead to failure exist on the existing link to achieve this purpose;

(2) What appears: what information points or action points need to be actively input to the user to connect these breakpoints or avoid risks in advance;

(3) when to appear: set trigger conditions or judgment logic, such as when the user did which behavior or what changes in the environment, then trigger active input;

(4) in what form: according to the purpose of connection or hedging, judge the priority of the pre-information point or action point in the current scene to guide or interfere with the user degree, as well as the characteristics of the current scene, to select the appropriate appearance.

Ok, let’s go through the process of this method through a small practical case: Suppose today we want to optimize the shopping process experience of consumers in an e-commerce App. Among thousands of shopping paths, we choose such a path to analyze: Starting from the user entering the home page of the App and ending with the user placing an order, the user first enters the product details page of A through search, and then enters the brand store to which the product belongs through the entrance of the product details page of A, and finally completes the transaction on A product details page of the store.

(1) first of all, we should analyze the shopping path behind reflect what’s the purpose of users, there are two purposes, the first is A user interest in A commodity, he passed into the brand shop, is want to see the brand is more like A commodity, the second is the user for A commodity of tonal interested in (brand), he through into the brand shop, Is to see more of the brand’s other products. Ok, let’s focus on the first purpose, which is what breakpoints exist in the existing path. In order to see more similar A products in the store, the user usually takes the initiative to find and select more CATEGORY A products through baby classification (or search) after entering the store. This is what we call a breakpoint — the user’s path from one product detail page to see more similar products in the store is too long, and there is a breakpoint when he jumps to the store page, as shown below;

The analysis process of knowing the purpose and discovering the breakpoint (author’s own drawing)

(2) How to make users have A more convenient channel or connection point to view more category A commodities, so what we need to do is when users enter the store from the A commodity details page, can automatically screen out all category A commodities in the store, and take the initiative to provide A quick entrance to view, this is the answer to what to appear;

(3) is clearly not accidental details from A commodity into the shop at A time, there must be A quick entry, this needs us to give A judgment logic, for example, we detected before the user read A goods for many times, maybe we can give A condition, frequency, number, etc., as the basis of when to trigger the entry points;

(4) Finally, we can determine the specific form of entry. Is Dialoge, Poplayer, or something else? That we consider the user into the shop, another purpose, may store is going to other commodity or understanding of the brand, it is not to see more A kind of commodity, and on the basis of noninterference around the owner link with prompt guidance, finally in the form of A Snack bar, after the user into the shop, and take the initiative to prompt the user to see more A similar goods, as shown in the figure below:

After entering the store, the weak guidance form of Snackbar is used to preposition the scene where the user wants to find more product A. (Painted by the author)

This is a small case, but we can now sense that the core of Proactive Interaction design is to understand as much as possible the purpose behind the user’s behavior and the impact of changes in the environment on the user’s behavior, to find and remove unnecessary links in the current behavior link, or, without breaking the regular link, Putting requirements scenarios in front of the user to unconsciously shorten their behavior or decision path may lead to the “wow, this product is so smart, how does it know what I want?”

Write at the end: We still want to speak, of course, large data collection, calculation, study, analysis and forecasting ability is the guarantee of product “Proactive”, is the technology provides a “monitoring behavior or environment variables, predict the user demand” next possibility, but really want to in actual use of the product play its effectiveness, “design” is an indispensable source of power.

I watched the movie “The Grand Budapest Hotel” over the last two days during the Qingming Holiday, in which M. Gustave instructs Zero on the definition of a Lobby boy:

What is a lobby boy? What is a doorman? A lobby boy is completely invisible, yet always in sight. The doorman was invisible, but he was always there. A lobby boy remembers what people hate. The doorman remembers what the guests hate. A lobby boy anticipates the clients’ needs before the needs are needed… The doorman knows what the guests want one step ahead of them…

I just want to say: What a proactive lobby boy!

* The design concept of proactive interaction is relatively cutting-edge. At present, there are few systematic introductions to this knowledge and even few papers in China. This time, it is as if I have tried to prepare the explanation and design method of proactive interaction.

All the above opinions and views are based on the author’s own design cognition and experience summary, only for reference, if there is any misunderstanding or bias, please correct the exchange!

In this paper, the author

Music can ke

Design historian • Product and interaction designer

Zhihu Column: Design History and Design Philosophy