📖 ZKIZ Archives

【產品經理必鑑】別讓你的用戶發呆！（防呆是一項技術活）

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

防呆定義

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

防呆與設計

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

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

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

防呆設計的重要目標是避免錯誤。喝咖啡留到桌子上是不是很懊惱?那就別讓這個錯誤發生：來自設計師Kim Keun Ae的創意，防污漬咖啡杯在杯子的腰線上開了一條環狀凹槽，於是，順著杯子邊沿淌下的咖啡漬，流到這裡就會橫向發展，再不會繼續往下弄髒桌子~

另外，防呆還會通過設計在適當的時候對用戶進行提醒，幫助用戶完成任務。來自設計師Risako Matsumoto(松本理紗子)的創意平衡花瓶也利用了防呆的理念：優雅的提醒你澆花。一根木頭支架，一頭嵌著花瓶，另外一頭則是可以移動的配重滑塊，整個結構通過掛鉤固定在牆上，形成一個類似天平的結構。當花瓶中的水減少，支架就會開始傾斜，水減少得越多，也就傾斜得越厲害，從而醒目地提醒你，它該加水了。

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

從上面幾個案例中可以總結出防呆設計的原則：「避免錯誤，無需思考」，細化如下：

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

2.外行人來做也不會錯──不需要經驗

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

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

交互中的防呆

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

限制操作

想像一下：點擊某個功能按鈕，然後提示不能使用，應該怎麼怎麼樣先……此時你是否會呆住：既然不能用，為啥要放出來做煙霧彈?所以，當用戶當前狀態不能進行一些操作時，把這些操作隱藏起來吧。給予用戶適當的行為約束——為用戶封閉掉不正確的道路。下圖所示，如果瀏覽器中已安裝Evernote Web Clipper，該頁面對應按鈕顯示為灰色不可用狀態，避免用戶重複安裝。

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

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

2.預見錯誤

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

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

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

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

3.跳出空白

空白頁面一定是空白的嗎?NO。單純的空白頁面會讓用戶焦躁不安：發生什麼了?我現在該怎麼辦?……無路可走的焦慮肯定是很難受的，為避免這種心理，我們需要給到用戶適當的出口，讓用戶在空白頁面也有路可走。

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

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

4.步驟狀態

在一些複雜的操作時，用戶會產生一定的心理疑問：什麼時候才是個頭呢?此時，為了避免用戶發呆，需要告訴用戶操作所處的狀態和接下來的操作步驟。

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

另外，對狀態的巧妙標識也是防止用戶發呆的一個有效途徑。操作過多，用戶可能已經遺忘了一些狀態，比如瀏覽網頁時哪些看過哪些未看過。Opera 在新開網頁標籤上設計了折角處理，提醒用戶這個頁面還未瀏覽。

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

5.唯一操作

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

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

6.想你所需

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

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

替用戶思考，幫用戶想他們所想不到的，不侷限與讓用戶停止發呆，還要讓用戶意想不到。

結語

防呆設計就是如何去防止錯誤發生的方法，讓非專業、無經驗的用戶可以第一時間完成正確操作。最後，總結下防呆在交互設計中的應用。

避免錯誤

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

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

3.跳出空白：別讓用戶止步與空白，空白應有更廣的發揮空間;

無需思考

1.狀態指引：讓用戶瞭解當前的狀態和未來的進程，防止用戶迷失;

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

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

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