手機產品設計中的反饋提示

在產品的設計中,“反饋”是很重要的一個交互特征,它是一種界面輸出物,用以給用戶正確的引導信息,幫助用戶判斷和決策。而反饋的形式也是多方面 的,視覺、聽覺、嗅覺、觸覺、正面的、負面的,都是在為用戶傳遞信息。而沒有反饋或反饋很差的交互,只會讓用戶產生失效和無助的負面體驗。

在煤氣中加入硫和笨,為的是通過臭味提供危險信號的反饋。地鐵里的門在關閉前會發出滴滴的報警聲,是用來告知乘客車門將要關閉的信息。這都是生活中無處不在的反饋。

今天要和大家討論的是在手機產品中,用戶在信息交互過程中所得到的反饋形式。

1.反饋的必要性

在用戶與產品進行交互的過程中, 產品對于用戶的每一次行為都要有清晰的、及時的提示和反饋,從而使用戶獲得操作行為結果的信息。

如果產品不提供任何信息反饋, 那么用戶就無法確定自己操作行為的的結果,反饋機制是產品設計中不可或缺的基本元素,它是用戶前進道路的指向標。

2.反饋的形式

反饋的形式是多種多樣的,在不同的場景不同操作中要選擇適合的反饋類型。而在手機產品中更要考慮操作區太小被手指遮擋住的情況,反饋一定要明顯,并呈現在可視范圍內。下面嘗試對手機產品中的反饋形式做一些總結。

2.1 氣球狀通知

氣球狀通知是一個小型的彈出窗口,用于通知用戶出現非關鍵性問題或控件處于某種特殊情況。

上圖中的信息提示是用來解釋指向菜單的功能,即該菜單項是做什么的,屬于說明類的反饋提示,說明文字應簡潔、實用,避免提供用戶顯而易見的信息,需要設定合理的顯示時間。

上圖的氣球狀通知是當選中某一項功能(或方式)時,界面顯示該功能對應的簡要說明,用來告知用戶選中此項功能將要執行的操作是什么,此類反饋通知一般觸發后顯示3秒鐘就自動消失了。此類的反饋通常不會太重要,因為很容易被用戶忽略。

2.2 對話框

對話框是最常見的反饋和提示形式,它存在的價值在于要引起用戶的高度重視。

上圖中的反饋提示是當用戶觸發某一項操作且需要用戶進行再次確定及選擇時顯示的對話框,此類反饋的方式一般用在較為重要的提示信息上,需要用戶進一步操作。操作按鈕要盡量突出,確定不會出現死循環和重復操作,提示文字要簡練易懂,以減少對文字的閱讀壓力。

上圖的反饋屬于過渡類的反饋提示,是通知用戶當前界面所處的一種特殊狀態,告知用戶可以做什么及產品正在做什么。

2.3 按鈕/圖標/鏈接的按下狀態

按鈕/圖標/鏈接的按下、選中的反饋效果,在手機產品中一樣不能缺少。

上圖的例子中當用戶按下按鈕或圖標時,該按鈕背景會增加一個按下的指紋,圖標背景會變成高光,這種實時的反饋讓用戶即時直觀地看到操作被響應了。

2.4 聲音

聲音同樣能為用戶提供有用的聽覺反饋,但是它不應是唯一的或主要的反饋方式。因為用戶的使用場景可能會迫使他們關掉聲音。尤其手機的使用環境復雜多 樣,在地鐵、商場等嘈雜的環境,聲音的反饋就很容易被忽略。同時,過多的聲音反饋也會造成聽覺上的噪音,所以聲音的反饋不應是主要的反饋方式,并要允許用 戶關掉聲音。

比如iPhone發送短信發送成功后的提示音,按下手機鍵盤上的按鍵時的提示音,新浪微博的信息拉取成功后的提示音,后臺推送消息的提示音等等,都巧妙的運用了聲音反饋。

2.5 振動

振動為觸覺反饋的一種表現形式,讓用戶通過觸覺來感知產品的反饋及回應。

當我們將手機由聲音調到振動時,聲音的反饋提示就變成了振動提示。比如當有電話打進來時、接收到新消息時、接通電源充電時的反饋提示都變成了振動。

而有些產品中也可以設置新消息振動提示,打開此開關后,有新消息送達時的提示也就變成了振動提示。

2.6 動畫

順滑的動畫會給用戶提供有意義的反饋,幫助用戶直觀地了解到操作的結果。

上圖的例子都是通過一個顯著的動畫過程讓用戶知道操作是如何執行的,把衣服丟進購物車,把照片扔進垃圾箱等等,這些形象的擬物化的動畫能夠幫助用戶清晰地感知到整個操作執行的全過程。

上圖中的例子適用在那些會持續很多秒的長流程里,將等待過程采用動畫的進度形式顯示,展示已完成的進度,并在可能的時候提供解釋信息,以減少用戶的焦慮。

2.7 燈光

燈光的提示,在一些特殊環境中有特殊的應用,比如在黑暗的地方或者是用戶視線不在手機屏幕上時,燈光的反饋提示就以它獨特的閃爍方式引起用戶的注意。

手機指示燈大多是用在提示電量不足,即當手機快沒電的時候,指示燈會按照一定的頻率閃爍紅光。還有充電的時候,紅色指示燈常亮,充滿電之后變成綠色。

還有一些手機的燈光應用在提醒功能里,比如有新消息、未接來電的時候,屏幕會自動亮起提示用戶。

3.反饋的內容

3.1 信息

反饋提示的信息應簡潔、實用。避免不帶格式的大段文本,避免提供用戶顯而易見的信息或只是重復屏幕上的文字。

上圖中的例子可以看到用戶完成操作后給出的清晰的提示信息,告知用戶操作的結果。

3.2 警告

警告框用于向用戶展示對使用程序有重要影響的信息。

警告框浮現在程序中央,覆蓋在主程序之上。警告框的外觀強調了這樣一個事實,它的到來是由于程序或設備的狀態發生了重要變動,并不一定是由用戶最近的操作導致。

上圖中的警告是告知用戶當前產品的狀態,需要用戶引起重視。警告框通常至少有一個按鈕,用戶點擊后即可關閉窗口。警告框上也總會有標題,并展示額外的輔助信息。

 

3.3 錯誤

錯誤是提示用戶操作出現了問題或異常,無法繼續執行。

上圖中的例子為輸入的信息有誤,界面給出了相應的錯誤提示,告知用戶為什么操作被中斷,以及出現了什么錯誤。錯誤信息要盡量準確、通俗易懂,有效的錯誤提示信息要解釋發生的原因,并提供解決方案以使用戶能夠進行修復。

3.4 確認

確認是用于詢問用戶是否要繼續某個操作,讓用戶進一步對所作的操作進行確定和執行,為用戶提供可反悔的可撤銷的退路。

上圖中的例子是讓用戶對一些執行結果較危險或不可逆的操作進行二次選擇和確認,用戶防止用戶誤操作。

4.反饋的位置

4.1 狀態欄

反饋的提示信息在狀態欄,因為手機屏幕較小,可利用的空間有限,而放在狀態欄則是一種很好的空間利用,但此位置不是很明顯,建議只顯示重要程度不高的信息提示,如好友消息提示,操作結果提示等次要信息。

4.2 導航欄

反饋的提示信息在導航欄,此類提示一般為連接狀態的展示,臨時將導航欄的內容代替為連接狀態,表示當前產品正在努力連接網絡拉取數據中。此位置適合顯示臨時的較重要的提示類信息。

4.3 內容區上方

反饋提示在內容區上方,導航欄下方,通常為拉取新內容,加載新信息的一種快捷方式,默認的提示信息是隱藏的,向下拉界面時才顯示對應的提示信息,以引導用戶進行操作。此位置的提示需要和內容進行緊密的關聯結合。

4.4 屏幕中心

反饋信息在屏幕中心,通常為整體性的較重要的信息提示,需要引起用戶重視的、系統的提示均可以顯示在此位置。

4.5 菜單欄上方

反饋提示在菜單欄上方,此位置基本沒有限制,可根據需要靈活使用,可以是產品的整體信息的提示,也可以是界面底部相關內容的提示。

4.6 菜單欄

反饋信息在菜單欄上,在此位置的顯示提示信息的產品較少,因為通常菜單欄都會被菜單占滿,不會有位置顯示提示信息,可在一些菜單項較少的產品中進行應用。

4.7 跟隨手勢隨機出現

反饋提示位置隨機出現,根據手勢或操作的位置臨近出現,要注意盡量避免提示文字被遮擋。

5.反饋的時間

參考網頁中的響應時間規律,一般而言,在0.1秒內顯示反饋結果用戶是可以接受的。1秒是用戶保持不間斷的思維流的限定時間,如果是超過了0.1秒而少于1秒內沒有特別的信息反饋時,用戶是會產生疑惑的。

對于長時間的延遲,用戶會想在等待完成期間去處理其他事務。所以需要顯示將要完成的時間(通常選擇進度條或百分比來表示),不然會大大降低用戶的期待值。

6.反饋的設計原則

為用戶交互行為的各個階段提供積極、即時的反饋予以響應。

要避免過度的反饋,以免給用戶帶來不必要的干擾。

能夠及時看到效果,操作簡單的成功型提示不需要反饋。

對提供的反饋要允許用戶以最方便快捷的方式完成選擇。

將狀態分類(對/錯/提/警等)并進行差異化設計。

不打斷用戶的意識流,給出的反饋提示要避免遮擋用戶可能會去查看或者操作的對象。

7.總結

反饋需要引起用戶注意,快速明確地傳遞操作的結果,不讓用戶產生迷惑,尤其在手機的操作中,產品需要即時響應用戶的手勢動作,手勢操作雖快速輕便,但沒有鼠標按下時嗒嗒聲的安全感,也十分受限于設備屏幕的靈敏度,所以即時的、有效的操作反饋是非常重要的。

總結劃分的如有不當,還請大家一起來斧正。

標簽: 手機 產品設計
上一篇: 淺談PM和UED的溝通
下一篇: 認知盈余時代知乎是如何運營的

發表評論:

*

*

? 山西快乐十分