生活中總會有些狀況讓我們無所適從摸不著頭腦:面對一排電燈或空調的按鈕,哪個才是控制我想要的?開鎖時掏出一把鑰匙,哪個才是正確的?拿起U盤插入電腦,朝那個方向才是對的?……類似的猶豫充分說明,你呆住了。現在,是需要“防呆設計”來拯救你了。
防呆定義
防呆(日語:ポカヨケ;英語:Fool-proofing)是一種預防矯正的行為約束手段,運用避免產生錯誤的限制方法,讓操作者不需要花費注意力、也不需要經驗與專業知識即可準確無誤完成正確的操作。廣義來講,防呆就是如何設計一個東西,而使錯誤發生的機會減至最低的程度。避免工作錯誤的發生,進而達到“第一次就把工作做對”之境界。
防呆與設計
最常見的防呆設計在電腦中,為了讓普通使用者在組裝電腦時不會出錯,相關零元件大都有形狀相符的防呆設計。生活中也不乏防呆設計的應用,下面這款2013年iF獲獎作品微笑鑰匙(Smile Key)就通過防呆設計解決了關於鑰匙的4大難題。自然的弧度,更加貼合拇指和食指,用著更舒服;更容易分辨鑰匙的朝向—再不用去記憶哪面是正確的朝向,自然貼合拇指與食指的那面,便是正確的;鑰匙平放的時候,因為這弧度,更容易被拿起來;鑰匙上面有數目不等的凸起小顆粒,用於區分誰是誰,比如說,1個小顆粒是辦公室的,2個是自家大門的。這在晚上看不到的時候尤其方便,再不用一串鑰匙挨個嘗試了。
防呆設計經常使用感官替換的方式來進行設計。如下面這款杯蓋,通過視覺替代觸覺進行防呆。可以感應杯中液體的溫度顯示不同的顏色。通過視覺的警示提醒人們此時的飲品很是燙口,避免一時糊塗拿起就喝了。
再如下圖所示的路邊的壓痕,則剛好相反,通過觸覺代替視覺提醒對駕駛到路邊的車輛進行防呆提醒:你的車輛已經偏離主行車道了。通過行駛過程中車輛的顛簸感,比視覺引導更有效的指示駕駛員儘快調整方向。
防呆設計的重要目標是避免錯誤。喝咖啡留到桌子上是不是很懊惱?那就別讓這個錯誤發生:來自設計師Kim Keun Ae的創意,防汙漬咖啡杯在杯子的腰線上開了一條環狀凹槽,於是,順著杯子邊沿淌下的咖啡漬,流到這裡就會橫向發展,再不會繼續往下弄髒桌子~
另外,防呆還會通過設計在適當的時候對使用者進行提醒,幫助使用者完成任務。來自設計師Risako Matsumoto(松本理紗子)的創意平衡花瓶也利用了防呆的理念:優雅的提醒你澆花。一根木頭支架,一頭嵌著花瓶,另外一頭則是可以移動的配重滑塊,整個結構通過掛鉤固定在牆上,形成一個類似天平的結構。當花瓶中的水減少,支架就會開始傾斜,水減少得越多,也就傾斜得越厲害,從而醒目地提醒你,它該加水了。
夜間的提醒也很重要。停電了,卻怎麼都找不到蠟燭?澳大利亞工作室Den Studio帶來的熒光蠟燭(Blackout Candle),通過防呆設計試圖解決這個問題:它採用了特殊材質的石蠟和發光粉混合製作,白天發光粉吸收光的能量,晚上發出熒光;其次,造型方正,在底部有個小開口,剛好可以塞進去一盒火柴——於是,即便突然的停電讓你措手不及,但是找到了蠟燭,你就能找到火柴~
從上面幾個案例中可以總結出防呆設計的原則:“避免錯誤,無需思考”,細化如下:
- 即使有人為疏忽也不會發生錯誤──不需要注意力。
- 外行人來做也不會錯──不需要經驗
- 不管是誰、無論何時都不會出差錯──不需要專門知識與高度的技能。
從使用者層面分析,防呆設計就是以非專業、無經驗的使用者角度出發,通過設計引導這類使用者正確的操作。工業設計如此,互動設計也不例外,下面就是筆者對互動中的防呆策略的一些思考。
互動中的防呆
簡單地說,防呆設計就是如何去防止錯誤發生的方法。人們總是在怪罪一件錯誤的發生,而較少去動腦筋想想如何去設計一些方法來避免錯誤的發生。所以我們需要正視錯誤,面對錯誤,想方設法的避免錯誤或緩解錯誤。在互動設計中,使用者可能的錯誤正是我們應該預防的方向,我們可以參考防呆設計的思路,通過設計,引導使用者正確的操作。
-
1.限制操作
想象一下:點選某個功能按鈕,然後提示不能使用,應該怎麼怎麼樣先……此時你是否會呆住:既然不能用,為啥要放出來做煙霧彈?所以,當使用者當前狀態不能進行一些操作時,把這些操作隱藏起來吧。給予使用者適當的行為約束——為使用者封閉掉不正確的道路。下圖所示,如果瀏覽器中已安裝Evernote Web Clipper,該頁面對應按鈕顯示為灰色不可用狀態,避免使用者重複安裝。
根據使用者的使用狀態,對應進行功能項的展示和隱藏,是有效避免使用者誤操作的常用手段。由狀態所限制操作的設計在很大程度上預防了使用者可能發生的操作失誤。
另外,通過有趣的形式提醒使用者達到限制也是一個友善的防呆做法。Feathers是一個第三方Twitter 客戶端,點選那個可愛的 Twitter 鳥發推。隨著使用者逐漸輸入內容 Twitter 鳥會逐漸變綠,防止使用者輸入超過140 個字元限制。
2.預見錯誤
給予使用者必要的預判性錯誤提示——在使用者出錯發呆之前,告訴使用者,這樣走可能會出錯。當使用者在午夜提到“明天”時,siri會詢問使用者具體的時間,以防使用者錯誤的做出對明天的定義。
當電量不足時,Dropbox會自動停止正在進行中的照片上傳動作。這個貼心的設計讓使用者避免了因上傳而耗盡電量手機關機的囧態。
當使用者的一個行為很可能會引發預見性的錯誤,越早提示使用者,並給出可行性的建議,錯誤越容易被接受和改正,使用者的損失也就越小。
3.跳出空白
空白頁面一定是空白的嗎?NO。單純的空白頁面會讓使用者焦躁不安:發生什麼了?我現在該怎麼辦?無路可走的焦慮肯定是很難受的,為避免這種心理,我們需要給到使用者適當的出口,讓使用者在空白頁面也有路可走。
例如在空白頁面,提供使用者解決辦法,或提供給使用者其他出口,引導使用者接下來的操作,讓使用者不在空白頁發呆,幫助讓使用者快速離開空白。
又或者,給使用者以與眾不同的空白頁,讓使用者可以在空白中思考。Clear中,當使用者刪除所有list或新建一個空白項時,頁面展示出一些有意思的語句,讓使用者不再空白。
4.步驟狀態
在一些複雜的操作時,使用者會產生一定的心理疑問:什麼時候才是個頭呢?此時,為了避免使用者發呆,需要告訴使用者操作所處的狀態和接下來的操作步驟。對使用者在這個頁面需要做什麼、已經做了什麼有清晰的劃分,對現在需要進行的、當前所處的操作階段予以高亮顯示,吸引人進行操作;對於還未進行到的操作階段也預先做了一個介紹,很清晰的介紹了完整的任務流程。
另外,對狀態的巧妙標識也是防止使用者發呆的一個有效途徑。操作過多,使用者可能已經遺忘了一些狀態,比如瀏覽網頁時哪些看過哪些未看過。Opera 在新開網頁標籤上設計了折角處理,提醒使用者這個頁面還未瀏覽。
無確切進度時,隨著時間的增加改變wording,以提醒使用者當前頁面仍在努力載入,避免使用者誤認為頁面卡住。
5.唯一操作
不具備專業的知識、對操作的流程沒有預期的普通使用者,在一些流程複雜的互動操作前總會或多或少的迷茫。如何降低這種迷茫?解決方法就是讓使用者單次只需執行唯一操作,不要把複雜的選擇題拋給使用者,讓使用者發呆。
例如在電腦防毒這個相對複雜的任務中,一次只提供給使用者唯一明顯按鈕,避免使用者在選擇時左右為難。把簡單留給使用者,把複雜留給自己。使用者只給使用者唯一的推薦,別讓使用者思考。
6.想你所需
使用者在操作時不會保持高度的謹慎和耐性,所以必要時要幫助使用者思考。幫使用者想他沒想到的,幫使用者想他所需要的。如新浪微博使用郵箱做為登入名,使用者在輸入@ 後,將會出現輸入建議,輸入建議裡有常用郵箱的字尾以輔助輸入。此時使用者就可以直接選擇無需輸入。
根據使用者場景設計使用者想不到的需求是防呆設計的較高境界。當你使用手機豎屏瀏覽時想將內容放大你會怎麼做?沒錯,將螢幕翻轉至橫屏顯示,之後觸控放大。谷歌翻譯對這一場景進行了延伸設計:當翻譯完句子後,如果將裝置橫屏旋轉其介面會自動全屏並放大,方便展示給旁邊的人觀看。這個貼心的細節提前考慮到使用者使用翻譯的場景,幫助使用者省去一步操作。
替使用者思考,幫使用者想他們所想不到的,不侷限與讓使用者停止發呆,還要讓使用者意想不到。
結語
防呆設計就是如何去防止錯誤發生的方法,讓非專業、無經驗的使用者可以第一時間完成正確操作。最後,總結下防呆在互動設計中的應用。
避免錯誤
- 限制操作:將暫時不可用的操作隱藏起來;
- 預見出錯:將使用者可能的錯誤提前展示,比事後諸葛要好;
- 跳出空白:別讓使用者止步與空白,空白應有更廣的發揮空間;
無需思考
- 狀態指引:讓使用者瞭解當前的狀態和未來的程式,防止使用者迷失;
- 唯一操作:複雜的任務流中不要讓使用者過多選擇,簡單唯一就好;
- 想你所需:使用者是匆忙的,我們要替使用者想到他們想不到的事情。
總之,我們應該拋開自己的高階使用者視角,在使用者可能“發呆”的各個時刻精雕細琢。深入挖掘使用者行為習慣和心智模型,真正從使用者的角度去分析使用上可能會出現問題,通過系統的設計去儘量避免錯誤的發生——把簡單留給使用者、把複雜留給自己,讓發呆成為不可能。