如何為手機界面設計提示消息

0 評論 16985 瀏覽 26 收藏 16 分鐘

BulaBula羅列各種提示方式之前,我覺得有必要先思考一下消息提示之于用戶的本質。畢竟知其然只是表面,知其所以然才能融會貫通運用自如。雖然可能讓人覺得有點遠,但應該會對理清邏輯很有幫助。

故事要從一只狗和一只老鼠的心理學實驗講起。巴普洛夫發現,若長期在喂狗之前搖鈴鐺,以后只要晃鈴鐺,狗就流口水。鈴聲勾起了狗進食的欲望。此稱之為“經典條件反射”。斯金納進一步發現,若每次在老鼠碰到箱子里的一根桿后就投放食物,那么以后每當老鼠餓了,它就會去按桿子。此時,“按了桿子就有食物滾下來”讓老鼠知道它剛才的操作對于滿足“充饑”需求是有效的。 由此可知,信息在動物行為中主要擔當兩種角色。一個是喚醒欲望,激活任務;二是反饋個體的操作是否有效。

那么人呢?其實別以為人類會是多么超凡脫俗,其大部分行為也都服從這兩條從阿狗、阿鼠身上得出的結論。所以,在用戶使用手機啊、PC啊,bulabula Pad啊之類的時候,提示消息也起著這兩種作用:

1、提醒用戶執行一個新任務。

2、反饋剛才的操作結果如何,是否有效。

 

因此,在選取合適的信息提示方式時,應該依次考慮如下因素:

1、是喚醒新任務還是作為用戶操作的反饋。

2、如果是新任務,該任務是否緊急。

3、如果是反饋,在后臺計算該如何反饋的這段時間里,用戶是否會轉移注意。

4、如果是反饋,反饋完是否還需要用戶做進一步的操作。

依照這幾條分辨標準,可以將信息提示規為5種,具體參見下圖:

(字爛,見諒哈^ ^ 。 寫原創博客的博主你傷不起啊,這張圖邊想邊畫就弄了一個多小時?。?!想精簡就得絞盡腦汁啊,有木有!!轉載要標注原出處啊親?。。?/p>

 

一、子任務的榫卯


我覺得,第一種消息可以形象地稱之為榫卯。它是對剛才用戶操作的反饋,同時也要引導用戶開始新的操作。在這個流程中,用戶做出某種操作,嘗試為“子任務i”畫上句號,反饋信息出現,將用戶引導到“子任務i+1”上。用戶需要繼續完成“子任務i+1”上的操作。

對這種信息的需求常見的有三種情境

1、步驟分明的任務

2、是針對用戶失敗操作的緊急處理

3、在進行接下來的任務前必須先完成點其他操作。

因此,在設計這類信息時應滿足如下要求:

  • 與用戶剛才操作在時間和空間上緊密相連。
  • 明確告知接下來的任務
  • 為i+1任務提供快捷的操作入口

 

這是一個google reader讀取feed失敗的截圖。當用戶將屏幕拖動到屏幕下邊緣后,這里會顯示loading的gif。如若讀取失敗,就會直接在gif動畫的位置上呈現反饋信息,并提供了retry的按鈕,讓用戶知道發生了什么,能做些什么。

這是QQ瀏覽器的報錯信息。文案里說明了失敗的原因。同時還提供了用戶最需要的兩個按鈕,放在了顯著位置。

這是Android上設置屏幕鎖的截圖。用戶在屏幕上畫下軌跡后,“繼續”按鈕就會亮起,變成enable狀態,暗示用戶這一步操作已經成功了,可以進入到下一步了。

批量更新App時,某些App新版的權限已有更改。因此用戶點“全部更新”后,系統需將詳情告知用戶,請求許可。用戶要想繼續更新,必須確認該消息。

Alert Box可以直接在Android Market這個APP上彈出來,強制用戶在繼續操作前完成此任務。

二、咔噠


第二種信息就像鎖門時的咔噠一聲一樣。只要聽到了這個聲音,你就知道門已經鎖好了。系統針對用戶的操作提供了反饋,但是不需要再做進一步的操作。在任務流程中時常需要這種信息。它暗示著操作成功了,不需要用戶再做什么操作。O了,搞定,job is done??!不要再彈出個對話框“該網頁已保存”,讓用戶去點“確定,我知道了??!”。

這類信息在設計時應該做到:

  • 與用戶剛才操作在時間和空間上緊密相連。
  • 用戶容易理解剛才操作的結果
  • 不要求用戶做多余的操作(非模態反饋)

這種設計其實是最有靈活性的,可以搞很多創新的花樣。比如,在twitter上對某條feed點保存,該feed塊的一個角上就會掛上顆星星。這樣的輕量提示又易懂,又不妨礙用戶接下來的操作。

在這個todo list上,用戶每勾選一項,該項就會被劃掉。這種簡單的視覺提示讓用戶立刻理解到剛才的勾選操作是成功的。

信息提示最好直接展示在用戶剛才操作的對象上,這樣用戶才能理解這條提示針對哪個元素的。那么,操作對象消失了該怎么辦呢?在android market某個app的detail頁面上,點完更新,頁面就會轉場到“我的應用程序”。此時,屏幕下方就會出現一條Toast Notification,短暫告知用戶剛才操作的結果。過段時間,toast就會自動消失,不干擾用戶的接下來的操作。

android內置的電源管理插件是這種設計的典范。用戶按一下圖標,相應的功能就會開/關。對狀態的反饋可以在這個面板上直接反映出來。燈亮了,咔噠,用戶知道搞定了,無需廢話。

三、平安信


第三種消息針對的是時間跨度大的任務。由于手機支持多任務,且用戶操作手機的時間非常碎片,所以當手機需要長時間執行某任務時,用戶傾向于先去玩其他App或者直接把手機扔一邊。對于這種在用戶做出操作后很長一段時間后才能提供的反饋,還需區分其是否還需進一步操作。

如果還需進一步操作,則它已經不能稱之為“反饋”了。這相當于要用戶中斷手里的活兒,去開始一項新任務。比如燒水,倒上水插上電,你去看電影了。等聽到水壺哨響報警,就知道該來做“把熱水倒進暖壺”這個新任務了。這種喚醒新任務的消息提示會放到四和五去討論。

而若不需要進一步操作,那這種提示就像平安信一樣。比如,發了個快遞到北京,等啊等,幾天之后,那邊朋友打電話說;“收到嘍!”。O了,這個任務搞定了,不需要進一步操作。

這類提示應該做到:

  • 視覺顯著,能吸引注意。
  • 明確告知操作的結果。
  • 不中斷用戶正在執行的任務。
  • 用戶離開時可以積攢下來,且可以方便地清除。

 

Android的Status Bar Notification非常適合用于此類提示。當某個App下載完成后,狀態欄上就會出現提示圖標。無論用戶已經轉到什么App上,都能看到它。而且。這種提示方式不會干擾用戶在當前app的操作。

若用戶對此消息感興趣,還可以將其展開,查看詳情。在看到消息后,按下“清除”,就能將礙眼的提示一掃而光。

 

 

 

四、Alarm!??!


剛才談完了對用戶操作的反饋,現在來看看誘發新任務的提示。這類提示可以按緩急再做區分,適用于不同的提示方式。 如果非常緊急,就應中斷一切手頭的工作,將這條信息擺出來。

這類提示應該做到:

  • 能立刻捕獲注意
  • 清晰地交代任務
  • 提供快速的處理通道
  • 提供次要的拒絕方式

 

其實最霸道的Alarm還數“來電提醒”啊。這消息一到,所有手頭的任務立刻停止,頁面直接切換到接聽頁面。這上面提供了快捷的處理通道和拒絕通道。

這么霸道的提示方式我們一般也用不著啦。如果你覺得你的消息夠緊急,起碼像“低電量提示”這么緊急,可以考慮用Alert Box??梢栽趯υ捒蛏咸峁?個以內的按鈕,并對“主通道”做視覺上的凸顯優化。這樣可以幫助用戶盡快做出選擇,消除討厭的提示。興許人家正玩忍著切西瓜呢。

五、悶騷


如果你提示的消息是要用戶去執行一個新任務,但是又不是很急,就該考慮用更溫和的提示方式,不要粗暴地打斷用戶當前的任務。

這樣的提示應該做到:

  • 起碼要視覺上顯著,如果很緊急點可以去捕獲注意。(對如何“捕獲注意”感興趣的可以去讀一下《認知心理學》)
  • 用戶沒有看到它時可以積累下來
  • 提供快捷的處理通道
  • 清晰地交代任務
  • 不干擾當前任務

 

iPhone的短信提醒就是這種設計的典范。新短信來了,一時半會兒不處理也不會死。但是總得讓用戶知道有新短信吧。iPhone在圖標右上角加了個紅色徽章(badge notification)。這種顯著的視覺特征可以讓用戶很容易覺察到它,同時又不會強制干擾用戶操作。(這種特性在心理學中被稱為特征獨子的視覺顯著性,感興趣的可以去看《認知心理學》)

 

Google Reader上也有類似的設計方式,只不過在藝術性上和apple差了很多。這種制造視覺顯著的方式可以在不強制干擾用戶操作的同時,讓用戶快速覺察到消息的存在。

Android處理短信的方式技高一籌。它在status bar里直接展示短信內容。在文字輪播的同時,用戶可以選擇繼續玩游戲,還是放下手頭的事兒來處理短信。此時,只要在狀態欄上展開這條信息的提示,就可以快速進入短信回復頁面。Status bar這種隨時提醒,快速進入,不干擾當前任務的特性給予了它很大的靈活性。

總結

相比較而言,Android比iOS提供了更豐富的提示方式。Android的status bar notification是一種非常強大的消息提示方式。Palm OS對這種提示方式還做了進一步的優化。 本文的分析方式過于細致,或許很多人看的時候覺得繁瑣。之所以決定還是這樣寫,也是想把自己對心理學的一些感悟整理出來,給自己做個milestone,畢竟落實成文字的想法才更容易看出不足。歡迎批評討論。

轉載請注明,引自雪鸮的啁啾:xuexiao.me

 

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!