殺人事件里的設計心理學

( Photo Courtesy of DKNG Studios )

首先聲明，這是一篇正經的UX文章，但我要先從一個殺人案件說起。就是這麼嚴肅。

兇器

刑偵類日劇經典，古畑任三郎第二季的第一集講的是從一個字露出破綻的故事。開場就埋下了伏筆。這裡魚叔飾演的律師在法庭上語氣非常欠揍地交叉詢問公訴方證人，請她回答不遠處的桌面上有什麼東西，目的是誘導證人從而降低目擊證詞可靠性。

除了魚叔說的法庭這個環境因素，另外一個讓證人誤判的原因是，那根香蕉放在了竹盤上。把香蕉帶上庭已經很奇怪了，哪有邊辯護邊啃香蕉的律師，臉大如古美門估計都做不出來。香蕉還放在竹盤上，為了透氣么？

接下來就是正篇殺人事件，不用怕，沒有會引起不適的畫面。沒看過這部劇的可以猜一下該案件的兇器到底是什麼。兇手不用猜，並不是重點。

會碎的、透明的、有把手的、可單手持握的、居家常見的、足以殺人的。大概也只有玻璃水壺了。

劇情在兩隻老狐狸套路彼此又反套路之間展開，魚叔作為一個難得有高智商的反派還是難敵本劇智商兼嘴炮擔當。

的確很奇怪，古畑手裡這個怎麼看都是個水瓶，魚叔卻說它是花瓶。可能有人會說，大概律師在家就是用類似的瓶子當花瓶。那麼問題來了。一個在此之前只見過現場玻璃碎片，並且主要通過報告書了解案情的辯護律師，怎麼會別出心裁改用花瓶指代兇器？

並不是魚叔眼神不好或者腦子不好，主要是第一印象坑了他。一個插著玫瑰，擺放在一堆植物旁邊的玻璃瓶子，的確是個花瓶。但如果把花扔了，放在廚房一堆杯碟旁邊，又明顯是個水瓶。可惜魚叔遇上的是古畑老爺，眼神和心思比針還尖還細。

如果是一個從來沒見過的物品，怎麼使用大多數情況只能從外觀上找線索。Norman 認為物理結構上的局限可以將可能的操作方法限定在一定範圍內，這裡的物理結構即是外顯線索。而對於劇中這樣常見的玻璃水壺，我們只憑常識或者說記憶就可以得出答案。但把水壺說成花瓶的例子證明了即使是一個日常可見的物品，使用者的認知也極易受到所處語境的影響。

我曾把一個理論上喝冷湯的陶瓷湯碗當作水杯用，因為夠大，一次可以接足量的水，而且這個湯碗是帶把手的，拿起來很便利。但之所以說是理論上，一來出售它的店家貼的說明標籤寫的是湯碗，二來它和一堆沒有把手的飯碗放在一個貨架上。湯碗作水杯，也並不奇怪，對一個物品的功能定義，除了這個物品自身提供的屬性、所處語境外，也取決於對該物品的認知。

Affordance / 預設用途

以上都是鋪墊，有點長。接下來是過渡，可能也有一點點長。

Affordance 一詞經由 Norman 而廣為人知，但最早並不是他提出的這個概念。認知心理學家 James J. Gibson 在對生態學的研究中創造了該詞，他認為，Affordance 是生物與其環境的對應關係，可以被直接感知或者識別。

Affordance is equally a fact of the environment and a fact of behaviour. It is both physical and psychical, yet neither. An affordance points both ways, to the environment and to the observer.

....affordances are properties of things taken with reference to an observer but not properties of the experiences of the observer. They are not subjective values.

Gibson 對 Affordance 的定義是關係，由環境和觀測者共同界定的關係。需要強調的是，Affordance 不來自於觀測者的主觀想法，和觀測者的經驗也好情緒也好都無關。Affordance 是自環境中彰顯給觀測者的屬性，觀測者給定的只是單位；一塊有四條長度相等的腿支撐的玻璃，腿的長度可以是1厘米、10厘米或者100厘米，但只有略高於觀測者座高（大概等於75厘米）的時候，這個物體才會被認知為可以支撐雙手，供書寫的。供這個字很重要。

The term affordance refers to whatever it is about the environment that contributes to the kind of interaction that occurs.

中信2010年出版的 Norman 設計心理學一書中將 Affordance 譯成 「預設用途」，翻譯得很巧妙。用途固然是物品的屬性，但只有在特定場景下會被用到的時候，這個屬性才被稱作用途；玻璃有個屬性是透明，但這個屬性和玻璃桌面可以被用來支撐書寫無關，那這個屬性在該場景下就只是屬性，不能被稱作用途。設計者自然可以為物品設計任意用途，但設計者是為了使用者而設計，使用者會有怎樣的預設，決定了用途是什麼。

預設用途同時指向物品和使用者。

芬蘭建築師、城市規劃師薩里寧曾這麼說，

Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.

一把椅子不僅是一把椅子，它不可能孤立存在，它是某個場景里的椅子。給醫院裡的小朋友設計的椅子肯定和給太空梭上的宇航員設計的椅子不一樣，不一樣的原因是預設用途不一樣。

這是什麼

以上內容講的都是實體物件，但理論對於虛擬物體的設計也是通用的。

首先來看一個Gmail的例子，如下圖紅色箭頭所示，一個有著灰底，灰色向左箭頭的按鈕。箭頭的橫線下面還有一小段垂直的線條。如果走在路上看到放大版的這個符號，我大概會認為它是一個讓我筆直往前走第一個路口左拐的指示標。然而這是個網頁。

再看來下圖同一個頁面右側的這個符號，它竟然是帶透視的，頗具動感，所以點擊以後會發生什麼東西往左飛出去的事么？並不是完全不可能。

第一次見到這個 Gmail 頁面的用戶大概會有些一頭霧水，那將這兩個按鈕放在一起看。

可以發現，左側的灰箭頭和其他按鈕位於郵件標題的上方，而右側的灰箭頭則在標題下方，和發件人，發送時間在一個層級里。從層級判斷，左側灰箭頭高於該郵件，而右側灰箭頭從屬於該郵件，如果從發件人郵箱後面跟著的 Unsubscribe 推導的話，右側灰箭頭應該也是同類型的針對發件人的操作。

答案並不複雜，左側灰箭頭是返回收件箱，右側灰箭頭是回復。

如果只從符號語義出發，左側箭頭不如一個 Back，右側箭頭不如一個 Reply 清晰。但實際使用中，當滑鼠箭頭懸停在這兩個按鈕之上時，會有對應的 tooltip 給出按鈕功能的文字說明。並且在一次學習後，識別符號可能會比文字更快。

這的確是個很小的設計，但並不簡單。

預設用途這一概念對於設計的啟示，簡單概括就是薩里寧說的那句話；設計一件物品要將其置身於語境中，該語境也存在於它之上的語境中，這是一個系統，牽一髮動全身，每一個元素的定義都受到其他共存因素的影響。

再來看一個 Twitter 的例子。還是一個灰色箭頭，和其他類似視覺表現的 icon 在同一行里。Gmail 的例子在前，這樣的符號有可能是返回也有可能是回復。但考慮到箭頭所處位置，返回功能不符合邏輯，只剩下回復按鈕。也的確是回復按鈕。

再來看 Chrome 的例子，仍然是灰色箭頭。截圖正好把 tooltip 截進去了，所以可以看到，這個灰色箭頭的功能是單擊返回，長按查看瀏覽歷史。

同樣都是灰色的，指左箭頭符號的按鈕，在不同使用場景下可以有相同或者不同的功能。而之間的區分，完全取決於它視覺屬性：形狀，大小，顏色，etc.，它與所處環境/語境的關係：出現位置、與其他功能控制項的層級關係，和使用者對它和所處語境關係的理解：用戶對這一設計的認知和預判，比如，出現在瀏覽器中的按鈕應該可以實現的功能。

把上述四種箭頭抽離出各自語境後會發現，按鈕本身屬性完全無法提供足夠線索。它們的功能定義更仰賴於所處語境。

所以如果 shuffle 一下好像也沒什麼違和。ˊ_>ˋ

鏈接、按鈕、標籤卡

說了那麼久，核心其實就是一句話，

設計一個元素，要將其置於語境中。

當元素本身不足以將可能使用方法限制到一定範圍的時候，用戶會自動去周邊環境找線索。與此同時，他們也會在大腦中搜索當下看到的信息是否和記憶匹配。這一步就是預設；是否見過類似的東西，當時的場景和現在的是否類似，是否會有類似的功能。

上圖是三組「贊」和「轉播」。第一組看上去像鏈接，因為藍色文字一般就是這麼用的，中間一組看上去是按鈕。第三組和第一組很類似，兩個元素出現先後以及數字和文字的位置不同。

放到具體語境中看。

在圖片內容下方的三個控制項視覺表現類似，都帶數字，區別在於贊的數字灰色有括弧。通常情況，藍色下劃線文字錶鏈接，但這是上世紀的範例，目前越來越多的鏈接設計都不再帶下劃線，也不局限只用藍色。

點擊轉播以後觸發出現一個浮層，於是這並不是鏈接，功能並不是點擊前往查看178個轉播，而是轉播說說看法。類似的，點擊贊以後也是增加一個贊，而非查看163個贊。第一組控制項都是按鈕。

接下來看第二、三組出現的場景。

第二組的符號和語義都很清晰，按鈕的視覺形式、icon加上作動詞解的說明文字。點擊以後發現和第一組是同樣的功能。

第三組和第一組的視覺表達以及語境都很類似，所以預設他們功能一致。但這樣不合邏輯，因為同一個場景里已經有第二組控制項了。即使這裡需要控制項重複出現，也不需要控制項長得不一樣。點擊以後發現，第三組控制項的功能是標籤卡，點擊分別前往查看178條轉播和163個贊。

這裡就出現了與預設不一致的問題。

當元素本身、所處語境和預設都不足以讓用戶找到線索的時候，這個設計會是失敗的。

Summary

1. 設計一個元素要將其置於語境中。元素本身、語境以及用戶對元素的預設缺一不可。

References:

1. Norman, Donald A. (1998) The design of everyday things. New York, NY: Basic Books
2. Gibson, J. J. (2014). The ecological approach to visual perception: classic edition. Psychology Press.
3. Greeno, J. G. (1994). Gibsons affordances.

推薦閱讀：