01

工作中的問題

上圖是對(duì)公司產(chǎn)品與用戶因產(chǎn)品使用問題而溝通畫面的還原，在最近的工作過程中，產(chǎn)品一天的工作時(shí)長中，有相當(dāng)一部分時(shí)間，耗在了回答用戶使用產(chǎn)品過程中的問題上，造成這種現(xiàn)象的原因之一，就是系統(tǒng)的錯(cuò)誤提示存在問題。

在后面的工作中， 我從全局對(duì)負(fù)責(zé)的產(chǎn)品的錯(cuò)誤提示做了一次優(yōu)化，以下是我對(duì)錯(cuò)誤提示設(shè)計(jì)的一些思考與總結(jié)。

02

我理解的“提示信息”

1.交通信號(hào)燈

目前部分城市在其部分道路上開始試點(diǎn)的無讀秒功能的紅綠燈，針對(duì)這樣的改變，在與朋友的交流中發(fā)現(xiàn)，大部分人對(duì)此表示無法理解，現(xiàn)在開車每次過十字路中的時(shí)候都是戰(zhàn)戰(zhàn)兢兢的，害怕剛走到路中間就已經(jīng)變成紅燈了，甚至害怕因此而發(fā)生的碰撞事故。

相較于有讀秒功能的紅綠燈，司機(jī)在將要通過十字路口的時(shí)候，可以提前通過信號(hào)燈的顏色+時(shí)間的提示信息，得知下一個(gè)通行狀態(tài)暫停通行，在到達(dá)路口前，提前做好切換通行狀態(tài)的準(zhǔn)備，避免了交通違規(guī)造成的罰款、降低發(fā)生交通事故的風(fēng)險(xiǎn)。

2.百度賬號(hào)注冊(cè)表單

輸入前、輸入中：黑色背景的浮窗+白色的提示文字+文本框上方，用比較強(qiáng)勢(shì)的方式在用戶輸入前和輸入中告訴用戶用戶名的填寫規(guī)則，對(duì)用戶的輸入行為起到了很好的教育作用

輸入后：在用戶完成輸入且文本框失焦后，如用戶輸入的用戶名不合法，文本框下方+紅色提示文字，再次提示用戶用戶名填寫規(guī)則，對(duì)用戶輸入的結(jié)果起到了很好的示警與引導(dǎo)作用

此案例來源于百度web端賬號(hào)注冊(cè)表單，經(jīng)體驗(yàn)可發(fā)現(xiàn)，百度產(chǎn)品設(shè)計(jì)針對(duì)用戶輸入前、輸入中、輸入后等環(huán)節(jié)的行為，利用提示信息對(duì)用戶行為和行為結(jié)果起到了很好的引導(dǎo)效果。

無論是生活中的線下行為，還是使用線上的app或系統(tǒng)，都有可能因?yàn)樽陨硇袨榛蛲獠恳蛩貙?dǎo)致我們的動(dòng)作被中止，針對(duì)這樣的場(chǎng)景，需要通過提示信息針對(duì)用戶事前、事中的行為給出正確的指引，預(yù)防用戶的錯(cuò)誤行為，或是在事后給出正確的提示信息，引導(dǎo)用戶糾正錯(cuò)誤行為，它是產(chǎn)品設(shè)計(jì)中提升?戶效率、體驗(yàn)、信任?關(guān)重要的?部分。

提示信息設(shè)計(jì)：是指通過對(duì)聲音、文字、色彩、圖形、體感、時(shí)間等元素的組合，以?泡、toast、彈框、聲?、體感等表現(xiàn)形式，在適當(dāng)?shù)奈恢煤蜁r(shí)機(jī)提示用戶，可以做什么、不可以做什么、當(dāng)前遇到的問題是什么、應(yīng)該怎么做。

03

設(shè)計(jì)要點(diǎn)

1.把話說清楚

提示信息是為了給用戶在使用產(chǎn)品中提供引導(dǎo)和解決用戶在使用產(chǎn)品中的問題而設(shè)計(jì)，想要達(dá)到的這樣的目的，首先應(yīng)該做到在提示信息中“把話說清楚”，即在提示信息中應(yīng)該明確告訴用戶當(dāng)前問題是什么，為什么發(fā)生，如何處理。

如上圖，在用戶填寫完表單提交數(shù)據(jù)時(shí)，系統(tǒng)校驗(yàn)數(shù)據(jù)不合法時(shí)，提示信息為“數(shù)據(jù)保存失敗”，用戶通過這樣的提示信息，無法了解錯(cuò)誤的原因，也就無法快速定位問題并糾正問題，從而影響用戶維護(hù)數(shù)據(jù)的效率和使用體驗(yàn)。對(duì)比圖中第二個(gè)提示信息，在提示信息中說明錯(cuò)誤的原因，用戶就可以基于提示信息，了解到問題什么時(shí)，要如何解決。

2.告訴用戶問題在哪

公司的業(yè)務(wù)系統(tǒng)中，存在大量批量維護(hù)業(yè)務(wù)數(shù)據(jù)的的場(chǎng)景，在此場(chǎng)景下，當(dāng)用戶提交的信息不合法，系統(tǒng)給出的提示信息為：“XXXXX不可為空/錯(cuò)誤”，用戶在獲取到這樣的提示信息后，需要自己的在表單中一行一行的定位問題，這樣的體驗(yàn)流程顯然是即不友好也不高效的，所以針對(duì)此類場(chǎng)景，除了要做到把話說清楚之外，還應(yīng)該給提示信息一個(gè)定位，即告訴用戶問題在哪。

在對(duì)公司業(yè)務(wù)系統(tǒng)提示信息進(jìn)行優(yōu)化時(shí)，針對(duì)此類場(chǎng)景通過“定位+問題+原因+解決方案”結(jié)構(gòu)的提示信息，在告訴用戶問題、原因及解決方案的同時(shí)，告訴用戶問題在哪一行，幫助用戶快速定位到問題問題并糾正，示例：第[n]行的，某某字段輸入不正確，請(qǐng)檢查。

3.讓用戶在最短時(shí)間內(nèi)理解提示信息

在公司業(yè)務(wù)數(shù)據(jù)的的維護(hù)過程，經(jīng)常會(huì)涉及到非常復(fù)雜的數(shù)唯一性校驗(yàn)，當(dāng)參與唯一性校驗(yàn)的字段越多，在設(shè)計(jì)提示信息時(shí)就越難用簡潔的語言將唯一性的問題說清楚，于是系統(tǒng)中的就出現(xiàn)了字?jǐn)?shù)長達(dá)20-30字符的錯(cuò)語提示。

面對(duì)這樣提示信息且在用戶著急解決問題的背景下，用戶會(huì)失去閱讀的耐心，從而無法在短時(shí)間內(nèi)（3-5秒）理解提示信息。

因此在提示信息設(shè)計(jì)時(shí)，要避免將簡單的問題過度說明（如下圖案例）和將復(fù)雜的問題說得太復(fù)雜，移動(dòng)端、web端，toast提示信息停留的時(shí)長一般為3-5秒，過長或過短都會(huì)影響到用戶的體驗(yàn)，所以提示信息的內(nèi)容長度需控制在在3-5秒內(nèi)能讀完的范圍內(nèi)。

圖中第二個(gè)提示，在原文的基礎(chǔ)上刪掉了“為確保廣大旅客的出行安全”之后，因?yàn)榛谑虑榘l(fā)的背景和要求乘客做的事情來理解，“為確保廣大旅客的出行安全”是不需要明說的一個(gè)隱含信息。

圖中第三個(gè)提示，在第二個(gè)提示信息的基礎(chǔ)上刪掉了“掃描二維碼或填寫申報(bào)表”，因?yàn)槿绾紊陥?bào)、通過什么途徑申報(bào)，乘客可以在線下通過登機(jī)口的引導(dǎo)信息獲知。

這個(gè)案例來源于我在美團(tuán)APP上定完機(jī)票后，發(fā)給我的一個(gè)提示信息，這個(gè)提示信息要表達(dá)的重點(diǎn)是：因?yàn)橐咔榉揽匦枰?#xff0c;乘客在登機(jī)前需要做健康信息申報(bào)。

對(duì)比三個(gè)提示，原提示信息（第一個(gè)提示），存在將簡單的問題過度說明的現(xiàn)象。

4.尊重用戶環(huán)境

無論是對(duì)外、對(duì)內(nèi)或是toC或toB的產(chǎn)品，產(chǎn)品的用戶群體一定會(huì)存在文化背景的差異，因此，在進(jìn)行提示信息的設(shè)計(jì)時(shí)，需要充分考慮不同區(qū)域用戶的語言、文化、宗教等因素的差異，不要讓感覺到困難、被歧視、自卑、距離等不好的感受。

例如：axure是一個(gè)面向全球用戶的產(chǎn)品，有一次在瀏覽其官網(wǎng)，不小心進(jìn)入了一個(gè)錯(cuò)誤頁面，錯(cuò)誤頁面的提示信息是全英文，雖然我知道這是錯(cuò)誤頁面，但是到底出了什么問題，我借用翻譯工具才弄明白。

如果你負(fù)責(zé)的產(chǎn)品是面向全球用戶時(shí)，提示信息設(shè)計(jì)一定要區(qū)別對(duì)待，針對(duì)設(shè)計(jì)。在公司業(yè)務(wù)系統(tǒng)中的錯(cuò)誤提示，并沒有出現(xiàn)此類問題，此部分內(nèi)容為在執(zhí)行優(yōu)化工作中的拓展思考。

5.說人話

第一個(gè)提示，出現(xiàn)了系統(tǒng)語言“主鍵ID”，“主鍵ID ”這樣的詞語，對(duì)于普通用戶來說，是無法理解的。第二個(gè)提示信息中，出現(xiàn)了用戶無法理解的“錯(cuò)誤代碼”，面對(duì)這樣的提示信息可能需要用戶聯(lián)系客服咨詢或自行查詢錯(cuò)誤代碼提示錄，才能明白其中所指。

這兩個(gè)提示犯了同一個(gè)錯(cuò)誤，即“沒有對(duì)用戶說人話”，類似于這樣的提示提示信息，既不能助用戶快速定位、解決問題，反而會(huì)增加用戶解決的問題成本。

提示信息是用戶而設(shè)計(jì)，用戶有專業(yè)與非專業(yè)之分，所以在提示信息的設(shè)計(jì)中，對(duì)關(guān)鍵問題的描述用戶用詞，要禁止使用錯(cuò)誤代碼、系統(tǒng)語意（如主鍵ID）,避免使用過于專業(yè)的術(shù)述，需符合用戶的業(yè)務(wù)認(rèn)知、常規(guī)認(rèn)知。

6.主動(dòng)些

主動(dòng)些，是對(duì)提示時(shí)機(jī)的思考，大部分的提示信息是針對(duì)用戶的行為結(jié)果進(jìn)行提示，從防止用戶錯(cuò)誤行為的角度考慮，在設(shè)計(jì)提示信息時(shí)，可以關(guān)注事前、事中對(duì)用戶進(jìn)行引導(dǎo)。

問題：

在公司業(yè)務(wù)系統(tǒng)中，幾乎90%的場(chǎng)景都是如流程上所示，系統(tǒng)都是在相對(duì)滯后的環(huán)節(jié)（用戶提交數(shù)據(jù)后）根據(jù)數(shù)據(jù)校驗(yàn)結(jié)果給出提示。用戶在獲取到到錯(cuò)誤信息后，需要重新在界面中定位問題-糾正問題-重新提交，這樣的流程對(duì)用戶、系統(tǒng)而言都沒有做到效用最大化。

在用戶登錄流程中，針對(duì)用戶輸入的賬號(hào)或密碼是否合法的校驗(yàn)，通常是在點(diǎn)擊登錄按鈕時(shí)調(diào)接口校驗(yàn)，此時(shí)，如用戶輸入的賬號(hào)或密碼不合法，用戶只能點(diǎn)擊登錄按鈕后，通過錯(cuò)誤提示得知并糾正，提示信息相對(duì)后置，即相對(duì)被動(dòng)?。

優(yōu)化：

在文本框獲取焦點(diǎn)時(shí)，利用提示信息對(duì)用戶進(jìn)入事前教育；在文本框失焦后調(diào)接口校驗(yàn)，如用戶輸入的賬號(hào)或密碼不合法，利用提示信息告訴用戶錯(cuò)誤信息和解決方案；?

這種處理方案，或許代碼工作量相對(duì)會(huì)大些，但是可以對(duì)用戶的事前、事中行為起到很好的引導(dǎo)作用，對(duì)用戶體驗(yàn)和效率的提升是可想而知的。

7.用戶需要怎么做

問題：

公司業(yè)務(wù)主要面向B端用戶，系統(tǒng)中會(huì)維護(hù)一份標(biāo)準(zhǔn)的業(yè)務(wù)數(shù)據(jù)，銷售在開展業(yè)務(wù)過程中，可以基于不同客戶的要求，獲取公司的標(biāo)準(zhǔn)數(shù)據(jù)并在規(guī)定范圍內(nèi)進(jìn)行調(diào)整。

所以在銷售獲取標(biāo)準(zhǔn)數(shù)據(jù)時(shí)，如標(biāo)準(zhǔn)數(shù)據(jù)并不存在，系統(tǒng)會(huì)提示“XXXXX在標(biāo)準(zhǔn)XX不存在”，這樣的錯(cuò)誤提示，雖然明確告訴了用戶問題是什么，但是沒有給出問題解決方案和途徑，大部分用戶在獲取到錯(cuò)誤信息，都會(huì)再咨詢其它銷售同事或產(chǎn)品負(fù)責(zé)人來解決問題。

圖中案例是同一場(chǎng)景下，不同的提示信息設(shè)計(jì)：

提示1：只告訴了用戶，問題是什么

提示2：在告訴用戶問題的同時(shí)，告知了用戶如何解決問題

提示3：在提示1和提示2的基礎(chǔ)上，為用戶提供了解決問題的途徑

對(duì)比來看，提示3是幫助用戶解決問題的最有效的

此案例想要表達(dá)的核心是：在設(shè)計(jì)做錯(cuò)誤提示時(shí)，除了告訴用戶問題是什么，最好為用戶提供問題的解決方案和途徑

反思

這一波系統(tǒng)提示信息的優(yōu)化，從用戶的反饋來看效果是不錯(cuò)的。那么，為什么之前的系統(tǒng)提示信息會(huì)那么“差”，原因可能是：

以上內(nèi)容為我在對(duì)公司業(yè)務(wù)系統(tǒng)的提示信息進(jìn)行優(yōu)化時(shí)的一些思考，希望對(duì)你有幫助，歡迎交流！?

↘好文推薦：

圍棋大師阿里，產(chǎn)品經(jīng)理騰訊

轉(zhuǎn)正述職報(bào)告怎么寫？五年經(jīng)驗(yàn)PM告訴你……

以叮咚買菜為例，看生鮮電商的春天是否已經(jīng)到來？

點(diǎn)個(gè)“在看”吧

總結(jié)

以上是生活随笔為你收集整理的基于7个案例，分享我对“提示信息设计”的思考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。