設計的心理學 – 概念模型

閱讀這篇前,可以先再複習一下前面提到的設計的基本原則,文中我有提到二大設計目標,其中一項就是「易理解性」,而易理解性根據我在文中解釋指的就是「概念模型」,也是我歸納出六項設計原則的最重要的一個原則。

概念模型

概念模型(conceptual model):一個東西怎麼運作的解釋。-p.52

要理解概念模型,我們先做個簡單的練習。請想像並說明如何從提款機提領出一千塊的現金?

以下是我描述的提款流程:
首先插入金融卡 →依照提示輸入密碼 → 選擇提款金額 →依照提示取出卡片→拿回現金 → 完成交易

這就是我對提款流程運作上的解釋,也就是一個「概念模型」。但問題來了,操作提款機的概念模型從何而來 ? 假如我是第一次使用提款機,概念模型還不存在時,我要如何提款? 書中提供的解釋是:

概念模型往往是從機器本身推測出來的 — p.53

由此可知,透過機器本身提供的線索(指意、預設用途、使用局限、對應性、回饋)來形成概念模型,例如我可以透過畫面文字的「指意」告訴我要先插入卡片,找到可以插入卡片的位置(「使用局限」),透過聲音、文字的「指意」與「回饋」選擇我需要的提款服務,再依照畫面的說明,點擊「對應」到的金額按鈕,等待提示完成提款任務。透過「可見性的」線索推測出提款行為的概念模型,而這樣的操作經驗,就會成為我對提款行為的「概念模型」。

心理模型與實現模型

提款機在本身的物理結構上,或許有提供一些可操作的線索,但在完整的提款流程中,除了提款機的物理特徵外,提款機的操作介面的互動方式也很重要,那設計師又要根據什麼來設計提款機的介面呢?因此這邊就要提到「心理模型(mental model)」:

心理模型(mental model):人們對於事物如何運作的理解。 p.53

心理模型在本書中沒有太多的著墨,因此我再補上另一本書《一目了然(簡):web和移動應用設計通識方法》,書中第五章有針對心理模型做了比較完整的解釋(書中稱「心智模型」)。

通常好的產品的開發過程,一開始就會納入使用者的「心理模型」,這也就是「使用者經驗分析」的重要性,設計師透過收集使用者的心理模型,了解一般人對於事物如何的運作解釋,開發出符合一般人使用的概念模型。

理想上,好的概念模型會符合一般使用者的心理模型,也就達成「易理解性」的設計目標。另外,如果不是用「心理模型」來開發產品,也就是產品末經過「設計」,在《一目了然(簡):web和移動應用設計通識方法》書中則稱之為「實現模型(implementation model)。

實現模型(implementation model):是已經設計好的產品(通常未經過「設計」),直接反映系統的底層細節,它不關心系統的用戶,通常只是取悅他的創造者。《一目了然(簡):web和移動應用設計通識方法》-p.98

那概念模型與心理模型還有實現模型有什麼差異? 其實好的概念模型會更貼近一般人的心理模型,不好的概念模型,通常會比較像是實現模型,但模型並沒有對錯 ,因為對於開發者而言,實現模型也就是他自己認為的心理模型或概念模型。例如下圖,

cantread

 

這是一個應用程式錯誤的提示框,對於一般使用者來說,就是一個標準的實現模型,使用者看到後,應該會完全看不懂這個提示框想表達的是什麼,可能是個錯誤吧,然後就關閉了,但是如果是開發這個應用程式的工程師,反而會覺得「原來如此」,接下來找出錯誤去修復,因為這個視窗不是給使用者看的,而是開發者。

但並不是所有的產品都是容易理解的,通常使用者無法直接與設計師溝通,因此設計師完成一個產品的概念模型後,就得透過「系統印象」來與使用者進行溝通。

系統印象

系統印象(system image):關於產品有關的說明資訊組合或是類似相關產品的經驗。 p.58

這邊我將書上的說明簡化,總而言之,設計師會透過「系統印象」跟使用者進行溝通,可能會是產品的物理特徵或是一份說明文件、一段操作影片,只要是能有助於傳達設計師的概念模型給使用者,並協助理解產品,都稱為系統印象。系統印象的責任在於溝通,讓使用者能夠理解產品的使用方式。當然如果產品本身的概念模型夠符合使用者的心理模型,那系統印象就顯的沒那麼的重要了。

對於設計的意涵

對設計師而言,開發產品能否考慮使用者的心理模型,絕對是一件很重要的事情,因為「易理解」是使用者能否順利操作產品的關鍵,因此重點在於「如何讓使用者能夠速且容易的理解並使用產品」,系統印象的方式肯定不是一個最好的方式,終究還是得回到使用者的研究與分析。

而概念模型的發展通常不會一次到位,因為每一使用者的心理模型不會完全相同,而且心理模型並非固定常數,而是會受到不同環境因素而影響的變數,所以之後的迭代設計,就會是整個產品的發展重點。

此外,使用者的心理模型並不是不能改變的,因為心理模型的形成與過去的經驗有關,如果是一個使用很久的概念模型,使用者可能也不會發現不合理的地方。舉個例來說,請回想一下捷運的購票機操作流程,是先投錢還是先選擇票種與票數? 我想有操作過的人,都會知道先選票再投錢,但再回想一下台鐵的購票機操作流程,是先投錢還是先選票種與票數?  請看下圖。

632896955797949952

以前的是先投錢再選票,所以我剛上台北搭捷運時,一開始錢投不進去(使用局限)讓我有點錯愕,當然目前的台鐵售票機也都改成先選票再投錢,而仔細思考,那一個概念模型才是一個好的模型呢? 感覺是先選擇票種、數量再投錢比較容易理解是吧,因為舊的機器,假設買的票價大於投的金額,會發現有些按鈕不能按,所以要再補足差額才能按,那為什麼不一開始選好,然後就把錢一次投完就好呢?  或許是跟以前直接跟站務人員買票是先給錢再拿票的習慣有關吧,而設計師在設計機器時,就把這樣的習慣變成一種概念模型了。而現在使用者的心理模型,也都被調整成先選擇後付款的操作方式了,這就是心理模型的改變。

以上是我對於設計的心理學-概念模型的整理,其實此書對於概念模型的說明並沒有很完整,還有點抽象,建議搭配其他書籍。而「概念模型」是Norman的說法,其他的書籍大多是用心理模型或心智模型來解釋,所以有任何不清楚的地方或意見都歡迎交流。

其他參考書單:
《一目了然(簡):web和移動應用設計通識方法》
《親愛的介面(簡):讓用戶樂於使用、愛不釋手》

 

 

 

廣告

設計的心理學 – 對應性、回饋、使用局限

繼上一篇介紹了預設用途與指意,這篇主要要來談一下另外三個設計原則:對應性、回饋、使用局限,最後一篇再來討論概念模型。

預設用途與指意的應用方式,其實就是在於與操作者之間關係的互動與指引,在本書在第三章,有提到關於人類大腦的記憶結構與行為模式;總而言之,結論就是「大腦有時並不是那麼靠譜」,因此需要其他的設計原則來進行輔助,降低大腦的記憶與行為操作的負擔。
而除了預設用途與指意外,對應性、回饋、使用局限也是常用的設計方法。

對應性

對應性(mapping):盡可能透過空間布局和時間上的配合,安排控制器和行動之間的相對關係。─p.103.

對應性是從數學來的名詞,是指的是兩個集合元素間的關係。集合就是「一堆東西」,構成集合的就是元素,而找出元素之間的關係,就是對應的關係。雖然書上針對對應性有做一些說明,但我將對應性分成兩種概念:靜態對應、動態對應。這樣比較好理解。

  • 靜態對應
    就是空間配置上的對應,在生活中很常看見,像書上有提到瓦斯爐的配置方式,就是靜態對應的一種應用。
    下圖左邊是兩口式的瓦斯爐,一般使用者很容易就可以找到爐頭與按鈕的對應關係(左對左、右對右);而右圖則是三口的瓦斯爐,因為左邊有兩個爐頭,比較難確認對應的關係,因此可能要透過指意或其他方式來說明對應方式。
    mapping1
  • 動態對應
    就是兩個元素必須透過操作的動作,才能知道怎麼對應。例如車子的方向盤,車子行進中,方向盤往右邊轉,車子就會往右彎,向左轉,就會往左彎,是動態對應常見應用。而在app的介面上,資訊更新的方式,是由上而下,通常手勢往下滑可以獲取比較新的資訊,上滑則是比較舊的資訊,也是常見的動態對應方式。

不管是靜態或是動態對應,對應性的目的在於操作者能夠容易理解或透過操作理解對應關係,來降低記憶負擔,而好的對應,當然就愈是自然愈好,所以書中有提到「自然對應」:

自然對應是指控制的方式和被控制的對象之間有顯而易見的關係-p.149.

但對於「自然」這定義,其實也會受到許多文化或是習慣的侷限,像是不同國家文字的閱讀方向就會不同、汽車的左駕或右駕、飲食習慣、社交禮儀…等等。因此自然對應會隨著文化而改變-p.152.,這是設計師在設計思考時必須考慮到的,否則可能會做出讓人匪夷所思的產品。

回饋

回饋(Feedback):對操作的結果和當前的狀態,提供完整和連續的訊息。-p.103.

回饋的概念,書中有提到,是傳達一個動作的結果,是控制理論(Control theory)和資訊理論(Information theory)中眾所皆知的概念-p.50.,其實我覺得更像心理學的「操作制約(Operant conditioning)」理論,操作者主動的行為,得到一個行為後的結果,就是回饋。在操作制約最有名的實驗就是斯金納箱(Skinner Box)。

skinner box

上圖就是斯金納箱的實驗,透過裝置,小老鼠主動按壓壓杆得到食物(回饋),而認知並學習這樣的操作模式,回饋在整個實驗中,是很關鍵的一個因素。

回饋的方式有那些?其實回饋與指意有關係,回饋是透過指意來完成,指意是在行為前,回饋是在行為後,因此透過指意的方式(視覺、聽覺、觸覺),都能讓操作者知道他的行為有沒有結果。

而回饋用在設計上,原則就是要立即、清楚,且不能甘擾到使用者的操作,此外,使用者在操作前得知的訊息(知道怎麼做),稱之為「前饋(feedforward)」,也很重要,因為有些資訊可以前饋,那就前饋,回饋應該要出現在使用者是不容易發現錯誤的位置。

taxsys

上圖是台灣的報稅系統,在使用憑證時,會要求輸入pin碼,如果使用者不是經常使用(報稅一年一次),可能會不記得pin碼是什麼,於是我輸入了第一次「0000」,後來出來的視窗是「預設pin碼是6~8碼」,我當下的想法是:

youshouldtoldme

更可怕的是,pin只能輸入三次,三次都不正確就會鎖卡,在這個畫面中完全沒有告知,所以當三次錯誤發生,會立即的得到一個非常清楚的回饋:「你被鎖卡了,請到就近的服務站進行解鎖」,這就是一個讓人傷心生氣的回饋。

使用局限

使用局限(Constraints):提供物理、邏輯、語義和文化性的限制來引導行動,減少多餘的選擇。-p.103.

使用局限在本書花了一個章節去說明,但在這邊我簡單的帶過就好,有興趣可以去看一下書的內容。使用局限的目的,在於確保使用者操作正確,避免不必要的錯誤發生,因此減少多餘的選擇,來降低操作者操作上的負擔。

使用局限的應用,最為直覺得就是「Poka-yake」(防呆裝置),這項技術是在生產過程中,透過一些固定零件的限制設備的操作,使它不致出錯。這樣的的技術也廣泛的應用在我們的生活中,像是一些線材的接頭,usb、hdmi、記憶卡…等等,是屬於物理性的局限。

提到物理性的局限在書中p.175 有提到強制性機能的應用,是屬於物理性局限的形式,其實在介面設計時,還蠻常見到的,強制性機能有三種方式:互鎖、鎖入和對外封鎖。

  • 互鎖(interlocks)
    互鎖就是確定操作必需遵循正確的順序。—p.176.
    互鎖的應用在實體上很常見,像是微波爐運作時,突然打開就會自動關閉電源,或是手排汽車,在切換檔次時必須腳踏離合器,都是常見的互鎖應用;而在介面上,我要大力推薦一個網站:
    uxpin-ebooks (電子書是免費的!)
    這個網站有提供很多很棒的跟介面設計相關的電子書,是很好的資源。但電子書不能直接下載,必需要輸入mail後,發送下載連結至你的信箱,再從信箱的連結點擊下載,這就是一個很棒的互鎖設計。
    interlcok上圖就是要下載電子書時的畫面。(這個資源很棒!)
    延申思考:為什麼用互鎖的方式讓使用者下載電子書?而不直接提供連結呢?
  • 鎖入(lock-ins)
    鎖入就是防止一個人離開某個區域。—p.177.
    「鎖入」這個名字從中文看不好懂,可以記成「鎖在(lock)裡面(in)」,好記多了。在介面設計上是很常見到的方式,想像編輯一些文書軟體時,在還沒存檔的情況下,點擊關閉的話,會出現提示窗詢問是否要存檔再再關閉,就是鎖入應用。
    lockin
    上圖就是photoshop未存檔關閉時出現的鎖入對話框。
  • 對外封鎖(lock-outs)
    對外封鎖是防止有人進入危險的空間,阻止意外事件的發生。—p.178
    一樣從字面翻譯「鎖在(lock)外面(outs)」,比較好記,就是禁止訪問某些區域,在介面設計在也很常見,記得在winxp轉到win7時,微軟把「權限管理」功能加進去,有一段時間很難以適應這樣的操作方式,因為在安裝軟體時,如果沒有透過「系統管理者權限」進行安裝,大多的軟體都會安裝失敗,這就是對外封鎖,透過權限管理禁止一些不安全的行為。
    lockout上圖是mac在進行一些安全性更改的對外封鎖視窗,要在mac要安裝不屬於app store的應用程式,就得經過這道程序,要透過管理者授權允許從其他來源安裝此應用程式,這就是對外封鎖的應用方式。

以上是我的心得整理,更多的使用局限可以去翻翻書,我在這邊只提一些我覺得比較重要的觀念,下一篇會來討論一下概念模型!!
有任何疑問或想討論,都歡迎交流唷!!

設計的心理學 – 行動的七個階段

相片 2015-4-17 上午10 01 25

這陣子看了一本設計心理相關的書《設計的心理學》,是 Donald A. Normand – 唐納.諾曼的大作,只要是從事介面或是使用者經驗的設計,應該多少都會看過他的著作 ,而這本書已經是第三版了,作者也不斷的修正及增加新的內容。這本書不太好閱讀,偏重認知心理學,理論與實務之間的結合,但為了把從書中學到的東西內化,我將裡面所提到的重要概念再透過自己理解的方式來進行說明與討論。

書中有提到幾個概念,可以運用在設計思考的過程,包含行動的七個階段,心理歷程的三個層級,及與其相互配合的七個設計基本原則。首先來談談行動的七個階段。

書中對於行動的七個階段的說明是:

  1. 目標:形成目標
  2. 計劃:選擇行動
  3. 制定:決定動作順序
  4. 執行:付諸行動
  5. 感知:知道事物的狀態
  6. 解釋:對感知的結果形成了解
  7. 比較:評估結果與目標的差異

action7-01

但這七個階段,除了「目標」外,其實可以簡單的理解成兩個部份:「執行動作」、「評估動作後的結果」,而在執行動作之前,使用者通常會有個目標,目標來自於主動(目標驅動)或被動(事件驅動)的目標,而使用者對於目標會存在基本的知識與認知。

對設計師而言,我們無法控制使用者的目標或事件,唯一能做的,是當使用者被目標或事件驅動時,如何透過設計讓使用者正確的執行動作,並讓這動作的結果符合使用者的預期。

而七個設計的基本原則,就是作者所提供讓使用者能順利完成任務的設計思考方向。

舉個例來說:某使用者 A,與朋友約好要去某餐廳吃飯,而在前往目的地的途中迷了路,於是拿出了手機,打開手機內地圖功能,輸入了餐廳地址,並透過導航的功能,到達目的地。

  • A在前往餐廳的途中迷路 → 設計師比較難控制的因素,在案例中使用者是被迷路的事件給驅動。
  • 手機的地圖與導航功能 → 設計師能透過設計來告訴使用者如何使用導航功能完成任務。

而在討論如何設計之前,要先清楚的掌握使用者的七個行動階段,並透過行動的拆解,來了解每一個行動的背後必須去思考待解決的設計問題,從上使用者 A 的例子來看:

  1. 目標 → 目標決定設計的情境,使用者 A 在前往餐廳時迷路。
  2. 計畫 → 拿出手機,並執行某個地圖 app。
  3. 制定 → 決定動作的順序,通常是下意識的,像是拿出手機、滑開解鎖,輕播畫面尋找地圖app,這一連串的動作,其實大多在使用者大腦中是下意識的行為,這關係到手機操作的「概念模型」。
  4. 執行 → 執行每一個動作,可能是「預設用途」,可能透過「指意」、「對應性」來完成一個動作。
  5. 感知 → 每個動作的結果,是不存在「使用局限」、有沒有正確的「回饋」,讓使用者感知到動作後的結果。
  6. 解釋 → 解釋行為後的結果,產生認知或情緒。
  7. 比較 → 比較目標與結果是否一致,產生評價。

從 A 使用者的例子,我們從行動的七個階段去思考並了解背後的問題;上述中「」的部份,也就是作者所提出的七個設計的基本原則,是設計師必須要去解決的問題,下一篇會針對七個設計的基本原則再說明。

行動的七個階段不是只用在解決介面的問題上,其實在任何的設計,背後的邏輯都是一樣的,根據本書作者的說明,七個行動階段能用來理解人類行為的基本架構。所以設計時,可以好好運用這個架構來思考每個設計背後的問題。

下一篇在針對七個設計的基本原則舉例說明。 歡迎討論。