我與「轉錯帳」的距離 (上)— 為什麼台新 Richart 讓我轉錯帳?

從「設計的心理學」重新理解防錯設計

Source: Richart 貼圖

很久沒有寫文章需要分上下集了。但這次…我轉錯帳到非朋友的帳戶,還款過程讓人身心俱疲…QQ

事情是這樣的..

某天通勤時段,我忽然想起要轉帳給朋友A。由於我們都有Richart App ,因此我手刀立即轉帳,輕鬆簡單完成任務! ya~

Source: Richart 貼圖

錢應該已經入朋友帳戶了吧 ? (自以為)

隔天詢問朋友A是否收到匯款 ?

「錢? 沒有捏??」「??? 但我的確是從『常用帳戶』進去,而且你是唯一的『常用帳戶』耶…」結果追蹤帳戶明細後,還真的轉入另一人(之後稱B)的帳戶裡。

Source: Richart 貼圖

還原使用情境,我是在點選「常用帳戶」後發生錯誤 …(´⊙ω⊙`)…

先來看看我的動態操作流程,若你也有Richart,可以先試用看看體會我的盲點: (以下帳戶號碼與金額都經過改編)

因為操作流程動畫有點快XD,下面也提供靜態操作流程。可以看出是在第三步「常用帳戶」開始出錯的。

就我認知,「常用帳戶」 ≠「最近帳戶」:

最近帳戶: 近期有金錢進出的帳戶,可能是朋友或是陌生人的帳戶。

常用帳戶: 當某帳戶常有金錢往來時,我會將之設為「常用帳戶」。以後需要轉帳到該帳戶時,「常用帳戶」便是個入口捷徑。

因此在選擇轉帳方式時,在點下「常用帳戶」後我便開啟字盲模式 😌 😌,後續一路按確認到底 ! 但介面上「常用帳戶」下的第一個分類其實是「最近帳戶」,第二個才是我預期的「常用帳戶」。所以我才轉帳給B而不自知。

或許你正想著: 「既然有B的帳號,應該是認識的人吧? 請對方退回來就是了。」

但B只是之前團購線上課程的網友,因此我透過各種方式找B(信箱、台新客服、線上課程客服),卻還是無法直接跟她聯繫。

B的勒.....(Source: Richart 貼圖)

身兼設計師與用戶身分的我面對這種窘境,不禁開始反思:

WHY? 這該歸究於個人問題 (沒看清楚) ? 用戶預期心理 ? 還是介面提示與防錯設計出了問題 ?

介面上改善的直接做法,就是把最外層的「常用帳戶」改成「選擇帳戶」就解決了嗎 ? 但是否還有其他設計方式呢? 於是我重讀了「設計的心理學」與N/N Group 幾篇文章 :

人就是會犯錯

人最常發生失誤的時候,是因為其他事件的干擾,注意力被分散,或者只是因為執行的操作太過熟悉。這些情況下,操作者往往沒有給與這項行動足夠的注意力。

Q: 所以減少失誤的方法之一,是確保使用者始終有意識地密切關注正在做的事嗎 ?

A: Don Norman : 錯了,這其實不是好做法。

一旦任務已被預期心理確認,熟練的行為也往往是下意識的,且行動將會很迅速、豪不費力,而且準確執行。這就像是我們為電腦安裝軟體的共同經驗: 點確定、確定、全都按確定就安裝完畢,我們不會花注意力在其他細節上。軟體可被移除,但某些操作是不可逆的,如轉帳!!! (切身之痛)

因此好的設計必須理解犯錯的原因,認知「人會犯錯」的事實,並盡量透過各種設計方式,減少過失的機會以及減輕過失的後果

■ 過失如何釀成事故 - 瑞士乳酪模型

Swiss cheese model of accident (Source: https://www.mtu.edu/chemical/facilities/safety/process/images/che-process-safety-swiss-cheese-orig.jpg)

英國事故研究者里森用「瑞士乳酪模型」比喻事故的原因。每一片乳酪代表事故的一個條件,上面的洞表示在這個條件上出了狀況。

一個設計優良的系統裡,可以有設備故障、人為過失。但任何一個狀況(一個洞) 會被下一層擋住,除非這些故障和過失剛好配合在一起,否則不會造成事故。這個比喻提供兩個教訓:

1. 不要試圖找到事故的決定性因素。

一場事故的發生通常有許多原因,只有當數片乳酪的洞排成一列時,才會發生事故。

2. 多用幾種設計方式減少事故的發生

在系統的不同部分用不同的防錯機制,讓系統更能抵抗錯誤、減少失誤、錯誤或故障的機會。

以乳酪模型來說即增加乳酪的片數、減少乳酪的洞,並試著不讓每一片乳酪長得很像,這樣洞比較難排成一直線也就能減少事故的發生。

「透過重複性設計以及多重防禦,美國的航空公司每天將兩百萬名乘客安全送上天空。」    -美國國家運輸安全委員會主席赫斯曼(Deborah Hersman)如此闡述多重防錯理念。-

■ 防錯設計原則

為一切順利的情況做設計,是相當容易的,因為如果一切順利,人們會照著設計師預期的方式使用。然而真正棘手的部分是..

如何為出了問題的情況設計 ?

1. 用侷限防止錯誤

此處我以實體產品為例。如家用卡式爐在罐裝瓦斯與爐身接合處有卡榫裝置,沒有裝好就無法開啟爐火,這就是透過侷限防止瓦斯外洩氣爆的設計。

Source: Google

2. 還原(Undo)

還原是操作軟體中最強大的防錯設計。例如我們在gmail中傳送/刪除信件,在幾秒內還可以透過「復原」來執行還原(取消傳送/刪除)。

3. 前饋 - 行動前的合理性檢查

書中舉例,假設1000韓圜可以兌換美金一元。現在我希望轉1000美元進韓國的銀行帳戶(大致相當於一百萬韓圜),但是我不小心將韓圜數額填了美金的欄位(這樣等於轉了一百萬美元)。

聰明的系統會留意我正常交易額的大小與存款數目,若數額遠大於正常交易,會自動查詢要求認證,並在轉帳前先行確認。但設計不良的系統則會盲目遵照指示,不管帳戶內有沒有一百萬美元。

其他如在半導體產業,一個晶圓盒( 用來保護、運送、並儲存晶圓的一種容器)可以裝25片晶圓,若工程師誤植超過25的數值,系統就會跳出警示文字。或一般註冊時使用者信箱或手機輸入格式不對,就無法前進下一步。皆是系統在用戶點選確認/註冊前,預先檢查,並警告輸入格式有誤的設計。

Source: Google

4. 反饋 - 行動後提供錯誤訊息、確認訊息、或預覽結果

此類訊息常以「對話框」呈現。一再請求確認與預覽似乎是煩人又多餘的動作,而不是必要的安全檢查。

但有時使用者不會意識到他們即將執行難以回復的操作行為。因此在最後確認前,請保留給用戶得以更改的機會,能將行動的結果與他們預期的結果進行比較。

設計手法上,可以將行動的目標設計得更明顯,例如放大尺寸,或者使用顯眼的顏色提示行動可能造成的後果,或是努力顯示用戶完成任務所需的上下文信息,藉以鼓勵使用者仔細檢查他們的操作。

👉 但是,我們必須謹慎使用彈出式對話框

因為對話框會中斷工作流程且造成使用者的不耐。如果在用戶每次確認後都詢問「你真的想這麼做嗎?」,會造成很多人不再花時間仔細檢查,且急於點擊下一步讓任務繼續進行。

因此勿將「確認訊息」當作唯一的錯誤預防方法

應該搭配其他設計,以最大限度地提高其實用性,並有效降低用戶出錯率。


上集 Takeaway:

1. 承認吧~人就是會犯錯!! (蓋章QQ)

2. 減少失誤的方法,不是確保使用者始終有意識地密切關注正在做的事, 而是多用幾種設計減少錯誤的發生。

3. 防錯設計原則: (1)侷限設計 (2)還原設計 (3)合理性檢查 (4)提供確認訊息與預覽結果。

由於篇幅過長,對於「防錯設計」先介紹到這邊,下篇我將會紀錄 Richart 轉帳流程redesign。若你也對這個議題有興趣,歡迎一起思考自己會如何設計,或許我們在下集可以互相交流討論,See ya~

感謝閱讀到最後的你!

1-5  claps:既然看過了,就來簽個到吧!
6-10 claps:表示你喜歡這篇文章!
11-20 claps:看完這篇文章我認為很有幫助!
21-50 claps:Oops!看來你對這篇很有感覺,我會更努力分享,謝謝你!

參考資料

1. 設計的心理學 (主要為p200, p242)

2. N/N Group Article

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Seal-美術系跨製造業的UXer

Written by

理性>感性,所以練習感性;圖像>文字,所以嘗試寫作。我是位在半導體產業工作,且深怕被AI人工智慧取代的UI/UX設計師 !! (☞•́⍛•̀)☞ 因此對科技趨勢極有興趣,只為了找尋能不被滅亡的答案 :P。https://dribbble.com/sealtseng

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com