基于交互體驗的防呆設(shè)計應(yīng)用與策略

時間：2022-05-29 14:27:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 14:27:01 來源：網(wǎng)絡(luò)營銷

我最早了解“防呆設(shè)計”這一概念是從一個電腦報上看到的，主要是講在內(nèi)存條設(shè)計時，為了區(qū)分不同格式內(nèi)存條，防止誤用，誤插撥等異常情況，第二代和第三代產(chǎn)品之間設(shè)計了不同的限位插槽，也就是在整體長度，寬度，高度基本保持一致的前提下，利用限位裝置，使用防呆設(shè)計，防止差錯。

這個名詞從字面意思上就能知道大概情況了。防止癡，呆，傻，用蠻力，亂插撥，造成人為損壞。這種思路很好，其實也是一種設(shè)計的深化。不要僅僅以為把東西設(shè)計出來能完成各種功能就可以了，要知道，有可能使用這個設(shè)備的人可能“智力有缺陷”，或者對設(shè)備不熟悉，第一次接觸等，這些都是有可能對設(shè)備造成損壞的原因。

雖然99%都能明白，能準確無誤地按設(shè)計的思路來辦事，但不能排除總有那么1%的人非要按他的理解辦事。而恰恰這些人的理解和設(shè)計的出入非常大。

從另一個角度來說，這1%的人如果因為誤操作而造成不良影響，對他們來說是一種損失，而這種損失即使是由他們的原因引起的，他們也會把這筆賬算在廠家頭上，雖然廠家很冤枉，但顧客總是對的。

其實很多時候，我們已經(jīng)完成了工作的90%，差的就是防呆設(shè)計了，讓界面更好看一些，更友好一些，更易用一些，應(yīng)該是我們要考慮的。

一、防呆是什么？

防呆（Fool-proofing）是一種預(yù)防矯正的行為約束手段，運用避免產(chǎn)生錯誤的限制方法，讓操作者不需要花費注意力、也不需要經(jīng)驗與專業(yè)知識即可準確無誤完成正確的操作。

防呆是一個源自于日本圍棋與將棋的術(shù)語，后來運用在工業(yè)管理上，基本概念應(yīng)用在日本豐田汽車的生產(chǎn)方式，由新鄉(xiāng)重夫（Shigeo Shingo）提出，之后隨著工業(yè)品質(zhì)管理的推展傳播至全世界。

防呆的日語為“ポカヨケ”，“ポカ”原為“バカ”，即呆的意思；而“ヨケ”則為預(yù)防的意思，英語取其音譯為“Poka-yoke”，意譯則為“Fool-proofing”。中文譯為防呆法或愚巧法。

二、防呆設(shè)計的原則

在工業(yè)設(shè)計上，為了避免使用者的操作失誤造成機器或人身傷害，（包括無意識的動作或下意識的誤動作或不小心的肢體動作），會有針對這些可能發(fā)生的情況來做預(yù)防措施，稱為防呆。

廣義來講，防呆就是如何設(shè)計一個東西，而使錯誤發(fā)生的機會減至最低的程度，避免工作錯誤的發(fā)生，進而達到“第一次就把工作做對”之境界。對此，億企邦覺得防呆設(shè)計的原則就是：“避免錯誤，無需思考”，我們也可以分為以下3點來講：

1、具有即使有人為疏忽也不會發(fā)生錯誤的構(gòu)造──不需要注意力。

2、具有外行人來做也不會錯的構(gòu)造──不需要經(jīng)驗與直覺。

3、具有不管是誰或在何時工作都不會出差錯的構(gòu)造──不需要專門知識與高度的技能。

三、設(shè)計中的防呆應(yīng)用技巧

最常見的防呆設(shè)計在電腦中，為了讓普通用戶在組裝電腦時不會出錯，相關(guān)零組件大都有形狀相符的防呆設(shè)計，其實在生活中也不乏防呆設(shè)計的應(yīng)用。

1、微笑鑰匙

上面這款2013年iF獲獎作品微笑鑰匙（Smile Key）就通過防呆設(shè)計解決了關(guān)于鑰匙的4大難題。

（1）、自然的弧度，更加貼合拇指和食指，用著更舒服；

（2）、更容易分辨鑰匙的朝向—再不用去記憶哪面是正確的朝向，自然貼合拇指與食指的那面，便是正確的；

（3）、鑰匙平放的時候，因為這弧度，更容易被拿起來；

（4）、鑰匙上面有數(shù)目不等的凸起小顆粒，用于區(qū)分誰是誰，比如說，1個小顆粒是辦公室的，2個是自家大門的。這在晚上看不到的時候尤其方便，再不用一串鑰匙挨個嘗試了。

2、感應(yīng)溫度的杯蓋

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

3、路邊的壓痕

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

4、防污漬咖啡杯

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

5、平衡花瓶

另外，防呆還會通過設(shè)計在適當(dāng)?shù)臅r候?qū)τ脩暨M行提醒，幫助用戶完成任務(wù)。來自設(shè)計師Risako Matsumoto（松本理?子）的創(chuàng)意平衡花瓶也利用了防呆的理念：優(yōu)雅的提醒你澆花。

一根木頭支架，一頭嵌著花瓶，另外一頭則是可以移動的配重滑塊，整個結(jié)構(gòu)通過掛鉤固定在墻上，形成一個類似天平的結(jié)構(gòu)。當(dāng)花瓶中的水減少，支架就會開始傾斜，水減少得越多，也就傾斜得越厲害，從而醒目地提醒你，它該加水了。

6、熒光蠟燭

夜間的提醒也很重要，比如：停電了，卻怎么都找不到蠟燭？該怎么辦呢？這就需要熒光蠟燭（Blackout Candle），通過防呆設(shè)計試圖解決這個問題：它采用了特殊材質(zhì)的石蠟和發(fā)光粉混合制作，白天發(fā)光粉吸收光的能量，晚上發(fā)出熒光；其次，造型方正，在底部有個小開口，剛好可以塞進去一盒火柴——于是，即便突然的停電讓你措手不及，但是找到了蠟燭，你就能找到火柴。

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

四、交互設(shè)計中的防呆策略

簡單地說，防呆設(shè)計就是如何去防止錯誤發(fā)生的方法，人們總是在怪罪一件錯誤的發(fā)生，而較少去動腦筋想想如何去設(shè)計一些方法來避免錯誤的發(fā)生。所以，我們需要正視錯誤，面對錯誤，想方設(shè)法的避免錯誤或緩解錯誤。

在交互設(shè)計中，用戶可能的錯誤正是我們應(yīng)該預(yù)防的方向，我們可以參考防呆設(shè)計的思路，通過設(shè)計，引導(dǎo)用戶正確的操作。

1、限制操作

想象一下：點擊某個功能按鈕，然后提示不能使用，接下來該怎么辦呢？此時你是否會呆?。杭热徊荒苡?，為啥要放出來做煙霧彈？

所以，當(dāng)用戶當(dāng)前狀態(tài)不能進行一些操作時，把這些操作隱藏起來吧。給予用戶適當(dāng)?shù)男袨榧s束——為用戶封閉掉不正確的道路。如下圖所示，如果瀏覽器中已安裝Evernote Web Clipper，該頁面對應(yīng)按鈕顯示為灰色不可用狀態(tài)，避免用戶重復(fù)安裝。

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

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

2、預(yù)見錯誤

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

當(dāng)用戶在午夜提到“明天”時，siri會詢問用戶具體的時間，以防用戶錯誤的做出對明天的定義，如下圖所示：

當(dāng)電量不足時，Dropbox會自動停止正在進行中的照片上傳動作，這個貼心的設(shè)計讓用戶避免了因上傳而耗盡電量手機關(guān)機的?態(tài)，如下圖所示：

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

3、跳出空白

空白頁面一定是空白的嗎？NO。單純的空白頁面會讓用戶焦躁不安：發(fā)生什么了？我現(xiàn)在該怎么辦？……無路可走的焦慮肯定是很難受的，為避免這種心理，我們需要給到用戶適當(dāng)?shù)某隹?，讓用戶在空白頁面也有路可走，或者更容易找到自己想要的頁面（這就牽涉到頁面的扁平化設(shè)計了，具體可查看億企邦的《基于交互體驗的扁平化設(shè)計要點》詳細介紹）。

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

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

4、步驟狀態(tài)

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

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

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

無確切進度時，隨著時間的增加改變wording，以提醒用戶當(dāng)前頁面仍在努力加載（對于加載的頁面，我們也可以充分利用隱形機制，具體可查看億企邦的《交互設(shè)計的三大隱形機制：加載、刷新和緩存》相關(guān)介紹），避免用戶誤認為頁面卡住。

5、唯一操作

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

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

6、想你所需

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

億企邦認為根據(jù)用戶場景設(shè)計用戶想不到的需求是防呆設(shè)計的較高境界，比如：當(dāng)你使用手機豎屏瀏覽時想將內(nèi)容放大你會怎么做？沒錯，將屏幕翻轉(zhuǎn)至橫屏顯示，之后觸控放大。

谷歌翻譯對這一場景進行了延伸設(shè)計：當(dāng)翻譯完句子后，如果將設(shè)備橫屏旋轉(zhuǎn)其界面會自動全屏并放大，方便展示給旁邊的人觀看。這個貼心的細節(jié)提前考慮到用戶使用翻譯的場景，幫助用戶省去一步操作。

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

五、防呆設(shè)計的注意事項

防呆設(shè)計就是如何去防止錯誤發(fā)生的方法，讓非專業(yè)、無經(jīng)驗的用戶可以第一時間完成正確操作，防呆設(shè)計的重要目標(biāo)是避免錯誤，那么，防呆設(shè)計過程中我們有需要注意那些事項呢？

1、避免錯誤

（1）、限制操作：將暫時不可用的操作隱藏起來。

（2）、預(yù)見出錯：將用戶可能的錯誤提前展示，比事后諸葛要好。

（3）、跳出空白：別讓用戶止步與空白，空白應(yīng)有更廣的發(fā)揮空間。

2、無需思考

（1）、狀態(tài)指引：讓用戶了解當(dāng)前的狀態(tài)和未來的進程，防止用戶迷失。

（2）、唯一操作：復(fù)雜的任務(wù)流中不要讓用戶過多選擇，簡單唯一就好。

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

億企邦點評：

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