移動網際網路的設計模式-提示類
友好的產品應該能夠預估使用者的行為及後果,在適當的時候給予相應的引導與提示,告訴使用者操作的後果並給予及時的反饋。這次文章我們就來聊一聊那些用於提示的互動控制元件。
大家應該早已習慣了在執行“刪除”任務時,進行二次確認的操作,這是計算機為了防止使用者的誤操作,給予使用者的操作提示。友好的產品應該能夠預估使用者的行為及後果,在適當的時候給予相應的引導與提示,告訴使用者操作的後果並給予及時的反饋。根據提示控制元件作用的不同,文章將移動網際網路產品的提示控制元件主要分為三類:分別是對話方塊(Dialog)、吐司提示(Toast)、以及訊息提示框(Notice Bar)。接下來我們就來認識並瞭解一下他們在互動過程中發揮的作用吧!
• 對話方塊(Dialog) •
對話方塊是一種模態形式的彈出框,使用者必須完成相應的操作,彈框才會消失。
它雖然打斷了使用者的操作,但是在使用者進行“危險”操作時,會提醒使用者操作的嚴重性,並給出足夠的反應時間,有效降低了使用者誤操作的頻率;而且當用戶的操作有誤時,對話方塊的提示,使使用者能夠對目前的操作做出慎重的判斷。
下圖1是我們常見的進行刪除操作的對話方塊,大部分情況下“刪除”是個危險的動作,還記不記得我們在《移動網際網路的設計模式——按鈕》那篇文章中提到的“確定/取消”按鈕的位置問題呢?在這裡我們就有了明確的方向——提高使用者“確定”的難度,防止誤操作。這樣我們就可以把“刪除”放遠點,使使用者不方便點選,那麼這個對話方塊的目的便達到了。圖2是使用者操作不當時,產品給出的建議提示,用來幫助使用者可以更加順利地實現產品的功能。還有一種情況會出現對話方塊形式的提示,那就是使用者在進行比較重要的操作時,完成後產品會給出相應的反饋提示,並要求使用者進行確認操作,這樣可以使使用者對自己的操作動作更確定。如下圖3中,在使用者取消訂單後,點選“知道了”,確認自己操作的有效性。
以上三種情況下對話方塊的作用,其實都是圍繞使用者的操作給出的提示,我們可以稱其為功能型的提示。還有一種對話方塊形式的提示,是產品以營銷為目的的提示,我們可以稱其為引導類的提示。比如你一定見過下圖樣式的對話方塊,它們不會自己消失,除非使用者點選產品想要其點選的按鈕或是關閉按鈕,而關閉按鈕的視覺重量又是如此弱,當你找到並點選“關閉”按鈕時,心裡是否還有些得意呢?是的,因為對話方塊的特點,使用者必須要執行相應的操作才能將其關閉,當面對一些無用的資訊時使用者就會感到厭煩,甚至放棄使用產品。所以,作為引導提示的對話方塊最好不要濫用,除非你提示的資訊對使用者有用。
• 吐司提示(Toast) •
與對話方塊對應,Toast是一種非模態形式的彈出框,它不需要使用者進行操作,也不會打斷使用者的操作,一般1/2秒後會自動消失,當產品無法給出直接反饋時,是一種輕量級的短時反饋提示。Toast的概念最早來源於Android的規範,但其實在Windows和iOS系統中也有相似的控制元件,只是名稱不一樣罷了。因為現在Toast的概念早已被泛化,所以在這裡我們不糾結它的來源,而是著重介紹一下現在的Toast,以及現在的Toast在互動中所起的作用。
下圖中紅色線框標註的部分即為產品中的Toast,我們可以發現,Toast不再像Android或iOS的規範中描述的那樣只出現在螢幕的底部和中間,更多的是出現在螢幕的頂部,目的是儘量減少對內容的遮擋,也有一些Toast出現在操作觸發的相應位置,這樣會使反饋更自然。甚至有些Toast隱藏了彈出框的形式,直接用文字向用戶提供反饋。
列舉了這麼多Toast的形式,其實他們的作用都是在使用者操作後,給予相應的反饋提示,使使用者確認自己操作的有效性;然而Toast還有另外一種作用就是作為操作提示,來引導使用者的行為。比如下圖美柚APP中出現的彈出框,它也屬於Toast,不過它的作用不是反饋,而是一種操作提示,引導使用者的使用。
再比如我們在預定酒店選擇日期時出現的Toast,也是為了引導使用者下一步的操作而設定的。隨著使用者體驗的觀念一步步深入人心,Toast不再是之前的黑色彈框加文字的單一形式,而是越來越多地加入情感化元素,使人眼前一亮。比如微博中點贊後的反饋提示,以及美柚中的情感化提示。
• 訊息提示框(Notice Bar) •
訊息提示框是產品在關閉狀態,或是後臺執行狀態下,向用戶主動推送的資訊彈出框。根據產品的屬性不同,推送內容也會發生變化,比如微信彈出的訊息提示框,主要是聊天訊息的提示,而淘寶或京東等電商類的產品彈出的訊息提示框則多是一些商家的營銷資訊。
對於我們經常使用的產品來說,開啟訊息通知,會方便我們及時處理有用的資訊;而對於我們不常使用的產品,訊息提示框則可以喚醒使用者,提高使用者的使用頻率。那麼問題來了,你手機中的應用有多少是允許訊息通知的呢?而你在下載一個新的應用時,面對是否允許訊息通知這個問題,你習慣的選擇又是什麼呢?某產品的訊息提示框是喚醒了你,還是惹怒了你呢?我們來看一個例子,微博是我經常使用的APP,但是我是不允許它通知的,因為開啟它的通知後是這樣的(如下圖)。
在一個小時的時間裡,微博推送了5條訊息,因為我是有點輕度強迫症的人,所以我選擇關掉它。那對於習慣開啟應用通知的人來說,我想這樣的訊息密度,使用者也會麻木了吧,所以訊息提示框就失去了它的存在意義。而且訊息提示框是伴隨聲音的,這像不像一個踩雷的過程,一旦你碰到使用者哪天心情不好,就會直接選擇解除安裝。
所以,訊息提示框更是一個不能濫用的提示控制元件。設計師可以通過後臺數據分析將使用者分類,推送使用者感興趣或是對使用者真正有用的東西;並且降低推送頻率,讓訊息提示框發揮它應有的提示價值,而不是讓使用者產生厭煩,放棄對產品的使用。
• 結語 •
提示控制元件原本是出於為使用者考慮的目的而設定的,但是有的提示卻使使用者麻木,甚至產生厭煩的情緒。所以,我們在使用提示控制元件時,一定要謹慎,不要將友好的提示,變成一個干擾使用者的雷區,希望以上的內容會對你有所幫助。