產(chǎn)品設計:“用戶提示”知多少

2 評論 15339 瀏覽 112 收藏 12 分鐘

用戶提示可以引導用戶更加快捷高效完成既定目的,實現(xiàn)產(chǎn)品功能的目標。本文將以用戶體驗由輕至重的漸變,分析各類用戶提示的特征和應用特點。

用戶頁面提示,是完成用戶引導重要的一環(huán)。基于用戶認知注意成本,可以由輕到重的交互體驗,將用戶頁面提示分為很多類型。不同類型的用戶提示作用于不同的功能之中,顯示在不同終端也有很大的差異。

此篇分享我就用戶提示的分類和應用進行一系列的探究,并通過由輕至重的交互體驗,區(qū)分用戶提示應該應用在哪些特定的場景之中。

體驗輕重主要根據(jù)提示出現(xiàn)時有沒有打斷當前用戶的操作和提示消失的方式是否需要用戶點擊等方式,確定當前提示屬于輕交互或者重交互。

開題之前,我們需要明確所謂“用戶頁面提示”的定義,那么我們用最常見的分析法5W1H來看一下到底這玩意兒到底是什么,值得我們?nèi)シ治觯?/p>

  1. WHAT:提示用戶操作或知悉用戶內(nèi)容的多種形式的標簽語言;
  2. WHERE:多數(shù)出現(xiàn)于靜態(tài)界面中,也有部分出現(xiàn)在非模態(tài)對話框中,可能存在于各類終端產(chǎn)品(移動端/PC端/WEB端);
  3. WHEN:用戶通過某些操作得到反饋時,或是告知用戶一些目標任務信息時;
  4. WHO:所有產(chǎn)品用戶;
  5. WHY:用戶提示作為一種普遍存在的頁面元素,是最直接、高效的引導方式;
  6. HOW:用戶提示可以通過影響用戶認知和使用行為,引導用戶達到目標任務的心理預期。

那么,用戶提示的目的到底是什么呢?

用戶提示的目的從根本上來說是達到引導用戶更加快捷高效的完成既定目的,實現(xiàn)產(chǎn)品功能的目標。尤其對于C端產(chǎn)品,需要考慮用戶的使用時間、使用場景和網(wǎng)絡狀態(tài)等,用戶頁面提示出現(xiàn)得更為頻繁。所以用戶提示實現(xiàn)了提升產(chǎn)品用戶體驗的愉悅性和創(chuàng)新性。

故本文就用戶體驗由輕至重的漸變,分析各類用戶提示的特征和應用特點,下圖是頁面提示的分類:

首篇交互分享——關于“用戶提示”那些你不知道的事兒

一、消息類提示

消息類提示,屬于最輕量級交互提示,通常以紅點或者提示數(shù)字作為形式,主要作用是提示用戶未讀信息或者提示用戶內(nèi)容更新。

應用:大多應用于實時內(nèi)容型或社交型軟件,是目前提示更新內(nèi)容最廣泛的應用提示。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

上圖分別為淘寶-寶貝信息,微信-一級導航,攜程-我的信息。三部分內(nèi)容均采用消息類提示的形式達到告知用戶內(nèi)容更新的目的。

二、浮層類提示

浮層類提示,屬于較輕量級交互提示,以頁面浮層的形式提示用戶,而非牽動整個界面,主要作用是解釋說明,和文本校驗或是對截斷部分內(nèi)容進行補充(tooltip控件)。一般以非模態(tài)對話框技術處理。

應用:應用于額外說明的場景中,為了滿足產(chǎn)品某項功能?;蛘叽罅课淖中畔⒔財啵鑘over顯示場景中。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

上圖分別為攜程旅游網(wǎng)、美團網(wǎng)官方網(wǎng)站和美團用戶登錄頁面。攜程旅游產(chǎn)品的文字信息過多需要截斷,通過Hover提示浮層的形式展示全部產(chǎn)品信息;美團網(wǎng)團購產(chǎn)品需突出說明該產(chǎn)品的免預約特性,故采用浮層提示;對登錄等需要輸入信息的頁面中,浮層提示用來校驗信息。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

上圖為攜程旅游網(wǎng)頂部導航,“用車”Tab上出現(xiàn)了“暑期大促”文案的浮層,這類浮層提示類似于前文提到的美團產(chǎn)品解釋說明,暑期大促的出現(xiàn)從視覺上讓用車和其他tab有區(qū)分,并且內(nèi)容也很誘人,對提高用戶轉化率起很大作用。

還有另一類浮層提示,主要服務于指導產(chǎn)品功能特性。下圖為微信點擊+號后出現(xiàn)的“浮層提示”,內(nèi)容為最近一張照片,提示用戶你可能會發(fā)送的照片,這種做法通過浮層提示的樣式,降低了用戶的使用成本,搭起了一條完成既定任務的捷徑。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

三、彈窗類提示

彈窗類提示——TOAST

TOAST提示,是Android中用來顯示顯示信息的一種標簽,沒有按鈕焦點,顯示的時間有限,過一定的時間就會自動消失。屬于較輕量級交互提示,甚至從視覺影響角度上說,比前兩類的提示更加輕量級。

應用:應用于用戶操作之后的反饋提示當中,由于本身的特性所以是輕量級反饋提示的代表。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

右圖分別為淘寶客戶端-微淘和支付寶-付款成功頁面。在微淘的tab中向下滑動頁面更新信息,出現(xiàn)更新條數(shù)的TOAST;支付寶付款成功后給予用戶正向反饋的TOAST。

彈窗類提示——對話框(DIALOG)

對話框類彈窗提示,按鈕可以是一個或者多個,頂部關閉按鍵可有可無(是具體情況定),內(nèi)容可以通過插件控制文字和圖片,也屬于對操作的反饋提示。屬于中等量級交互提示,用戶完成某項操作之后,引導用戶完成下一步操作。視覺上常以遮罩等視覺表現(xiàn)出現(xiàn)。

應用:應用于用戶操作之后的反饋提示當中,由于提示消失的方式需要用戶點擊的強制特性,所以是中等量級的提示類型。常見形式:二次確認、選擇類對話框等。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

首篇交互分享——關于“用戶提示”那些你不知道的事兒

上圖1為百度網(wǎng)盤的退出賬號操作,點擊之后出現(xiàn)對話框可以選擇切換賬號和確認退出、取消。

上圖2為微信的“取消公眾號關注” 從頁面下方出現(xiàn)二次確認的對話框;圖3則是簡書APP的分享功能,不同的是分享對話框內(nèi)容豐富,隨著APP開源插件的發(fā)展,在功能上也極大拓寬了用戶體驗的范圍。

四、嵌入類提示

嵌入類提示——局部嵌入

嵌入類提示,多數(shù)以同現(xiàn)有頁面布局類似的方式,直接融入其中,相對彈窗,嵌入的形式讓提示與頁面內(nèi)容保持一致性,使用戶在瀏覽產(chǎn)品時自然得受到局部嵌入提示的影響,從而達到交互體驗的平靜感。推廣類信息的目的實際是為了吸引用戶注意,所以嵌入式屬于較重的交互形式。

應用:多數(shù)用于廣告推廣類信息,也有產(chǎn)品新功能介紹等推廣內(nèi)容。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

上圖為微博“發(fā)現(xiàn)”首頁和朋友圈嵌入式廣告。微博發(fā)現(xiàn)首頁頂部banner輪播是典型的嵌入式提示,通過插入廣告達到吸引用戶點擊的目的;朋友圈小廣告是最近一年才興起的提示形式,嵌入式提示放在朋友圈的好處是:能讓用戶產(chǎn)生一種朋友分享的消息般親密的感覺,控制用戶的第一感覺。其次基于朋友圈用戶的使用習慣,部分用戶會留意甚至點擊廣告內(nèi)容。

嵌入類提示——全局嵌入

全局嵌入是體驗重的一種交互形式。根據(jù)不同的終端,通過全頁面的覆蓋達到全局嵌入的目的。

應用:多數(shù)用于APP起始頁和頁面啟動廣告頁,或者蒙層類廣告。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

上圖圖1和2是咸魚APP,央視影音APP的起始廣告頁;圖3是掌上英雄聯(lián)盟的首頁蒙層廣告。三種用戶提示形式屬于全局嵌入類型。

五、錯誤提示

錯誤類提示,是體驗最重的提示類型,因為提示了它之后用戶就無法瀏覽頁面了。

應用:弱網(wǎng)狀態(tài)和連接錯誤。

首篇交互分享——關于“用戶提示”那些你不知道的事兒

圖1是NICE APP弱網(wǎng)狀態(tài)下的錯誤提示,圖2是CHROME瀏覽器的鏈接失敗提示。

總結

前文提到根據(jù)提示出現(xiàn)時有沒有打斷當前用戶的操作和提示消失的方式是否需要用戶點擊等方式,確定由消息類提示——錯誤提示由輕至重的交互提示。

根據(jù)提示的分類應用,設計師可以自由選擇什么時候,在什么位置,應該怎樣使用頁面提示來正確引導用戶做出決策。但是在使用提示的時候,需要注意不要千篇一律使用同一種提示,更要在內(nèi)容上做到簡潔扼要,做到配合產(chǎn)品視覺和交互的一致性。

 

作者:Roy_ ,公眾號:交互設計Roy

本文由 @?Roy_ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 嵌入類提示那就是嵌入廣告啊,說是提示會不會太牽強?

    來自廣東 回復
    1. 看你怎么理解“提示”了,說廣告也太絕對,文中舉例確實也都是廣告。但是嵌入頁面中固定位置,例如B端表單頁面頂部一般會放最重要的提示用紅色或者黃色提醒用戶注意,那么這也是嵌入式的提示之一。

      來自北京 回復