別讓用戶發(fā)呆—設計中的防呆策略

2013-10-12    藍藍設計的小編

轉(zhuǎn)載藍藍設計( bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設計 、 cs界面設計 ipad界面設計 、 包裝設計 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

來源:http://cdc.tencent.com/?p=7756

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

  生活中總會有些狀況讓我們無所適從摸不著頭腦:面對一排電燈或空調(diào)的按鈕,哪個才是控制我想要的?開鎖時掏出一把鑰匙,哪個才是正確的?拿起U盤插入電腦,朝那個方向才是對的?……類似的猶豫充分說明,你呆住了。現(xiàn)在,是需要“防呆設計”來拯救你了。

防呆定義

  防呆(日語:ポカヨケ;英語:Fool-proofing)是一種預防矯正的行為約束手段,運用避免產(chǎn)生錯誤的限制方法,讓操作者不需要花費注意力、也不需要經(jīng)驗與專業(yè)知識即可準確無誤完成正確的操作。廣義來講,防呆就是如何設計一個東西,而使錯誤發(fā)生的機會減至的程度。避免工作錯誤的發(fā)生,進而達到“第一次就把工作做對”之境界。

防呆與設計

  最常見的防呆設計在電腦中,為了讓普通用戶在組裝電腦時不會出錯,相關零組件大都有形狀相符的防呆設計。生活中也不乏防呆設計的應用,下面這款2013年iF獲獎作品微笑鑰匙(Smile Key)就通過防呆設計解決了關于鑰匙的4大難題。自然的弧度,更加貼合拇指和食指,用著更舒服;更容易分辨鑰匙的朝向—再不用去記憶哪面是正確的朝向,自然貼合拇指與食指的那面,便是正確的;鑰匙平放的時候,因為這弧度,更容易被拿起來;鑰匙上面有數(shù)目不等的凸起小顆粒,用于區(qū)分誰是誰,比如說,1個小顆粒是辦公室的,2個是自家大門的。這在晚上看不到的時候尤其方便,再不用一串鑰匙挨個嘗試了。

1

  防呆設計經(jīng)常使用感官替換的方式來進行設計。如下面這款杯蓋,通過視覺替代觸覺進行防呆。可以感應杯中液體的溫度顯示不同的顏色。通過視覺的警示提醒人們此時的飲品很是燙口,避免一時糊涂拿起就喝了。

2

  再如下圖所示的路邊的壓痕,則剛好相反,通過觸覺代替視覺提醒對駕駛到路邊的車輛進行防呆提醒:你的車輛已經(jīng)偏離主行車道了。通過行駛過程中車輛的顛簸感,比視覺引導更有效的指示駕駛員盡快調(diào)整方向。

3

  防呆設計的重要目標是避免錯誤。喝咖啡留到桌子上是不是很懊惱?那就別讓這個錯誤發(fā)生:來自設計師Kim Keun Ae的創(chuàng)意,防污漬咖啡杯在杯子的腰線上開了一條環(huán)狀凹槽,于是,順著杯子邊沿淌下的咖啡漬,流到這里就會橫向發(fā)展,再不會繼續(xù)往下弄臟桌子~

4

  另外,防呆還會通過設計在適當?shù)臅r候?qū)τ脩暨M行提醒,幫助用戶完成任務。來自設計師Risako Matsumoto(松本理紗子)的創(chuàng)意平衡花瓶也利用了防呆的理念:優(yōu)雅的提醒你澆花。一根木頭支架,一頭嵌著花瓶,另外一頭則是可以移動的配重滑塊,整個結(jié)構通過掛鉤固定在墻上,形成一個類似天平的結(jié)構。當花瓶中的水減少,支架就會開始傾斜,水減少得越多,也就傾斜得越厲害,從而醒目地提醒你,它該加水了。

5

  夜間的提醒也很重要。停電了,卻怎么都找不到蠟燭?澳大利亞工作室Den Studio帶來的熒光蠟燭(Blackout Candle),通過防呆設計試圖解決這個問題:它采用了特殊材質(zhì)的石蠟和發(fā)光粉混合制作,白天發(fā)光粉吸收光的能量,晚上發(fā)出熒光;其次,造型方正,在底部有個小開口,剛好可以塞進去一盒火柴——于是,即便突然的停電讓你措手不及,但是找到了蠟燭,你就能找到火柴~

6

  從上面幾個案例中可以總結(jié)出防呆設計的原則:“避免錯誤,無需思考”,細化如下:

  1.即使有人為疏忽也不會發(fā)生錯誤──不需要注意力。

  2.外行人來做也不會錯──不需要經(jīng)驗

  3.不管是誰、無論何時都不會出差錯──不需要專門知識與高度的技能。

  從用戶層面分析,防呆設計就是以非專業(yè)、無經(jīng)驗的用戶角度出發(fā),通過設計引導這類用戶正確的操作。工業(yè)設計如此,交互設計也不例外,下面就是筆者對交互中的防呆策略的一些思考。

交互中的防呆

  簡單地說,防呆設計就是如何去防止錯誤發(fā)生的方法。人們總是在怪罪一件錯誤的發(fā)生,而較少去動腦筋想想如何去設計一些方法來避免錯誤的發(fā)生。所以我們需要正視錯誤,面對錯誤,想方設法的避免錯誤或緩解錯誤。在交互設計中,用戶可能的錯誤正是我們應該預防的方向,我們可以參考防呆設計的思路,通過設計,引導用戶正確的操作。

  • 1.限制操作

  想象一下:點擊某個功能按鈕,然后提示不能使用,應該怎么怎么樣先……此時你是否會呆?。杭热徊荒苡茫瑸樯兑懦鰜碜鰺熿F彈?所以,當用戶當前狀態(tài)不能進行一些操作時,把這些操作隱藏起來吧。給予用戶適當?shù)男袨榧s束——為用戶封閉掉不正確的道路。下圖所示,如果瀏覽器中已安裝Evernote Web Clipper,該頁面對應按鈕顯示為灰色不可用狀態(tài),避免用戶重復安裝。

7

  根據(jù)用戶的使用狀態(tài),對應進行功能項的展示和隱藏,是有效避免用戶誤操作的常用手段。由狀態(tài)所限制操作的設計在很大程度上預防了用戶可能發(fā)生的操作失誤。

  另外,通過有趣的形式提醒用戶達到限制也是一個友善的防呆做法。Feathers是一個第三方Twitter 客戶端,點擊那個可愛的 Twitter 鳥發(fā)推。隨著用戶逐漸輸入內(nèi)容 Twitter 鳥會逐漸變綠,防止用戶輸入超過140 個字符限制。

8

2.預見錯誤

  給予用戶必要的預判性錯誤提示——在用戶出錯發(fā)呆之前,告訴用戶,這樣走可能會出錯。

  當用戶在午夜提到“明天”時,siri會詢問用戶具體的時間,以防用戶錯誤的做出對明天的定義。

9

  當電量不足時,Dropbox會自動停止正在進行中的照片上傳動作。這個貼心的設計讓用戶避免了因上傳而耗盡電量手機關機的囧態(tài)。

10

  當用戶的一個行為很可能會引發(fā)預見性的錯誤,越早提示用戶,并給出可行性的建議,錯誤越容易被接受和改正,用戶的損失也就越小。

3.跳出空白

  空白頁面一定是空白的嗎?NO。單純的空白頁面會讓用戶焦躁不安:發(fā)生什么了?我現(xiàn)在該怎么辦?……無路可走的焦慮肯定是很難受的,為避免這種心理,我們需要給到用戶適當?shù)某隹冢層脩粼诳瞻醉撁嬉灿新房勺摺?/span>

  例如在空白頁面,提供用戶解決辦法,或提供給用戶其他出口,引導用戶接下來的操作,讓用戶不在空白頁發(fā)呆,幫助讓用戶快速離開空白。

11

  又或者,給用戶以與眾不同的空白頁,讓用戶可以在空白中思考。Clear中,當用戶刪除所有l(wèi)ist或新建一個空白項時,頁面展示出一些有意思的語句,讓用戶不再空白。

12

4.步驟狀態(tài)

  在一些復雜的操作時,用戶會產(chǎn)生一定的心理疑問:什么時候才是個頭呢?此時,為了避免用戶發(fā)呆,需要告訴用戶操作所處的狀態(tài)和接下來的操作步驟。

對用戶在這個頁面需要做什么、已經(jīng)做了什么有清晰的劃分,對現(xiàn)在需要進行的、當前所處的操作階段予以高亮顯示吸引人進行操作;對于還未進行到的操作階段也預先做了一個介紹,很清晰的介紹了完整的任務流程。

13

14

  另外,對狀態(tài)的巧妙標識也是防止用戶發(fā)呆的一個有效途徑。操作過多,用戶可能已經(jīng)遺忘了一些狀態(tài),比如瀏覽網(wǎng)頁時哪些看過哪些未看過。Opera 在新開網(wǎng)頁標簽上設計了折角處理,提醒用戶這個頁面還未瀏覽。

15

  無確切進度時,隨著時間的增加改變wording,以提醒用戶當前頁面仍在努力加載,避免用戶誤認為頁面卡住。

16

5.唯一操作

  不具備專業(yè)的知識、對操作的流程沒有預期的普通用戶,在一些流程復雜的交互操作前總會或多或少的迷茫。如何降低這種迷茫?解決方法就是讓用戶單次只需執(zhí)行唯一操作,不要把復雜的選擇題拋給用戶,讓用戶發(fā)呆。

17

  例如在電腦殺毒這個相對復雜的任務中,一次只提供給用戶唯一明顯按鈕,避免用戶在選擇時左右為難。把簡單留給用戶,把復雜留給自己。用戶只給用戶唯一的推薦,別讓用戶思考。

6.想你所需

  用戶在操作時不會保持高度的謹慎和耐性,所以必要時要幫助用戶思考。幫用戶想他沒想到的,幫用戶想他所需要的。如新浪微博使用郵箱做為登錄名,用戶在輸入@ 后,將會出現(xiàn)輸入建議,輸入建議里有常用郵箱的后綴以輔助輸入。此時用戶就可以直接選擇無需輸入。

18

  根據(jù)用戶場景設計用戶想不到的需求是防呆設計的較高境界。當你使用手機豎屏瀏覽時想將內(nèi)容放大你會怎么做?沒錯,將屏幕翻轉(zhuǎn)至橫屏顯示,之后觸控放大。谷歌翻譯對這一場景進行了延伸設計:當翻譯完句子后,如果將設備橫屏旋轉(zhuǎn)其界面會自動全屏并放大,方便展示給旁邊的人觀看。這個貼心的細節(jié)提前考慮到用戶使用翻譯的場景,幫助用戶省去一步操作。

19

  替用戶思考,幫用戶想他們所想不到的,不局限與讓用戶停止發(fā)呆,還要讓用戶意想不到。

結(jié)語

  防呆設計就是如何去防止錯誤發(fā)生的方法,讓非專業(yè)、無經(jīng)驗的用戶可以第一時間完成正確操作。最后,總結(jié)下防呆在交互設計中的應用。

避免錯誤

  1.限制操作:將暫時不可用的操作隱藏起來;

  2.預見出錯:將用戶可能的錯誤提前展示,比事后諸葛要好;

  3.跳出空白:別讓用戶止步與空白,空白應有更廣的發(fā)揮空間;

無需思考

  1.狀態(tài)指引:讓用戶了解當前的狀態(tài)和未來的進程,防止用戶迷失;

  2.唯一操作:復雜的任務流中不要讓用戶過多選擇,簡單唯一就好;

  3.想你所需:用戶是匆忙的,我們要替用戶想到他們想不到的事情。

 

轉(zhuǎn)載來自:Tencent CDC Blog

  總之,我們應該拋開自己的高級用戶視角,在用戶可能“發(fā)呆”的各個時刻精雕細琢。深入挖掘用戶行為習慣和心智模型,真正從用戶的角度去分析使用上可能會出現(xiàn)問題,通過系統(tǒng)的設計去盡量避免錯誤的發(fā)生——把簡單留給用戶、把復雜留給自己,讓發(fā)呆成為不可能。

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔