網站使用者體驗：為使用者的成功操作提供正面回饋

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

炎熱的天氣，宅在家中拉上窗簾一邊看著喵們耍寶一邊做博客，這情景讓我想起阿拉蕾一家。 Take me down to the paradise city where the grass is green and girls are pretty.

下午茶一般的小文一篇，關於操作回應、正面回饋、使用者滿意、皆大歡喜一類。 進入正文吧，毫無壓力。

我們喜歡告訴使用者他們做錯了什麼，我們準備了各種出錯提示，從電話號碼輸入格式有誤，到登錄失敗。 但是對於使用者的那些成功操作，我們又做了什麼呢?有沒説明他們慶祝，告訴他們「嘿你做的非常正確」?

正面回饋是提升使用者體驗愉悅度的關鍵因素，我們要讓使用者瞭解到他們正在執行的操作是正確的，這一點非常重要。 在本文中，我們將一同瞭解一下為什麼正面回饋絕非可有可無，作為設計師，我們應該在什麼時候、以怎樣的方式將其運用在網站當中。

為什麼正面回饋如此重要

有沒想過為什麼多數人不喜歡觸屏設備上的虛擬鍵盤?最主要的原因恐怕就是它所提供的回饋感受很難與實體鍵盤相媲美。 不能否認，觸屏操作平臺的設計師們確實盡力了，例如實體質感的視覺效果、觸摸按鍵時的敲擊音效以及放大的彈出提示，這些解決方案都給使用者的操作行為帶來了一定的正面強化作用，但它們確實無法達到實體按鍵所能帶來的正面回饋效果， 因為無論怎樣，虛擬鍵盤都無法類比實體鍵盤的觸摸感。

這是一個讓人即煩惱又無奈的現實，它也從一個側面說明了正面回饋對於產品的重要性。 對於虛擬鍵盤來說，缺乏足夠真實和強力正面回饋，結果就是使用者難以在這方面產生足夠的體驗滿意度。

其實多數使用者總是難以產生真正的滿足感，無論出於他們自身技能所限，還是你的產品本身確實有問題。 他們會擔心自己是否做錯了什麼，他們想知道網站是否真正瞭解他們的操作目標。 很多時候這是由於他們並不能真正的理解網站的運作機制所造成的，結果就是一旦出現問題，他們會首先埋怨自己 。

通過正面回饋機制，我們可以逐漸説明使用者打消這些顧慮，説明他們建立信心，讓他們感到一切都在順利的進行著。 這一點，對於那些對自己在計算裝置操作能力方面缺乏信心的使用者來說尤為重要。 這類使用者，其實未必真正缺乏操作技能，只是在很多時候，由於系統沒有作出足夠的正面回饋，致使他們對自己的判斷產生了疑慮。

正面回饋機制不僅可以提升使用者在作出正確的操作行為之後的體驗滿意度，它還可以打消掉那些沒有必要的顧慮，防止使用者在做了正確的事情之後由於擔心自己操作有誤而撤銷之前的行為。 以網購當中的交易流程為例，在使用者提交了訂單之後，如果系統的處理時間較長，導致後續頁面載入遲緩，而這當中沒有任何回饋提示，那麼使用者很有可能會認為自己的訂單並沒有提交成功。 這種情況下，可以在頁面載入的過程中向使用者提供一些正面回饋資訊，例如告訴他們「系統正在處理訂單，請稍候」一類，這樣可以防止使用者由於不明真相而點擊後退按鈕。

想想看，如果使用者因為「迷惑」和「疑慮」而重新執行一遍購物流程，包括選擇商品、填寫各種表單... 有夠蛋痛。 無論之前步驟當中的設計方案有多出色，單憑這一點，整個購物流程的體驗滿意度就會極度下降，而且使用者很有可能自此離開。 轉化率呢親?

何時需要正面回饋

使用者輸入內容的地方是一個關鍵點，包括註冊、登錄、購買、發表評論、更新狀態等等與資料內容產生互動的交互環節都是需要重點關注的。 特別是對於使用者名、郵箱、密碼、郵編這類欄位，來自系統的正面回饋可以説明使用者打消資料操作技能方面的疑慮。

除了輸入資料內容，點選連結也是一個重要的交互點。 如果留意的話，你會發現如今的多數網站並沒有對使用者成功點選連結的行為作出正面回饋。 使用者點選連結後，瀏覽器自身確實會帶來一定的回饋提示，包括網址列及標籤欄當中的相關變化，但使用者執行點擊操作的時候，注意力在短時間內依然是集中在連結位置上的，因此為連結本身設置一定的回應規則是更加有效的做法。 在這方面，Smashing Magazine是一個不錯的範例，當使用者點擊了某個文字連結之後，CSS當中的a:active規則會為連結文本設置紅色的背景色，使用者可以很直觀的感受到自己成功的點擊了連結。

回饋與注意力焦點位置不一致的問題不僅存在於連結方面，很多時候，使用者的操作會導致另外一個地方的內容或交互元素髮生變化，這很容易使操作結果被使用者忽略掉。 一個常見的例子就是將商品添加到購物車的過程，使用者在這裡的注意力會主要集中在「添加到購物車」按鈕以及附近的商品資訊上，所以對於添加成功的最直接有效的回饋也應該出現在這個位置，例如在按鈕附近，或是直接呈現在商品圖片上。

距離只是問題的一個方面;如果使用者的交互行為會觸發介面當中很小的細節之處發生變化，那麼即使回饋的距離很近，也仍不能說是保險的。 對於這種情況，最好可以提供在視覺效果上更加清晰醒目的回饋，以確保使用者可以在第一時間注意到。

怎樣實施正面回饋

當使用者犯錯的時候，我們通常會扔一段錯誤資訊上去作為提示。 類似的，對於正面回饋，這也是一種可行的方法。 不過我覺得使用文字資訊提供正面回饋的時候還是需要小心些，因為文字會迫使使用者將注意力轉移過來，閱讀並思考，這個過程會在很大程度上降低任務流程的流暢度。 正面回饋的作用是應該鼓勵使用者大膽前進，而不是造成羈絆。

在某些情況下，使用文字資訊提供正面回饋也確實是非常有效的。 例如，在使用者點擊了「添加到購物車」按鈕之後，我們可以將按鈕的標題變為「繼續添加」。 這個改變一方面可以讓使用者不用轉移視線焦點就可以立刻知道他之前的添加動作確實成功了，另外也可以鼓勵使用者繼續進行相關操作。

視覺回饋

我們可以在更多的時候使用視覺元素的屬性變化來代替文本作為正面回饋的表現形式，包括圖形圖片、風格樣式、配色、大小等方面。 譬如前面提到的連結被點擊之後呈現高對比的背景色，或是表單欄位被正確填寫之後在旁邊輸出對勾圖示，再比如當頁面當中某個位置的內容被更新後，使用背景色等方式對這部分進行高亮顯示等。

另外一個很典型的例子就是滑鼠指標的狀態變化。 當使用者將滑鼠指向一個可交互的介面元素(例如連結或按鈕)，他們會期望指標變為手形。 如果系統在這裡沒有作出符合使用者預期的回饋，那麼使用者很有可能產生迷惑。 很多時候，介面當中可點擊的元素並非連結或按鈕，它們是通過JS的配合來實現交互性的，這種情況下要記得在樣式表中將cursior屬性手動設置為pointer，使它們能夠類比連結或按鈕元素在滑鼠懸停時所產生的指標狀態。

通過動畫效果提供回饋

當然，動畫本身也是一種視覺表現形式。 如今，很多網站都會使用一些精巧的動畫效果將使用者的注意力吸引到出錯的地方，例如登錄WordPress管理後臺時，如果使用者名或密碼輸入有誤，整個表單會表現出「抖動」的效果，提示使用者輸入錯誤。 同樣的道理，我們也可以將動畫效果運用在正面回饋上。

一個比較常見的例子就是頁面內的錨點連結跳轉，包括向下滾屏流覽內容或是返回頁面頂部。 預設情況下，錨點跳轉沒有任何動畫過渡效果，頁面只是很突兀的移動到指定的位置。 而現如今，我們可以在越來越多的網站中看到具有平滑滾動效果的跳轉，有些還會在頁面到達目標位置後將特定的內容進行高亮顯示。 這種改變使得整個對話模式更加符合使用者直覺，並且可以很清晰的將交互結果呈現給使用者。

我們也可以在購物網站中將動畫過渡效果運用在添加商品到購物車的交互環節中，例如在使用者點擊了「添加到購物車」按鈕之後，將代表購物車的介面元素展開，以展示剛剛添加進去的新商品，或是讓商品以動畫的方式「飛入」購物車。 這些方式都可以抓住使用者的目光，將操作成功的資訊準確穩妥的傳達給使用者。

我相信動畫過渡效果仍是一種沒有被充分利用的資訊回饋形式，這還有待我們在更多產品中繼續挖掘和實踐。

通過音效提供回饋

使用iPhone或iPad的同學們，你們在發送短消息或是郵件之後，是否特別期待「嗖」的那一聲?這就是通過音效提供正面回饋的好例子。 無論是使用桌面設備還是行動裝置，其實我們都非常依賴于音效回饋，例如點擊按鈕或是敲擊虛擬鍵盤時，系統發出的擬真音效可以讓我們很放心的持續進行輸入操作。

那麼為什麼音效回饋在網站中的使用率非常低呢?除了檔尺寸方面的因素，是否還有其他方面的原因?

也許是因為在網站中使用音效過於煩人?曾幾何時，大大小小的網站當中都會使用無聊的音訊迴圈或背景音樂，有些甚至無法取消播放;我們是否因此而有所顧及?話說回來，從前的網站到處都是糟糕的視覺設計與動畫效果， 但這並沒有妨礙我們逐漸對這些方式進行改良並將它們運用到正確的地方。

也許有些人會覺得流覽網站的行為通常會發生在桌面設備上，這也是我們通常在工作中所使用的平臺，所以使用音效回饋會造成一定程度的干擾。 但我們所說的音效實際上與作業系統本身那些細小的提示音無異，它們都是為了在交互過程中向使用者回饋資訊。

一個可以觸發音效回饋的點擊操作可以非常有效的讓使用者知道他們正確有效的完成了行為;在購物網站中，打開收銀機的音效完全可以運用在使用者添加商品到購物車的操作當中。 音效回饋是一種強大的溝通工具，只是我們還沒有在合適的地方對其進行充分的運用。

總結

無論採用音訊、視覺元素、動畫或文案當中的哪種形式，我們都應該為使用者的交互行為提供更多的正面回饋，這可以提升他們的滿意度，使他們更自信更高效的在你的網站中完成目標。

本站原創編譯文章。 如需轉載，請注明：本文來自Be For Web

譯者資訊: c7210 - 使用者體驗設計與代碼玩家，現就職于大眾點評網產品部UED

原文：HTTP://beforweb.com/node/98