如何使用微交互提升用戶體驗？

07-07

如何使用微交互提升用戶體驗？

當發現像寶馬這樣的汽車公司在汽車設計部門組建高逼格的聲音工程師團隊時，你可能不會感到驚訝，畢竟汽車是台製造噪音的機器。

讓你感到驚訝的是這幫人花費大量的時間和精力「調校」汽車產生的聲音，而不是做消聲處理和「壓制」它們。

儘管「關閉車門的聲音」只是封閉車輛時的一個副作用，汽車製造商還是希望花費更多的心思讓工程師製造出「完美的關門聲」。他們調整材料，填充物，接頭和中間的空隙希望找到完美的答案。同樣，雨刷，車窗電機和座椅控制都這個迷你汽車的交響樂中發揮自己的作用。

作為設計師，我們知道這意味著什麼，這就是用戶體驗。這不僅是關閉車門時的效果，而是整個駕駛過程的感覺。對於BMW來說這就是「kaTHUNK!」，即安全、可靠和豪華的感覺。網站或APP設計中的微交互也關注類似的問題。

什麼是微交互？

微交互是完成一個獨立任務的微妙「時刻」，比如說點擊登錄表單下面的提交按鈕或者是喜歡某一條很有意義的tweet。

「微交互」可能是一個比較新的用語——微交互隨處可見，從打開一盞燈的開關到打開揚聲器的音量，但是它們有一個共同的特性：完成具體的任務。

這些任務都需要一系列的交互，比如填寫表單，確認選項。如果一個交互任務包含在網頁表單中提交數據，那麼點擊【提交】按鈕這個具體的動作就是一個微交互。

微交互≠動畫效果

得益於HTML5和CSS3的應用，有很多網站已經開始利用這些原生動畫和過渡效果。然而許多設計師仍然只會使用它們來添加花哨的效果，而沒有認真考慮它如何影響用戶體驗。讓我們來討論一下什麼時候使用微交互，以及如何讓微交互產生最佳的用戶體驗效果。

什麼時候使用微交互

舉例來說，如果一個圖片在滑鼠點擊和懸停的時候沒有任何的有效動作（既不跳轉其他頁面也不會放大或縮小），那就無需任何處理——不要動效和花哨的懸停效果。

對於一個靜態元素來說，任何多餘的效果可能會讓用戶產生困惑（困惑=糟糕的用戶體驗）。我們再以提交按鈕為例說明這裡為什麼需要微交互，因為我們想要通過視覺上的變化了解到：

這個按鈕現在可以點擊
這個按鈕等會可以點擊
這個按鈕已經被點擊過了

...這些都是為了讓用戶完成表單的提交。

微交互就像是對話

微交互需要一個觸發器來引發，通常是用戶點擊一次滑鼠、屏幕或敲一下鍵盤——這就是你和界面溝通的介面。然後，網站或app接受了你的請求並決定是否可以通過相關的規則完成任務，還要讓你知道它最終的決定是什麼。登錄頁面的規則就是確認證書是否正確。

如果沒有什麼問題，我們就進入了反饋階段。這時候界面把它的決定反饋給你，如果你的請求是正確的，你會收到確認信息；反之，我們會進入循環階段——界面會告訴你哪裡出錯了，你應該怎麼做才能再次觸發這個微交互。

為了在微交互過程中提供良好的用戶體驗，我們的界面需要一直和用戶維持這種清晰直觀的溝通。

設計目標/觸發器

首先，可交互的頁面元素要看起來能夠被點擊。如果超鏈接下面沒有下劃線，那它就和普通的文本沒法區分；如果輸入框看起來太小，用戶可能就不知道這是可以輸入文字的區域。設計師可以在頁面里發揮自己的創意，但是任何時候用戶體驗都比視覺上的美感更重要。

可交互的目標也需要一些提示，比如表單旁邊的標籤或前端驗證提示，這樣可以讓用戶知道自己的輸入是否正確，減少用戶出錯和再次重新填寫的機會。

還有一些被禁用或灰色的頁面元素也要讓用戶知道不能在其上面進行交互。

規則怎麼產生切合情境的響應

你的觸發器看起來像一個觸發器，它也被成功的觸發了…不錯哦！現在用戶界面需要響應一些有用的信息。在網頁表單中的情況會比較複雜，因為在發送數據之前這裡需要滿足很多的條件。即使是在一些簡單的需求中（如點擊了一個鏈接跳轉到「404，沒有找到網頁」的情況）也有很多可以改進的地方，這樣的情況下我們界面需要向用戶解釋發生了什麼並要在任何場景下幫助他們進行下一步的操作。

有用的——解釋問題並用紅色強調

沒用的——模糊的錯誤信息和不確定的按鈕

有用的——提供可選的用戶操作

沒用的——提供沒有任何操作的頁面

在表單中有一個不友好的錯誤信息就是「Error #8418764: 無法完成您的請求」，相對而言「你須要同意服務條款」就更友好，因為它告訴用戶應該如何糾正他們的錯誤。通過預測用戶可能出錯的地方，你可以這樣設計界面：不僅要為用戶提供有用的信息，還要更加的友好和人性化。

提供有幫助的反饋

友好溝通時的反饋就像是設計觸發器一樣，可以採用很多相同的設計理念：綠色表示「通過」或「下一步」，紅色則意味著「不通過」，「停止」或「錯誤」。這些概念需要結合符合情境的響應以設計出更友好的響應。

說到擬人化和友好性，我們有必要再討論一下怎麼正確的在用戶體驗設計中使用動畫效果。微交互時產生的響應可能是一個對話或一個視覺上的變化，無論什麼，動畫效果可以幫助用戶注意到它。當屏幕上突然出現一些信息時，我們可能沒有注意到，所以需要一些微妙的轉換效果幫助我們的眼睛會看到這些視覺信息。

動畫效果應該足夠的快，這樣不會導致用戶等待太長的時間，但是也要保證用戶能否記住它。動畫可以重新把我們的視線定位到屏幕的其他位置，比如一個無效的輸入欄位，或滾動屏幕之後出現的一個固定標題。沒有這些微妙的動畫效果，這些微交互的響應可能會被用戶忽視。

讓用戶知道在等待什麼

有些時候一個請求可能需要等待一段時間，所以用戶需要知道發生了什麼，他們在等待什麼。否則，用戶就會想是不是哪裡出錯了然後退出這個微交互的過程（在線支付的時候經常發生這樣的情況，因為網站必須等待商家的回應，然後才能做出自己的響應）。

我們可以通過載入圓圈或進度條並通過動畫效果進一步明確的告訴用戶網站或應用程序正在頁面後台做些什麼。

小論

如果我們可以從微交互上面學到什麼，那就是討好用戶很難。用戶正在變得很不耐煩，也很容易感覺不爽，如果有些功能做的不是那麼的一目了然，用戶或者我們馬上就會轉向其他競品那裡！

一個槽糕的用戶體驗可能會讓事情變得更糟，所以我們以後在設計網站或App的時候，記住這一點，要多站在用戶角度考慮問題。同理心是人類的基本情感，這是設計出好用又有情感的用戶界面的關鍵。用這種自然情感設計的界面更容易被用戶理解和接受。

作者：Daniel Schwarz

原文：How to Lift Your UX Out of the Ordinary with Micro-Interactions

翻譯：UX設計小站

微信公眾號：ux-com