建站常識
交互設(shè)計(12)—避免出錯
2010-04-21 17:04:00
一、如何理解本條內(nèi)容:
一個“簡單”和“復(fù)雜”的例子
在我和開發(fā)人員溝通一個項目需求的時候,他們頻頻慨嘆Mockup的設(shè)計所考慮情況之細(xì)致,很多程序要實現(xiàn)的預(yù)判和“非基礎(chǔ)功能點”讓開發(fā)人員望而卻步不情愿去實現(xiàn)。相比較設(shè)計師為了讓用戶避免出錯而絞盡腦汁去設(shè)想和考慮,開發(fā)人員更傾向于直接給到一個只能容許的操作行為,其他非法請求全部報錯:“程序是嚴(yán)謹(jǐn)?shù)?,他錯,我報錯,以不變應(yīng)萬變。簡單一點不好嗎?”程序員們甚至笑言:“考慮他們的體驗?zāi)敲炊?,我們開發(fā)的體驗真不好,please,咱們能不能不要把事情搞那么復(fù)雜”。
在這個例子里,程序員看來,對于用戶在和系統(tǒng)交互的過程中可能出現(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ā)生了這樣的情況(應(yīng)該不在少數(shù),像我就發(fā)生了在本地好不容易選擇好的圖片誤點了很像“確認(rèn)”功能的“取消”而做無用功的情況),是的,用戶犯錯了,但是責(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)未能通過更好的設(shè)計減少和避免用戶的誤操作帶來的損失。
還是以“上傳照片”為例(如下圖):
#p#一個模態(tài)的警示框,赫然告訴你,你想在這里上傳相片,根本不該使用除了ie之外的瀏覽器!除了事先不打算通知你之外,同時也沒的商量,因為我沒有給你提供別的替代性方案和其他選擇。
可以想象,用戶想要使用這個上傳相片的功能,之前已經(jīng)需要經(jīng)歷過許多步驟,比如要打開自己相冊存放的線上地址、要成功登錄進(jìn)入管理后臺、要尋找到上傳相片的功能模塊等等,已經(jīng)付出了相當(dāng)一部分的操作成本。但是系統(tǒng)卻很殘酷的讓用戶的所有工作都白做了,不僅如此,還很野蠻的方式告訴用戶:你從一開始就錯了!在這個情況下,用戶對系統(tǒng)的理解并不存在誤差,但還是在交互過程中產(chǎn)生了嚴(yán)重的挫折感。但是,這真的是用戶的錯誤和需要承擔(dān)的責(zé)任嗎?我認(rèn)為不是:“嚴(yán)格說來,我不是犯錯,我只是不清楚我能做什么、以及應(yīng)該怎么做的規(guī)則?!?/P>
由以上兩方面的案例,我想已經(jīng)可以初步回答程序員同學(xué)的問題了:“是的,簡單總是好的,但是在交互過程中,事件永遠(yuǎn)是復(fù)雜的,所可能發(fā)生的情況的可能性永遠(yuǎn)是那么多的,不是你為他考慮的多,讓他簡單;就是他自己試驗和受挫的經(jīng)歷更多,更復(fù)雜,體驗更差”。
3、問題三、該如何做:
關(guān)于容錯設(shè)計的三個境界:
1、保證不是我們自己的錯:屏蔽會引起歧義的設(shè)計、本身不合理的設(shè)計,不讓用戶因為系統(tǒng)的設(shè)計缺陷而導(dǎo)致犯錯。
2、把簡單留給用戶,把復(fù)雜留給自己:通過系統(tǒng)的優(yōu)良設(shè)計約束和指引用戶的操作,把出現(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)提供的全部功能的內(nèi)容。
下圖則是已有選擇郵件的時候,操作項全部激活為可用狀態(tài)時的情況。對比上一張圖未激活的狀態(tài),可以注意到除了激活與否的狀態(tài)差別,還有其中的 “加注星標(biāo)”功能在初始激活狀態(tài)下是只有加注而隱藏了刪除功能的、充分考慮了加注和刪除功能的互斥性而予以隱藏。
通過用戶的使用狀態(tài),通過有選擇性的設(shè)置功能項激活、待激活的狀態(tài),以及功能項展示、隱藏的狀態(tài),是有效避免用戶誤操作的常用手段。這個考慮細(xì)心周到的設(shè)計在很大程度上預(yù)防了用戶可能發(fā)生的操作失誤。
2、給予用戶必要的預(yù)判性錯誤提示——告訴用戶,這樣走可能會錯
這是Msn的登錄界面。
當(dāng)光標(biāo)定位于密碼輸入?yún)^(qū)時,如果此時鍵盤的大寫鎖被不小心打開了,界面會提示用戶此時處于Caps Lock處于啟用的狀態(tài),很可能會出現(xiàn)密碼輸入的錯誤。
這樣處理比用戶輸入完成點擊提交之后再提示用戶出了什么問題要來的友好和有效很多;比只是一味的批評用戶 “你錯了”從頭至尾完全不告訴用戶出了什么狀況的界面要友好太多。
當(dāng)用戶的一個行為很可能會引發(fā)預(yù)見性的錯誤,越早提示用戶,并給出可行性的建議,錯誤越容易被接受和改正,用戶的損失也就越小。
3、告訴用戶操作所處的狀態(tài)和正確的操作方式——告訴用戶,怎么走才對
Flickr的媒體上傳頁面。
對于用戶在這個頁面需要做什么、可以做什么有清晰的劃分,對現(xiàn)在需要進(jìn)行的、當(dāng)前所處的操作階段予以高亮顯示,吸引人進(jìn)行操作;對于還未進(jìn)行到的操作階段也預(yù)先做了一個介紹,很清晰的介紹了完整的任務(wù)流程。
讓用戶知道在一個流程之中,自己已經(jīng)完成了什么,將要做什么,還有什么沒有做和應(yīng)該怎樣做,才能使任務(wù)成功,是避免用戶出錯的很積極的一個應(yīng)對方式。
讓我們摒棄作為設(shè)計師的中高級用戶視角,深入挖掘用戶行為習(xí)慣和心智模型,真正從用戶的角度去分析使用上可能會出現(xiàn)問題,通過系統(tǒng)的設(shè)計去盡量避免錯誤的發(fā)生——“把簡單留給用戶、把復(fù)雜留給自己”。About face3.0 第25章“錯誤、警告和確認(rèn)”中講到一條重要的設(shè)計原則:讓錯誤成為不可能。很美好。以此與各位設(shè)計同仁共勉之。
原文:http://ued.taobao.com/blog/2010/04/09/qiancheng1/
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2010-07-15 08:29:00] [圖說交互]鼠標(biāo)文字選中與產(chǎn)品整合
- [2009-05-08 08:11:00] 交互設(shè)計:不是什么和是什么
- [2010-09-03 15:20:00] 案例—減少用戶的思考
- [2010-02-06 15:54:00] 交互設(shè)計(9)—一次點擊
- [2010-11-11 08:23:00] 龜毛的交互設(shè)計師
- [2009-12-17 11:55:00] 淺談白社會交互設(shè)計的創(chuàng)新(一)
- [2010-01-11 21:41:00] 交互設(shè)計(5)–突出重點,一目了然
- [2009-07-04 18:27:00] 交互設(shè)計師修煉之“變色龍”
- [2009-06-23 08:11:00] 細(xì)節(jié)決定成敗 總結(jié)項目中的交互設(shè)計
- [2010-08-10 16:03:00] 淺談交互設(shè)計規(guī)范
- [2010-12-15 08:37:00] 說說web標(biāo)簽設(shè)計
- [2009-07-07 08:01:00] 面包屑設(shè)計
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島網(wǎng)站建設(shè)公司哪家好 外貿(mào)網(wǎng)站建設(shè) 圖形網(wǎng)格 微官網(wǎng) 青島不錯的英文網(wǎng)站建設(shè)公司 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) H5定制設(shè)計 青島IT資訊 青島網(wǎng)站設(shè)計哪家好 手機網(wǎng)站 搜索引擎 集團(tuán)性網(wǎng)站 企業(yè)網(wǎng)站為什么要備案 插畫 青島黃島、紅島網(wǎng)站建設(shè)公司 平面設(shè)計 GOOGLE 高端網(wǎng)站設(shè)計 網(wǎng)站優(yōu)化 輪胎網(wǎng)站設(shè)計 響應(yīng)式設(shè)計 網(wǎng)站設(shè)計資訊 審美 網(wǎng)站視覺 SEO 膠南網(wǎng)站建設(shè)公司 力圖 青島網(wǎng)站SEO html和css 如何做網(wǎng)站優(yōu)化