下载本文底部的JAKOB的可用性启发式#4的免费海报。

雅各布·尼尔森的第四个十个启发式- 一致性和标准 - 创建对用户有意义的应用程序的关键。考虑您使用的网站和应用程序:它们都依赖于熟悉的惯例。蓝色带下划线的文本是可点桶的,购物车图标显示您计划购买的项目,网站徽标在左上角,一个放大镜玻璃图标代表搜索 - 这些都是例子惯例这一直在数字产品中使用,使用户的生活更容易。

倡导的一致性和标准似乎是我们推动所有应用程序看起来和行为相同,但情况并非如此。相反,当网站和应用程序遵守标准时,用户知道要期待什么,可读性增加,减少混乱。

一个持续的一致性

为了易于学习和使用,系统应该遵守内部和外部一致性 - 它们应该在系统内部使用相同的模式,也应该遵循网络,平台和域和域特定的约定。

内部一致性

内部一致性涉及产品或产品系列的一致性,无论是在单个应用程序中还是跨家庭或应用程序套件。

一个产品系列是指由同一公司以同一品牌生产的个别或成组销售的若干产品。大多数应用程序套件都会以相同的顺序列出菜单组件(文件,编辑,看法等等)或将在应用程序和熟悉的图标中使用一致的图标以及对话框和模块的熟悉布局。

Word,Excel和PowerPoint的工具的Microsoft Office功能区,显示文本控件
Microsoft Office中的许多一致性:除了应用程序图标,主页窗口和主菜单中的一致性之外,Microsoft Office在其产品中使用带功能的功能,用于在每个工具中完成任务。虽然功能区是基于目前使用的产品的上下文,但是可以以相同的方式完成任务。例如,用户将以相同的方式在单词(上),Excel(中间)和PowerPoint(底部)相同的方式自定义文本。
Word,Excel和PowerPoint的工具的Microsoft Office功能区,显示文本控件
Microsoft Office中的许多一致性:除了应用程序图标,主页窗口和主菜单中的一致性之外,Microsoft Office在其产品中使用带功能的功能,用于在每个工具中完成任务。虽然功能区是基于目前使用的产品的上下文,但是可以以相同的方式完成任务。例如,用户将以相同的方式在单词(上),Excel(中间)和PowerPoint(底部)相同的方式自定义文本。

单个产品或应用程序内部的一致性通常可以从使用的颜色和页面布局中看出。例如,应用程序可以使用橙色作为其主要颜色,然后将其应用于所有文本链接和主要按钮。它还可以利用模数这是使用右侧的主按钮和左侧的辅助按钮。

两个Adobe Acrobat操作菜单:编辑PDF和填充和签名
Adobe Acrobat:Acrobat利用 上下文菜单 支持不同的任务,但每个菜单遵循相同的布局和设计。

创建设计系统对于您的应用程序或应用程序,应用程序可以帮助团队维持产品和服务的一致性。用户不仅可以找到熟悉且易于学习的系统,但构建软件的团队也将受益于其工作中的冗余和如何以及何时使用组件的单一的真理来源。

Atlassian设计系统,显示按钮页面和如何在Atlassian站点中使用按钮的指南
亚特萨斯设计系统:亚特萨斯人的产品系列的每个组件都列在左侧导航中,以及示例,代码片段和使用指南。这些指南确保新功能将以与现有功能类似的方式工作。
谷歌的应用程序图标,之前和之后
太好了?谷歌以前版本的邮件、日历和驱动器图标(上图)具有一致的视觉风格,但最近进行了更新(下图),在多个应用程序中使用相同的颜色。当以小尺寸观看时(在移动设备上是典型的),这些图标之间的相似性将使它们难以区分。跟随好的 图标可用性 在启动前测试应用程序图标的实践。

外部一致性

外部一致性是指在一个行业或整个web上,在一个应用程序或一系列应用程序之外建立的约定。

雅各布定律指出人们大部分时间在你以外的网站上花费,这意味着他们在访问您的网站时从其他网站带来他们的期望。每个站点都会有所不同的上下文和用户类型,因此仍然有剪裁和调整的空间,但大多数互动应该与人们的期望一致。在设计应用程序时,重点关注帮助用户尽可能高效地达到目标,而不是创建人们需要弄清楚的非协定界面。

例如,导航设计中的标准是主页链接.它提供了一种简单的方法,返回您的网站的主页,无论用户当前在您的网站内。您可能会在此链接通常驻留在网站上的图片,而我提到它。

在购买产品时,电子商务网站可以看到外部一致性的几个例子。有指导方针查看产品,保存稍后的项目, 和将项目添加到购物车,命名几个。这些指南超越用户类型,提供可应用于任何电子商务网站的标准。

四个网站的工具栏突出显示搜索,帐户信息和购物车Access:Ikea,Target,Etsy,Grainger
电子商务 公用事业导航 :尽管在上面的屏幕截图(IKEA,Target,Etsy和Grainger)中代表不同的行业,但这些电子商务网站遵守与公用事业导航的相同标准。突出的搜索栏,简单的帐户访问以及清晰的购物车都以类似的方式显示。

一致性的层数

在设计应用程序时,需要考虑几个层次的一致性。当你设计或评估你的网站时,要保持以下每一个类别的一致性。

视觉的

使用的符号,图标和图像应在本网站上保持一致。如果您正在使用图像,请确保它们都获得了类似的视觉治疗。例如,边框颜色和重量应在产品页面上的所有图像上保持一致。

选择符号或图标以表示操作时,选择与其他网站如何代表相同概念的图标。例如,坚持标准放大镜进行搜索,以便用户将很容易地识别它。

AllRecipes.com汉堡菜单,既打开和关闭
AllRecipes.com隐藏了菜单图标后面的主要导航(这是我们的设计模式 不建议在桌面上使用 )。但是,当单击时,单击时,单击时,请在单击时从左侧拔出菜单,它与此约定的典型表示,它显示在模态中。在桌面上,模数通常与时事通讯注册和特别优惠相关联;因此,用户可能会立即解除它而不意识到他们必须使用模态来导航到所需内容。

页面和按钮布局

您可能会在网站上有几种不同类型的页面,但是有些组件横跨页面保持一致。考虑页面之间的相似之处和差异。例如,产品页面如何与订单更新页面不同?有些样式和元素可以重用,例如标题,呼叫动作按钮和导航。决定这些元素将在哪里居住,并在适用的情况下在所有页面上保持一致。

确保表单字段和按钮位置的一致性,特别是对于多页表单或向导。你能把行动号召放在左边和右边吗取消右侧按钮,反之亦然?您将如何根据需要指定字段?无论这些问题的答案如何,请确保网站上的每个表格都以相同的方式设计。

三个模块显示呼叫动作按钮的不同顺序
Sutter Health Deponning Checkin Process包括填写多重形式,其中收集有关付款,过敏和健康问题的信息。这稍后完成按钮位于第一个和第二个屏幕截图中主操作按钮的右侧,但更改了第三屏幕截图中主要操作左侧的位置。这种布局不一致容易导致用户不小心击中稍后完成按钮而不是提交表格并混淆以发现他们实际上并没有考虑他们的约会。

用户输入的数据

当向用户询问输入信息日期,电话号码或地点,使用行业标准而不是重塑车轮。例如,大多数网站在要求用户输入日期时使用日历日期选择器。如果用户来到您的网站并呈现出一个开放的领域,他们将不得不花费额外的时间考虑进入日期时应该使用的格式。

只要有可能,帮助用户通过设计表单字段来输入数据,这些字段将消除需要猜测该条目如何格式化;将这些指南应用于您网站上收集数据的所有实例。

动画GIF:用户进入电话号码而不添加其他格式,例如括号和破折号
当用户输入数字时电话号码字段,它将自动格式化以反映标准电话号码显示惯例。用户不必显式输入分隔符。

内容

当用户在各种渠道上与内容交互时,他们应该期待明确熟悉的经验。阅读本网站上的用户的内容,并将其与用户在营销材料中看到的内容进行比较。声音的语气有区别吗?如果您的网站使用休闲语音和您的营销材料传达非常正式的信息,则用户可能会在与两者交互时混淆。内部团队应协调内容策略,以确定最适合您的用户。

所示的主页文本是正式的,而错误消息是非正式的
四季Lanai:主页内容(左)的基调是正式和诱人的,而错误消息标题(右)是机器人和无益的。跨内容的语音不一致,使用户困扰并带走他们对产品或服务的整体体验。

一致性的影响

一致性的好处不仅仅是为应用程序提供设计良好的用户界面。

满足用户期望

当用户遇到您的产品或服务时,他们会从以前的经验带来自己的期望。当满足这些期望时,建立了信心,他们会感觉到掌握界面.

酒店核心柜台的插图
checkin counters通常位于酒店前面。顾客在第一次走进酒店时,客户需要办理入住手续。在靠近前门靠近前门的Checkin Count的这种一致性符合客户的期望。

降低学习曲线

用户应该能够从使用其他网站和应用程序转移他们的知识,这将降低他们的学习曲线与新网站交互时。不要觉得当你谈到设计普通部件时需要重新发明轮子通知,模态,下拉菜单, 等等。

如果你的网站以与大多数其他网站相同的方式呈现这些组件,那么当人们到达你的网站时,他们将知道如何与它们交互。当他们不需要学习新的交互时,他们的重点将完全放在您提供的内容、消息和服务上。或者,当你为了花哨而做一些不同的事情时,人们会感到困惑,最终可能会离开,找到其他可以满足他们需要的东西。

为一致而战斗

一致性不是自己发生的,而是需要一个积极的过程。即使你有一个正式的设计标准,并要求遵循它,人们也会忘记标准中很少应用的元素,他们会以不同的方式解释标准中更模糊的部分。还有一种风险是,一些设计团队会反抗,决定采取不同的做法,因为“我们产品的一角肯定与其他地方不同。”

如果没有一个设计标准,更常见的是不同的设计师在不同的页面或产品上为同一个问题发明不同的解决方案。

战斗这些不一致的主要工具是定期进行设计评审,涉及多个设计团队的代表。每个评审员将负责标记与设计标准或其他地方工作方式的偏差。

更大的组织还可以采用专业高级UX工作人员进行的有针对性的标准评论或一致性评论,具有横卖和克罗斯热线知识公司的设计组合。

最后,承认不一致将要随着时间的推移,尽管你在初始设计阶段扎根了它的最佳尝试。不时(让我们一年一次),在您的所有设计中进行特殊的一致性审查,并确定最糟糕的罪犯。修复这些不一致会减少ux债务应该完成,但有时你可能决定推迟修复并生活在轻微的不一致之处,直到无论如何是罪犯的时候。

打破惯例值得吗?

本文讨论了保持一致性和遵守标准的重要性和益处,但您可能会想知道:是打破一个会议永远值得的? 在设计应用程序时,请考虑权衡打破惯例。

假设您正在评估用于应用程序中的保存功能的图标。您可能会遇到的标准约定是一个软盘,但您的用户可能从未实际遇到过现实的软盘。值得重新审视“公约”并根据您的用户识别的内容调整您的图标选择。

请记住,设计针对惯例的某些事情将会增加您的用户的认知负载。只有在任务绝对必要或将提高效率时,您只能执行此操作。在大多数情况下,维持一致性和满足用户期望将超过违约。