用户体验:网页设计中错误提示的五种设计方法

每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则:清晰地文本提示语放置在正确的位置良好的视觉设计清晰的文本信息1. 错误提示信息应该简明易懂提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且...

每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。

用户体验:网页设计中错误提示的五种设计方法

一个好的错误提示必备的3条重要法则:

清晰地文本提示语

放置在正确的位置

良好的视觉设计

清晰的文本信息

1. 错误提示信息应该简明易懂

提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且没有晦涩难懂的专业术语。

用户体验:网页设计中错误提示的五种设计方法

2. 错误提示信息应该是有用的

仅仅是描述系统出错是不够的,还要向用户提供最简单、快速的解决方案。

例如,微软的错误提示信息是这样表述错误原因和解决方案的,所以你可以快速的知道如何解决它。

用户体验:网页设计中错误提示的五种设计方法

3. 错误提示信息应该是针对特定的使用场景

很多网站经常在所有的状态确认情况下都使用同一个错误提示信息,当你没有填写E-mail一栏时——提示“请输入一个有效的电子邮箱地址”,当你少写了“@”符号时——提示“请输入一个有效的电子邮箱地址”。

MailChimp不是这样做的,他们针对每个不同的邮箱地址状态确认都有3种错误提示信息。第一个是在提交表单的时候检查输入框是否为空,另外两个是检查是否输入了“@”和“.”符号。(然而“请输入内容”并不是一个好的错误提示,它并没有清晰地表明你需要填写什么内容),向你的用户显示有针对性的而不是普适性的信息。

用户体验:网页设计中错误提示的五种设计方法

4. 错误提示信息应该是礼貌性的

即使是你的用户操作错误了,也不要责怪他们,礼貌的对待用户,让他们感觉使用你的产品很舒服、很便捷。这是一个很好的展示品牌特性的机会,试着在错误提示中加入一些品牌元素。

用户体验:网页设计中错误提示的五种设计方法

5. 恰当的展示你的幽默

在错误提示信息中展示幽默一定要十分小心谨慎,首先应当确保你的提示信息是有用的,之后如果合适的话,你可以在提示信息中加入一些小幽默,从而提升用户体验。

用户体验:网页设计中错误提示的五种设计方法

错误提示信息的正确位置

一个好的错误提示信息,应该是在你需要的时候可以很快速的找到它。不要写一个错误信息摘要,应该将它放置在相关的UI元件附近。

用户体验:网页设计中错误提示的五种设计方法

错误提示信息的设计形式

错误提示信息应该清晰易读。使用与背景色有对比的文本颜色,以便用户可以快速地注意到并且阅读它。

红色经常被用于编写错误提示信息,在某些时候,黄色和橙色经常被用于标注某些资源,红色常常让用户有压迫感。所以,确保你的提示文本清晰可见,与背景色有明显对比,考虑到色盲用户群,不要忘记在颜色旁边放置一个相关的图标,作为标注。

用户体验:网页设计中错误提示的五种设计方法

总结

错误提示信息是一个提升用户体验的绝佳时机,你可以通过它提升品牌形象、展示企业个性。不要小看错误提示信息的每一个方面,将提示文本、放置位置和视觉设计都做到尽善尽美,那么它才可以称得上完美。

来源:优设  作者:韩韩

用户体验:网页设计中错误提示的五种设计方法

用户体验:网页设计中错误提示的五种设计方法

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36314/

(0)
交互精选交互精选
上一篇 2018-04-07
下一篇 2018-04-07

相关推荐

  • 用户体验丨有一点,我特别不服:我一向健康,这本“生命说明书”却告诉我,风险无处不在!

    我与优福的故事聚 集 幸 福 之 因[图片]癌症,是人们的恐惧中心。很多人平时身体棒棒,突然就倒下了,永远的离开。比如我婆家的姑爷,发现时已经晚了,无力回天[图片][图片][图片]。2013年,安吉丽娜·朱莉检测了自己的基因,发现乳腺癌症易感基因患癌率是87%!她提前知道,提前预

    微信热点 2018-02-01
  • 交互设计中的“无意识错误”:如何帮助用户防错?

    在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。在讨论用户错误时,一个重要问题是在什么情况下指出用户的错误。「用户错误」这个词似乎暗示用户做错了某些事情,但不仅如此,设计师也犯下了错误,因为他们让用户轻易的做出了错的行为。所以,解决用户错误的方法不是指责用户,让用户再认真一些,或者给他们更多的指导练习,而应该是重新设计软件,让犯错变得困难。两类用户错误在讨论如何避免犯错之...

    2018-03-02
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06
  • 从用户体验角度说说VR版综艺节目

    转载自913VR作者:赵丹上回我写了一些对于体育赛事VR直播的观点,今天我想说说VR版的综艺节目。最近我比较关注的两档综艺节目是《中国新歌声》和《盖世英雄》,一方面是因为我一直是《中国好声音》的拥趸,另一方面我很喜欢“潮”的东西,所以电音概念的《盖世英雄》自然很吸引我。值得注意的是,这两档节目的VR版都是由微鲸VR独家进行录制的,依托CMC丰富的娱乐资源,微鲸VR对于国内众多娱乐IP进行了VR版本的制作,今天我就主要结合这两档节目来说说...

    2018-04-07
  • 【招商零售】海底捞VS胖东来:用户体验背后的成功基因

    点击上方“聪聪说零售”可订阅哦!招商证券零售组:许荣聪、邹恒超近期的“老鼠门”事件再将海底捞推向风口浪尖,食品安全问题再次引发关注,但与一般公关危机不同的是,本次事件发生后没有出现一边倒的对海底捞的口诛笔伐,反而海底捞及时坦率的回应得到不少消费者的理解和支持。海底捞能坦然面对此次

    微信热点 2018-05-02
  • B2B、企业SaaS中的交互设计总结

    [图片]熊猫设计院关注熊猫设计院发现更多设计好文[图片]译者 / 不器校对 / 熊猫小生作者 / Varun Mohapatra[图片]我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇

    微信热点 2018-04-18
  • 产品经理|交互设计专场

    产品经理走上交互之路3月31日深圳线下分享会2018PMTalk春节后带来的第一场深圳线下产品经理活动,一场以交互设计主题的产品经理线下深圳交流会,PMTalk产品经理社区将带头又一次与大家见面!01一场值得产品经理学习成长的分享会本次分享会,在经历Pmtalk发起人几位小伙伴利用业余时间,在深圳成立这个产品组织后,我们将首次也推出PMTalk社区会员、产品经理合作周边等服务!具体的就在倒计时7天更新!本次沙龙我们邀请的深圳产品大咖(持...

    2018-03-15
  • Axure工具简介

    工具简介主要介绍axure的基本元件使用,熟悉该软件的各个功能区。1.添加元件到画布在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:2. 添加元件名称在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:3.设置元件位置/尺寸元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中...

    2018-03-18
  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17