江门网页制作：减少认知过载以获得更好的用户体验

最好的用户体验是用户没有注意到的体验。表面上看起来平滑而简单，但已经做出了数百个关键的设计决策来指导，娱乐和预防麻烦。

如果用户体验设计完成了它应该做的事情，用户将不会注意到任何进入它的工作。用户越少考虑界面或设计，他们就越能专注于在您的网站上实现他们的目标。您作为设计师的工作是通过事先清除障碍，为他们提供直达目标的途径。

“妨碍超速货运列车通常不会很好。需要付出很多努力来改变这种势头的东西。而不是强迫人们将注意力从他们的主要任务转移到他们所在的地方。“

- Google产品总监Luke Wroblewski

毕竟，考虑替代方案。复杂且令人困惑的界面迫使用户找到首先不应存在的问题的解决方案。对选项，界面，导航等感到困惑的用户可能会在思考过程中感到不知所措。即使是短暂的停顿也足以让用户重新回到他们坐在电脑前的现实。

江门网页制作这种过度的思维被称为认知超负荷，在这里我们将解释如何避免它。首先，我们需要解释我们的大脑中究竟存在超负荷风险的原因。

认知超负荷的科学根源

认知负载是指工作内存可以处理的信息总量。当您的工作记忆接收到的信息超出其可以轻松处理的信息时，就会发生认知过载，从而导致挫败感和决策制定。

但那是什么意思呢，真的吗？工作记忆究竟是什么？这与设计有什么关系？第一步是了解认知负荷理论的起源。

JOHN SWELLER和认知负荷理论

虽然对认知的研究可以追溯到几个世纪，但直到20世纪80年代，澳大利亚教育心理学家约翰·瑞勒才将这项研究应用于教学设计。Sweller试图找出任何类型学习者保留所教授信息的最佳条件。换句话说，制定课程的最佳策略是什么？

Sweller的工作在1988年出版的“ 认知负荷理论，学习难度和教学设计”（PDF）中达到高潮，于1994年晚些时候重新制作并重新发表。他的工作将数据组织结构称为模式，并概述了有效和无效的教学方法，但他对工作记忆局限性的研究结果是设计师最常发现的最有用的。

在许多方面，膨松剂的工作扩大对信息处理理论的乔治·米勒，谁测试的短时记忆的限度上世纪50年代的认知心理学家和语言学家。米勒的研究已经深深植根于数字设计，尤其是分块技术，本文稍后将对此进行讨论。米勒还负责论文“ The Magical Number Seven，Plus or Minus Two”（PDF），这促使许多设计师将菜单项限制在5到9之间 - 尽管这种技术已被降级为数字设计。

虽然这些策略最初是针对教育领域的，但它们同样适用于用户体验（UX）设计。正如我们将要解释的那样，增强可记忆性和学习的相同技术也减少了用户的烦恼。

工作记忆

如果每次想要打开冰箱，你必须回答一个狮身人面像的谜语，比如“早上四英尺，下午两点，晚上三点？”

一段时间后它会变老，对吧？但是根据认知负荷理论，用户对用户体验设计不佳感觉同样令人沮丧。

要理解认知负荷理论，你必须要了解工作记忆，即用于完成任务的大脑活动。工作记忆必须对所有外部刺激和短期记忆项进行排序，并在需要时从长期记忆中抽取。将工作内存视为计算机RAM，将长期内存视为硬盘驱动器。

工作记忆和短期记忆通常可以互换使用，但它们略有不同。工作内存处理信息的处理，而短期内存更像是一个便笺的便笺簿，这些信息对于长期记忆而言非常重要但不够重要。

让我们看看这篇文章来解释这些差异。在您阅读时，您可能会在蓝色文本中遇到一个不熟悉的概念。您的工作记忆需要知道蓝色文本中的概念意味着什么才能理解文章的更大含义。您的长期记忆知道蓝色文本表示链接，因此您的工作记忆知道点击该链接以获取更多信息。与此同时，您的短期记忆会记住您在文章中的位置，这样当您从外部页面返回时您不会丢失 - 但是明天早上，该位置将被遗忘。

设计中的应用

有影响力的作家史蒂夫克鲁格是将认知负荷理论应用于网页设计的人。他的书“ 不要让我思考”被许多设计师认为是一项开创性的工作。

在本书的许多宝贵课程中，以下是我们的一些最爱：

• 每个页面都应该是不言自明的，因为用户几乎可以从中间进入您的网站，也可以从主页进入。

• 用户倾向于“满意” - 也就是说，采取第一个或最简单的解决方案来解决他们的问题，而不是最好的解决方案。此外，作为习惯的生物，用户将一遍又一遍地使用相同的解决方案，而不考虑更好的选择。

• 当具有普通能力或经验的人可以使用该系统来实现他们的目标时，可用性就足够了。

• 网络使用的大部分是出于节省时间的愿望。因此，用户会经常采用鲨鱼的“保持运动或死亡”的心态。

• 后退按钮是Web浏览器最常用的功能。

• 即使它从未使用过，屏幕上显示的主页按钮也能让用户感到放心。

除了Krug之外，还有许多人详细阐述了认知负荷理论在设计中的作用，包括尼尔森诺曼集团的可用性专家。

总而言之，每当用户在浏览网站时必须暂停思考 - 即使是瞬间 - 他们的工作记忆也会被压低。诸如“这可点击吗？”，“主页按钮在哪里？”和“我如何保存？”等问题可能会破坏用户的体验。

认知过载的最常见原因

许多设计变量都有可能对用户的大脑征税，用户外部生活和环境中的更多变量无法控制。用户可能会担心第二天的工作演示，或者窗外可能会有大声的构造 - 无论您的网站设计多么简单，这些都会耗尽他们的工作记忆。

我们不要忘记每个用户都有不同的工作记忆容量。随和用户将能够比那些强调每件小事的人更专注于您的网站。没有经常上网的用户必须比经验丰富的网络用户更多地思考。

虽然我们无法普遍量化认知过载，但我们可以隔离通常导致它的设计错误。下面，我们对网页设计中最常见的类型以及避免它们的最佳实践进行了分类。

1.不必要的行动

用户采取的每一步都会增加他们的认知负担。太多不必要的行为会破坏用户的思路或激怒他们。因为用户的工作内存专注于实现特定目标，所以不必要的操作迫使用户付出更多努力，这需要将更多工作内存专用于任务，这是没有充分理由的。至少，这些不必要的步骤将测试用户的耐心。

速度和起搏是最小化认知负荷的基本考虑因素。用户希望以轻快，有目的的速度完成任务，因此请事先消除任何滞后。

用户喜欢在提交他们的电子邮件地址之前知道他们正在进行什么，但Touch of Modern的看门人需要先注册......任何东西！这第一个强制性和不必要的行动将吓跑大量潜在用户。

解决方案

这是查找不必要操作的一个很好的练习：列出用户完成任务必须执行的每个步骤。例如，发送电子邮件可能如下所示：

1. 单击电子邮件图标。

2. 单击“发送到”输入字段。

3. 输入电子邮件地址。

4. 单击“主题”输入字段。

5. 等等。

现在，重新扫描列表并查找冗余。有什么想法吗？

您可以通过自动在“发送到”字段中开始光标来完全删除步骤2。这将为用户省去麻烦，无论多么轻微。你消除的每一步都是胜利。

我们来看看Google的主页。光标在搜索字段中开始，因此用户所要做的就是开始输入。这些微交互在整个体验中加起来，所以不要忽视它们。

2.过度刺激

杂乱，混乱和分散注意力的界面可能使用户脱离他们手头的任务。就像当几个人一次与你交谈时很难集中注意力，当网络太多图片，动画，图标，广告，文字类型和鲜艳的颜色争夺你的注意力时，很难集中注意力。

请记住，一个人的工作记忆必须通过外部刺激进行排序，因为它向前移动到目标。每一个分心，特别是视觉上的霸气，都需要用户注意。

LINGsCARS可能是一个极端的例子，但你可以看到竞争元素（如鲜艳的颜色和动作）攻击感官的速度有多快。即使屏幕的两个不同区域中的两个同时动画也可能过度刺激用户。

解决方案

对于初学者来说，摆脱一切不必要的东西。仅保留必要的内容通常是有利的，减少加载时间并简化体验。更重要的是，关于美学如何影响网站的第一印象（PDF）的研究发现，用户更喜欢简单的网站，而不是视觉上复杂的网站。

您还可以使内容多样化以实现平衡。太多的一种类型（比如文字或图像）是霸道的。使用可视内容的合理组合 - 图像，视频，信息图表等 - 在页面上创建和谐，并使用户易于理解。

电影和电视网站IMDb可能很容易倾向于视觉内容，而是通过相同数量的文本内容来平衡它。

一旦你将页面简化为必需品，就可以用一种让用户立即理解的方式组织这些元素。具有对称性或建设性不对称性的布局以更快理解的方式显示信息，也就是说，以需要较少的大脑努力的方式显示信息。对称性和智能不对称性不仅令人赏心悦目，而且其结构使界面更易于与之交互。

了解Groupon如何通过特色冷冻酸奶协议（右中）的文本描述来偏移其文本类别的垂直菜单（左中）？照片和色块的使用创造了一种结构化和令人满意的沙漏形状，在文本中间夹紧。

对称性不仅仅是在屏幕的两侧放置相同的布局。这是关于平衡视觉重量和视觉方向。通过这种方式，非对称屏幕仍然可以显示为有组织的，如下面的OTHR所示。

将您的页面减少到只有简单和非竞争元素只是过度刺激的一半。不要忽视以简单的布局呈现这些元素。

3.太多选项（希克定律）

这有点悖论：用户想要很多选择，但是太多的选择会使他们的大脑超负荷。

希克定律（或决策瘫痪）讲述了这种现象：用户拥有的选择越多，他们做出决定的时间就越多。虽然William Hick和Ray Hyman在20世纪50年代首次测试了他们的理论，但在过去的十年中，他们的研究结果已被重新定义为数字设计。不仅行为研究（PDF）证实了希克定律，而且最近这种现象对大脑的影响已经记录在2015年的MRI研究中。

要了解作为设计师的希克定律，请将每个选项视为明亮的闪光灯。如上所示，太多明亮的闪烁灯会过度刺激用户。

甚至像Rakuten这样的热门网站的制作者也犯了这个错误，因为他们没有正确理解这个原则。这是给用户他们想要的东西和给他们想要的东西之间的区别。

解决方案

假设您已经摆脱了不必要的冗余选项，您可以在伞类别中对多个选项进行分组。您在百货商店网站上看到了很多，这些网站拥有最广泛的产品选择。

它不一定是太多的选择，一次只有太多的选择。如果您可以在隐藏菜单，抽屉和拉出中隐藏其中一些选项，那么您将获得两全其美的效果。这些超级菜单仍然为用户提供了许多选择，但是在易消化剂量下不会让他们负担过重。

但是，隐藏的导航菜单限制了可发现性，因此电子商务和新闻等行业的设计人员必须小心谨慎。您可以通过使用与其他产品（例如亚马逊的“相关购买”横幅）的偏离链接来补充页面，从而最大限度地减少隐藏菜单的缺点。或者您可以通过概括标题类别来简单地取消隐藏菜单，直到它们适合单个导航菜单（如Apple和CNN那样）。

您还需要注意如何组织整个网站的导航。Hick定律的许多问题可以通过管理信息架构（IA）来处理，我们将在下面的“难以查找的页面和功能”部分中讨论。

4.太多内容

就像过度刺激和太多选项的问题一样，提供太多内容会将用户的工作记忆拉到太多不同的方向。

您显然希望仅显示必要的内容，但对于一些强大的网站，一切都是必不可少的。如果您的内容太多，您必须学习如何组织它，以免您对用户造成压力。

Arngren的问题不在于它提供的产品太多，而是它同时提供了太多的产品。更多的结构和组织将为网站的外观创造奇迹。

解决方案

如上所述，George Miller的分块策略可以有效地以可管理的方式呈现大量内容。这是将数据分组以便于记忆的技巧。电话号码分为国家代码，区号，一组三位数和一组四位数字 - 一串11个或更多的数字将难以记忆。

您想在在线商店的主页上展示大量产品图片吗？不是将它们全部列在单独的行和列中，而是根据其类型将它们显示在组中。Etsy能够在主页上显示更多产品，方法是根据卖家将它们分组。

文本中的分块涉及短段，充分使用标题和副标题，以及充足的空白空间。

对于需要所有数据的冗长表单字段，请尝试多步骤表单。长表格可能会显得令人生畏，有时甚至会导致网站被遗弃。将表单的信息分解为单独的页面，或至少单独的部分，以减少其影响。只需确保包含进度标记，以便用户知道预期的页数。

购买机票总是涉及填写大量数据，其中没有一个是可消耗的。维珍航空公司通过将其分解为单个页面上的各个步骤来改善其他繁琐的体验：选择航班，填写乘客信息，输入付款详细信息等。将所有这些放在一个长页面上会使一些用户不堪重负并增加放弃。

5.模糊界面

认知超负荷的最大罪魁祸首是用户界面混乱。用户永远不必花费很长时间来弄清楚如何完成他们想要的动作，也不必浪费脑力破译图标。

并非所有用户都精通技术，足以理解SpeedCrunch的模糊图标。即使他们对计算机足够了解顶部的Windows和Mac OS X符号，右下角的这两个图标也会让Alan Turing有所作为。

解决方案

不要重新发明轮子：使用用户已经从其他网站了解的视觉提示。用户依靠共同的可用性和能指来学习控制，即使在以前从未使用过的网站上也是如此。

如果这太令人窒息，你可以用你的品牌标识给熟悉的模式一个独特的旋转。家得宝使用常见的图标，但给他们品牌的橙色指示。

这同样适用于显微镜。具有标准标签（如“联系人”和“提交”）的按钮比非传统标签（如“地址”或“开始”）更容易识别。通常已知的标签可以方便用户的浏览体验，而不常见的标签会让用户暂停以了解按钮的功能。不要为了个性而牺牲清晰度。

另一方面，如果你有一个前所未见的功能怎么办？在这种情况下，通过使用现实生活表示使其不言自明。正如所谓的Skeuomorphism，它弥合了现实与数字等价物之间的差距。例如，早期的互联网先驱选择了一个信封来代表电子邮件，因为信封是邮件系统的明显标志。

此外，避免模糊的符号，特别是如果他们可能被误认为是其他东西或其他混乱。下面，Issuu的一些图标很熟悉，但其他图标则不熟悉。如果用户必须单击图标以发现其功能，他们将被淘汰。

通过一双新鲜的眼睛来设计你的设计，以确保你没有遗漏任何明显的东西。

查看Denis Kortunov的10个常见图标错误列表，了解有关不执行操作的详细信息 - 例如，图标彼此过于相似或过于复杂。

任何不完全明显的界面都应该包括入职，以指导用户UI的工作方式。简单的网站可以通过一个窗口逃脱，特别是如果一个令人难忘的图形解释功能。但是，新的和独特的界面需要更多动手教程。例如，Slack提供了一个完整的视频导览，旁边的叙述解释了正在发生的事情。

6.难以查找的页面和功能

即使用户拥有他们需要的一切，他们仍然可能无法找到它。这并不比该功能被打破更好。最重要的是，用户正在浪费智力来试图弄清楚要做什么。

作为每个用户体验中不可替代的组件，导航应该是轻松且无压力的。网站导航应该是直观的，应该让用户有信心自由漫游，而不必担心迷路。这不仅需要在IA中进行额外的工作，而且需要仔细的应用才能使其看起来比实际更简单。

如果您认为汉堡包图标不好，Mojo Yogurt会要求您将鼠标悬停在左上角的徽标上以显示导航菜单。

值得称赞的是，一个小型动画“导航”围绕着徽标进行轨道运动。但是，由于屏幕上的所有颜色和动作，一个模糊的提示是不够的。

解决方案

根据用户的偏好理顺您的IA。您的目标用户组可能不会按您的方式思考，因此请向他们学习如何组织网站。一个卡片分类测试显示您的用户将如何归类某些页面和主题。一棵树的测试评估如何你目前或建议的结构是由真实用户的理解。

有关IA的速成课程，请阅读Dan Brown的“ 信息架构八大原则 ”（PDF）。在仅仅五页的篇幅中，他的概述解释了每个设计师应该了解的关于IA的八条硬性规则，例如多重分类的原则（即使用几种不同的分类方法来适应用户不同的思维模式）和披露原则（即只显示足够的信息，以便用户知道会发生什么）。

您还希望通过组合页面或菜单项来消除冗余。例如，您不需要一个页面用于执行BIOS，另一个页面用于单个团队成员 - 它们可以在同一页面上。设计工作室Waaark通过将其工作室介绍，团队成员简介和联系信息合并为一个页面上的三个屏幕来简化其导航。

如果某些功能或特征比其他功能或特征更重要，请使用视觉技术来引起对它们的注意。增加大小，添加动画以及使用华丽或对比色可以吸引用户的眼球。以新颖的方式显示信息，特别是使用相应的图形，并确保最重要的是，它是可理解的。

PayPal期望有更多的回归用户而不是新用户，并通过设置登录按钮与吸引注意力的白色块背景来迎合前者。

7.内部不一致

假设网站的主页使用标准的蓝色和带下划线的文本来表示链接，但另一个页面仅使用蓝色而没有下划线。即使用户从未激活过第一个链接，他们也可能会在第二页上停下来思考，“这仍然是一个链接，即使它没有加下划线吗？”他们甚至可能不关心链接，但是他们分心了由于不一致，整体用户体验受到了打击。

错别字和语法错误的工作方式相同。请记住，最好的用户体验是看不见的，但经常会注意到这样的错误。

无论一个元素是否与网站的其他部分，与其他网站（不应该是UI模式）或用户的语言和语法知识不一致都无关紧要。在所有这些实例中，用户必须花一些时间来考虑和处理，这会占用工作内存。

SIPhawaii到处都是资本化，字体大小和价格的包含。而且你甚至不想知道当你点击汉堡包图标时会发生什么 - 足以说明，它肯定与其他网站的汉堡包图标不一致。

解决方案

在整个网站上保持一致的格式。然而，这比说起来容易得多，因为这种性质的错误往往是无意的。

一个风格指南可以创造奇迹的一致性。它可以在一个易于访问的位置收集所有全局设计决策，以便在设计人员需要时快速访问。可以很容易地忘记诸如背景颜色的代码值，图像的尺寸或标题的排版等细节，因此使它们容易获得将是有帮助的。

有关构建样式指南的更多信息，请阅读我们的深入概述和有关创建样式指南的实际案例研究。

至于拼写错误和语法错误，不要只依赖拼写检查。在发布之前，请务必最后一次浏览您的内容。免费的应用程序Grammarly可以帮助您发现难以看到的错误。

Pinterest是视觉和功能一致性的一个很好的例子。无论您的Feed中的图片样式如何，格式都保持不变。

标题，描述，作者，网站，别针和活动都以相同的文字大小和排版显示在每张卡的相同位置。这种对一致性的贡献使Pinterest能够自由地错开行以获得更多视觉吸引力，而不会让用户感到困惑。如果你能理解一张卡，你可以理解它们。

小贴士

Steve Krug着名地说：“不要让我思考”，就UX而言，这或多或少会成为用户的战斗口号。熟练的UX设计具有空气动力学特性。路上的任何颠簸 - 例如过度的认知负荷 - 都会拖累整个飞机。设计师需要在他们获得的任何机会时满足他们的用户，所以不要让他们想到他们所需要的。

是不是有太多的信息可以立刻吸收？以下是外卖点的摘要，以免您超载：

• 认知负荷是对工作记忆征税的任何信息。当太多信息妨碍决策和总体经验时，就会发生认知超负荷。

• 使用一系列内容类型和结构化页面组合来避免视觉混乱。

• 隐藏菜单可帮助用户同时管理可用选项的数量，但代价是可发现性。

• 分块和阶梯形式等策略可以防止认知过载。

• 可识别的UI元素和复制图吸引用户的现有知识，因此他们不必过于思考。入职可以解释新的和独特的功能。

• 围绕用户的实际思考方式构建您的IA。卡片分类和树木测试等可用性测试可以为您的目标群体揭示最直观的导航方案。

• 视觉和功能的不一致以及拼写错误和语法错误会使用户分散其首要任务。

• 尽可能删除冗余。另外，请留意如何最大限度地减少用户必须采取的步骤数量或他们必须花费的精力。

江门网页制作