要想設計出更智能的產品,這個詞你需要了解下 —— 「PROACTIVE」
前言
proactive
/prō?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. 指(人或政策)積極主動的;主動出擊的;先發制人的
來自牛津詞典
正文
「人工智慧」、「更聰明、更懂用戶的產品」等等這些辭彙與表述,已然成為我們進入數字化時代以來的Hashtag,而相信不少人也發現,當提到智能-Intelligent時,有個詞往往會與之一同出現,那就是「Proactive」。除去前言中該詞的基本釋義,我們該如何從設計的角度去理解它的定義,它在所謂的智能產品中起到什麼樣的作用,以及作為設計者該如何設計出「Proactive」的產品等等,接下來我們一同來試著解答這些問題。
一 . 淺聊「Proactive」在設計範疇的釋義
要理解到底什麼是「Proactive」之前,我們有必要先從另一個詞開始講起 —— 「Reactive」。
我們知道,用戶和產品之間的交互有個基本的邏輯關係:用戶(User)在某種特定場景(Context)下通過媒介(Media)的使用行為(Action)來完成某個目的(Purpose)。其中用戶、場景、媒介、行為、目的也被稱為交互設計中的五個基本要素,分別用來定義who、where&when、what、how以及why。而在這組關係中,用戶和媒介通常扮演著一組交互對象中的主體(Subject)和客體(Object),主體向客體作行為輸入(其實也就是需求輸入),對應地,客體向主體作反饋輸出(來響應這個需求),如圖所示。
需要指出的是,基於這層基礎理論所反映出來的、也是大多時候我們所討論的,其實是一種「被動響應式的交互方式「(Reactive Interaction),是常規、基礎、機械的交互方式:在當前場景下,用戶產生一個需求(也就是目的),然後通過行為向媒介輸入需求,媒介被動響應給予輸出反饋,在完成這一閉環後,到下一個場景出現時,再進行下一個階段的用戶主動輸入、媒介被動響應的交互過程,一環環直到達成用戶的最終目的。這是一種僅聚焦同一獨立場景維度,且線性閉合的交互設計思維,如下圖所示。
我們通過一個簡單的例子來解釋下,想像一個用戶他要完成用耳機來聽他手機中的歌曲這個任務,假設手機是iPhone,且搭載的系統還是iOS 8。基本上要完成這個總的任務,用戶需要和他的手機發生三段子交互關係,三個子場景、三個子需求, 三個子行為,我們通過下圖來分析下:
第一階段的子交互關係:第一個場景,用戶首先要達成的目的(P1)是事先做好自己一個人才能聽到音樂的私密聽覺空間的準備,帶著這個子需求,用戶將耳機線插入對應的手機耳機孔(A1),此時的媒介,也就是用戶交互的客體對象是他手中的這台硬體設備以及他的耳機(M1),用戶完成插入耳機的動作後,進入下一階段;
第二階段的子交互關係:第二個場景,用戶其次要達成的目的(P2)是在繁雜的手機應用中找到合適的音樂播放應用,帶著這個子需求,用戶在手機系統界面環境下進行滑屏、搜索等動作來找到那個音樂應用(A2),此時的媒介是這台手機的系統操作界面(M2),用戶找到音樂應用後,進入下一階段;
第三階段的子交互關係:第三個場景,用戶再來要達成的目的(P3)是進入到那個音樂應用里,挑選到自己接下來想要聽的歌曲,帶著這子需求,用戶打開那個音樂應用,並通過一系列那個應用內特定的交互流程找到歌曲,點擊播放(A3),此時的媒介是這個音樂應用(M3),用戶開始播放音樂後,最終達成「用耳機來聽他手機中的歌曲」的終極目的。
通過上述的分析和描述,我們大致可以理解「被動響應式的交互方式」這種」等著用戶來操作」的機械機制,即「被動響應式 → 機械式交互」,Reactive → Mechanical,好,接著我們來看另一種機制。
互聯網應用、人工智慧語言助手、智能汽車、物聯家電等等,在層出不窮的智能產品體系中,我們發現除了常規的被動響應式交互之外,還有種交互機制,且正是這種機制的存在使這些產品能冠以「智能」之名:
它是跨場景維度的,非線性且開放的交互設計思維,與被動響應式交互中用戶主動輸入、媒介被動輸出的機制所不同的是,主客體I/O的交互次序發生了顛倒和置換,也就是媒介提前向用戶提供了需求輸出,預判甚至創造了用戶下一步可能的需求和行為,且媒介的輸出源(Source of output ),往往不是用戶當前場景的行為輸入,(1)可能是用戶在先前場景中(甚至另一個場景)的間接行為輸入,(2)更有可能不是來自於用戶的行為輸入,而是採集於某個場景、某個環境、某個其他用戶等其他元素的變數輸入,不管是哪種,有趣的是,這個提前出現的需求輸出通常會在下一個時間點或場景出現的時候,提前幫用戶達成那個場景下的目的。我們將這種交互機制稱為「主動前攝性的交互方式」(Proactive Interaction),如下圖所示。
我們還是通過用戶用耳機聽手機音樂的這個例子來解釋下:假設用戶的步驟還是按照「插入耳機,找到應用,播放歌曲」這三個子需求走,但與之前不同的是,用戶這次的這台iPhone手機搭載的是iOS 9,在該系統下當用戶在鎖屏狀態下插入耳機,鎖屏界面隨即喚起默認音樂應用播放界面,用戶直接可以進入挑選歌曲並播放音樂的階段,如下左圖所示,如果在多應用切換場景下判斷到處於耳機模式,iOS 11也會如下右圖所示,提供一個默認音樂應用的快捷入口。
好,我們現在抽象來看,這次用戶只需要和他的手機發生兩段子交互關係,兩個子場景、兩個子需求, 兩個子行為,就能夠達成用戶的總目的,我們通過下圖來分析下:
第一階段的子交互關係:同之前的一樣,用戶首先要達成的目的(P1)是事先做好自己一個人才能聽到音樂的私密聽覺空間的準備,帶著這個子需求,用戶將耳機線插入對應的手機耳機孔(A1),但此時的媒介,也就是這台搭載iOS9的手機硬體(M1),將當前場景下用戶插入耳機這一行為輸入進行了分析和解讀,預判用戶下一個場景是要找到音樂播放應用,而這一操作實際是為了再下一個場景在那個應用里選歌收聽的,在後台(Backstage)完成這一連串的「思考」後,手機硬體(M1)作為當前場景被輸入的對象,不但常規地、響應地向當前場景的用戶輸出了硬體體感上的反饋,同時向手機內的默認音樂應用(M2)輸出了在下一場景直接喚起的需求指令;
第二階段的子交互關係:剛完成第一階段子交互的用戶此時反而被動地接受到「鎖屏界面中直接喚起的音樂應用播放界面(M2)」的信息輸入,超出預期(原來必須經歷的第二階段需求)的直接進入挑選並播放歌曲的需求場景(P2),帶著這個子需求,用戶直接在鎖屏場景下,通過一系列特定的交互流程確定歌曲,點擊播放(A2),最終達成「用耳機來聽他手機中的歌曲」的終極目的。
圖中那條跨場景、串聯起媒介間的輸出流(那條水平箭頭),筆者管它叫「決策捷徑(或決策蟲洞)」, 這條捷徑(蟲洞)除了表面上縮短了用戶行為路徑之外,更重要的一個特徵就是捷徑(蟲洞)始末,主客體的輸入輸出關係發生顛倒置換,始端主體向客體主動輸入,末端則是客體向主體主動輸入。
通過上述的分析和描述,我們大致可以理解「主動前攝性的交互方式」這種」預判用戶需求」的智能機制,即「主動前攝性 → 智能式交互」,Proactive → Intelligent。
如果看到這裡,還是覺得略顯晦澀難懂的話,那我們來舉一個最簡單的例子:「Reactive」好比是天黑了,用戶走進自己的房間,要找燈的開關在哪裡,找到了才能打開燈,這種燈我們叫它「蠟燭,不點不亮」(「蠟燭」在滬語中用來形容一個人處事被動、不積極、被推著才能往前走);相反呢,燈知道天黑了,用戶馬上要進房間了,燈自己就亮了,甚至都不用用戶去找、再開,這叫「Proactive」,其實「Proactive」一詞最早就是用來描述人的心理和處事觀念的,描述為人的一種自發的、自驅動的、積極主動的、未雨綢繆的態度。
二. 主動前攝性設計機制的主要作用和應用場景
具備「Proactive」特質的產品案例有很多,比如沃爾沃自主巡航系統(Volvo Autopilot Assist)在即將結束高速公路路段、進入城市緩行路段前,主動提示駕駛者從自動駕駛模式切換回手動駕駛模式,如下圖1所示; 基於AI底層技術「Adobe Sensei」,Adobe Analytics能夠採集到客戶在使用線上產品時發生的任何異常操作行為,並能解釋這種行為帶來的市場影響變化,主動反饋給市場部或產品開發者;iOS9系統能將用戶收到的會議邀請郵件,自動加入日曆行程中,並在出發前,根據用戶可能的出行路線及對應的實時路況綜合判斷,給出合適的出發時間提醒,如下圖2所示,等等。
我們仔細觀察不難歸納,這種前攝性設計機制應用到產品中主要出於以下兩個目的:(1)避險 Risk Prevention;(2)連接 Seamless Connection。方才所舉的iOS 9提醒會議出發時間的案例就是屬於避險,避開正常出發而遭遇下班高峰路況擁堵、從而遲到會議的風險。關於「連接」,這裡根據需求場景可以繼續展開為:
a. 單一需求場景下,閉合環境內的行為連接,為了使用戶更高效地達成這個單一需求。比如線上購物,用戶帶著相對單一的「購物」需求,與一個線上購物應用在相對封閉的環境中進行交互,這個應用能用來「預判用戶購物需求、連接用戶行為「的依據基本來源於這個應用環境內用戶留下的行為痕迹或信息數據,如果我們給這個負責」連接「的智能媒介描繪一個形象,它就像是Amazon app中的Alexa,在購物這個單一需求場景下,它能聰明且主動地幫你相對快速地達成自己的需求(當然Alexa是跨場景的生活助手,我們這裡特指它在Amazon購物應用中的角色);
b. 複合需求場景下,開放環境間的行為連接,為了使用戶順暢無縫地串聯起生活中的每個需求。比如駕車回家中在中控屏上收到「是否要提前打開家中空調」,或在線上點餐中收到「基於您上周的體檢報告為您推薦以下菜譜」等等,這種情況下,媒介的「主動性」除了基於單一場景、封閉交互環境下的用戶輸入之外,更多地通過跨場景的用戶行為痕迹或環境變數為當前場景下的用戶提供決策捷徑,當然這需要更為龐大交織的產品體系和雲端支持。
三. 聊下主動前攝性設計機制的設計方法
其實,主動前攝性設計機制就好比是始終流淌在媒介後台的水(A stream flows on the backstage),隱形卻又無處不在,當合時機時,它會以某種形式進入你所在的場景A,來主動提示、引導(連接作用)、抑或是強制中斷你的場景A行為(避險作用),進入場景B。
那有同學就要問了,我應該怎麼在設計中實現這種主動性呢,實際上,這裡我們只需要將上面這段話解構成幾個獨立的問題,並一一解答,應該就能大抵掌握一些「Proactive interaction design」的思路了。
(1)為什麼出現、為了連接還是避險:洞察用戶現有行為背後的目的,去發現達成這個目的的現有鏈路上存在哪些斷點或可能導致失敗的風險點;
(2)出現什麼:需要主動輸入給用戶什麼信息點或行動點,來連接這些斷點或提前避免風險;
(3)什麼時候出現:設定好觸發條件或判斷邏輯,如當用戶做了哪個行為或環境發生哪些變化,則觸發主動輸入;
(4)以什麼形式出現:按照連接或避險的目的,判斷前置信息點或行動點在當前場景下引導或干擾用戶程度的優先順序,以及當前場景的特徵,來選擇合適的出現形態。
好,我們來通過實際小案例來過一遍這個方法流程。
假設今天我們要優化一下消費者在一個電商App中的購物流程體驗,在萬千購物路徑中,我們挑選這樣一條路徑來分析:以用戶進入App首頁為起點,以用戶下單為終點,用戶首先通過搜索進入A商品詳情頁,然後用戶會通過A商品詳情頁的店鋪入口進入A商品所屬的品牌店鋪,最後在店鋪內的某個商品詳情頁完成成交。
(1)首先,我們要分析這種購物路徑背後反映的用戶目的是什麼,其實有兩種目的,第一種是用戶對A商品感興趣,他通過進品牌店鋪,是想看該品牌更多相似的A商品,第二種是用戶對A商品的所反映出來的調性(品牌)感興趣,他通過進品牌店鋪,是想看該品牌更多的其他商品。好,我們就主要看第一種目的,現有的路徑中存在哪些斷點,用戶為了在店鋪內看更多相似的A商品,他進入店鋪後通常主動通過寶貝分類(或搜索)來查找選擇到更多A類商品,那這個地方就是我們說的斷點 —— 用戶從一個商品詳情頁到店鋪里查看更多同類商品的路徑太長,且跳轉到店鋪頁時出現斷點,如下圖所示;
(2)如何讓用戶有一個更便捷的查看更多A類商品的渠道或連接點,所以我們要做的就是當用戶從A商品詳情頁進入店鋪,能夠自動篩選出店鋪中所有A類商品,並主動提供一個查看的快捷入口,這就是解答了要出現什麼;
(3)顯然不是偶然的一次從A商品詳情進入店鋪,就必須出現這樣一個快捷入口,這就需要我們給出一個判斷邏輯,比如我們監測到用戶之前多次瀏覽過A類商品,那也許我們可以給出一個條件,頻次、次數等等,來作為何時需要觸發這個入口連接點的依據;
(4)最後我們來確定這個入口的具體形式,是Dialoge、poplayer還是其他?那我們考慮到用戶進店的另一個目的,有可能進店是逛其他商品或了解品牌的,並不是要看更多A類商品,同時又要在不干擾逛店主鏈路的基礎上有提示引導,最後採用了Snack bar的形式,在用戶進店後顯示並主動提示用戶去查看更多A相似商品,如下圖所示。
案例雖小,但現在我們能感知到Proactive interaction design的核心還是儘可能去洞悉用戶行為背後的目的,及環境變化給用戶行為帶來的影響,去發現現在行為鏈路中不必要的環節把它去掉,或者在不破壞常規鏈路的基礎上,把某些需求場景前置來讓用戶無意識地縮短自己的行為或決策路徑,這也許才能讓人說出那句「哇,這產品真聰明,它怎麼知道我要什麼」的驚嘆吧。
寫在最後
當然我們還是要講,大數據採集、計算、學習、分析、預判能力是實現產品「Proactive」的保障,是這些技術提供了「監測行為或環境變數、預測用戶下一步需求」的可能性,但真正要在產品實際使用中發揮它的效能,「設計」必然是不可或缺的源動力。
前兩天清明放假重溫了遍電影《布達佩斯大飯店》,其中有這麼一段M. Gustave向Zero訓導門童的定義(Lobby boy):
What is a lobby boy?
門童是什麼?A lobby boy is completely invisible, yet always in sight.門童是隱形的,但隨傳隨到。A lobby boy remembers what people hate.門童會記得客人討厭什麼。A lobby boy anticipates the clients』 needs before the needs are needed…門童能比客人還早一步知道客人需要什麼…
我只想說:What a proactive lobby boy!
*關於proactive interaction這種設計理念相對前沿,目前國內很少有系統性地介紹這塊知識,連論文都不多,等於這次是自己嘗試沉澱關於proactive interaction的解釋、設計方法,所以很歡迎同行們來探討和指正!
以上所有見解及觀點,皆是筆者根據自身設計認知和經驗總結所得,僅供參考,如有理解出入或偏頗之處,還望請指正交流!
推薦閱讀:
※在UI設計中色彩的運用
※怎樣做一個優秀的交互設計作品集(自己經驗+他人經驗總結)
※聽說你的設計稿Lock了?
※「完美」的字體系統搭建與維護指南
※ElemeUED Post #7