寫在遊戲設計前,設計心理學的六大設計原則

《設計的心理學》內容節錄

小熊 Kumama
THAT GAME DESIGNER - 遊戲設計師
15 min readJan 14, 2020

--

今天來分享一本之前參加讀書會時閱讀的《設計的心理學》,內容會根據之前整理的簡報來改寫。雖然書中比較偏向產品設計,不過設計本來就是需要互相借鑑學習的。所以來一起看看唐納.諾曼(Donald A. Norman )對於所謂設計的理解吧。

⭐️文章內容為個人的理解,如果有任何錯誤或疑慮之處,也歡迎一同討論。⭐️

概述

這篇文章主要是擷取部分書中的內容來進行延伸探討,《設計的心理學》中還有很多很多的內容,如果有興趣的話也可以自行去翻閱。至於其他部分會不會撰寫成文章……,再說吧。

作者介紹

唐納.諾曼(Donald A. Norman )

美國認知科學、人因工程等設計領域的著名學者

尼爾森諾曼集團的創辦人與顧問 — 該公司主要提供關於使用者經驗的研究諮詢顧問服務

知名著作:

  • 設計的心理學》
  • 《情感@設計:為什麼有些設計讓你一眼就愛上》
  • 《好設計不簡單:和設計師聯手馴服複雜科技,享受豐富生活》

對作者本人有興趣的話,也可以去看他的個人網站。
作者的個人網站:jnd.org

書籍目的

這本《設計的心理學》是一本屬於設計相關的入門書。其中最主要探討的是發覺生活中不良設計造成的問題,同時發現好的設計如何使生活更輕鬆。以及要知道如何選擇容易使用的產品,與如何應付令人困惑的產品。

先有以上這些前提,我們就來開始研究吧。

諾曼門(Norman doors)

唐納.諾曼對於那些夭壽難開/關的門的一種泛稱,也可以用來指各種設計不良的事物。

為了理解甚麼叫做難開的門,這邊有一部當初在讀書會播放過的影片,就一併附上給大家欣賞。

重點是要觀看影片中的那些門

看完影片,你有沒有回想起那扇曾經讓你不知道要”推”還是”拉”的門呢?

優良設計

優良設計的重點在於

  • 可發現性(Discoverability) 讓使用者容易發現
  • 易理解性(Understanding) 讓使用者容易理解

這邊來舉一個違反優良設計的案例,這張圖的內容不知道你還有沒有印象。

夏威夷飛彈誤報事件手機截圖

這是2018年的夏威夷飛彈誤報事件,造成夏威夷居民的混亂與恐慌,但是你知道為什麼會發生所謂的誤報事件嗎?

讓我們來看看所謂的警報是如何在機器上進行選擇的。

警報下拉式選單

你找得出來那個是正式的飛彈警報哪個是演習嗎?

答案是「PACOM(CDW)─ STATE ONLY」是正式的飛彈警報,而演習的警報則是前面有加上 DRILL 字樣的選項。

這件事情雖然官方是將其視為人為錯誤,但是這種設計真的可以當作人為錯誤就好了嗎?還是我們先來假設,人就是會犯錯,然後透過設計來降低或是避免錯誤發生的可能呢。

人本設計(Human-Centered design,HCD)

人們往往不知道自己真正的需求,實際上可以透過觀察快速測試的方式來趨近於需求的本質。人本設計的主要目的,在於確保設計能符合使用者的需求及能力。而工業設計、互動設計等,則是重點不同的專門設計領域。

如果你有玩過Portal,應該可以發現所謂的人本設計被大量應用在所謂的關卡學習上。

首先他會展示每一個關卡中的功能,並且出現一道謎題給玩家。玩家在觀察過房間的配置與功能後,會透過他們腦中所想的方案去進行快速測試,同是這也會構成一項體驗,也就是下方等等會帶出的互動基本原則。

Portal 關卡

互動的基本原則

體驗,沒錯,就是體驗。

「優秀的設計師創造愉悅的體驗」

無論你是要做遊戲設計、產品設計、互動設計……,體驗就是你的最高準則,因為今天你是一位設計師而不是藝術家,你所設計的東西要能讓使用者擁有愉悅的體驗才是重點。

這裡我們來回顧一下前面提到的門,然後透過體驗來帶出最重要的觀念。首先,你的前方出現了一道關閉的門,開門的體驗究竟是如何呢。

你可以先思考一下再接著往下看。

這是我房間的門w

想好了嗎,來看看我撰寫的描述跟你們的體驗有沒有差別。

前方出現了一道關閉的門:

  1. 首先,你走上前用眼睛觀察這道門
  2. 接著,你發現了門上有一個金屬製的喇叭鎖門把
  3. 於是你透過經驗去嘗試握住門把,並且向左或右進行旋轉
  4. ok,你成功開啟了這扇門

很簡單對吧,那我們再來解析這四個步驟分別帶來了甚麼觀念。

  1. 你走上前去觀察這道門 > 了解這扇門的用意
  2. 發現門上有一個喇叭鎖門把 > 發現關鍵的指引
  3. 於是你嘗試著旋轉喇叭鎖 > 從過往的概念模型中取得操作經驗
  4. 接著你嘗試推或拉的方式來開門 > 從過往的概念模型中取得操作經驗
  5. ok,你成功打開了這扇門 > 獲得開心(? 的情緒

記住這些體驗,接下來我們要來談六大設計原則

六大設計原則

預設用途(affordances)

物體與操作者之間的關係

這邊我舉兩個例子來說明。

第一個例子是椅子,首先你看到一張椅子的時候,為什麼會認為他是椅子。他可能是一塊約莫屁股大小的平面,高度約落在75公分左右,並且有著一個可以靠著背的地方,所以你知道當你往下坐下時,會落在那個平面上。

也就是說這個椅子提供給使用者可以坐上去的預設用途。

物體 = 椅子

操作者 = 坐上去的使用者

但是椅子有沒有當初設定的預設用途以外的功能。當然有,想想食神裡面的七大武器之首吧。

而要如何做到預設用途所需的目標,這邊可以分成兩塊

  • 易視性(visibility) 本體、直觀
  • 指意(signifiers) 非本體、隱性

易視性指的是讓使用者能夠清楚的看到關鍵運作的項目以及該如何操作。

有尖刺的、紅色的都是預設會對玩家造成傷害的類型

指意(signifiers)

向人們傳達適當的行為方式的指示方法,包括符號、聲音、以及所有能被知覺的信號。

又被稱為「意符」,源自於符號學。聽起來很難理解,但是只要舉個例子就可以知道指意是甚麼。

按下Tab以及方向上鍵的教學,也可以稱作為一種指意

首先前面在預設用途中提到,指意是非本體、隱性的。例子就拿門來說吧,一扇門的預設用途應該包含遮擋、隔音、防風、可開關……等等功能。其中只有可開關這項需要人為去操控,所以門上如果貼有PUSH的字樣,你就會同時理解三件事:

  1. 他是門
  2. 可以推開
  3. 這就是指意

所以來拆解一下一扇門上每個項目對應的設計原則:

  • 門板 — 遮擋物本身:預設用途
  • 喇叭鎖 — 提供開關門的方法以及可以鎖門:預設用途+指意
  • 門上的貼紙 — 提供正確開關門的方法:指意

所以可以被知覺到的預設用途(喇叭鎖)往往會成為一種指意。

科技進步產生的改變

再來要提到的是,指意是會隨著科技的進步而改變,這改變有一部分是來自心理概念模型的轉換,關於概念模型的部分我們下次再做影片給大家講解。(後面會提到)

舉個比較明顯的例子:電話。

過去電話的示意圖示應該都是只有聽筒,或是下方會有類似九宮格按鍵的圖樣,但是隨著科技的演變,現在慢慢轉變成使用觸碰的全螢幕圖樣。對於年輕一點的使用者來說,你畫聽筒的圖樣他們應該會看的一頭霧水。

前面提到的都是比較正向的,但是也有所謂的誤導性指意。這個在各種遊戲中就非常容易看到了,舉個例子,請在看到下方圖片的3秒內,說出文字的顏色:

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

你的答案是紅色嗎(笑。

這邊要說的其實是,很多不好的使用者體驗,大多是來自錯誤的指意所造成的。當然這只是其中兩個設計原則所需要考量的部分,後面還有其他需要一併思考的內容。

這段最後來整理一下前面提到的預設用途以及指意之間的差異:

預設用途以及指意之間的差異表格

對應性(mapping)

兩個集合元素間的關係。

舉個日常生活的例子,開關與電燈。

電燈與開關

所以我們可以簡化一點來說就是控制(Control)與顯示(UI)之間的安排。

  • 控制:開關
  • 顯示:電燈

需要注意的是,使用者不需要知道其中運作的原理,而是透過對應性去連結使用者心中的心理模型。拿剛剛的開關為例:向上按下去是開燈,向下按下去是關燈,至於中間是透過科學還是魔法來達成的,使用者都不會在乎(咦。

卡片將金錢消耗放在左上角,除了圖示的連結以外,與玩家本身的金錢顯示位置有對應性

再來,就是要提一個反面的例子,不知道大家的印象中有沒有出過過這個情境。

還在學的時期,要開始進行午休,老師請最後一排的同學幫忙關燈,但是老師座位區的不要關。於是學生走到電燈開關區,看到了教室後方的開關長這樣……。

我只好用這張MEME來詮釋這位學生心中的想法。

面對這樣的問題可以透過等等提到的方法來解決。

完形心理學

格式塔學派,又稱為完形心理學,主張人腦的運作原理是整體,「整體不等於個體的總和」

就比如你看到一輛「車」,是觀察到車的整體,而不是分別看到了輪胎、底盤、車門等等個體的總和

關於完形心理學的內容這邊只會簡單的提一下。

這邊要提的是完形心理學中的接近性(proximity),透過接近性來進行分組可以讓我們自動幫物件進行歸類。從圖中可以看出來椅子的調整、椅墊的加熱或通風、門把上的鎖定或解除,這樣可以讓使用者更容易地操作。

汽車車門旁的調整按鈕分類,依據上鎖、椅子、椅墊等功能區分
炸彈的虛線爆炸範圍也是屬於完形心理學

回饋(feedback)

控制論的基本概念,可視為傳達一個動作的結果。

來,現在請想試著喝一口水,接著思考一下你做了甚麼。

最基本的喝水流程,應該會是這樣:

  1. 找到水杯
  2. 將水杯拿起來
  3. 喝它!

是不是很簡單,接著我們來解析一些這些操作背後隱藏的資訊:

  1. 透過眼睛去尋找水杯,獲得水杯所在位置的回饋
  2. 將手伸向水杯,當你碰觸到水杯時獲得觸感的回饋
  3. 施力握緊水杯,觸感回饋
  4. 將水杯移動到嘴邊……
  5. ……
  6. 好喝!

透過上述喝水的例子,其實它傳達了一個很重要的訊息,就是

回饋必須立即

延宕的回饋會令人產生不舒服的感受,進而容易放棄等待。如果剛剛在水杯的案例中,少了任何一項即時產生的回饋,相信都會有很肚爛的感覺吧。

那麼你也可以想想看,有沒有曾經因為不及時的回饋而放棄。

接著討論的是,有沒有明明產生即時回饋了,卻依然讓使用者產生不舒服的感受呢。有的,看看下面這個範例。

蜂鳴器

這是裝置在電腦主機板上的蜂鳴器,用來表示電腦主機可能遭遇到的狀況。那麼你知道連續發出10次短聲是甚麼狀況嗎,你有3秒鐘的時間,3、2、1,時間到。

答案是我會看分析表。

BIOS警示音分析表

實際上以現今的科技來說,是有辦法做到在電腦中安裝一個類似 SIRI 的人工智慧,當錯誤產生時直接告訴使用者發生了甚麼錯誤,但是為什麼不要這樣選擇呢。

因為成本,目前市面上大部分產品的設計不良,往往是為了要降低成本而產生的。

正面的案例相信大家手邊也不少,這邊就提個簡單的:電話。

家用聽筒電話

每當你按下電話上的按鍵時,除了會有按鈕聲以外,上方的畫面還會即時顯示目前已經按下的數字。讓使用者同時可以透過耳朵與手接受到按下按鍵的回饋,以及使用眼睛看到每次按完後的回饋。

如果今天設計了一台電話,它沒有按鈕聲,也沒有螢幕顯示,你還有辦法成功的撥打電話嗎。所以回饋是必要的,而且必須要正確與適當的呈現出來

動作與射擊遊戲中的回饋非常多,你可以看出幾個呢

概念模型(conceptual model)

關於某種系統一系列在構想、概念上的描述,敘述其如何作用,能讓使用者瞭解此系統被設計師預設之使用方式。

白話一點就是高度簡化來解釋東西如何運作,例如電腦系統中的資料夾與電子郵件圖示,都是使用相似且簡化後的概念來解釋。

兩個巨大的電腦符號

但是,這有時候會出現誤導的情況,因為一項產品可能出現多個概念模型

像是玩家與遊戲開發者,兩者在看遊戲的角度就全然不同,這也導致有些人設計出來的東西會不符合玩家的期待,所以在測試項目中才會需要讓玩家試玩並且給出回饋。

所以你會發現,概念模型經常由經驗所構成。經驗代表著一個人的過往的經歷,這也表示著,經驗是會出錯的,因為人類是不可信任的(X。

除了經驗以外,還可以透過指意、預設用途、使用侷限、對應性等方式來推測出概念模型,繼續拿最好用的例子來說明。

智慧型手機延續了聽筒電話的使用方式

為什麼智慧型手機的設計幾乎維持了與傳統聽筒電話相同的使用方式,這是因為可以減少人們的學習成本,降低因為科技變遷而產生的負擔。

這張圖只是想證明每個人的心理模型是不同的(笑

概念模型的價值,在於提供一個預測事情進行的理解方式,以及出現BUG時,能提供排除障礙的方法

這也是為什麼你在學習製作遊戲的過程中,大部分前輩給予的建議都會是要你先實作看看。因為在實作的過程中,你可以建立屬於你自己的概念模型,同時學會排除障礙的方式,對於學習上來說是很有幫助的。

能夠走在不是平地的地方,就也算是顛覆了某種概念模型

系統印象

人,就是在生活中不斷地學習,然後建立各種不同的概念模型。

某項物品的概念模型,就是透過過去所接觸到所有與之相關的各式資料所組合而成,稱之為系統印象。

系統印象說明圖

上面這張圖要描述的是,設計師透過它的概念模型設計好一項產品以及說明書,使用者透過使用產品與閱讀說明書來建立屬於自己的概念模型,這當中就會產生不同的理解與詮釋。

在roguelike類型遊戲中,就是不斷地去建構系統印象,圖中就是我第一次被蛋炸死(笑

使用侷限(constraints)

是一種強而有力的提示,限制使用者能採取的行動。

與前面提到的指引差異不同,使用侷限著重的是限制、約束。而侷限可概略分成物理、文化、意義、邏輯四種類型。

  • 物理侷限:透過物體本身來進行侷限,像是電池的正反面、鑰匙的鋸齒、滑鼠的形狀等等。
  • 文化侷限:你如果在路上看到黃色的車,九成會猜測是計程車,但是這項猜測僅限於台灣。
  • 意義侷限:人類共同定義的侷限,例如一顆閃爍的橘燈並沒有意義,但是當它在車子的右側時,代表著它要右轉。
  • 邏輯侷限:當你把摩托車拆光,裝回去才發現多兩顆螺絲,那麼很顯然的你裝錯了。(不過還是能騎啦……)

使用侷限的部分,很多都需要談到與記憶相關的內容,所以就下篇有機會再來撰寫吧。

解謎遊戲中的侷限通常會與謎題有著緊密的關聯

總結

不知不覺就越寫越多,但是這些內容大概只有書中的一個章節左右,剩下的有機會再來慢慢寫。最後來回顧一下這次有聊到的東西吧,也希望這些內容對你能夠有所幫助。

諾曼門:那些夭壽難開/關的門的一種泛稱,也可以用來指各種設計不良的事物。優良設計:優良設計的重點在於可發現性與易理解性。人本設計:人們往往不知道自己真正的需求,你可以透過觀察、快速測試的方式來趨近於需求的本質。互動的基本原則:體驗六大設計原則:預設用途、指意、對應性、回饋、概念模型、使用侷限預設用途:物體與操作者之間的關係。指意:向人們傳達適當的行為方式的指示方法,包括符號、聲音、以及所有能被知覺的信號。對應性:兩個集合元素間的關係完形心理學:格式塔學派,又稱為完形心理學,主張人腦的運作原理是整體,「整體不等於個體的總和」。回饋控制論的基本概念,可視為傳達一個動作的結果。概念模型:高度簡化來解釋東西如何運作。使用侷限:一種強而有力的提示,限制使用者能採取的行動。

--

--

小熊 Kumama
THAT GAME DESIGNER - 遊戲設計師

Game Designer || 在遊戲業界努力生存的小小設計師。