• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 抓住这4个核心,搞定UI中报错信息的用户体验设计

抓住这4个核心,搞定UI中报错信息的用户体验设计

作者:Justinmind 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,UX设计,用户体验设计,经验分享,错误反馈设计,错误状态等相关知识,Justinmind希望在学习及工作中可以帮助到您

错误总是难免的。在UI界面当中,用户操作失误或者界面和应用本身出问题的时候,通过报错信息将当前状况传递给用户,这种反馈机制可以帮助用户调整并找到解决方案。报错信息、说明、提醒和警告对于品牌,对于产品的用户体验,甚至声誉,都是至关重要的。

在各种UI表单当中,错误信息的呈现形式常常存在一些潜在问题,有些产品甚至直接忽略了报错信息。报错信息的设计不当有很多不同的呈现形式,不过大多数都表现为在错误的时候提醒,或者包含有误导性的信息。

根据 UXMas 的说法,报错信息其实是UI界面当中最需要人性化设计的部分。它应该谦逊,幽默,有助于用户,并且有足够的人性关怀。

好在报错信息的设计是有一些可供遵循的规则和规律的,今天的文章,我们总结了报错信息设计的4个最佳实践,供你参考。

报错信息设计案例、原型和最佳实践

在诸多的表单当中,用户最常见的表单之一注册和登录表单,而用户在输入表单的时候,也确实容易手滑失误,这个时候,错误信息就会出来提醒,让用户明白哪个地方出了纰漏,需要调整。用户通过不同的报错信息提醒,绕过障碍,这也是让用户体验更加无缝顺滑的策略所在。

糟糕的报错信息很大程度上是源自于用户体验设计流程上的规划失误。为什么这么说呢?在原型设计阶段,用户体验设计师就需要考虑到可能会出现的错误,以及相应的错误反馈,确保用户在报错信息的帮助下,最终能够完成这个阶段的任务,抵达他们的目标。

1、报错信息呈现的位置和时机

当错误出现之后,界面应该在第一时刻将错误信息呈现出来,而呈现的位置应该在界面上,用户立刻会注意到的关键位置,以免错过。

在上面两个错误信息呈现的案例当中,设计师使用了弹出框来呈现错误信息,告知用户需要填写详细信息才能付款。用户则需要关闭弹出框之后,再重新填写,这增加了额外的步骤。而用户关闭弹出框之后再填写的时候,也有一定的机率会忘记弹出框的具体要求和内容,导致无法正确填写。这种耗时又令人沮丧的用户体验,用户不会喜欢的。

正确的形式是直接在界面中呈现报错信息,并且报错信息紧贴着对应的输入框,以醒目的色彩在输入框下方呈现,用户能收到即时的反馈,也能清晰的标注出所有的要求,便于用户更正。

2、报错信息要具备可操作性

不管设计得有多好,策略上有突出,如果不为用户指出一条明路,提供具备可操作性的说明,那么报错信息就不够好。

用户不仅需要知道问题出在哪里,还想知道问题怎么解决。报错信息如果能够告知用户如何规避攩戗的问题,纠正错误,那么他们就能更好地执行。

这个案例当中,我们看到了目前最好的错误提示信息呈现形式。系统不仅通知用户电子邮件地址已经被使用这一问题,而且还提供了恢复用户名重新登录的选项,帮助用户解决问题。

3、报错信息在视觉上要足够突出

如果出错之后,用户无法迅速注意到报错信息,这不仅仅浪费了时间,而且耽误了事情。正如同 Jakbo Nielsen 所说:“最糟糕的报错信息是那些对用户而言根本看不到的报错信息。”不过,难点也就在这个地方,加粗字体和弹出框对于用户而言过于具有压迫感,那么你要如何确保信息能被用户注意到又不会显得太过呢?不难,使用正确的色彩来辅助显示。

色彩是用户识别信息的重要途径,它也是设计师向用户传递信息的可靠工具。处于对比的目的,在白色的背景下,使用红色的错误提示信息,会足够醒目,又不会太过喧宾夺主。

值得注意的是,色彩不应该是报错信息呈现的唯一指标。考虑到网页和移动端应用本身的可用性和可访问性,设计师应该考虑到色盲用户的需求,提供色彩以外的视觉提示,确保他们也能看明白。

随着现实增强、人工智能和语音交互的逐步成熟,应用和用户之间的交互可以做得更加自然,也具备了更多的设计空间。

4、报错信息一定要具体而富有人性

从某种程度上,你能把上面几条做好,你的报错信息在美学特征和体验上就没有太多问题了。不过,这个时候还有一个坑要记得绕过去:千万不要进行错误的阐述,或者直接将错误代码扔到界面当中就完事了。

想要确保你的报错信息可读并且足够人性化,下面的建议应该能帮到你:

·报错应该是感性的,而不是错误代码和数据(诸如出现了错误43这样的信息)
·通过阐述具体的问题来清晰而准确地说明
·一致而精准地以相同的调性来呈现报错信息
·始终为解决问题而提出建议

正如同Jonathan Colman 所说,正确的报错信息通常使用简明而清晰的文字,而失败的报错信息通常不会提供关于错误发生的具体状况以及解决方案,更丑陋的做法是将错误信息完全隐藏起来。

下面的设计,就是很明显的对比:

为何要在你的UI界面当中使用报错信息?

当用户和网站或者APP进行交互的时候,出错始终是无法避免的。错误信息帮助用户在整个用户流程中克服障碍,减少花费的时间,有助于缓解错误发生时候的挫败感,提升用户体验。

根据Nielsen 的《First Law of Computer Documentation》,用户在绝大多数时候并不太在意报错和提醒,但是当错误和障碍真正发生的时候,他们才会因此而特别小心。所以,UI/UX设计师如果能够正确地提供报错信息,用户会非常感激的。

【这些趋势好文,让你的设计走到用户心里】

  1. 《这3种独特的趋势,能让网页设计增色不少》
  2. 《2017年最后几个月,网页设计师值得注意的趋势》
  3. 《这3个流行趋势虽然好,但依然要注意这些细节》
  4. 《看了那么多的设计趋势,你知道怎么落地实践吗?》

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2018-08-23春节专题!App 设计系列之切图的命名规范与标注说明
  • 2018-08-232018 UCAN 大会官方全纪录——人工智能和新零售环境下的设计产业升级
  • 2018-08-23如何超越读者预期,更大概率地写出一稿过的文案?
  • 2018-08-23掌握这6个关键点,你也能制作出系统而专业的设计指南
  • 2018-08-23实战案例!58 招才猫直聘积分系统设计过程总结
  • 2018-08-23AR学了四年半后,我总结的AR眼镜软件产品设计经验
  • 2017-08-06系统之外的字体引用及过渡效果
  • 2017-08-06新手建站入门教程⑤:网站备案很简单,快速备案秘籍
  • 2017-08-06分享8款提高网页设计出色的CSS工具
  • 2018-08-23学会这5个PS小技巧,让工作效率提高5倍!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用户体验和可用性之间的联系和差异,你都知道吗?
    • 新手建站入门教程帖⑦:做一个漂亮的网站就这么简单
    • 用QQ阅读的实战案例,帮你学会做理性的设计
    • AI教程!教你制作超唯美的游戏场景
    • 7个实用技巧,让你的动效变得更优秀!
    • 手机端表格设计:我整理了一套循序渐进的处理方法
    • 辣眼睛?这种粗粝但有趣的设计风格正悄然流行
    • 超全面总结!「完美」的字体系统搭建与维护指南
    • 如何让设计团队的工作效率提升50%?亲测实用的方法!
    • 实战案例!不同导向型信息架构在产品中的应用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有