基于7個案例,分享我對“提示信息設計”的思考

4 評論 11670 瀏覽 50 收藏 16 分鐘

編輯導語:我們在進行一些網站上的表格填寫、注冊信息時,如有輸錯的情況,就會遇到一些錯誤信息提示;但有一些提示表達得不夠清楚,看完之后還是不知道錯在哪;本文作者對“提示信息設計”進行了自己的思考,我們一起來看一下。

一、工作中的問題

上圖是對公司產品與用戶因產品使用問題而溝通畫面的還原,在最近的工作過程中,產品一天的工作時長中,有相當可觀的一部分時間,耗在了回答用戶使用產品過程中的問題上;造成這種現象的原因之一,就是系統的錯誤提示存在問題。

在后面的工作中, 我從全局對負責的產品的錯誤提示做了一次優化,下面的內容是我對錯誤提示設計的一些思考與總結。

二、我理解的“提示信息”

1. 交通信號燈

目前部分城市在其部分道路上開始試點的無讀秒功能(讀秒計時,包括順計時、倒計時兩種模式,指在一定時范圍內進行順計時或倒計時;當時間范圍的邊界之后,即意味著切換到的下一個行為狀態,應用場景包括:賽事計時、紅綠燈計時)的紅綠燈。

針對這樣的改變,在與朋友的交流中發現,大部分人對此表示無法理解;現在開車每次過十字路中的時候都是戰戰兢兢的,害怕剛走到路中間就已經變成紅燈了,甚至害怕因此而發生的碰撞事故。

相較于有讀秒功能的紅綠燈,司機在將要通過十字路口的時候,可以提前通過信號燈的顏色+時間的提示信息,得知下一個通行狀態暫停通行;在到達路口前,提前做好切換通行狀態的準備,避免了交通違規造成的罰款、降低發生交通事故的風險。

百度賬號注冊表單:

輸入前、輸入中:黑色背景的浮窗+白色的提示文字+文本框上方,用比較強勢的方式在用戶輸入前和輸入中告訴用戶用戶名的填寫規則,對用戶的輸入行為起到了很好的教育作用。

輸入后:在用戶完成輸入且文本框失焦后,如用戶輸入的用戶名不合法,文本框下方+紅色提示文字,再次提示用戶用戶名提填寫規則,對用戶輸入的結果起到了很好的示警與引導作用。

此案例來源于百度web端賬號注冊表單,經體驗可發現,百度產品設計針對用戶輸入前、輸入中、輸入后等環節的行為,利用提示信息對用戶行為和行為結果起到了很好的引導效果。

無論是生活中的線下行為,還是使用線上的app或系統,都有可能因為自身行為或外部因素導致我們的動作被中止。

針對這樣的場景,需要通過提示信息針對用戶事前、事中的行為給出正確的指引,預防用戶的錯誤行為;或是在事后給出正確的提示信息,引導用戶糾正錯誤行為——它是產品設計中提升?戶效率、體驗、信任?關重要的?部分。

提示信息設計:是指通過對聲音、文字、色彩、圖形、體感、時間等元素的組合,以?泡、toast、彈框、聲?、體感等表現形式;在適當的位置和時機提示用戶,可以做什么、不可以做什么、當前遇到的問題是什么、應該怎么做。

三、設計要點

1. 把話說清楚

提示信息是為了給用戶在使用產品中提供引導和解決用戶在使用產品中的問題而設計,想要達到的這樣的目的,首先應該做到在提示信息中“把話說清楚”,即在提示信息中應該明確告訴用戶當前問題是什么、為什么發生、如何處理。

如上圖,在用戶填寫完表單提交數據時,系統校驗數據不合法時,提示信息為“數據保存失敗”;用戶通過這樣的提示信息,無法了解錯誤的原因,也就無法快速定位問題并糾正問題,從而影響用戶維護數據的效率和使用體驗。

對比圖中第二個提示信息,在提示信息中說明錯誤的原因,用戶就可以基于提示信息,了解到問題是什么、要如何解決。

2. 告訴用戶問題在哪

公司的業務系統中,存在大量批量維護業務數據的的場景,在此場景下,當用戶提交的信息不合法,系統給出的提示信息為:“XXXXX不可為空/錯誤”——用戶在獲取到這樣的提示信息后,需要自己的在表單中一行一行的定位問題,這樣的體驗流程顯然是即不友好也不高效的。

所以針對此類場景,除了要做到把話說清楚之外,還應該給提示信息一個定位,即告訴用戶問題在哪。

在對公司業務系統提示信息進行優化時,針對此類場景通過“定位+問題+原因+解決方案”結構的提示信息;在告訴用戶問題、原因及解決方案的同時,告訴用戶問題在哪一行,幫助用戶快速定位到問題問題并糾正。

示例:第[n]行的,某某字段輸入不正確,請檢查。

3. 讓用戶在最短的時間內理解提示信息

在公司業務數據的的維護過程,經常會涉及到非常復雜的數唯一性校驗;當參于唯一性校驗的字段越多,在設計提示信息時就越難用簡潔的語言將唯一性的問題說清楚,于是系統中的就出現了字數長達20-30字符的錯語提示。

面對這樣提示信息且在用戶著急解決問題的背景下,用戶會失去閱讀的耐心,從而無法在短時間內(3-5秒)理解提示信息;因此在提示信息設計時,要避免將簡單的問題過度說明(如下圖案例)和將復雜的問題說得太復雜;移動端、web端,toast提示信息停留的時長一般為3-5秒,過長或過短都會影響到用戶的體驗,所以提示信息的內容長度需控制在在3-5秒內能讀完的范圍內。

圖中第二個提示,在原文的基礎上刪掉了“為確保廣大旅客的出行安全”之后,因為基于事情發的背景和要求承客做的事情來理解,“為確保廣大旅客的出行安全”是不需要明說的一個隱含信息。

圖中第三個提示,在第二個提示信息的基礎上刪掉了“掃描二維碼或填寫申報表”,因為如何申報、通過什么途徑申報,乘客可以在線下通過登機口的引導信息獲知。

這個案例來源于我在美團APP上定完機票后,發給我的一個提示信息,這個提示信息要表達的重點是:因為疫情防控需要,乘客在登機前需要做健康信息申報。

對比三個提示,原提示信息(第一個提示),存在將簡單的問題過度說明的現象。

4. 尊重用戶環境

無論是對外、對內或是toC或toB的產品,產品的用戶群體一定會存在文化背景的差異;因此,在進行提示信息的設計時,需要充分考慮不同區域用戶的語言、文化、宗教等因素的差異,不要讓感覺到困難、被歧視、自卑、距離等不好的感受。

例如:axure是一個面向全球用戶的產品,有一次在瀏覽其官網,不小心進入了一個錯誤頁面,錯誤頁面的提示信息是全英文;雖然我知道這是錯誤頁面,但是到底出了什么問題,我借用翻譯工具才弄明白。

如果你負責的產品是面向全球用戶時,提示信息設計一定要區別對待,針對設計。

在公司業務系統中的錯誤提示,并沒有出現此類問題,此部分內容為在執行優化工作中的拓展思考。

5. 說人話

第一個提示,出現了系統語言“主鍵ID”,“主鍵ID ”這樣的詞語,對于普通用戶來說,是無法理解的。

第二個提示信息中,出現了用戶無法理解的“錯誤代碼”,面對這樣的提示信息可能需要用戶聯系客服咨詢或自行查詢錯語代碼提示錄,才能明白其中所指。

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

提示信息是用戶而設計,用戶有專業與非專業之分,所以在提示信息的設計中,對關鍵問題的描述用戶用詞,要禁止使用錯誤代碼、系統語意(如主鍵ID);避免使用過于專業的術述,需符合用戶的業務認知、常規認知。

6. 主動些

主動些,是對提示時機的思考,大部分的提示信息是針對用戶的行為結果進行提示,從防止用戶錯誤行為的角度考慮;在設計提示信息時,可以關注事前、事中對用戶進行引導。

問題:在公司業務系統中,幾乎90%的場景都是如流程上所示,都是在相對置后的環節(用戶提交數據后)根據數據校驗結果給出提示。

用戶在獲取到到錯誤信息后,需要重新在界面中定位問題-糾正問題-重新提交——這樣的流程對用戶、系統而言都沒有做到效用最大化。

在用戶登錄流程中,針對用戶輸入的賬號或密碼是否合法的校驗,通常是在點擊登錄按鈕時調接口校驗;此時,如用戶輸入的賬號或密碼不合法,用戶只能點擊登錄按鈕后,通過錯誤提示得知并糾正,提示信息相對后置,即相對被動。

優化:在文本框獲取焦點時,利用提示信息對用戶進入事前教育;在文本框失焦后調接口校驗,如用戶輸入的賬號或密碼不合法,利用提示信息告訴用戶錯誤信息和解決方案。

這種處理方案,或許代碼工作量相對會大些,但是可以對用戶的事前、事中行為起到很好的引導作用,對用戶提驗和效率的提升是可想而知的。

7. 用戶需要怎么做

公司業務主要面向B端用戶,系統中會維護一份標準的業務數據,銷售在開展業務過程中,可以基于不同客戶的要求,獲取公司的標準數據并在規定范圍內進行調整。

所以在銷售獲取標準數據時,如標準數據并不存在,系統會提示“XXXXX在標準XX不存在”——這樣的錯誤提示,雖然明確告訴了用戶問題是什么,但是沒有給出問題解決方案和途徑,大部分用戶在獲取到錯誤信息,都會再咨詢其它銷售同事或產品負責人來解決問題。

圖中案例是同一場景下,不同的提示信息設計:

  • 提示1:只告訴了用戶,問題是什么。
  • 提示2:在告訴用戶問題的同時,告知了用戶如何解決問題。
  • 提示3:在提示1和提示2的基礎上,為用戶提供了解決問題的途徑。

對比來看,提示3是幫助用戶解決問題的最有效的

此案例想要表達的核心是:在設計做錯誤提示時,除了告訴用戶問題是什么,最好為用戶提供問題的解決方案和途徑

四、反思

這一波系統示信息的優化,從用戶的反饋來看效果是不錯的。

那么,為什么之前的系統提示信息會那么“差”,原因可能是:

以上內容為我在對公司業務系統的提示信息進行優化時的一些思考,希望對你們有幫助,歡迎交流!

 

作者:汪童學;公眾號:汪童學

本文由@汪童學 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 文章寫的很好,不過感覺更好的是能有這樣簡簡單單就講清前因后果的總結能力

    來自廣東 回復
  2. 其實我還是蠻討厭剛獲得焦點時就進行錯誤提示的。心里會覺得:我還沒輸完呢,用你說?? 或者 太不智能了吧,我還沒輸完呢

    來自北京 回復
  3. 總結下來 就是在做信息提示的時候
    分為行為之前的提示(告訴用戶什么是正確的)
    行為之后的提示(告訴錯在哪里 要怎么改 怎么處理)達到快速定位問題并解決的效果

    來自廣東 回復
  4. 感謝解囊相授,學到了學到了!~

    來自陜西 回復