最美UI

如何设计好在错误状态下的移动端app页面!

研究如何优化app以防止用户出错,以及在用户输入发生错误的情况下,如何创建有用的信息。

前言:随着app内容越来越‘同质化’。用户体验的好坏就成了关键因素,所以这篇文章值得你一看。这是我空余时间翻译的,跟大家分享下,在此感谢喵喵和岩岩的纠错,如有翻译上的不当之处,请多多谅解!

只要是人就会犯错,用户使用app出现错误时,这个情况一般会由以下两种原因,一是由于用户的错误操作,二是app自身出错。

无论哪种因素,出现错误后,如何处理对用户体验有着重大影响。如果无视这些错误信息,用户会感到沮丧,甚至可能卸载app。

在本文中,我们将研究如何优化app以防止用户出错,以及在用户输入发生错误的情况下,如何创建有用的信息。这里将看到精心处理过的反馈信息能让用户感到愉悦而非糟糕的体验。

什么是错误状态?

错误状态是指出现错误时显示的页面。例如,用户操作app时可能会发生多个错误:输入无效的数据;无法连接到服务器;没有及时响应用户的请求等。

错误状态的页面

不管原因如何,每一个错误,都会成为用户的痛点,妨碍他们前进。幸运的是,精心处理的错误信息有助于减少这种痛点。

预防胜于治疗

如果是你设计的app,那就应该熟悉app中最常见的交互,以及交互中常出现的错误状态(容易出错的条件)。例如,用户通常在填写表单时,很难一次性准确无误的填完,或者,如果设备上网络连接不好,就不能正确地同步数据。这些情况都要考虑到,以尽量减少出错的可能性。换句话说,最好是提供建议、利用约束和提高灵活性来防止用户出错。

例如,人们搜索酒店并且选择日期进行预订,过去的日期为什么还可以选择呢?正确的做法是当用户选择过去的日期时,则显示错误。

下图是Booking.com的例子,日期选择器只允许用户选择在今天和以后的日期。这将迫使用户选择适合的日期范围。

Booking.com的日期选择器,让过去的日期显示灰色,以便用户可以选择适当的日期。

表单验证的错误状态

表单是对话的开始。与任何交流一样,它应该由双方:用户和应用程序之间的一致通信来表示。验证是会话的重要组成部分。表单验证是指能与用户交谈,引导他们了解错误的原由,而不用猜测不确定性的信息。如果做对了,它可以把一个模糊的交互变成一个清晰的交互。一般来说,良好的表单验证包含四个重要因素:

告知错误(或成功)的正确时间

验证输出的正确位置

合适的颜色

明确的信息

正确时间(内联验证)

验证表单是不可避免的,当用户输入数据的时候最容易出错。是的,应该最小化容易出错的地方,但是验证错误永远不会消失。因此,最重要的问题是:“如何让用户很容易的纠正出错的内容?”

用户很不喜欢填写表单,是因为当他完成一个很长的表单并提交该表单时,就会得到多个错误的反馈消息。更令人反感的是,你不清楚你哪里填写出错了。

验证应该在用户提交信息后立即告诉用户哪里出错并提供正确的例子。表单验证的主要原则是:“与用户对话!告诉他们出了什么问题!实时内联验证将立即通知用户如何提供信息的正确性。“这种方法让用户在不需要点击提交按钮后才能看到错误的信息,而且更快地纠正他们所犯的错误。

但是,避免在每个按键上进行验证,因为在大多数情况下,只有在用户输入完答案后才能进行验证。在输入信息期间执行验证的表单则要在用户开始输入信息的时候加以提醒。

谷歌表单表明,当你没有输入电子邮件时,它是无效的。

另一方面,在输入信息之后被执行验证的表单,系统不会很快的通知用户它们修复了错误。

苹果商店的网站上,在数据输入后进行验证。

混合验证-奖励早,惩罚晚的方法

正确的地方

邻近原则是一个重要的原则。验证信息所放的位置,要遵循这个经验原则-总是把验证信息放在它所处的上下文中。如果您想通知用户某个特定字段中出现的错误,请将其显示在字段旁边。即时验证最适合于输入端的右侧,或者在其下方。

实时表单验证错误。

合适的颜色(直观的设计)

在设计表单验证时,使用颜色是最好的方法之一。因为在界面上更能直观的表述信息,比如红色的错误信息,黄色警告信息,和绿色的成功消息具有强烈的视觉效果。但是,确保您的用户很容易的理解这些。这是视觉设计中的一个关键因素。

错误文本应该是清晰的,一个与背景有对比度的字体颜色和文案的可读性。

明确的信息

一个典型的错误。例如,告知用户“电子邮件是无效的”,但没有告诉用户为什么它是无效的(这是一个错误?它被占用了吗?)。用户收到这样的消息,就会很困惑。所以需要直截了当的提示或者引导,并指出错误。因此在示例中可以看到,提示用户此电子邮件已被使用。然后它提供了一些选项(登录或恢复密码)。

应用程序错误:加载数据失败

好的,来看看app在某种状态下出错的页面。例如,当网络不好的情况下,利用这个状态让人们知道发生了什么,提示的错误消息应该帮助到你的用户。这就是为什么你不应该展示:

原始错误消息。包含应用程序内部错误代码或缩写如“500类型错误”的消息,这是令人崩溃的。

此错误消息由开发人员为开发人员编写。

终端错误消息。简单地说,这样的错误状态不会为用户带来任何有用的信息。

Spotify的错误屏幕只是出现了一个错误信息,并没有提供任何建设性的信息来解决这个问题。

含糊的错误信息。下面的示例中的错误页面给用户提供与上面类似的信息。用户将不知道它的含义和下一步该做什么。

不要用错误吓唬用户。另外,不要自以为用户知道此消息的出处,或者以为用户技术熟练,能理解错误信息。相反,用简单的语言告诉人们出了什么问题。要做到这一点,你应该避免使用技术术语,并使用用户的语言来表达信息。

使你的错误信息既可读又有用-错误状态必须包括简明、礼貌和有启发性的文本。

清楚地说明:

出了什么错,出错的原因。

用户要纠正错误的下一步是什么?

解释了为什么用户看不到任何东西,以及如何解决它。

将幽默的图融入错误状态

在错误状态下,是利用图标和插图的绝佳机会,因为人们对视觉信息的反应比纯文本更好。因此,你可以做的更好一些,加入独特的插画,匹配你的品牌,让用户觉得这是一款个性化,并具有情感化设计的app。

azendoo使用一个令人难忘的插图和幽默的文本,鼓励用户解决问题。

幽默是生活的调味品。可以消除错误状态下的挫折感。你可以在littlebigdetails里找到很多关于幽默化的错误消息。以下是我最喜欢的一些:

Basecamp网站:当有一个表单字段错误,左边的人就会出现一个令人惊讶的表情。

当在Gmail中创建一个新帐户时,键入太多的句号时会显示一个顽皮的错误信息。

但是,要小心使用幽默,因为它可能并不总适合于所有的错误消息;它实际上取决于错误的严重程度。例如“404页未找到”错误,幽默用于这些简单的验证很有效。但是完全不合适在用户耗费大量时间后,却面对这样的错误信息“uh oh!“,。

这些清单能让错误页面处理的更完美

让错误的页面在体验上更加完美,应该具备以下六方面要素:

1,错误消息是动态发生的,正如问题出现时一样。立即响应用户这个问题。

2,保持用户输入正确。你的应用程序不应该撤销、销毁或删除用户在错误状态下输入或上传的任何东西。

3,和用户说同一种语言。应该清楚地说明出了什么问题,可能还有什么原因;用户下一步应该采取什么步骤来走出这个错误状态!

4,不要打击或迷惑用户。(信息不应该是戏剧性的)。

5,不要劫持系统的控制权。(如果问题不是关键的,用户应该能够尽可能多地与app的其他部分交互)。

6,处理错误信息要有幽默感,并情感化的设计。

解决最常见错误状态下的方案

1.404错误

404页的主要目标是尽可能快地引导用户找到他们要找的页面上去。

解决方案:404页面上应该提供几个关键的链接和方向,以便用户可以在其中选择。在页面上加上“首页”的链接是最安全的方式也是友好的方式。您还可以“报告此页”来快速报告该页已损坏,但要确保主操作(链接到“首页”)具有更大的可视权重。

2.不能登录

登录页面的内容通常较少,用户名和密码。但是,内容少并不等于简单。用户不能登录有很多原因。登录页面的规则非常简单——不要让用户去猜测。

用户忘记用户名。如果发现是未知的用户名,你应该提供一个链接让用户去修改它。告诉用户他们可以去那里修改(例如“检查我们的电子邮件”)或提供一个链接让用户以此用户名重新注册。

用户有可能用错误的密码多次尝试登陆。为了防止蛮力攻击,在太多失败的登录后,账号就会临时锁定。这是一个必要的安全措施,但是在帐户被锁定之前一定要给用户以提示。

3.信用卡的错误

信用卡的错误页面由两种因素引起的:

(1)错误的数据格式(错字或丢失数据)

(2)卡被拒绝(过期卡或虚假信息)。Gabriel Tomescu在他的文章“信用卡表单的剖析”中给出了对付这两种错误状态的策略:

对于第一个问题,您应该遵循标准的实时内联验证原则,并在视觉上指示错误:

然而,由于某种原因,可以网络支付的信用卡被拒,它通常看起来像是欺诈。需要清除用户输入的数据。即便如此,仍然需要通知用户发生了什么;错误消息应该尽可能清楚。

4.连接关闭

互联网访问是无处不在的,离线支持应该是每一个app应考虑的关键因素。当连接失败时,您应该尝试提供丰富的脱机体验。用户应该能够尽可能多地与app的其余部分交互。这意味着app应该缓存内容以便提供良好的脱机体验。

Daniel Sauble提出了社交类、地图类,时效性的app具有脱机功能。很明显,他为什么建议每个功能点上缓存一些内容,而不是所有的内容或其他的信息。因为,当用户打开应用程序时,他们希望看到内容,不管它们是否连接到Internet。如果没有内容,他们就使用别的app。所以首先要更好地缓存他们想要看到的信息。

确保你的app尽可能有离线功能。下面是Robert Woo的一些实用建议,几乎可以在每一个app里得到应用。

保存最后一个状态。下面你可以看到两个用于内容交互类的app。美国CNN app通过缓存最后一个视图和文章来提供缓存信息,从而提供了更好的用户体验。

5.提供脱机功能的特性。

每个应用程序都可以在不连接Internet的情况下工作。让我们以Evernote为例。该app具有完全脱机功能:你可以编辑现有的笔记或写一个新的,一旦连接上网络,app将同步一切内容。

结论:

最好的错误信息是从未出现过的错误信息。最好先引导好用户,防止错误的发生。但是,当出现错误时,精心处理的错误信息不仅有助于引导用户如何使用app,还能让用户使用起来心情很愉悦。当然,错误状态是最不需要设计的状态之一。然而,如果你在这个状态下付出了大量的努力,你的产品将会变得更加有趣。

原文链接: https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/

分享设计师:bearthinkfan

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
从京东分会场学到的模块化设计方法总结
下一篇
设计通过“细分”思考让问题变得简单!