本文主要展示了一些設(shè)計(jì)用例，幫助大家更好的理解摩擦是如何在用戶體驗(yàn)設(shè)計(jì)師的手中發(fā)揮積極效用。

在用戶體驗(yàn)設(shè)計(jì)中，摩擦指的是人為地在設(shè)計(jì)中創(chuàng)造摩擦或阻力來阻止用戶達(dá)成目標(biāo)。就好像是登錄頁面上的艱澀詞匯或者出現(xiàn)在支付頁面那些摸不著頭腦的選項(xiàng)問題?！盀槟Σ炼O(shè)計(jì)”是用戶直覺和極簡主義的反面，也與“Don’t make me think”的設(shè)計(jì)理念相悖。

話雖如此，但有時(shí)“為摩擦而設(shè)計(jì)”反而是一件好事。例如在游戲設(shè)計(jì)中，摩擦實(shí)際上是很關(guān)鍵的。在適當(dāng)?shù)臅r(shí)候增加適量的摩擦能夠使游戲更具挑戰(zhàn)性。

當(dāng)然，“為摩擦而設(shè)計(jì)”并不僅僅能在游戲設(shè)計(jì)領(lǐng)域派上用場。在本文中，我將展示一些用例，讓大家更好的理解摩擦是如何在用戶體驗(yàn)設(shè)計(jì)師的手中發(fā)揮積極效用，幫助用戶改善用戶體驗(yàn)的。

1.操作放緩，防止錯(cuò)誤發(fā)生

（1）具有嚴(yán)重后果的用戶操作

防止錯(cuò)誤是用戶體驗(yàn)設(shè)計(jì)中一個(gè)基本的可用性原則，在產(chǎn)品設(shè)計(jì)中最常見的摩擦設(shè)計(jì)就是設(shè)法讓用戶很難做錯(cuò)事（尤其是涉及到不可逆的行為時(shí)）：

注：在永久刪除項(xiàng)目時(shí)，此確認(rèn)頁面會(huì)顯示在macOS中。

根據(jù)操作可能帶來后果的嚴(yán)重程度，摩擦設(shè)計(jì)的語氣用詞也不同，使得用戶需要付出額外的思考和操作來確認(rèn)，例如鍵入特定的命令等等。這種解決方案不僅使得錯(cuò)誤地確認(rèn)刪除變得更困難，而且還減慢了用戶的速度，迫使他們閱讀提示消息以徹底了解發(fā)生了什么。

從用戶的角度來看，這些確認(rèn)在這個(gè)過程中是一個(gè)額外的步驟（實(shí)際上是一種摩擦），但是同時(shí)，他們確信他們不會(huì)意外地執(zhí)行一個(gè)難以撤銷的行動(dòng)。

注：Netflix在退出所有設(shè)備之前會(huì)顯示一個(gè)確認(rèn)對(duì)話框。提示用戶要重新登錄所有設(shè)備可能是一件苦差事，所以Netflix確保您不會(huì)無意中退出。

（2）預(yù)計(jì)可能發(fā)生的錯(cuò)誤

要預(yù)防錯(cuò)誤還要幫助用戶盡快驗(yàn)證操作的正確性，這個(gè)時(shí)候，智能驗(yàn)證就幫了大忙。智能驗(yàn)證不僅能夠幫助用戶檢查輸入格式是否正確，而且還能夠考慮到更廣泛的上下文關(guān)系，并警告用戶此操作可能會(huì)導(dǎo)致問題。

注：用戶是有可能創(chuàng)建一個(gè)過去日期的事件條目的，但由于這類操作產(chǎn)生錯(cuò)誤的可能性更高，所以在這里添加確認(rèn)請(qǐng)求是有其道理的。

雖然這樣的預(yù)測(cè)并不百分之百正確，而且有可能給出了一個(gè)看似無效的信息，警示對(duì)話框也因此成為了用戶操作的障礙。但是，在大多數(shù)情況下，智能驗(yàn)證是預(yù)防錯(cuò)誤的有效工具。

注：忘記附件可是件相當(dāng)尷尬的事情，還好Gmail提供了這個(gè)智能驗(yàn)證通知功能，為用戶免除了一次難堪（甚至險(xiǎn)些造成嚴(yán)重的工作失誤）。

（3）延遲重要的操作

許多電子郵件客戶端都有一個(gè)方便的功能，就是你可以在發(fā)送后立即“撤銷”電子郵件。這個(gè)功能的邏輯很簡單，就是在你點(diǎn)擊“發(fā)送”按鈕后給你一個(gè)時(shí)間框架來取消它，并解決與之相關(guān)的郵件問題。這意味著電子郵件傳遞過程會(huì)延遲幾秒鐘，但同時(shí)你發(fā)出的郵件卻得到了保險(xiǎn)。

注：延遲投遞郵件的幾秒鐘很可能會(huì)拯救用戶于水火。

2.添加額外的步驟來增強(qiáng)安全性

（1）預(yù)防意外交易

亞馬遜的語音助手有一個(gè)有趣的故事：Echo設(shè)備的主創(chuàng)人員因?yàn)楫?dāng)?shù)仉娨暸_(tái)播放的一句話深深地觸動(dòng)了他們，因此開始采取自動(dòng)下單操作，Echo設(shè)備默認(rèn)設(shè)置了不需要用戶端的任何確認(rèn)就能夠完成下單操作。也就是說，如果你大喊一聲：“Alexa，給我一個(gè)玩具屋”，那么這個(gè)訂單就會(huì)立即生成，你甚至都沒有說明訂購哪一個(gè)確切的產(chǎn)品。這顯然是一個(gè)非常無摩擦的購物體驗(yàn)的例子，但在這個(gè)體驗(yàn)中，下訂單太簡單了，只需要一個(gè)意外的購買訂單，就足以破壞用戶體驗(yàn)。

注：主持人的話引發(fā)了很多Echo設(shè)備立即訂購?fù)尥尬?。（圖片來源：CNN.com）

相比之下，典型的電子商務(wù)結(jié)賬流程在下訂單之前至少需要一個(gè)明確的確認(rèn)。在移動(dòng)設(shè)備上，它甚至可能是一個(gè)特定的手勢(shì)或指紋批準(zhǔn)，以防止意外購買。這種摩擦通常是在結(jié)帳過程中需要的，以便用戶能夠真正控制每一次交易和支付行為。

注：在最終確定訂單之前要求明確的確認(rèn)是一種常見的摩擦設(shè)計(jì)。

（2）多步認(rèn)證

安全保障措施有時(shí)會(huì)讓用戶感覺到阻礙和摩擦。例如，許多應(yīng)用程序在登錄或進(jìn)行重大交易（例如從你的銀行賬戶轉(zhuǎn)賬）之前需要第二個(gè)身份驗(yàn)證（例如使用Google身份驗(yàn)證器，接收驗(yàn)證文本或類似內(nèi)容）。對(duì)于用戶來說，這意味著身份驗(yàn)證過程需要額外的一步，但是這份額外的努力代表了對(duì)他們的賬戶和數(shù)據(jù)的多重保護(hù)。

注：雙重驗(yàn)證增加了登錄體驗(yàn)的摩擦，但它提高了安全性。

（3）雙重認(rèn)證之前的關(guān)鍵操作

在執(zhí)行敏感操作之前，你必須重新登錄的操作并不罕見，特別是涉及個(gè)人數(shù)據(jù)的敏感操作。經(jīng)典的例子是如果你想更改你的密碼，你首先需要輸入你當(dāng)前的密碼（即使你已經(jīng)登錄了）。

顯示你保存的密碼可能更加敏感。例如，Google Chrome瀏覽器可以存儲(chǔ)你的登錄憑據(jù)，但只有輸入計(jì)算機(jī)密碼才能讀取存儲(chǔ)的密碼，以便更好地保護(hù)您的數(shù)據(jù)。

注：在Chrome中訪問自己存儲(chǔ)的密碼之前，你需要使用計(jì)算機(jī)密碼進(jìn)行身份驗(yàn)證。

這種再次登錄的模式也存在于移動(dòng)設(shè)備上。即使你的手機(jī)用你的指紋已經(jīng)解鎖（一種設(shè)計(jì)為明顯無摩擦的設(shè)計(jì)），但在例如重新啟動(dòng)設(shè)備后，你仍然需要輸入密碼才能獲得額外的操作機(jī)會(huì)。

3.使長進(jìn)程看起來更短

（1）在等待時(shí)讓用戶忙起來

有一個(gè)關(guān)于休斯頓機(jī)場的案例研究——機(jī)場設(shè)法以一個(gè)非常意想不到的方式終止了乘客因長時(shí)間等待行李托運(yùn)而投訴。機(jī)場管理人員在調(diào)查投訴時(shí)發(fā)現(xiàn)，雖然乘客從出入口到行李領(lǐng)取處只需要一分鐘的時(shí)間，但他們至少要在那里等上七分鐘才能拿到行李。

于是機(jī)場嘗試了一個(gè)令人驚訝的解決方案：重新安排了該地區(qū)，以便乘客不得不走更多的路程才能到達(dá)行李領(lǐng)取處。就這樣，他們把等待的時(shí)間都花在了走路上，實(shí)際站在那里等的時(shí)間縮短，投訴立即結(jié)束。這個(gè)故事的經(jīng)驗(yàn)教訓(xùn)是，如果讓用戶忙碌，他們將不會(huì)注意到一個(gè)進(jìn)程是否比預(yù)期的要長。

Slack利用了相同的原理，通過在加載過程中顯示內(nèi)置的和自定義的符號(hào)，讓用戶閱讀這些內(nèi)容的時(shí)候會(huì)減少感知的等待時(shí)間（當(dāng)然，它還為產(chǎn)品增添了不錯(cuò)的人性化觸感）。

注：加載時(shí)，Slack通常會(huì)告訴你一些很好或有趣的東西。

（2）使裝載過程更加漸進(jìn)和透明

許多網(wǎng)站在加載過程中會(huì)顯示進(jìn)度指示器，甚至顯示頁面框架，在加載時(shí)逐漸揭示實(shí)際內(nèi)容。不斷地顯示內(nèi)容，讓人感覺到加載過程是流動(dòng)的（而且更快）。

注：Facebook首先顯示屏幕框架，然后在加載內(nèi)容時(shí)添加內(nèi)容。

（3）用動(dòng)畫來削減長時(shí)間等待的不適

加載指標(biāo)一般是為了讓用戶知道加載過程正在發(fā)生，一切都在掌控之中。從用戶界面的角度來看，這樣的動(dòng)畫可能被認(rèn)為是不必要的，甚至是分散注意力，因?yàn)樗粫?huì)帶來太多的直接價(jià)值。但是，如果設(shè)計(jì)得不錯(cuò)的話，它們可以成為一個(gè)很好的工具使得用戶的眼睛始終有東西看，從而使得等待過程不易被注意。

4.延長操作時(shí)間，有利于建立用戶信任

（1）放慢過程，有助于提升結(jié)果信任

有一個(gè)關(guān)于Coinstar機(jī)器（一種用來將硬幣換成紙幣的裝置）的小故事，說的是當(dāng)這款機(jī)器剛剛被引入時(shí)，用戶們對(duì)其可以瞬間計(jì)數(shù)硬幣的功能不信任，他們認(rèn)為短時(shí)間內(nèi)快速正確的計(jì)數(shù)零錢是不可靠的。設(shè)計(jì)師也因此改進(jìn)用戶體驗(yàn)，即使計(jì)算速度很快，也讓結(jié)果顯示有所延遲。由于這種變化，人們開始相信并樂于使用這臺(tái)機(jī)器。

（2）額外的延遲，有助于獲得安全感

還有另一個(gè)小股數(shù)，講述的是Well’s Fargo開發(fā)了一款基于眼動(dòng)掃描的手機(jī)銀行應(yīng)用程序，其登錄非?？焖?，只要用戶的眼睛被掃描和處理，登錄速度可以以毫秒為計(jì)算單位。但實(shí)際上，用戶的登錄體驗(yàn)太快了，以至于他們覺得自己已經(jīng)登錄了，但其實(shí)驗(yàn)證過程并沒有完全進(jìn)行，他們也因此覺得這種登錄方式不可靠不安全?；诖耍a(chǎn)品設(shè)計(jì)師們?cè)谙乱淮蔚?，為眼球認(rèn)證過程人為的添加了幾秒鐘延遲時(shí)間，客戶們的心理體驗(yàn)立即得到了提升，并紛紛表示這種登錄過程是周到全面且安全的。

（3）虛擬進(jìn)度條的力量

減慢過程有時(shí)不足以改變觀念。據(jù)悉，F(xiàn)acebook在安全檢查過程中曾做過一個(gè)嘗試，系統(tǒng)檢查隱私和安全設(shè)置只需要花費(fèi)幾毫秒的時(shí)間，但對(duì)于用戶來說他們認(rèn)為這樣并不足夠。為此，F(xiàn)acebook增加延遲和一個(gè)虛擬的進(jìn)度條，以便用戶認(rèn)為自己更好地了解了全部的安全檢查過程。

注：當(dāng)整個(gè)過程被拉長和擴(kuò)展了之后，用戶會(huì)認(rèn)為這個(gè)過程更嚴(yán)謹(jǐn)更安全。

5.教育和改變用戶的行為

（1）提高用戶安全意識(shí)

ATM的取款過程其實(shí)設(shè)計(jì)了一個(gè)十分明智的摩擦。以前，取款的程序是先插入卡片，輸入個(gè)人識(shí)別號(hào)碼，選擇取款金額，取錢，最后取回卡片。但是這個(gè)過程使得很多人忘記拿回自己的卡片，因?yàn)槿藗兺荒玫藉X就會(huì)覺得自己取錢的“使命”完成了，就自然的離開。但在ATM上留下卡片不僅對(duì)客戶是一個(gè)巨大的風(fēng)險(xiǎn)，對(duì)于銀行來說也是個(gè)極不穩(wěn)定的因子，所以取錢的過程必須重新設(shè)計(jì)。這就是為什么現(xiàn)在大部分國外的（譯者注）自動(dòng)取款機(jī)都會(huì)先把你的卡退還給你，之后客戶才能拿到錢。這個(gè)過程可能會(huì)多花費(fèi)客戶一點(diǎn)時(shí)間，但對(duì)于客戶和銀行來說都更安全。

（2）引導(dǎo)和教育用戶行為

有時(shí)用戶的某個(gè)決策所帶來的后果很難預(yù)見，尤其是當(dāng)它可能影響到其他用戶的時(shí)候。在這種情況下，我們的設(shè)計(jì)不僅要確保用戶自主決策，還要引導(dǎo)用戶做出正確的負(fù)責(zé)任的行動(dòng)決策。

例如，Slack在將推送通知發(fā)送給小組之前有一個(gè)警告，這樣做不僅使用戶意識(shí)到這個(gè)行為的直接后果，而且教育他們要慎重使用這個(gè)選項(xiàng)。

注：Slack讓你知道你的行動(dòng)的后果。

（3）助推

助推是行為科學(xué)中的一個(gè)概念，它指的是改變?nèi)藗冃袨榈男〖记桑榱烁茫?，同時(shí)不限制其可選擇的范疇。助推行為通常需要增加摩擦，但因?yàn)槠涓鼮橛幸?，所以通常?huì)被人們所接受。例如在辦公樓的電梯內(nèi)設(shè)置標(biāo)語，告知人們電梯每隔60秒才會(huì)有一次。與其無聊的等待這一分鐘的時(shí)間，可能會(huì)有很多人選擇走向樓梯，而不是繼續(xù)等待電梯——也正是這一小小的提示，讓更多的人選擇更為健康的上下樓方式。

Laszlo Bock在他那本優(yōu)質(zhì)暢銷的《WORK RULES!》中分享了谷歌如何使用微調(diào)策略讓員工在公司茶水間里選擇更健康的休閑零食。其中一招就是將糖果放在不透明的容器中，同時(shí)將水果干明顯地存放在玻璃容器中。這種故意增加的摩擦改變了員工的行為，他們開始選擇更健康的零食。

6.平衡產(chǎn)品管理中的摩擦

（1）營銷中的摩擦

摩擦經(jīng)常被營銷人員和增長黑客（growth hackers）用來提高轉(zhuǎn)換率。想想看那些推送升級(jí)選項(xiàng)的通知或覆蓋用戶嘗試閱讀的內(nèi)容的時(shí)事通訊注冊(cè)彈出窗口，雖然通過查看轉(zhuǎn)換率來衡量此類方法的有效性很容易，但務(wù)必要注意這種分散用戶注意力的摩擦行為，是否會(huì)阻礙用戶的正常使用。

找到合適的摩擦量也是十分重要的。當(dāng)用戶試圖取消會(huì)員資格或取消訂閱新聞通訊時(shí)，要求額外確認(rèn)并清楚地傳達(dá)其行動(dòng)的后果可能對(duì)他們的行為決策有幫助。但不用說，對(duì)取消流程添加太多的摩擦是一種應(yīng)該規(guī)避的暗黑模式。

注：Netflix確保用戶在取消操作之前了解自己單擊該按鈕會(huì)發(fā)生什么。

（2）針對(duì)合適的用戶

在用戶生成內(nèi)容中構(gòu)建服務(wù)時(shí)，對(duì)新手入門流程增加適當(dāng)?shù)哪Σ翈缀跏且粋€(gè)行業(yè)共識(shí)，因?yàn)檫@樣做能夠保障用戶自主生成發(fā)布的內(nèi)容質(zhì)量，并打擊垃圾信息和低質(zhì)量內(nèi)容。例如，在“產(chǎn)品搜索”功能中，只有通過完成一些入門任務(wù)，才能參與討論，直到你能夠成為內(nèi)容貢獻(xiàn)者。

摩擦需要針對(duì)合適的用戶。有一個(gè)關(guān)于Snapchat的流行觀點(diǎn)——如果你不是00后，你可能會(huì)覺得它的界面很難用。當(dāng)然，這是Snapchat的設(shè)計(jì)，它將目標(biāo)用戶瞄準(zhǔn)十幾歲的青少年，為了規(guī)避父母窺探帶來的尷尬而做的特殊設(shè)計(jì)。換句話說，它增加了用戶界面的摩擦，以過濾非目標(biāo)用戶。

使用摩擦來識(shí)別最符合目標(biāo)的潛在客戶也是高階服務(wù)的特殊技術(shù)。例如房地產(chǎn)和金融等行業(yè)的調(diào)查表往往很長，包含許多其他領(lǐng)域和具體的問題，以便將非潛在用戶篩除掉。

（3）創(chuàng)造價(jià)值與摩擦

有時(shí)候，摩擦確實(shí)可以起到積極的作用。當(dāng)Twitter推出時(shí)，很多人都很難理解這種“微博”服務(wù)的概念，其中帖子被限制為140個(gè)字符，用戶不得不學(xué)習(xí)如何在這樣短的推文中進(jìn)行交流，以便使用這個(gè)產(chǎn)品，即使是在移動(dòng)設(shè)備上，Twitter仍然保持一貫的簡潔風(fēng)格，這也是Twitter與其他社交媒體平臺(tái)的主要區(qū)別。 （這么多年，Twitter也沒有放松這些限制。）

摩擦常被用在訂閱型產(chǎn)品中，以促使用戶升級(jí)成為付費(fèi)高級(jí)用戶。例如，Spotify的免費(fèi)用戶不得不在歌曲中間聽到廣告，以此來促使用戶升級(jí)來獲得更好的音樂體驗(yàn)。

宜家以銷售自組裝家具而聞名。這種商業(yè)模式的一個(gè)好處是可以保持低價(jià)格，但研究也發(fā)現(xiàn)人們會(huì)更加重視自建產(chǎn)品，這就是所謂的宜家效應(yīng)。這意味著在使用之前必須自行組裝家具所帶來的摩擦，實(shí)際上增加了用戶的感知價(jià)值。

結(jié)論：消除不必要的摩擦，擁抱好的摩擦

設(shè)計(jì)師的一般經(jīng)驗(yàn)法則是盡量減少用戶的認(rèn)知負(fù)擔(dān)?？偟膩碚f，人們希望盡可能輕松地完成任務(wù)，所以要懂得識(shí)別和剔除不必要的摩擦，例如：

• 一個(gè)過程中的步驟太多
• 做出不必要的決策確認(rèn)
• 不明導(dǎo)航
• 有悖常識(shí)的設(shè)計(jì)模式
• 屏幕上的信息和視覺噪聲太多
• 以及你的用戶研究發(fā)現(xiàn)的任何類似問題。

不過，如果使用得當(dāng)，摩擦可能成為某些使用場景中真正高效的用戶體驗(yàn)設(shè)計(jì)。無論是在關(guān)鍵操作之前放慢速度，詳細(xì)解釋操作后果還是延遲告知用戶結(jié)果，總之，不要害怕跳出框框。

作者：Zoltan

譯者：Max小姐

原文鏈接：https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì)@Max小姐 翻譯發(fā)布，未經(jīng)本站允許，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議