請不要打斷我

Great designers produce pleasurable experiences.1

— Don Norman

Don Norman 用「愉悅的體驗」非常精妙地形容了優秀的設計師於工作中創造的價值所在。「體驗」是一個看起來很主觀的詞,但設計師所做的工作卻是非常嚴謹的科學。設計構建與認知心理學之上,通過研究人們的行為創造易於使用的產品。

Norman 在 The Design of Everyday Things 這本書中提出了 gulfs(心理鴻溝) 的概念:人們使用一件物品的過程中要面對操作時由「可以做什麼?」、「怎麼做?」等問題引出的 Gulf of Execution 和處理結果時由「結果是什麼?」、「結果符合預期嗎?」等問題引出的 Gulf of Evaluation。而設計的目的則是幫助用戶更輕鬆地跨過這兩個 gulfs 達成自己的目的。

書中這一個章節的內容就是由兩個 gulfs 開始一步步探索出交互設計的基本原則。其中最有趣的部分是,他在這裏展開討論了人類思維。行為是非常容易理解的,思維卻不是。絕大多數人類行為都是我們無法覺察的潛意識的結果。潛意識是快速、自然發生的;而意識是緩慢的、受到控制的。他將思維按照深度劃分了三個運作的層次:visceral、behavioural、reflective。信息由淺到深逐層傳遞,當潛意識不足以處理信息的時候,就會進行有意識的思考。

Gulfs of Execution and Evaluation 一直是 Norman 的理論中非常重要的基本概念之一。這個概念也曾在早先的一篇 paper 中被用於探究 direct manipulation interfaces 的優劣2。Direct manipulation 是 Ben Shneiderman 針對尚在萌芽階段的 GUI 提出的理念3,直到今天也非常具有參考意義,內容可以概括為幾點:

  • Continuous representation of objects
  • Metaphors of physical objects
  • Immediate feedback on actions

在我看來,HCI 歷史上有兩個重要的里程碑:一個是 GUI 的誕生;一個是觸摸式屏幕的誕生。GUI 使得像 direct manipulation 這樣的理念成為了可能。觸摸式屏幕則進一步縮短了人與機器之間的距離,使得人們不需要再借助滑鼠與游標(cursor)的映射(mapping),用指尖即可直接操控屏幕上的內容。

人與機器之間的距離被觸摸式屏幕極大地縮短,電子設備從未像現在這樣好用,但在不同的作業系統上使用不同的應用程式時,體驗卻仍然有很大的差異:有些作業系統或應用程式使用起來讓人覺得非常清晰、順暢、愉悅;而有些卻容易讓人感到困惑、受阻、焦慮。即便它們使用了極為相似的設計也經常是如此。

這種差異的根源是哪裏呢?有一件和設計無關的事也會造成類似的現象:性能不足導致的延遲、卡頓。通過觀察就會發現,在這樣的過程中其實悄悄地發生了思維深度的跳轉。當我們想看到列表下方的內容時,就會自然地滑動屏幕。當性能充足反應迅速時,整個動作是自然、連貫地完成的;而當性能不足導致滑動中卡頓時,我們的思維就會離開潛意識的動作,去處理「屏幕滑動時停住了」這一不在預期範圍之內的突發信息。我將這種被迫的思維打斷稱為 turbulence。

思維的連續性對於一個產品的使用體驗是非常重要的。它依賴著人類的潛意識,既包括與生俱來的本能,也包括後天通過重複使用的經驗達到的類似教育學中「overlearning」的效果。優秀的設計可以使產品被人毫不費力地流暢操作,而糟糕的設計則會給人帶來挫敗感。在心理學上有一個叫做「learned helplessness」的概念:當人們做一件事時重複經歷失敗,就會認為自己無法達成預期的目標,陷入無助的狀態。人們在使用一個設備時,潛意識裏總是傾向於將出錯的原因歸咎於自己,而不是糟糕的設計。重複的 turbulences 導致的思維停滯也會給人帶來類似的感覺,使人變得焦慮。

為了避免這種設計上的問題,我從源頭上總結了三個原則用於減少 turbulences 創造愉悅的體驗:

  • Predictability
  • Continuity
  • Non-interruptability

許多有著頂尖設計的一流團隊,例如 Apple、Path、Twitter、Telegram 等都會非常注重這樣的細節。

Predictability

Predictability 即所有操作的結果都是可預知的。在外觀上設計得使功能清晰且易於感知,並且具有即時的反饋讓用戶知道正在發生什麼以及即將產生什麼結果。

Twitter Swipe Back

例如 iOS 的滑動返回,箭頭清晰地指示出導航到上一級頁面的功能,在滑動時也可以看到上一級頁面的內容。

Continuity

Continuity 即所有顯示的內容都是連續的,在不同內容間切換時可以保持 context 的統一性,或者通過 transitions 體現 context 的變化過程。

Twitter Segmented Control

Twitter 的 profile 頁有一個用於在不同子頁面間切換的 segmented control,當在一個子頁面向下滑動後再切換到另一個頁面時,滑動的位置會保持不變。

Instagram Segmented Control

而有著類似設計的 Instagram 水平就差了很多。向下滑動一段距離再切換到另一個頁面時會發現:咦,怎麼滑動的位置又跳回了最上面?

Non-interruptability

Non-interruptability 則是指在用戶連續操作的過程中保證不打斷操作。

Twitter Pull Refresh

這是 Twitter 的下拉刷新功能。在下拉到一定距離觸發刷新時繼續按住拖動,數據加載完並不會立刻顯示新的內容,而是等鬆開手後才彈回去。

Instagram Pull Refresh

而 Instagram 在下拉刷新上的設計水平也同樣相差甚遠。觸發下拉刷新後不鬆開手指繼續拖動,數據加載完用戶還在拖動時內容就立刻彈回去了,給用戶一種失去控制的感覺。


這些細節上的考量避免了用戶不斷地被從受潛意識控制的連貫動作中拉出而增加思維負擔,使得每一個小的動作都更加順暢、愉悅。最終,所有這些細節匯聚成了近乎完美的用戶體驗,既是設計師們尊重人性的體現,也是這些 IT 企業的偉大之所在。


  1. Don Norman (2013). "Fundamental Principles of Interaction". The Design of Everyday Things (Revised and Expanded Edition). ISBN 978-0-465-05065-9.

  2. Edwin L. Hutchins, James D. Hollan, and Donald A. Norman (1985). "Direct Manipulation Interfaces". ACM Interactions.

  3. Ben Shneiderman (1983). "Direct Manipulation: A Step Beyond Programming Languages". IEEE Computer.