面向用戶使用的錯誤反饋界面情感化設計研究

張紀越

摘要：通過優(yōu)化組合、合理運用設計元素，營造用戶與產(chǎn)品的友好互動，能夠切實提高錯誤反饋頁面的操作體驗和功能效率。本文從使用者個體情感體驗出發(fā)，從本能設計、行為水平、反思水平三個角度具體剖析用戶界面錯誤反饋設計的優(yōu)劣，并結(jié)合具體頁面案例，進行情感性分析和可優(yōu)化操作構(gòu)想。

關(guān)鍵詞：用戶體驗;情感化設計;錯誤反饋設計;設計方法

中圖分類號：TB472文獻標識碼：A

文章編碼：1672—7053（2019）05—0148—02

Abstract ： By properly combining the elements of page design and creating a friendly interaction between users and products， the user experience and efficiency of the error feedback page can be optimized. Based on the individual emotional experience， this paper analyzes the advantages and disadvantages of user interface error feedback design from the three aspects of instinct design， behavior level and reflection level， and combines specific page cases to carry out emotional analysis and optimization operation ideas.

Key Words ： User experience; Emotional design; Error feedback design; Design method

錯誤狀態(tài)是產(chǎn)品出現(xiàn)問題時所顯示的界面。使用網(wǎng)絡產(chǎn)品時，出現(xiàn)錯誤或警告提示會使用戶感到壓力和困惑。有時是因為用戶操作的不兼容，如輸入了無效信息;有時候則是產(chǎn)品本身的問題，如無法連接服務器、頁面鏈接丟失、程序失去響應等。

1 錯誤反饋界面的重要性

當產(chǎn)品無法按照用戶的理想狀態(tài)運行，提示的錯誤狀態(tài)未能解釋原因或提供解決方案時，用戶在使用過程中可能會被困在原地，可能會直接跳出頁面甚至卸載應用。如同繁瑣的登陸/注冊頁和過長的加載時間，產(chǎn)品報錯將影響用戶體驗并極大地打擊用戶的積極性。因此，用戶友好型的錯誤狀態(tài)提示應該清晰地定義錯誤的原因，為什么會發(fā)生錯誤，以及如何解決錯誤。友好的錯誤狀態(tài)將極大的減緩用戶的負面情緒，在留住用戶的同時，減少跳出率，提升用戶體驗。

2 錯誤反饋界面的情感化設計

唐納德·諾曼的代表作《情感化設計》以本能（visceral）、行為（behavior）和反思（reflective）這三個設計的不同維度為基礎(chǔ)，闡述了情感在設計中的作用。自動的并預先在人腦中設置的稱為本能水平，能支配日常行為和大腦活動的部分稱為行為水平，大腦進行思考的部分稱為反思水平。每一種水平在設計作品中都不可能是獨立存在的，產(chǎn)品需要在設計的三種水平間取得平衡。

2.1 本能水平的設計

人是視覺動物，對外形的觀察和理解是出自本能的。視覺設計越是符合本能水平的思維，就越可能讓人接受并且喜歡。

色彩是設計強有力的工具。正如唐納德·諾曼指出：“明亮的、高飽和度的色彩作用于本能層次，能夠激發(fā)人類的正面情感”。在潛意識中，人們習慣性把紅色和錯誤聯(lián)系在一起。因此，在錯誤狀態(tài)的設計中，通常給錯誤文本使用特定的顏色以突出視覺效果，如“錯誤”的紅色、“警告”的黃色、“成功”的綠色等?？紤]到現(xiàn)實生活中還有相當多的用戶是紅綠色盲患者，最好搭配紅色和圖標一起使用，為特殊人群提供設計關(guān)懷。

帕特里克·喬丹《設計令人愉悅的產(chǎn)品》一書中將愉悅感分為生理的愉悅、社交的愉悅、心理的愉悅和思想的愉悅。本能設計應當提供視覺上的生理愉悅，許多產(chǎn)品僅僅因為外觀上的視覺影響而獲得，人們的喜愛。錯誤狀態(tài)界面是一個利用插畫和動態(tài)交互的絕佳機會，人們對于視覺信息的回應往往比純文本好一些。

2.2 行為水平的設計

行為水平的設計可能是我們最應該關(guān)注的，特別對功能性的產(chǎn)品來說，效用是重要的性能。使用產(chǎn)品美觀界面的良好第一印象能否延續(xù)，關(guān)鍵在于兩點：是否能有效地完成任務;是否是一種有樂趣的操作體驗，這是行為水平設計需要解決的問題。

2.2.1 引導用戶正確操作

在錯誤提示彈出框的設計中，應使用合理的按鈕組合則，通過良好的引導，讓用戶正確明白按鈕的指令。文字語義要明確，盡可能使用與提示消息直接相關(guān)的動詞，盡量不要用“確定、好的、是”等詞匯。如案例中“您確定要刪除該內(nèi)容嗎？選項：是—否”，把選項替換為“刪除—取消”后，并把“刪除”這一不可逆操作以紅色突出強調(diào)，則會使表意更加直白，降低用戶理解難度。

當用戶點擊按鈕時，界面應給予恰當?shù)姆答?。若沒有任何反饋，用戶往往以為系統(tǒng)沒有收到他們的操作，重復多次點擊。為了避免這類情況，可在為默認按鈕在不同狀態(tài)下添加懸停狀態(tài)/點擊狀態(tài)/不可點狀態(tài)等多種加載狀態(tài)的交互形式。如輸入手機號獲取驗證碼的“獲取”按鈕，在未輸入內(nèi)容前按鈕為禁用狀態(tài)不可點，輸入信息后，點擊“獲取”按鈕獲取驗證碼，在點擊一次后的60s內(nèi)再次設定為不可點狀態(tài)。

提交表單時錯誤狀態(tài)的消息反饋主要有彈出框、新頁面和標簽提示。彈出框的形式直觀但有自身的缺陷，用戶如果想更正錯誤必須關(guān)閉彈出框，在一些特殊情況下錯誤信息比較冗長，沒有辦法短時間內(nèi)記住，用戶看不到具體提示反而可能無法修改錯誤同。

新頁面與彈出框同理，表示提交錯誤跳轉(zhuǎn)回原來頁面時，應當保留頁面中原有信息，僅僅刪除填寫錯誤或不符合規(guī)范的字段。

更好的解決方法是通過表單中的實時驗證進行標簽提示，把錯誤提示放在字段邊上，直觀告知用戶所提供數(shù)據(jù)的正確性，用戶可以很容易的讀取錯誤信息，不用根據(jù)提示的控件名稱去費力尋找或反復確認出錯的位置，減少用戶的記憶負擔。通過表單的實時驗證，用戶不用再跳轉(zhuǎn)頁面或去記冗長的錯誤信息，也可以讓用戶更早地改正錯誤，而不用等到點擊了提交按鈕之后才看到錯誤提示。

2.2.2 增加操作的樂趣

404頁面的目的是告訴瀏覽者其所請求的頁面不存在或鏈接錯誤，同時引導用戶使用網(wǎng)站其他頁面而不是關(guān)閉窗口離開。因此，網(wǎng)站的404頁面應當包括：無法找到該頁面的明確通知;與來自主站點的一致頁眉、頁腳和導航;可以跳轉(zhuǎn)的備用路徑或主頁的鏈接;一個搜索欄，幫助用戶找到站內(nèi)特定的內(nèi)容。如圖1，GitHub的404頁面設計（htts：//github.com/404）很好的踐行了這一設計方法，頂部的導航與主站頁面保持一致性，方便地跳轉(zhuǎn)至網(wǎng)站的其他層級，主圖明確告知404頁面丟失的錯誤，主圖下方巨大的搜索框符合網(wǎng)站本身內(nèi)容豐富的特性，讓流連此處的程序員們找到他們想要的東西。主圖為GitHub吉祥物“章魚貓”的插畫，圖像隨著鼠標位置的移動產(chǎn)生視差交互變化，通過圖片的錯位和運動速度的差異給人立體的感覺。友好的404頁面讓訪客保持愉悅的心情和好奇心，把錯誤的告知轉(zhuǎn)變成有樂趣的操作體驗。

2.2.3 減少不必要的錯誤提示

錯誤狀態(tài)帶給用戶壓力和困惑，程序設計時應避免不必要的錯誤提示。我們可以通過關(guān)注用戶的目標而不是技術(shù)層面減少錯誤通知：例如，假設用戶嘗試刪除已經(jīng)刪除過的文件，雖然從代碼角度這可能是一個不必要的操作，但用戶并不認為這是一個錯誤，因為它實現(xiàn)了預期的效果，此類錯誤狀態(tài)提示就應該刪除。若問題可以自動糾正，應通過程序處理問題而不要顯示錯誤提示。

2.3 反思水平的設計

反思水平的設計與物品的意義有關(guān)，受到環(huán)境、文化、身份、認同等的影響，會比較復雜，變化也較快。這一層次，事實上與顧客長期感受有關(guān)，需要建立品牌或者產(chǎn)品長期的價值。只有在產(chǎn)品、服務和用戶之間建立起情感的紐帶，通過互動影響了自我形象、滿意度、記憶等，才能形成對品牌的認知，培養(yǎng)對品牌的忠誠度，品牌成了情感的代表或者載體。

2.3.1 友好的用戶引導

反思設計.與長期的用戶體驗有關(guān)，對某件產(chǎn)品的整體印象來自反思——追溯以往的回憶并重新評估。維護良好的客戶關(guān)系，甚至可以完全改變顧客對某件產(chǎn)品原有的負面體驗。因此，在錯誤提示頁面的文字信息方面，應該講禮貌，使用友好的語氣，不用錯誤恐嚇用戶，在標題欄中避免包含“錯誤”一詞。也不應該責怪用戶，關(guān)注問題本身而不是導致問題的用戶操作。此外，不要暗示錯誤是用戶錯誤，例如“非法指令”。

錯誤狀態(tài)界面應該有簡潔、明確、指導性的文案，以用戶為中心，用通俗易懂的語言告訴用戶哪里出現(xiàn)問題，避免使用技術(shù)術(shù)語如“room 404：file not found”，而采用用戶語言如“頁面暫時無法訪問”來表達信息，并且清晰地指出：出了什么問題，可能是由于什么原因，用戶下一步可以采取什么措施來修復這個錯誤。

2.3.2 給頁面增添樂趣

在錯誤頁面設計中，可以通過輕松幽默的創(chuàng)意方式，帶給用戶樂趣和思考，在會心一笑的同時強化其品牌形象5。讓用戶感到有趣，是很好的反思層次的設計。

谷歌瀏覽器Chrome的網(wǎng)絡錯誤設計是一個模范案例（見圖2）。斷網(wǎng)狀態(tài)下，當用戶使用Chrome訪問新頁面，頁面會清晰提示“未連接互聯(lián)網(wǎng)”，在下方給出恢復網(wǎng)絡連接的三種方法，第三條以藍色字體的超鏈接形式直接調(diào)用本機的“windows網(wǎng)絡診斷工具”.方便用戶快速解決問題。最下方使用小號淺色字體弱化錯誤代碼的提示。左上方的小恐龍圖標作為配圖并不會喧賓奪主，但按下空格鍵后，用戶會發(fā)現(xiàn)一個跑酷小游戲（見圖3）由此開始，用戶化身小恐龍，按空格鍵跳躍，向下鍵俯身奔跑以躲避障礙物。這個游戲的設計初衷是安撫斷網(wǎng)用戶的焦躁情緒，讓用戶在網(wǎng)絡恢復連接之前打發(fā)時間，雖頗具隱藏性，但卻有著十足的存在感和持久的曝光率，自帶傳播屬性，是Chrome團隊內(nèi)部的吉祥物。

3 結(jié)語

“為人與產(chǎn)品之間設計出愉悅、有效的互動的原理，跟在人與人之間建立愉悅、有效的互動如出一轍”。用戶界面中錯誤反饋設計的功能性、易懂性、可用性和物理感覺對于用戶情感體驗至關(guān)重要。在不影響主要功能，遵循用戶習慣，不干擾用戶的使用前提下，增加用戶界面錯誤反饋設計的趣味性，提供讓人驚喜的新奇之處，使非生命的產(chǎn)品與人之間產(chǎn)生一種微妙的情感關(guān)系，可以拉進產(chǎn)品與用戶的距離，增加用戶粘度。

參考文獻

[1]唐納德·諾曼.設計心理學3：情感化設計[M].中信出版社，2015.

[2]Windows開發(fā)人員中心錯誤指引.https：//docs.microsoft.com/en-us/windows/desktop/uxguide/mess-error#guidelines

[3]如何設計移動應用程序的錯誤狀態(tài).https：//www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/

[4]蘋果開發(fā)者中心人機界面指南警報.https：//developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/alerts/

[5]沃爾特.網(wǎng)站情感化設計與內(nèi)容策略.北京：人民郵電出版社，2014.