防止用户界面出错的最佳方案

· · ·

这篇文章分享了一系列流行的 UX 设计实践，这些实践可以改善交互、导航并帮助防止用户在使用网站和应用程序时出错。

毫无疑问，最好的错误是没有犯过的错误。然而，生活并非如此，用户体验也是如此：错误是两者不可或缺的一部分。在我们之前的文章中，我们分享了一些处理错误的屏幕和消息，但是有没有办法防止用户至少犯一些这样的错误？是的，今天的文章就是关于它们的。这里有一组需要考虑的设计实践，包括来自 Tubik 的 UI 设计或我们经常使用的知名数字产品的各种示例。

定向提示

定向提示是用户界面的一个元素，它提供有关特定交互或内容的视觉提示，让用户更快、更轻松地看到它。以及道路标志和路标在物理世界中的作用。它们将访问者或用户引导至关键元素、文本行和号召性用语元素，这种方式使转换可达，用户的问题得到更快的解决。箭头、指针和其他视觉提示有助于在界面中导航用户，并更容易避免不必要的点击和交互。

招聘数字艺术家服务的登陆页面使用指针作为方向提示，将用户的注意力集中在 CTA 按钮和标语上。

为什么这个互动元素使用这么有趣的名字？如果您认为它类似于童话故事而不是设计术语，那么您是对的。这个词与格林兄弟关于汉塞尔和格莱特的故事相呼应：在其中，角色使用面包屑标记回家的路，不会迷路。在网络上，它的工作方式相同：面包屑从网站层次结构的角度可视化路径或用户的旅程。这就是为什么它们也被称为面包屑路径。

入门教程和工具提示

入门教程是一组技术和交互，其目的是让用户感到舒适并简要介绍产品。在入门教程中向用户快速介绍应用程序的方法之一，向首次使用的用户显示一组多个屏幕并解释其优点和功能。在这里，你可以展示一些与其他界面不同的重要内容，这样可以防止以后可能出现的错误。

另一种对错误预防有重大影响的入门技术是工具提示。这些是与特定布局元素或用户操作相关的提示消息。它们通常出现在模态窗口中而不是单独的屏幕中。工具提示提供了一种主动方式来引导用户选择正确的选项并避免误解。

可视化限制

防止用户浪费时间和精力的另一种方法是在过程中显示视觉限制（如果存在）。典型的例子之一是 Twitter。每条推文有 140 个字符的限制，如果你超过该数量，平台会清楚地显示你：多余的部分用颜色突出显示，显示额外字符的数量，推文的按钮变为非活动状态。这种方法可以节省用户的时间和精力，并防止不必要的点击。

文字提示

UX 设计师比普通用户更了解用户界面和交互，但这些知识有时会在他们身上耍花招。为什么？因为对于设计师来说显而易见的东西可能会让用户感到困惑。特定字段或按钮背后的功能对你来说似乎非常清楚，但对于应用程序或网站的用户来说却不是。请记住这一点，并通过简短明了的文本提示来支持他们。可用性测试将帮助你找到最需要它的痛点。流行的示例之一是搜索栏 或联系表格字段中的简单线索。

但是，请记住，文本提示和填充物应该是显而易见的示例。尝试对它们使用与真实输入文本相比较低的对比度，或整合表示“eg”或“example”之类的词。如果文本填充物看起来太逼真，可能会产生错误的印象，即该字段已经填充了信息。

预览

预览功能允许用户在激活该功能之前查看结果。例如，如果你让用户在多种颜色主题或不同字体大小之间进行选择，请在选择过程中显示预览，以便用户可以确定他或她确实想要更改。这也可能涉及更复杂的事情：CMS 平台、电子邮件服务和展示平台通常允许用户在发布或发送内容之前预览内容，以确保一切正常。

WordPress CMS 使作者能够在发布或更新帖子之前预览帖子中的所有更改。

建议

自动完成和其他建议提供了另一个受欢迎的功能，可帮助用户快速找到他们想要的内容并避免不必要的交互或额外的点击。这是它在过程中的样子搜索在 Tubik 博客中。当用户开始输入搜索查询时，网站会立即提供一些相关选项，并在请求完成后显示完整列表。

清晰地解释

用户体验写作背后的一个关键点是引导用户通过简单的指令和更新进行交互。使用这个清单检查你为支持互动而编写的文本。它应该是：

• 清晰 （用户明白你在说什么，核心信息不模糊或复杂）
• 简明扼要（文章有意义，简洁，集中在目标上，不含空话）
• 有用 （副本为用户提供必要的信息或帮助进行交互）
• 持续的 （一个数字产品界面内的副本保持相同的风格、语气、声音和术语）。

专注于通知用户并解释正在发生的事情以及如何处理它，而不是深入研究技术细节或解释这不是你的错。让你的解释没有俚语，切断一切次要的。通过这种方式，你将引导用户找到他们需要的东西并帮助他们避免错误。

Pazi app中的相机屏幕具有清晰的文字说明

内联验证

基本上，内联验证是一种在交互过程中通知用户所需操作的错误或成功完成的方法。大多数情况下，用户在填写不同表单（注册、登录/注册、联系表单、订阅表单等）的过程中处理它。

这种方法确实有效，尤其是对于包含许多字段的长表单：要在用户操作的每一步跟进，而不是让他们填写所有众多的领域，然后告诉他们“出了点问题”。

但是，有一些要点需要记住：

• 不要集成过早的验证：当用户只是将光标放在空字段中时会发生这种情况，并且在用户甚至有机会输入内容之前它立即被标记为“错误”。它会在你创建时产生不良影响一个额外的分心，并引发负面情绪反馈，因为用户因为他们甚至没有开始做的事情而受到指责。
• 不要只是标记错误，解释它：仅仅表明存在错误并让用户对正在发生的事情感到困惑是不够的。不要只说“错误”或“出了点问题”，而是要给出简短而清晰的解释，让用户了解如何改正。
• 使用大多数用户都知道的颜色和视觉标记：无论你将红色作为错误标记的个人关联是什么，似乎有更好的全球识别方式或模式可以立即让用户了解错误已完成。以及标记或竖起大拇指的标志，标志着成功的行动。考虑不需要太多认知负荷并且不会过多分散用户注意力的标记。

在 Tubik 网站上填写订阅表格的内联验证

防止用户出错的另一种方法是在解决错误之前使控件处于非活动状态。当然，它应该通过让用户清楚地了解如何解决问题来完成。

以下是社交媒体发布自动化工具 Buffer 应用程序是如何做到的：

• 当你打开 Twitter 帖子的窗口以计划发布时，文本提示会通知你没有要发布的内容。用于安排帖子的按钮处于非活动状态。

• 当你开始添加内容时，该按钮将变为活动状态。你最多可以在帖子中添加四张图片，因此如果你还没有达到该数量，你可以看到一个空闲的媒体添加位置。

• 如果你添加满了四个图像，那么就没有其他图像的插槽了。如果超过了限制内的字符数，按钮将再次处于非活动状态，多余的部分将同时用颜色和填充行来标记–这样，色盲患者将更容易理解错误。

这个简单的案例显示了应该考虑多少不同的细节和场景来防止用户犯错。

这是另一个有趣的商品定制用户流程内联验证示例：这是电子商务服务，用户可以在购买热狗之前对其进行定制。清单中的勾号显示已经完成的阶段，让用户保持更新和自信。这样可以防止在下订单之前出现遗漏某些东西相关的错误。

颜色强调

颜色是与用户和访问者进行视觉交流的最强大的因素之一，因此使用它并帮助用户避免错误似乎是合乎逻辑的。考虑应用颜色强调作为导航引导用户并引起对核心交互细节或区域的注意。通过这种方式，你可以增加正确点击和点击的机会，而不是在一堆同质的布局元素之间迷失。

食品配送服务网站使用强调色来通知用户当前购物车中的商品数量，这样可以防止不必要的交互并返回购物车页面以检查商品是否在其中。

用于购买动作玩偶的电子商务应用程序概念为CTA 按钮使用高颜色对比度，使其成为最引人注目的元素，这样可以减少用户在应用程序布局中搜索它的工作量。

熟悉的图标

选择图标，尤其是对于非常基本的交互元素，在进行某种创造性的实验之前，请务必三思而后行。尽管图标很小，但它们对可用性的影响却是巨大的：它们为用户提供了快速的视觉线索，特别是在用户阅读能力差或有残疾、不方便阅读文本的环境或对特定语言不那么完美的知识的情况下。更重要的是，大脑处理图标的速度比文字快得多，因此它们可以加快交互速度并减少认知负担。然而，其原因之一是与特定功能或动作立即相关联的图标的集成。

例如，毫无疑问，需要搜索你网站的内容，用户将寻找放大镜图标。如果你开始尝试替换它，错误、误触和误点击的风险会越来越高。熟悉的图标让用户对产品有宾至如归的感觉，并给予更多信心。

包豪斯活动页面使用公认的图标来标记核心信息（日期、时间和地点），并使其在页面上轻松找到。

Gallery App 在标签栏中具有一组易于识别的图标，例如搜索、用户个人资料、购物袋。同样，关注者、评论、添加到收藏夹和发送消息的图标都集成到艺术家的个人资料中。

可识别的模式

这一点延续了之前的观点：不仅是图标，而且其他坚持典型心智模型的交互模式都可以防止应用程序或网站用户出错。例如，请考虑以下几点：

• 研究典型的扫描模式，并使用它们让核心导航直观和即时可见
• 将联系信息放入用户倾向于查找的网站页脚
• 在网站上添加面包屑，让用户追踪他们的旅程并在需要时返回
• 考虑通过社交网络帐户进行延迟注册
• 在页头添加让用户返回到主页的可点击图标
• 将文本链接加下划线以表明它们是可点击的
• 在电商网站的页头放一个购物车按钮
• 为添加项目的控件使用加号图标

这些以及更多的模式选项为用户所熟知，使交互更容易和防错。深思熟虑的用户研究和可用性测试将帮助您选择能够提供最人性化解决方案的解决方案。

Designer AI工具中用于创建新故事板的控件具有支持文本指令的加号按钮

图标标签

尽管图标是可用性的强大元素，并且 感知比言语更快，硬币还有另一面：意义的方面。人们可以超快地感知图标，但是如果他们传递的信息不清晰并且可以重复阅读，那么这种速度不会带来积极的用户体验。快速捕获导致错误理解的图标不能定义为识别，它只是快速注意到。识别不仅意味着速度，还意味着该图标应该带给用户的正确操作或信息。只有在这种情况下，它才会作为防止用户出错的因素。

有大量易于识别的图标，例如用于接听电话的电话听筒、用于邮件的信封、用于搜索的放大镜等。当然，使用这些图标可以比使用复制而不是它们更快地感知 UI 功能。然而，在图标图像不那么明显的情况下，应该仔细考虑其使用。如果图标与其指定的目标和含义不符，则识别速度无关紧要。这就是为什么有些情况下文本更清楚地传递想法或数据，有时当文本标签支持图标时使用双重方案更有效。

浇水跟踪APP使用带有文本标签的图标来确保排除双重含义并避免误操作。

在 LinkedIn 源上创建新帖子的字段具有支持核心交互的明文标签的图标。添加图像或视频等媒体的图标是次要的，不受文本支持。无论如何，为他们选择的图标对于大多数用户来说很容易识别，无需复制。

进度动画

当用户与数字产品交互时，他们想知道每一步发生了什么。让用户在不确定中等待是失去这些用户的风险。尽管如此，当用户被告知时，等待不会那么烦人和压力，并且用户不会做额外的操作和错误。因此，应该始终考虑这方面，并且有很多方法可以通过界面动画 和文字说明。

Grammarly Plagiarism Checker 工具通过加载动画和正在发生的事情的文本解释来支持搜索过程。

· · ·

用户体验 | 用户界面 | UI | UX/UI | UI设计 | 网页设计

内容转载自 5PLUS设计师平台