主頁(yè) > 快速排名 > 常見(jiàn)問(wèn)題 > 如何設(shè)計(jì)合理友好的錯(cuò)誤提示?

如何設(shè)計(jì)合理友好的錯(cuò)誤提示?

POST TIME:2018-12-03 21:31

 

合理的錯(cuò)誤提示設(shè)計(jì)可以很好的提升產(chǎn)品的用戶體驗(yàn),建立用戶與產(chǎn)品之間的紐帶。

相信日常生活中,很多人都曾經(jīng)在各家銀行的網(wǎng)上銀行或者直銷銀行中買過(guò)理財(cái)產(chǎn)品。各家銀行的理財(cái)產(chǎn)品購(gòu)買流程都是大同小異的:選擇合適的理財(cái)產(chǎn)品——輸入購(gòu)買金額——確認(rèn)項(xiàng)目信息——返回操作結(jié)果。我們來(lái)假設(shè)一個(gè)情況,當(dāng)用戶輸入的購(gòu)買金額超過(guò)賬戶余額時(shí),我們應(yīng)該怎么給用戶一個(gè)錯(cuò)誤提示?

以寧波銀行直銷銀行為例,當(dāng)你想購(gòu)買4000元的直投項(xiàng)目的時(shí)候,點(diǎn)擊“立即購(gòu)買”按鈕,進(jìn)入“確認(rèn)支付頁(yè)面”,點(diǎn)擊“去支付”按鈕,這時(shí)候彈出一個(gè)對(duì)話框,告訴你賬戶余額不足。具體多少余額也沒(méi)有說(shuō)清楚,你立馬去我的賬戶里看了余額再返回購(gòu)買,這時(shí)發(fā)現(xiàn)項(xiàng)目都被人搶光了!瞬間奔潰。。。

從這個(gè)虛擬案例中,我們可以看出錯(cuò)誤提示對(duì)于產(chǎn)品用戶體驗(yàn)來(lái)說(shuō)是極其重要的,那么如何才能給用戶提供合適友好的錯(cuò)誤提示呢?

什么是錯(cuò)誤提示

要了解什么是錯(cuò)誤提示,我們應(yīng)該首先了解錯(cuò)誤提示的由來(lái)。用戶在填寫信息的時(shí)候不免會(huì)出錯(cuò),例如,表單太長(zhǎng)他們可能會(huì)忘記填寫其中的一項(xiàng),或者輸入了14位的手機(jī)號(hào)碼,又或者輸入的密碼中只有數(shù)字沒(méi)有字母過(guò)于簡(jiǎn)單等等。這個(gè)時(shí)候我們應(yīng)該給用戶一個(gè)提示,讓他們了解當(dāng)前的錯(cuò)誤狀態(tài)。這就是我們常說(shuō)的錯(cuò)誤提示。

一個(gè)合格的錯(cuò)誤提示應(yīng)該有以下兩個(gè)基本功能:

向用戶陳訴錯(cuò)誤狀態(tài);解釋錯(cuò)誤發(fā)生原因以及如何更正。錯(cuò)誤提示的種類1 彈出框

目前來(lái)說(shuō),彈出框可以說(shuō)是最常見(jiàn)的錯(cuò)誤提示形式。因?yàn)閺棾隹虻目臻g比較大,可以很完整的向用戶告知當(dāng)前的錯(cuò)誤狀態(tài)而且闡明錯(cuò)誤原因以及如何更正。但是彈出框這種形式也有自身的缺陷,那就是用戶如果想更正錯(cuò)誤就必需關(guān)閉這個(gè)彈出框,這樣那些錯(cuò)誤信息就看不到了。在一些特殊情況下錯(cuò)誤信息比較冗長(zhǎng),你沒(méi)有措施短時(shí)間內(nèi)記住,那么就無(wú)法完成修改了。

2 頁(yè)面

此外,錯(cuò)誤提示還可以通過(guò)載入一個(gè)新的頁(yè)面來(lái)陳訴給用戶。好比在你點(diǎn)擊提交按鈕以后進(jìn)入下一個(gè)頁(yè)面才知道本身剛才的輸入發(fā)生錯(cuò)誤。用戶可以通過(guò)閱讀提示知道如何更正問(wèn)題,但是如果想更正這個(gè)問(wèn)題就要點(diǎn)擊后退按鈕,這樣錯(cuò)誤提示又不存在了,這點(diǎn)和彈出框很像。下面這個(gè)例子比較典型,用戶只知道沒(méi)有綁定成功,但是不知道具體的失敗原因,重新綁定也無(wú)法制止再次失敗。

3 標(biāo)簽提示

現(xiàn)在還有很多設(shè)計(jì)師開(kāi)始將錯(cuò)誤提示做成文字標(biāo)簽形式,將其和控件放在一起。這樣子用戶就可以很容易的讀取錯(cuò)誤信息,一眼就能看出來(lái)哪里出錯(cuò)了,,不消按照提示的控件名稱去尋找出錯(cuò)的位置,因?yàn)殄e(cuò)誤提示就在發(fā)生錯(cuò)誤控件的旁邊。此外還很容易改正,因?yàn)橛脩舨幌偬D(zhuǎn)頁(yè)面或去記那些冗長(zhǎng)的錯(cuò)誤信息。

錯(cuò)誤提示設(shè)計(jì)原則1 合理的使用配色和圖標(biāo)

就像我在上面說(shuō)的,錯(cuò)誤提示的第一個(gè)功能就是向用戶陳訴當(dāng)前的錯(cuò)誤狀態(tài)。但是我們沒(méi)有須要真正的給用戶顯示:“尊敬的用戶,你剛才的個(gè)人信息填寫錯(cuò)誤balabala…”。錯(cuò)誤狀態(tài)我們可以直接通過(guò)顏色和圖標(biāo)來(lái)完成。因?yàn)樵跐撘庾R(shí)中,人們習(xí)慣性把紅色和錯(cuò)誤聯(lián)系在一起。當(dāng)然考慮到現(xiàn)實(shí)生活中還有相當(dāng)多的用戶是紅綠色盲患者,因此我們最好是紅色和圖標(biāo)搭配使用。

2 文字簡(jiǎn)潔易懂

提示文字應(yīng)該盡可能的簡(jiǎn)短,用戶看到一大段文字,就很可能會(huì)失去了去閱讀的耐心。此外我們應(yīng)該制止使用專業(yè)術(shù)語(yǔ),讓用戶可以更好的理解。例如你填寫身份證號(hào),多填了一個(gè)數(shù)字,那么我們就應(yīng)該提示用戶“身份證號(hào)位數(shù)出現(xiàn)錯(cuò)誤”而不是簡(jiǎn)單的“身份證號(hào)驗(yàn)證錯(cuò)誤”。因?yàn)轵?yàn)證錯(cuò)誤的種類有很多種,這樣籠統(tǒng)的錯(cuò)誤提示會(huì)增加用戶的操作負(fù)擔(dān)。

制止用戶犯錯(cuò)

對(duì)于這個(gè)信息錄入這個(gè)操作來(lái)說(shuō),最好的用戶體驗(yàn)就是制止用戶犯錯(cuò),而不是比及用戶犯錯(cuò)了以后才思考怎么樣“亡羊補(bǔ)牢”。設(shè)計(jì)師應(yīng)該防患于未然。

1 輸入提醒

標(biāo)簽:烏魯木齊 林芝 九江 鹽城 東營(yíng)



收縮
  • 微信客服
  • 微信二維碼
  • 電話咨詢

  • 400-1100-266