UI界面设计

如何提高ui设计中的文本可扫描性？

1694

我们每天的工作都离不开大量的信息流。新技术和快速的互联网让资讯井喷，人们可收集到比纸质媒体更多的内容。处理众多网站和应用程序时，用户不会一目了然地阅读他们看到的所有内容 - 他们首先扫描页面以找出原因以及它对他们有用的内容。因此，可扫描性是当今网站可用性的重要因素之一。今天的文章探讨了这一现象，并提供了如何使数字产品更具可扫描性的技巧。

什么是可扫描性？

应用于页面或屏幕，动词“扫描”意味着匆匆浏览或阅读。因此，可扫描性是将内容和导航元素呈现为可以轻松扫描的布局的方式。用户第一次与网站交互，用户快速查看内容，分析哪些是他们需要的内容。任何内容都可能成为这个过程中的一个钩子：单词，句子，图像或动画。

顺便说一句，这种行为并不是什么新鲜事：几十年来，人们经常在新的杂志或报纸上开始仔细阅读文章之前对其进行翻译。更重要的是，在屏幕上阅读比在纸上阅读更累人。

为什么这很重要？大约十年前，雅各布尼尔森回答了“人们如何在网上阅读？”的问题，简单地说：“他们没有阅读。人们很少逐字阅读网页; 相反，他们扫描页面，挑选单个单词和句子“。从那以后就没有太大变化：如果我们不确定它是否符合我们的需求，我们还没有准备好花时间和精力去探索网站。因此，如果在介绍的第一分钟没有任何东西可以抓住，那么用户离开的风险很高。无论网站的类型是什么，可扫描性都是其用户友好性的重要因素之一。

如何检查网页是否可扫描？尝试将其视为首次使用者并回答两个问题：

- 您在前几分钟看到的内容是否符合目标受众对此页面的期望？

- 您能在第一分钟或第二分钟了解页面上的信息类型吗？

如果你不确定这两个答案都是正面的，也许是时候考虑如何加强网站的可扫描性了。您需要多投入时间提高可扫描性，因为精心扫描的页面在以下方面变得更加高效：

——用户完成任务并更快地实现目标

——用户在搜索他们需要的内容时会犯更少的错误

——用户可以更快地了解网站的结构和导航

——跳出率降低

——保留用户的水平越来越高

——该网站看起来和感觉更可信

——SEO更好

流行的扫描模式

界面设计师必须考虑的重要事项是眼睛扫描模式，它显示用户在最初几秒内如何与网页交互。当您了解人们如何扫描页面或屏幕时，您可以优先处理内容并将用户需要的内容放入最明显的区域。这个用户研究领域由Nielsen Norman Group 提供支持，为设计人员和可用性专家提供了对用户行为和交互的更好理解。

收集用户眼睛跟踪数据的不同实验表明，有几种典型的模型，访问者通常会扫描网站。

Z-Pattern对于具有统一信息呈现和弱视觉层次的网页而言是非常典型的。

另一种方案具有Z字形图案，该图案通常用于具有视觉上分割的内容块的页面。同样，读者的眼睛从左上角开始从左到右移动，并在整个页面上移动到右上角，扫描这个初始交互区域中的信息。

另一个模型是Nielsen Norman Group 在探索中呈现的F模式，并显示用户经常展示以下互动流程：

——用户首先读取水平移动，通常跨越内容区域的上部。这个初始元素构成了F的顶部栏。

——接下来，用户稍微向下移动页面，然后在第二个水平移动中读取，该移动通常覆盖比先前移动更短的区域。这个额外的元素形成了F的下栏。

——最后，用户以垂直移动扫描内容的左侧。有时这是一个相当缓慢和系统的扫描，在眼动追踪热图上显示为实心条纹。其他时候用户移动得更快，创建了一个spottier热图。最后一个元素构成了F的词干。

提高可扫描性的技巧

1.使用可视层次结构，对内容进行优先级排序

视觉层次结构是人类感知最自然的方式，也是在页面上排列和组织内容的方式。它背后的主要目标是让用户了解每个内容的重要性级别。因此，如果应用了可视层次结构，用户将首先看到关键内容。

例如，当我们在博客中看到这篇文章时，我们首先会得到标题，然后是副标题，然后才会内容块。这是否意味着副本块中的信息具有较低的重要性？嗯，不，但这样用户就可以扫描标题和副标题，以了解文章是否对他们有用和有趣，而不是尝试阅读所有文本。如果标题和副标题正确的告知用户文章的结构和内容，用户可能阅读全文。另一方面，如果用户看到很多一大长串没有分块的文本，他们将会非常害怕，无法理解阅读本文需要多长时间，以及是否值得投入时间和精力。

有几个主要因素有助于建立视觉层次结构：

尺寸

颜色

对比

接近

负空间

重复

所有这些都有助于设计人员将元素，链接，图像和副本集转换为页面布局。

2.将核心导航放入网站标题中

所有提到的眼睛扫描模式显示，无论特定用户遵循哪一个，扫描过程将从网页的顶部水平区域开始。

另一方面，标题不应该重载：太多的信息使得无法聚焦。将所有内容放入页面顶部会引起混乱。因此，在每个特定情况下，必须分析核心目标受众的目标，他们如何与网站背后的业务目标交叉，并以此为基础 - 哪些信息或导航应该作为最重要的标题。例如，如果它是一个大型电子商务网站，搜索功能必须立即可见。对于小型企业网站而言，搜索功能根本不需要，但是直接看到的产品信息将是至关重要的。

3.保持负空间的平衡

负空间 - 或者通常称为空白区域 - 是布局的空白区域，不仅在布局中的对象周围，而且在它们之间和内部。负空间是页面或屏幕上所有对象的一种呼吸空间。它定义了对象的界限，根据格式塔原则在它们之间创造了必要的联系，并建立了有效的视觉表现。在网站和移动应用的UI设计中，负空间是高导航性的重要因素：没有足够的空气，布局元素没有被正确看到，因此用户可能会错过他们真正需要的东西。这可能是眼睛和大脑紧张的一个强有力的原因。

4.检查是否立即看到CTA

显然，绝大多数网页都针对用户必须完成的特定操作。包含号召性用语（CTA）的元素（通常是按钮）应在几秒钟内显示，以便用户了解他们可以在此页面上执行的操作。好的测试包括在黑白和模糊模式下检查页面。如果在这两种情况下都可以快速区分CTA元素，那么它们就能很好地完成。例如，在下面显示的面包店网站的网页上，可以很容易地在其他元素中看到将项目添加到列表中的CTA按钮。

5.测试复制内容的可读性

可读性定义了人们阅读单词，短语和副本的容易程度。可读性衡量用户如何快速直观地区分特定字体中的字母。应仔细考虑这些特性，特别是对于填充了大量文本的界面。背景颜色，复制块周围的空间量，字距调整，，字体类型和字体配对 - 所有这些因素都会影响快速扫描文本和捕获令用户留下的内容的能力。为了防止这个问题，设计人员必须检查是否遵循排版法则以及所选字体是否支持一般的视觉层次和可读性。用户测试将有助于检查用户能够快速轻松地感知文本。

6.使用数字，不要用词语

这条建议是基于尼尔森诺曼博客的另一项调查。他们分享了一个重要的发现：眼动追踪研究表明，在扫描网页的过程中，数字通常会阻止用户徘徊并吸引注意力，甚至嵌入大量可以忽略而无数字的单词中。我们潜意识地将数字与事实，统计数据，大小和距离相关联 - 这些数据可能是有用的。因此，数字包括在复制捕获读者的注意力中，而代表数字的单词可能在大量复制中被遗漏。更重要的是，数字比文本数字更紧凑，因此它使内容更简洁，更省时。