談論交互設計本質是起源於日常的很多談論,不管是向朋友介紹自己從事“交互”相關崗位,還是需要向親戚通過三言兩語解釋自己的工作內容;甚至在工作的上下游溝通中,也經常會被問道“你怎麼就判斷用戶是這麼想的”“產品如何從0(概念)到1(頁面界面)的”;這些問題促使我想要追本溯源,捋順一下交互的由來、工作內容,以及依照什麼方法執行等問題。

01 交互前言

現在談論的“交互”是一個泊來詞,本來的漢語語境中沒有這個概念,或者說漢語語境中的概念並不是現在經常提到的用戶體驗設計中的這部分內容。這就導致很難解釋,詞語的界定模糊不清。為了更接近今天談論的交互的概念,不妨把“交互”拆解一下,分成 “交流、互動”。

交流、互動是一個非常容易理解的語境,在日常生活中持續進行。不僅發生在當代,也不僅發生在人與人之間,甚至於每一種文化背景中都可以理解這個概念。

在下面的圖中,我們可以觀察到:圖1人與人之間通過語言、表情、肢體等等傳達,都是他們交流互動的表徵;圖2人站在水裡,水紋波動,水與人之間也存在着一種溝通交流;圖3包含人與物的,躺在椅子上的人,本身就是與椅子持續的互動。這麼一看,交互真是非常自然、無處不在。人與環境(H-E-I)、人與人(H-H-I)、人與物(H-O-I)之間都是存在着交流互動,也就是有“交互”的關係。

圖1 人與人之間的交互

圖2 人與環境之間的交互

圖3 人與物之間的交互

當然上面談到的只是大的範疇上的“交互”概念,大的範疇有助於我們去理解交互的本質上是一個研究交流、互動的概念。

但也是因為概念的寬泛,導致模糊不清、不能辨明。那更具體的交互概念,也就是今天我們經常談論的互聯網中用戶體驗設計相關的“交互”概念,是怎麼樣的呢?這個概念源於20世紀80年代,計算機科學興起之後,涉及到很多——人的輸入界面,最初指的是“計算機相關的設計”,後來比爾· 摩爾理吉提出了“交互設計”的概念,為人與計算機的輸入與輸出尋找一種合理的溝通方式,這就是交互設計的由來。

人與計算機的交互(Human-computer-interaction簡稱HCI)的合理溝通方式也是從本身已經存在的人與環境、人與人、人與物的交互演化來的。比如圖5的語音輸入也是模仿了人與人之間的溝通交流,使用語音作為最自然的交互方式;圖6虛擬現實的交互則模仿了人本身在鏡子前面換衣服的場景,讓人與機器的交流順暢自然。

圖4人機交互的演化

圖5人機語音輸入

圖6 虛擬現實換衣服

交互設計的概念提出之後,也不是一層不變的,計算機本身的更新、增多,個人計算機用戶的普及等等都對交互設計的演化起到了推動作用。到了2007年,這個概念變得熱切起來,Bill.Moggridge在麻省理工出版了《Designing Interactions》一書,提供了燈塔式的作用。等到2010年iphone4橫空出世之後,每個人都在向別人展示自己的iphone4的滑動界面、圖片放大、唱片轉動等等,而不再執着於手機的翻蓋還是滑蓋之爭。人與計算機(手機是一種手持計算機)的交互被前所未有的關注了,更多的可能性被打開,交互設計也開始成為一個更普及的概念、獨立的崗位。

02 交互設計,設計什麼

交互設計雖然是叫做“設計”,但是感覺跟傳統的造物設計並不同。這裏可以舉一個例子,下面的兩張圖片都是必勝客的廣告。圖7展示了必勝客的新品披薩,體現了披薩的色澤鮮亮、食材優質、色香味俱全,我們一般稱圖7為一個產品/平面的設計;圖8則不同,畫面中包含了很多內容:兩個點披薩的人、使用一個可以點披薩的桌面、正在DIY披薩菜單等等。圖8其實算是一個比較典型的交互設計,來具體分析一下圖8包含了什麼。

圖7必勝客披薩新品廣告

圖8 必勝客觸控點餐系統概念廣告

圖9中將整個點餐的場景進行了分解,可以看到圍繞着點披薩的這個目的,場景中包含了以下五個元素:點餐顧客(people)、點披薩(purpose)、點餐行為動作(actions)、餐台多媒體(means)、披薩店的環境場景(contexts);其實這個也就是辛向陽博士提出的交互設計的五個元素。

圖9交互設計的五個元素

交互設計的五要素在圖9中看是比較混亂的,可以試着整合一下。如圖10中所示,交互設計五要素可以按照這樣排列,因為工具(means)、場景(contexts)是已經存在的次背景,所以重要關注的應該是主線流程:用戶(people)採用什麼樣行為、有哪些關鍵動作節點(actions)才達到了自己的最終目的(purpose)。這樣就會發現,交互設計由傳統的平面、產品等對物的設計轉化為對用戶行為的設計。

圖10 交互設計行為設計

交互(interaction)本身泊來詞,原詞interaction就是由inter-action組成,對action(動作)的設計是交互設計的本質,action(行為動作)和reaction(動作的反饋)構成了交互的基本單元。交互設計是對用戶行為動作(action)的設計。

03 為什麼梳理交互邏輯

交互的初衷是為了幫助用戶與計算機的溝通,溝通需要遵循一定的邏輯方法。計算機邏輯到底與用戶邏輯有什麼出入呢,這裏可以舉一個Alan cooper在《軟件創新之路——衝破高技術營造的牢籠》里提到的比喻:想象有一架客機,客機有兩個艙門,左邊是飛行員的駕駛艙,右邊是乘客艙。飛行員和乘客的目的地是相同的——他們都想平安到達目的城市。但是他們面臨的場景卻很不同:

飛機員艙要面臨很多任務,保證飛機平穩加速、安全起飛、雲流層、與控制台聯絡、安全降落等等;飛行員控制着這架飛機,熟知一切突發場景,了解複雜情況的背後邏輯。

乘客卻很不同,登上飛機之後,放棄對飛機的控制權,只想簡單的度過兩個小時,最後安全的達到目的地。

飛行員和乘客可以喻指:產品的開發人員(產品經理、開發人員)和用戶;兩者面臨的場景很不同,產品開發面臨各種產品背後的邏輯、複雜的子任務、意外情況等,所以思維是嚴謹複雜的,任何可能出現的意外情況都要被考慮到,所以他們遵循着“功能邏輯”;但是用戶很不同,他們使用產品為了達到目的,並不在意背後邏輯,也不打算對產品進行控制,遵循着“行為邏輯”。

圖11 功能邏輯人與行為邏輯人

由此可以預見,產品開發人員與用戶之間因為遵循邏輯不同,存在着天然的鴻溝,不同的邏輯對應不同的產品走向。下面兩個打印機可以說明遵循“功能邏輯”和“行為邏輯”不同的產品走向:

圖12是我們公司的大型打印機,功能非常強大,可以完成A4、A3打印複印、雙面掃描、複印質量很高;但是很遺憾的是,我第一次使用的時候完全一頭霧水,不得不找來詳細的教程,一步一步操作,還因為鏈接不上求助專業同事,甚至直到現在,我仍然沒有辦法保證自己能夠一次雙面複印成功——因為我沒有辦法分清楚反面複印的紙張的朝向,這就是一個典型的遵循了“功能邏輯”的產品。

圖13是2013年紅點產品設計的一個獲獎作品,這也是一個掃描複印機的設計,操作特別簡單,對準要複印的內容,按住手柄下方的掃描,就可以完成掃描,然後在新的紙張上按住手柄上方的按鈕,就可以對剛剛掃描的內容進行複印;整個流程出奇的簡單,也已經滿足了80%的掃描複印的用戶需求,相信看過一遍應該都會用;為什麼這個手柄複印機如此簡單好用?它遵從了“行為邏輯”,從用戶使用打印機的目的出發,規劃了合理的行為。

圖12 功能邏輯的打印機

圖13 行為邏輯的打印機

對比了“功能邏輯”和“行為邏輯”之後,不難發現,行為邏輯讓用戶的認知成本更低,更願意使用。但是生活中還是充斥着很多功能邏輯的產品,是產品開發人員不願意改進產品的使用體驗嗎?其實誰也不想與用戶為難,之所以會發生這種與用戶使用體驗背道而馳的情況,是因為產品開發人員不了解用戶和用戶的邏輯,自然開發出來的東西無法與用戶產生共鳴、被用戶認同。

04 怎麼進行交互設計

前面提到如果不了解用戶和用戶的邏輯,就沒有辦法開發出被用戶認同的產品。那麼交互設計顯然就需要想辦法連接用戶和產品開發者,梳理產品功能,遵循用戶邏輯,幫助產品得到用戶的共鳴。回到我們最開始提到的交互設計的五個元素,除了媒介工具、場景是根據不同的任務具體而定的,這裏暫且不做討論。其餘主線流程需要關注的元素剩下三個:用戶、行為動作、目的。

圖14 交互設計五要素

下面我們就對三個元素分別進行討論:

了解用戶

關注任務流程中的用戶要素,主要是關注用戶做決策的過程。了解用戶大腦做決策的過程,可以幫助設計師無限接近用戶的想法,與用戶產生同理心。

下面有三種類型的問題,看一下大腦的決策過程:

  • 起床之後那隻腳先放進拖鞋?
  • 算數15*16=?
  • 投資什麼基金?

對於:

  • 第一類問題,用戶的決策幾乎是無意識的,不需要消耗注意力的情況下,就已經憑藉直覺做出了反應;
  • 第二類問題,不管是先把15*16分成15*2*8還是15*10+15*6,都是用戶根據自己以往的經驗,有意識的去分析解決,並且一次只能專註在這一個任務;
  • 第三類問題,用戶無法直接做出決策,需要研究大量的規則、知識,尋求外界手段輔助決策過程。

在大腦認知和心理學上,這三個決策過程被歸納為“自主心智(Autonomous mind)”“算法心智(Algorithmic mind)”“反省心智(Reflective mind)”,這個概念比較難理解,舉個比較形象的比喻,就是用戶大腦決策的“省電模式”、“正常耗能”、“發燙模式”;大腦一點都不喜歡“發燙”,大腦最喜歡“省電”。

圖15 三種心智

了解了大腦的“省電”機制之後,根據心理學對心智的結論(本文不再展開說明),可以歸納為用戶設計中應該注意的幾點規則:

  1. 用戶討厭思考,喜歡選擇顯而易見的答案;
  2. 生動的信息更容易被接受,信息的表現會影響用戶的決策;
  3. 喜歡遵循自己既往的經驗、路徑,只了解自己的邏輯。

這幾點規則基本上幫助設計師了解了用戶:用戶喜歡簡單的流程,只用自己能夠理解的產品,遵循自己既有的經驗習慣。

了解目的,對應路徑種類

不同的目的會影響用戶的行為路徑,搞清楚用戶目的,才能規劃出合理的行為步驟。這裏舉個天貓商城的例子,來說明一下目的對應不同路徑,這裡有三個目標:

  1. 逛雙十一會場,看一看有哪些優惠商品;
  2. 搜索洗面奶,比較、選擇一下;
  3. 購買蘭蔻洗面奶。

圖16 天貓雙十一商城

圖17 搜索洗面奶界面

面對三個目標,用戶的行為路徑會隨着目標不同而變化,在第1個逛雙十一商城的目標中,用戶的路徑是隨機的,隨時可能被內容吸引,完成不同的路徑軌跡;第2個搜索洗面奶,比較選擇的目標中,可能會不停的收藏,再返回挑選,這個動作是往複式的;第3個明確購買蘭蔻洗面奶,目標明確,任務是推進式的,持續深入的過程。

圖18 隨機式、往複式、漸進式的三種不同目標的路徑

從上面的路徑分類可以清晰的看出:不同的目的對應了不同的路徑,隨機式、往複式、漸進式是一種對路徑的簡單分類。搞清楚目標之後,可以初步劃分路徑種類。

合理拆分動作流程

目的明確之後,路徑的種類也就明確了,下一步是在既定目標下,合理的劃分動作流程中的關鍵節點。

什麼是關鍵節點呢?有個段子,問如何把大象放進冰箱。其實答案也挺簡單的:

(1)把冰箱門打開→ (2)把大象放進去→ (3)把冰箱門關上

這個段子流程的劃分三個節點是沒問題的,每個步驟都是在前面一個步驟完成的情況下持續進行,但是之所以這個問題成為一個段子,是因為第2個步驟是不合理的,大象無法放進冰箱,這個步驟的問題沒有解決,那麼這個流程就無法跑通。

圖19 大象放進冰箱

所以,如何合理拆分動作流程呢?

講一個合理的用戶流程,劃分出關鍵的動作步驟,找到步驟中的問題,解決問題,最後給出完整的方案。

在這個裡面,首先要做的是規劃一個合理的用戶流程,流程是應該符合用戶預期的。舉一個例子來說明一下如何符合用戶預期。

假設我現在想要給手機號碼充值,那麼我們來設想一下,手機充值需要哪些步驟?大致歸納一下有三個步驟:

(1)要充值的手機號碼→(2) 確認充值多少錢(用“確認”是因為很多軟件提供了默認金額)→ (3)付款搞定。

這是我們設想中的手機充值的步驟,也就是對這個任務規劃的一個用戶流程。下面體驗一下天貓商城充值和微信手機充值:

圖20 天貓商城充值界面和充值步驟

圖20中展示了天貓的整個手機充值過程,在天貓的營業廳的右上角找到了充值入口。下面是我的充值描述:

  1. 首先輸入了自己的手機號碼,發現金額那裡有一個下拉框,點擊了一下沒有反應;
  2. 好的,這是一個輸入框,我輸入了10元,點擊立即充值;
  3. 突然彈出了一個新的彈窗,手機號碼不見了,我只好重新輸入了一遍手機號碼,此時金額默認為50元,但是我想充值10元,這裏沒有;
  4. 我點擊了其他金額,選擇了10元,頁面显示“缺貨”,立即充值按鈕置灰,這個時候不知道怎麼退出這個流程,因為點擊其他金額沒有了反應,只好點了彈窗右上角的“×”;
  5. 又退回了之前的右上角入口,但是號碼並沒有被記錄;
  6. 為了體驗產品,我耐心又輸入了一遍號碼,並且放棄了10元,直接輸入50元,點擊立即充值;
  7. 提示我沒有登錄天貓,讓我拿手機掃二維碼,我拿出手機掃碼登錄;
  8. 終於來到了支付寶收銀台。

整個充值過程我輸入了三次號碼,經歷三次金額選擇,兩個設備的切換,粗略經歷8個步驟,這跟我在開始之前預期的用戶流程相距甚遠,糟糕的體驗讓我幾乎在每一個步驟流失。

圖21 微信充值界面和充值步驟

 圖21中展示了我體驗微信手機充值的流程:

  1. 打開微信充值之後,發現自己的號碼已經被記錄,只有六種金額;
  2. 選擇最小金額,支付完成。

可以發現整個過程只經歷了兩步,甚至比我之前預期的用戶流程3個步驟還要更少,體驗順暢,流程劃分合理。

舉這個例子是基於對兩個產品的體會,好的流程、合理的步驟是交互設計的重點,優質的流程拆分會極大的增加用戶粘性,反之則面臨流失。

總結

借鑒辛向陽博士的交互設計五元素,基本上貫穿了本文的架構,交互設計的淵源本來就是自然的設計語言,交互設計是設計用戶的行為,與行為相關的“用戶”、“目標”、“動作拆分”則都是交互設計師的研究、工作內容,對每個元素更深入的理解,都可以幫助交互設計師準確的判斷、給用戶帶來認同。

擴展

本文提到的交互理論只是交互與人物學科的一個交叉範疇,交互設計不是一個單獨底蘊的學科,它與各種學科交叉互溶,與藝術的、美學的、技術的、造物的也都有不同的方向,可能也會遵循不同的設計理論。

用戶做決策的過程非常複雜,跟用戶個體的既往經驗、文化背景、感性理性思維等等都有關係。我自己也只是在不斷探索中。

更多擴展,歡迎探討。

圖22 複雜的人類決策過程

參考文獻

[1]交互設計-從物理邏輯到行為邏輯,辛向陽;

[2] 混沌中浮現的交互設計,辛向陽;

[3]軟件創新之路-衝破高技術營造的牢籠,【美】Alan cooper;

[4]超越智商:為什麼聰明人也會做蠢事,【美】基思.E.斯坦諾維奇.

 

作者:喬莎莎,騰訊FIT金融市場部交互一枚,對探究人的認知、合理規劃人機邏輯抱有極大的熱忱,目前持續研究中,歡迎探討,郵箱:1016415863@qq.com

來源:微信公眾號【騰訊大講堂】