想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

韓韓:每個(gè)系統(tǒng)軟件在運(yùn)行的過(guò)程中都會(huì)出錯(cuò),可能是用戶操作造成的也可能是系統(tǒng)錯(cuò)誤?;谶@兩種情況,如何正確的提示錯(cuò)誤信息就顯得尤為重要,它直接決定了用戶體驗(yàn)的好與壞。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

一個(gè)好的錯(cuò)誤提示必備的3條重要法則:

  • 清晰地文本提示語(yǔ)
  • 放置在正確的位置
  • 良好的視覺(jué)設(shè)計(jì)

清晰的文本信息

1.?錯(cuò)誤提示信息應(yīng)該簡(jiǎn)明易懂

提示信息應(yīng)該明確的表明發(fā)生了什么錯(cuò)誤、發(fā)生的原因以及解決方法。將你的錯(cuò)誤提示信息看作是一次對(duì)話,跟用戶說(shuō)人話。確保你的文案是禮貌性的、易于理解的、友好的并且沒(méi)有晦澀難懂的專業(yè)術(shù)語(yǔ)。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

2.?錯(cuò)誤提示信息應(yīng)該是有用的

僅僅是描述系統(tǒng)出錯(cuò)是不夠的,還要向用戶提供最簡(jiǎn)單、快速的解決方案。

例如,微軟的錯(cuò)誤提示信息是這樣表述錯(cuò)誤原因和解決方案的,所以你可以快速的知道如何解決它。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

3.?錯(cuò)誤提示信息應(yīng)該是針對(duì)特定的使用場(chǎng)景

很多網(wǎng)站經(jīng)常在所有的狀態(tài)確認(rèn)情況下都使用同一個(gè)錯(cuò)誤提示信息,當(dāng)你沒(méi)有填寫E-mail一欄時(shí)——提示“請(qǐng)輸入一個(gè)有效的電子郵箱地址”,當(dāng)你少寫了“@”符號(hào)時(shí)——提示“請(qǐng)輸入一個(gè)有效的電子郵箱地址”。

MailChimp不是這樣做的,他們針對(duì)每個(gè)不同的郵箱地址狀態(tài)確認(rèn)都有3種錯(cuò)誤提示信息。第一個(gè)是在提交表單的時(shí)候檢查輸入框是否為空,另外兩個(gè)是檢查是否輸入了“@”和“.”符號(hào)。(然而“請(qǐng)輸入內(nèi)容”并不是一個(gè)好的錯(cuò)誤提示,它并沒(méi)有清晰地表明你需要填寫什么內(nèi)容),向你的用戶顯示有針對(duì)性的而不是普適性的信息。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

4.?錯(cuò)誤提示信息應(yīng)該是禮貌性的

即使是你的用戶操作錯(cuò)誤了,也不要責(zé)怪他們,禮貌的對(duì)待用戶,讓他們感覺(jué)使用你的產(chǎn)品很舒服、很便捷。這是一個(gè)很好的展示品牌特性的機(jī)會(huì),試著在錯(cuò)誤提示中加入一些品牌元素。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

5.?恰當(dāng)?shù)恼故灸愕挠哪?/strong>

在錯(cuò)誤提示信息中展示幽默一定要十分小心謹(jǐn)慎,首先應(yīng)當(dāng)確保你的提示信息是有用的,之后如果合適的話,你可以在提示信息中加入一些小幽默,從而提升用戶體驗(yàn)。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

錯(cuò)誤提示信息的正確位置

一個(gè)好的錯(cuò)誤提示信息,應(yīng)該是在你需要的時(shí)候可以很快速的找到它。不要寫一個(gè)錯(cuò)誤信息摘要,應(yīng)該將它放置在相關(guān)的UI元件附近。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

錯(cuò)誤提示信息的設(shè)計(jì)形式

錯(cuò)誤提示信息應(yīng)該清晰易讀。使用與背景色有對(duì)比的文本顏色,以便用戶可以快速地注意到并且閱讀它。
紅色經(jīng)常被用于編寫錯(cuò)誤提示信息,在某些時(shí)候,黃色和橙色經(jīng)常被用于標(biāo)注某些資源,紅色常常讓用戶有壓迫感。所以,確保你的提示文本清晰可見,與背景色有明顯對(duì)比,考慮到色盲用戶群,不要忘記在顏色旁邊放置一個(gè)相關(guān)的圖標(biāo),作為標(biāo)注。

想提示用戶有錯(cuò)誤?不會(huì)這五個(gè)設(shè)計(jì)方法怎么行

總結(jié)

錯(cuò)誤提示信息是一個(gè)提升用戶體驗(yàn)的絕佳時(shí)機(jī),你可以通過(guò)它提升品牌形象、展示企業(yè)個(gè)性。不要小看錯(cuò)誤提示信息的每一個(gè)方面,將提示文本、放置位置和視覺(jué)設(shè)計(jì)都做到盡善盡美,那么它才可以稱得上完美。

「提升可用性的好文合集」

  1. 《刀刀必中!UI設(shè)計(jì)師非學(xué)不可的十大易用性原則》
  2. 《有圖有案例!125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧(一)》
  3. 《有圖有對(duì)比!125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧(二)》
  4. 《有圖有案例!125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧(三)》

原文地址:uxplanet

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng) UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章,按照我們的專欄一步步學(xué)習(xí),一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航:國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航,設(shè)計(jì)師必備:http://hao.uisdc.com

收藏 3
點(diǎn)贊

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。