交互設(shè)計實用指南系列(12)—避免出錯

1、交互設(shè)計實用指南系列(12)避免出錯一、如何理解本條內(nèi)容: 一個“簡單”和“復(fù)雜”的例子 在我和開發(fā)人員溝通一個項目需求的時候，他們頻頻慨嘆Mockup的設(shè)計所考慮情況之細致，很多程序要實現(xiàn)的預(yù)判和“非基礎(chǔ)功能點”讓開發(fā)人員望而卻步不情愿去實現(xiàn)。相比較設(shè)計師為了讓用戶避免出錯而絞盡腦汁去設(shè)想和考慮，開發(fā)人員更傾向于直接給到一個只能容許的操作行為，其他非法請求全部報錯：“程序是嚴謹?shù)?，他錯，我報錯，以不變應(yīng)萬變。簡單一點不好嗎？”程序員們甚至笑言：“考慮他們的體驗?zāi)敲炊?，我們開發(fā)的體驗真不好，please，咱們能不能不要把事情搞那么復(fù)雜”。 在這個例子里，程序員看來，對于用戶在和系統(tǒng)交互的過程中

2、可能出現(xiàn)的各種情況均予以考慮，找尋用戶理解起來最明確、操作最簡單的、用戶犯錯最少的設(shè)計是缺少效率且浪費時間的。設(shè)計師這樣做，是在將簡單的事情復(fù)雜化。OK，現(xiàn)在就有這樣一個問題，什么是“錯誤”？每當(dāng)程序要處理錯誤的請求，是否是用戶真的在“犯錯”？1、問題一，是誰的錯？ 我在某一天使用了一個網(wǎng)站的相冊功能時，遇到了這樣的情況（如下圖）: “普通上傳”是當(dāng)前的選中狀態(tài)，而上傳“取消”的Button也是同樣的樣式。因為選中狀態(tài)具有“肯定、確定”的潛在暗示，這樣消極操作和積極操作的狀態(tài)完全混淆了，用戶在上傳過程中很容易出現(xiàn)錯點“取消”Button當(dāng)作確定完成上傳任務(wù)的誤操作。 如果真的發(fā)生了這樣的情況（

3、應(yīng)該不在少數(shù)，像我就發(fā)生了在本地好不容易選擇好的圖片誤點了很像“確認”功能的“取消”而做無用功的情況），是的，用戶犯錯了，但是責(zé)任難道在用戶嗎？ “本來我不會犯錯，是你的設(shè)計使我犯錯，或起碼增加了我犯錯的幾率。”類似這樣的錯誤，系統(tǒng)可能會報錯，也可能不會；但真正應(yīng)該檢討的卻是系統(tǒng)本身，即： 用戶對界面的理解和本身的系統(tǒng)意圖出現(xiàn)誤差，系統(tǒng)設(shè)計的歧義等固有缺陷導(dǎo)致用戶出錯。讓用戶頻繁碰壁、產(chǎn)生挫折感的設(shè)計，其原因不是用戶的愚蠢、而是設(shè)計的愚蠢。2、問題二，這是不是一個錯？ 關(guān)于“錯誤”一詞解釋的第二點主要針對用戶對系統(tǒng)的行為層來說，即：用戶在人機界面交互過程中的誤操作，系統(tǒng)未能通過更好的

4、設(shè)計減少和避免用戶的誤操作帶來的損失。 還是以“上傳照片”為例（如下圖）: 一個模態(tài)的警示框，赫然告訴你，你想在這里上傳相片，根本不該使用除了ie之外的瀏覽器！除了事先不打算通知你之外，同時也沒的商量，因為我沒有給你提供別的替代性方案和其他選擇。 可以想象,用戶想要使用這個上傳相片的功能，之前已經(jīng)需要經(jīng)歷過許多步驟，比如要打開自己相冊存放的線上地址、要成功登錄進入管理后臺、要尋找到上傳相片的功能模塊等等，已經(jīng)付出了相當(dāng)一部分的操作成本。但是系統(tǒng)卻很殘酷的讓用戶的所有工作都白做了，不僅如此，還很野蠻的方式告訴用戶：你從一開始就錯了！在這個情況下,用戶對系統(tǒng)的理解并不存在誤差，但還是在交互過程中產(chǎn)

5、生了嚴重的挫折感。但是，這真的是用戶的錯誤和需要承擔(dān)的責(zé)任嗎？我認為不是：“嚴格說來，我不是犯錯，我只是不清楚我能做什么、以及應(yīng)該怎么做的規(guī)則?！?由以上兩方面的案例，我想已經(jīng)可以初步回答程序員同學(xué)的問題了：“是的，簡單總是好的，但是在交互過程中，事件永遠是復(fù)雜的，所可能發(fā)生的情況的可能性永遠是那么多的，不是你為他考慮的多，讓他簡單；就是他自己試驗和受挫的經(jīng)歷更多，更復(fù)雜，體驗更差”。3、問題三、該如何做： 關(guān)于容錯設(shè)計的三個境界： 1、保證不是我們自己的錯：屏蔽會引起歧義的設(shè)計、本身不合理的設(shè)計，不讓用戶因為系統(tǒng)的設(shè)計缺陷而導(dǎo)致犯錯。 2、把簡單留給用戶，把復(fù)雜留給自己：通過系統(tǒng)的優(yōu)良設(shè)計約

6、束和指引用戶的操作，把出現(xiàn)錯誤的可能降到最低。 3、減小錯誤的代價，幫助用戶做對：當(dāng)用戶還是犯了錯誤，通過設(shè)計引導(dǎo)用戶走向正確的方向。 對交互設(shè)計師而言，第一條是本應(yīng)遵守的設(shè)計底線，二三兩條是設(shè)計時可供遵循的設(shè)計指南。其中的第三條，關(guān)于出現(xiàn)錯誤后如何幫助和引導(dǎo)用戶做對，尚軒同學(xué)接下來會專門撰文探討這個問題，此處暫不贅述，下面主要就第二條談一些看法: 二、如何做到避免用戶出錯：1、給予用戶適當(dāng)?shù)男袨榧s束為用戶封閉掉不正確的道路 這是Gmail的郵件處理區(qū)。 上圖表示當(dāng)沒有選擇任何一封郵件的時候，操作項被置灰，不可點選。這樣在有效避免了誤操作的同時，也展示和預(yù)告了當(dāng)符合操作要求時，“更多操作”內(nèi)提

7、供的全部功能的內(nèi)容。 下圖則是已有選擇郵件的時候，操作項全部激活為可用狀態(tài)時的情況。對比上一張圖未激活的狀態(tài)，可以注意到除了激活與否的狀態(tài)差別，還有其中的 “加注星標(biāo)”功能在初始激活狀態(tài)下是只有加注而隱藏了刪除功能的、充分考慮了加注和刪除功能的互斥性而予以隱藏。 通過用戶的使用狀態(tài)，通過有選擇性的設(shè)置功能項激活、待激活的狀態(tài)，以及功能項展示、隱藏的狀態(tài)，是有效避免用戶誤操作的常用手段。這個考慮細心周到的設(shè)計在很大程度上預(yù)防了用戶可能發(fā)生的操作失誤。 2、給予用戶必要的預(yù)判性錯誤提示告訴用戶，這樣走可能會錯 這是Msn的登錄界面。 當(dāng)光標(biāo)定位于密碼輸入?yún)^(qū)時，如果此時鍵盤的大寫鎖被不小心打開了，界

8、面會提示用戶此時處于Caps Lock處于啟用的狀態(tài)，很可能會出現(xiàn)密碼輸入的錯誤。 這樣處理比用戶輸入完成點擊提交之后再提示用戶出了什么問題要來的友好和有效很多；比只是一味的批評用戶 “你錯了”從頭至尾完全不告訴用戶出了什么狀況的界面要友好太多。 當(dāng)用戶的一個行為很可能會引發(fā)預(yù)見性的錯誤，越早提示用戶，并給出可行性的建議，錯誤越容易被接受和改正，用戶的損失也就越小。  3、告訴用戶操作所處的狀態(tài)和正確的操作方式告訴用戶，怎么走才對 Flickr的媒體上傳頁面。 對于用戶在這個頁面需要做什么、可以做什么有清晰的劃分，對現(xiàn)在需要進行的、當(dāng)前所處的操作階段予以高亮顯示，吸引人進行操作；對于還未進行到的操作階段也預(yù)先做了一個介紹，很清晰的介紹了完整的任務(wù)流程。 讓用戶知道在一個流程之中，自己已經(jīng)完成了什么，將要做什么，還有什么沒有做和應(yīng)該怎樣做，才能使任務(wù)成功，是避免用戶出錯的很積極的一個應(yīng)對方式。 讓我們摒棄作為設(shè)計師的中高級用戶視角，深入挖掘用戶行為習(xí)慣和心智