基于7個(gè)案例,分享我對(duì)“提示信息設(shè)計(jì)”的思考
編輯導(dǎo)語(yǔ):我們?cè)谶M(jìn)行一些網(wǎng)站上的表格填寫(xiě)、注冊(cè)信息時(shí),如有輸錯(cuò)的情況,就會(huì)遇到一些錯(cuò)誤信息提示;但有一些提示表達(dá)得不夠清楚,看完之后還是不知道錯(cuò)在哪;本文作者對(duì)“提示信息設(shè)計(jì)”進(jìn)行了自己的思考,我們一起來(lái)看一下。
一、工作中的問(wèn)題
上圖是對(duì)公司產(chǎn)品與用戶(hù)因產(chǎn)品使用問(wèn)題而溝通畫(huà)面的還原,在最近的工作過(guò)程中,產(chǎn)品一天的工作時(shí)長(zhǎng)中,有相當(dāng)可觀的一部分時(shí)間,耗在了回答用戶(hù)使用產(chǎn)品過(guò)程中的問(wèn)題上;造成這種現(xiàn)象的原因之一,就是系統(tǒng)的錯(cuò)誤提示存在問(wèn)題。
在后面的工作中, 我從全局對(duì)負(fù)責(zé)的產(chǎn)品的錯(cuò)誤提示做了一次優(yōu)化,下面的內(nèi)容是我對(duì)錯(cuò)誤提示設(shè)計(jì)的一些思考與總結(jié)。
二、我理解的“提示信息”
1. 交通信號(hào)燈
目前部分城市在其部分道路上開(kāi)始試點(diǎn)的無(wú)讀秒功能(讀秒計(jì)時(shí),包括順計(jì)時(shí)、倒計(jì)時(shí)兩種模式,指在一定時(shí)范圍內(nèi)進(jìn)行順計(jì)時(shí)或倒計(jì)時(shí);當(dāng)時(shí)間范圍的邊界之后,即意味著切換到的下一個(gè)行為狀態(tài),應(yīng)用場(chǎng)景包括:賽事計(jì)時(shí)、紅綠燈計(jì)時(shí))的紅綠燈。
針對(duì)這樣的改變,在與朋友的交流中發(fā)現(xiàn),大部分人對(duì)此表示無(wú)法理解;現(xiàn)在開(kāi)車(chē)每次過(guò)十字路中的時(shí)候都是戰(zhàn)戰(zhàn)兢兢的,害怕剛走到路中間就已經(jīng)變成紅燈了,甚至害怕因此而發(fā)生的碰撞事故。
相較于有讀秒功能的紅綠燈,司機(jī)在將要通過(guò)十字路口的時(shí)候,可以提前通過(guò)信號(hào)燈的顏色+時(shí)間的提示信息,得知下一個(gè)通行狀態(tài)暫停通行;在到達(dá)路口前,提前做好切換通行狀態(tài)的準(zhǔn)備,避免了交通違規(guī)造成的罰款、降低發(fā)生交通事故的風(fēng)險(xiǎn)。
百度賬號(hào)注冊(cè)表單:
輸入前、輸入中:黑色背景的浮窗+白色的提示文字+文本框上方,用比較強(qiáng)勢(shì)的方式在用戶(hù)輸入前和輸入中告訴用戶(hù)用戶(hù)名的填寫(xiě)規(guī)則,對(duì)用戶(hù)的輸入行為起到了很好的教育作用。
輸入后:在用戶(hù)完成輸入且文本框失焦后,如用戶(hù)輸入的用戶(hù)名不合法,文本框下方+紅色提示文字,再次提示用戶(hù)用戶(hù)名提填寫(xiě)規(guī)則,對(duì)用戶(hù)輸入的結(jié)果起到了很好的示警與引導(dǎo)作用。
此案例來(lái)源于百度web端賬號(hào)注冊(cè)表單,經(jīng)體驗(yàn)可發(fā)現(xiàn),百度產(chǎn)品設(shè)計(jì)針對(duì)用戶(hù)輸入前、輸入中、輸入后等環(huán)節(jié)的行為,利用提示信息對(duì)用戶(hù)行為和行為結(jié)果起到了很好的引導(dǎo)效果。
無(wú)論是生活中的線(xiàn)下行為,還是使用線(xiàn)上的app或系統(tǒng),都有可能因?yàn)樽陨硇袨榛蛲獠恳蛩貙?dǎo)致我們的動(dòng)作被中止。
針對(duì)這樣的場(chǎng)景,需要通過(guò)提示信息針對(duì)用戶(hù)事前、事中的行為給出正確的指引,預(yù)防用戶(hù)的錯(cuò)誤行為;或是在事后給出正確的提示信息,引導(dǎo)用戶(hù)糾正錯(cuò)誤行為——它是產(chǎn)品設(shè)計(jì)中提升?戶(hù)效率、體驗(yàn)、信任?關(guān)重要的?部分。
提示信息設(shè)計(jì):是指通過(guò)對(duì)聲音、文字、色彩、圖形、體感、時(shí)間等元素的組合,以?泡、toast、彈框、聲?、體感等表現(xiàn)形式;在適當(dāng)?shù)奈恢煤蜁r(shí)機(jī)提示用戶(hù),可以做什么、不可以做什么、當(dāng)前遇到的問(wèn)題是什么、應(yīng)該怎么做。
三、設(shè)計(jì)要點(diǎn)
1. 把話(huà)說(shuō)清楚
提示信息是為了給用戶(hù)在使用產(chǎn)品中提供引導(dǎo)和解決用戶(hù)在使用產(chǎn)品中的問(wèn)題而設(shè)計(jì),想要達(dá)到的這樣的目的,首先應(yīng)該做到在提示信息中“把話(huà)說(shuō)清楚”,即在提示信息中應(yīng)該明確告訴用戶(hù)當(dāng)前問(wèn)題是什么、為什么發(fā)生、如何處理。
如上圖,在用戶(hù)填寫(xiě)完表單提交數(shù)據(jù)時(shí),系統(tǒng)校驗(yàn)數(shù)據(jù)不合法時(shí),提示信息為“數(shù)據(jù)保存失敗”;用戶(hù)通過(guò)這樣的提示信息,無(wú)法了解錯(cuò)誤的原因,也就無(wú)法快速定位問(wèn)題并糾正問(wèn)題,從而影響用戶(hù)維護(hù)數(shù)據(jù)的效率和使用體驗(yàn)。
對(duì)比圖中第二個(gè)提示信息,在提示信息中說(shuō)明錯(cuò)誤的原因,用戶(hù)就可以基于提示信息,了解到問(wèn)題是什么、要如何解決。
2. 告訴用戶(hù)問(wèn)題在哪
公司的業(yè)務(wù)系統(tǒng)中,存在大量批量維護(hù)業(yè)務(wù)數(shù)據(jù)的的場(chǎng)景,在此場(chǎng)景下,當(dāng)用戶(hù)提交的信息不合法,系統(tǒng)給出的提示信息為:“XXXXX不可為空/錯(cuò)誤”——用戶(hù)在獲取到這樣的提示信息后,需要自己的在表單中一行一行的定位問(wèn)題,這樣的體驗(yàn)流程顯然是即不友好也不高效的。
所以針對(duì)此類(lèi)場(chǎng)景,除了要做到把話(huà)說(shuō)清楚之外,還應(yīng)該給提示信息一個(gè)定位,即告訴用戶(hù)問(wèn)題在哪。
在對(duì)公司業(yè)務(wù)系統(tǒng)提示信息進(jìn)行優(yōu)化時(shí),針對(duì)此類(lèi)場(chǎng)景通過(guò)“定位+問(wèn)題+原因+解決方案”結(jié)構(gòu)的提示信息;在告訴用戶(hù)問(wèn)題、原因及解決方案的同時(shí),告訴用戶(hù)問(wèn)題在哪一行,幫助用戶(hù)快速定位到問(wèn)題問(wèn)題并糾正。
示例:第[n]行的,某某字段輸入不正確,請(qǐng)檢查。
3. 讓用戶(hù)在最短的時(shí)間內(nèi)理解提示信息
在公司業(yè)務(wù)數(shù)據(jù)的的維護(hù)過(guò)程,經(jīng)常會(huì)涉及到非常復(fù)雜的數(shù)唯一性校驗(yàn);當(dāng)參于唯一性校驗(yàn)的字段越多,在設(shè)計(jì)提示信息時(shí)就越難用簡(jiǎn)潔的語(yǔ)言將唯一性的問(wèn)題說(shuō)清楚,于是系統(tǒng)中的就出現(xiàn)了字?jǐn)?shù)長(zhǎng)達(dá)20-30字符的錯(cuò)語(yǔ)提示。
面對(duì)這樣提示信息且在用戶(hù)著急解決問(wèn)題的背景下,用戶(hù)會(huì)失去閱讀的耐心,從而無(wú)法在短時(shí)間內(nèi)(3-5秒)理解提示信息;因此在提示信息設(shè)計(jì)時(shí),要避免將簡(jiǎn)單的問(wèn)題過(guò)度說(shuō)明(如下圖案例)和將復(fù)雜的問(wèn)題說(shuō)得太復(fù)雜;移動(dòng)端、web端,toast提示信息停留的時(shí)長(zhǎng)一般為3-5秒,過(guò)長(zhǎng)或過(guò)短都會(huì)影響到用戶(hù)的體驗(yàn),所以提示信息的內(nèi)容長(zhǎng)度需控制在在3-5秒內(nèi)能讀完的范圍內(nèi)。
圖中第二個(gè)提示,在原文的基礎(chǔ)上刪掉了“為確保廣大旅客的出行安全”之后,因?yàn)榛谑虑榘l(fā)的背景和要求承客做的事情來(lái)理解,“為確保廣大旅客的出行安全”是不需要明說(shuō)的一個(gè)隱含信息。
圖中第三個(gè)提示,在第二個(gè)提示信息的基礎(chǔ)上刪掉了“掃描二維碼或填寫(xiě)申報(bào)表”,因?yàn)槿绾紊陥?bào)、通過(guò)什么途徑申報(bào),乘客可以在線(xiàn)下通過(guò)登機(jī)口的引導(dǎo)信息獲知。
這個(gè)案例來(lái)源于我在美團(tuán)APP上定完機(jī)票后,發(fā)給我的一個(gè)提示信息,這個(gè)提示信息要表達(dá)的重點(diǎn)是:因?yàn)橐咔榉揽匦枰?,乘客在登機(jī)前需要做健康信息申報(bào)。
對(duì)比三個(gè)提示,原提示信息(第一個(gè)提示),存在將簡(jiǎn)單的問(wèn)題過(guò)度說(shuō)明的現(xiàn)象。
4. 尊重用戶(hù)環(huán)境
無(wú)論是對(duì)外、對(duì)內(nèi)或是toC或toB的產(chǎn)品,產(chǎn)品的用戶(hù)群體一定會(huì)存在文化背景的差異;因此,在進(jìn)行提示信息的設(shè)計(jì)時(shí),需要充分考慮不同區(qū)域用戶(hù)的語(yǔ)言、文化、宗教等因素的差異,不要讓感覺(jué)到困難、被歧視、自卑、距離等不好的感受。
例如:axure是一個(gè)面向全球用戶(hù)的產(chǎn)品,有一次在瀏覽其官網(wǎng),不小心進(jìn)入了一個(gè)錯(cuò)誤頁(yè)面,錯(cuò)誤頁(yè)面的提示信息是全英文;雖然我知道這是錯(cuò)誤頁(yè)面,但是到底出了什么問(wèn)題,我借用翻譯工具才弄明白。
如果你負(fù)責(zé)的產(chǎn)品是面向全球用戶(hù)時(shí),提示信息設(shè)計(jì)一定要區(qū)別對(duì)待,針對(duì)設(shè)計(jì)。
在公司業(yè)務(wù)系統(tǒng)中的錯(cuò)誤提示,并沒(méi)有出現(xiàn)此類(lèi)問(wèn)題,此部分內(nèi)容為在執(zhí)行優(yōu)化工作中的拓展思考。
5. 說(shuō)人話(huà)
第一個(gè)提示,出現(xiàn)了系統(tǒng)語(yǔ)言“主鍵ID”,“主鍵ID ”這樣的詞語(yǔ),對(duì)于普通用戶(hù)來(lái)說(shuō),是無(wú)法理解的。
第二個(gè)提示信息中,出現(xiàn)了用戶(hù)無(wú)法理解的“錯(cuò)誤代碼”,面對(duì)這樣的提示信息可能需要用戶(hù)聯(lián)系客服咨詢(xún)或自行查詢(xún)錯(cuò)語(yǔ)代碼提示錄,才能明白其中所指。
這兩個(gè)提示犯了同一個(gè)錯(cuò)誤,即“沒(méi)有對(duì)用戶(hù)說(shuō)人話(huà)”;類(lèi)似于這樣的提示提示信息,既不能助用戶(hù)快速定位、解決問(wèn)題,反而會(huì)增加用戶(hù)解決的問(wèn)題成本。
提示信息是用戶(hù)而設(shè)計(jì),用戶(hù)有專(zhuān)業(yè)與非專(zhuān)業(yè)之分,所以在提示信息的設(shè)計(jì)中,對(duì)關(guān)鍵問(wèn)題的描述用戶(hù)用詞,要禁止使用錯(cuò)誤代碼、系統(tǒng)語(yǔ)意(如主鍵ID);避免使用過(guò)于專(zhuān)業(yè)的術(shù)述,需符合用戶(hù)的業(yè)務(wù)認(rèn)知、常規(guī)認(rèn)知。
6. 主動(dòng)些
主動(dòng)些,是對(duì)提示時(shí)機(jī)的思考,大部分的提示信息是針對(duì)用戶(hù)的行為結(jié)果進(jìn)行提示,從防止用戶(hù)錯(cuò)誤行為的角度考慮;在設(shè)計(jì)提示信息時(shí),可以關(guān)注事前、事中對(duì)用戶(hù)進(jìn)行引導(dǎo)。
問(wèn)題:在公司業(yè)務(wù)系統(tǒng)中,幾乎90%的場(chǎng)景都是如流程上所示,都是在相對(duì)置后的環(huán)節(jié)(用戶(hù)提交數(shù)據(jù)后)根據(jù)數(shù)據(jù)校驗(yàn)結(jié)果給出提示。
用戶(hù)在獲取到到錯(cuò)誤信息后,需要重新在界面中定位問(wèn)題-糾正問(wèn)題-重新提交——這樣的流程對(duì)用戶(hù)、系統(tǒng)而言都沒(méi)有做到效用最大化。
在用戶(hù)登錄流程中,針對(duì)用戶(hù)輸入的賬號(hào)或密碼是否合法的校驗(yàn),通常是在點(diǎn)擊登錄按鈕時(shí)調(diào)接口校驗(yàn);此時(shí),如用戶(hù)輸入的賬號(hào)或密碼不合法,用戶(hù)只能點(diǎn)擊登錄按鈕后,通過(guò)錯(cuò)誤提示得知并糾正,提示信息相對(duì)后置,即相對(duì)被動(dòng)。
優(yōu)化:在文本框獲取焦點(diǎn)時(shí),利用提示信息對(duì)用戶(hù)進(jìn)入事前教育;在文本框失焦后調(diào)接口校驗(yàn),如用戶(hù)輸入的賬號(hào)或密碼不合法,利用提示信息告訴用戶(hù)錯(cuò)誤信息和解決方案。
這種處理方案,或許代碼工作量相對(duì)會(huì)大些,但是可以對(duì)用戶(hù)的事前、事中行為起到很好的引導(dǎo)作用,對(duì)用戶(hù)提驗(yàn)和效率的提升是可想而知的。
7. 用戶(hù)需要怎么做
公司業(yè)務(wù)主要面向B端用戶(hù),系統(tǒng)中會(huì)維護(hù)一份標(biāo)準(zhǔn)的業(yè)務(wù)數(shù)據(jù),銷(xiāo)售在開(kāi)展業(yè)務(wù)過(guò)程中,可以基于不同客戶(hù)的要求,獲取公司的標(biāo)準(zhǔn)數(shù)據(jù)并在規(guī)定范圍內(nèi)進(jìn)行調(diào)整。
所以在銷(xiāo)售獲取標(biāo)準(zhǔn)數(shù)據(jù)時(shí),如標(biāo)準(zhǔn)數(shù)據(jù)并不存在,系統(tǒng)會(huì)提示“XXXXX在標(biāo)準(zhǔn)XX不存在”——這樣的錯(cuò)誤提示,雖然明確告訴了用戶(hù)問(wèn)題是什么,但是沒(méi)有給出問(wèn)題解決方案和途徑,大部分用戶(hù)在獲取到錯(cuò)誤信息,都會(huì)再咨詢(xún)其它銷(xiāo)售同事或產(chǎn)品負(fù)責(zé)人來(lái)解決問(wèn)題。
圖中案例是同一場(chǎng)景下,不同的提示信息設(shè)計(jì):
- 提示1:只告訴了用戶(hù),問(wèn)題是什么。
- 提示2:在告訴用戶(hù)問(wèn)題的同時(shí),告知了用戶(hù)如何解決問(wèn)題。
- 提示3:在提示1和提示2的基礎(chǔ)上,為用戶(hù)提供了解決問(wèn)題的途徑。
對(duì)比來(lái)看,提示3是幫助用戶(hù)解決問(wèn)題的最有效的
此案例想要表達(dá)的核心是:在設(shè)計(jì)做錯(cuò)誤提示時(shí),除了告訴用戶(hù)問(wèn)題是什么,最好為用戶(hù)提供問(wèn)題的解決方案和途徑
四、反思
這一波系統(tǒng)示信息的優(yōu)化,從用戶(hù)的反饋來(lái)看效果是不錯(cuò)的。
那么,為什么之前的系統(tǒng)提示信息會(huì)那么“差”,原因可能是:
以上內(nèi)容為我在對(duì)公司業(yè)務(wù)系統(tǒng)的提示信息進(jìn)行優(yōu)化時(shí)的一些思考,希望對(duì)你們有幫助,歡迎交流!
作者:汪童學(xué);公眾號(hào):汪童學(xué)
本文由@汪童學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
文章寫(xiě)的很好,不過(guò)感覺(jué)更好的是能有這樣簡(jiǎn)簡(jiǎn)單單就講清前因后果的總結(jié)能力
其實(shí)我還是蠻討厭剛獲得焦點(diǎn)時(shí)就進(jìn)行錯(cuò)誤提示的。心里會(huì)覺(jué)得:我還沒(méi)輸完呢,用你說(shuō)?? 或者 太不智能了吧,我還沒(méi)輸完呢
總結(jié)下來(lái) 就是在做信息提示的時(shí)候
分為行為之前的提示(告訴用戶(hù)什么是正確的)
行為之后的提示(告訴錯(cuò)在哪里 要怎么改 怎么處理)達(dá)到快速定位問(wèn)題并解決的效果
感謝解囊相授,學(xué)到了學(xué)到了!~