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

2 評(píng)論 15981 瀏覽 112 收藏 12 分鐘

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

用戶頁(yè)面提示,是完成用戶引導(dǎo)重要的一環(huán)?;谟脩粽J(rèn)知注意成本,可以由輕到重的交互體驗(yàn),將用戶頁(yè)面提示分為很多類型。不同類型的用戶提示作用于不同的功能之中,顯示在不同終端也有很大的差異。

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

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

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

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

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

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

故本文就用戶體驗(yàn)由輕至重的漸變,分析各類用戶提示的特征和應(yīng)用特點(diǎn),下圖是頁(yè)面提示的分類:

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

一、消息類提示

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

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

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

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

二、浮層類提示

浮層類提示,屬于較輕量級(jí)交互提示,以頁(yè)面浮層的形式提示用戶,而非牽動(dòng)整個(gè)界面,主要作用是解釋說明,和文本校驗(yàn)或是對(duì)截?cái)嗖糠謨?nèi)容進(jìn)行補(bǔ)充(tooltip控件)。一般以非模態(tài)對(duì)話框技術(shù)處理。

應(yīng)用:應(yīng)用于額外說明的場(chǎng)景中,為了滿足產(chǎn)品某項(xiàng)功能。或者大量文字信息截?cái)?,需hover顯示場(chǎng)景中。

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

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

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

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

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

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

三、彈窗類提示

彈窗類提示——TOAST

TOAST提示,是Android中用來顯示顯示信息的一種標(biāo)簽,沒有按鈕焦點(diǎn),顯示的時(shí)間有限,過一定的時(shí)間就會(huì)自動(dòng)消失。屬于較輕量級(jí)交互提示,甚至從視覺影響角度上說,比前兩類的提示更加輕量級(jí)。

應(yīng)用:應(yīng)用于用戶操作之后的反饋提示當(dāng)中,由于本身的特性所以是輕量級(jí)反饋提示的代表。

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

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

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

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

應(yīng)用:應(yīng)用于用戶操作之后的反饋提示當(dāng)中,由于提示消失的方式需要用戶點(diǎn)擊的強(qiáng)制特性,所以是中等量級(jí)的提示類型。常見形式:二次確認(rèn)、選擇類對(duì)話框等。

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

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

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

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

四、嵌入類提示

嵌入類提示——局部嵌入

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

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

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

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

嵌入類提示——全局嵌入

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

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

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

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

五、錯(cuò)誤提示

錯(cuò)誤類提示,是體驗(yàn)最重的提示類型,因?yàn)樘崾玖怂笥脩艟蜔o法瀏覽頁(yè)面了。

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

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

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

總結(jié)

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

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

 

作者:Roy_ ,公眾號(hào):交互設(shè)計(jì)Roy

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

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

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

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

      來自北京 回復(fù)