UI设计最佳做法，以提高可扫描性

本文概述

• 什么是可扫描性？
• UI设计最佳做法, 以提高可扫描性
• 可扫描性的重要性

产品设计师通常会在短时间内交流很多信息。那些了解”可扫描性”, 常见的眼动追踪模式和现代设计原理的人会更好地创建容易消耗的内容和”粘性UI”。

互联网每天都在通过新的应用程序, 网站, 文章等扩展。要吸引信息过多的用户的注意力变得越来越困难, 他们发现很难从不相关的内容中过滤相关信息。市场营销专家David Zheng发现, 在超过60％的情况下, 访问者在不到15秒的时间内放弃并离开了网站。

研究表明, 用户实际上并没有逐字阅读所看到的所有内容, 而是会扫描并确定材料是否值得他们花费时间。通过使适当的内容可立即进行扫描, 产品设计人员可以将短期访问者转变为长期用户。以下是精选的UI设计最佳实践, 以帮助扩大经常被忽略的可用性设计的重要因素：可扫描性。

不可扫描, 混乱且不直观的布局与可扫描, 干净且组织良好的界面之间的完美对比。 (由Jamilin＆Slack撰写)

什么是可扫描性？

Nielsen Norman Group的UX专家进行了研究, 以回答以下问题：人们如何在网络上阅读？他的发现很简单。他们没有。

该小组发现, 只有16％的网站首次访问者可能会逐字阅读该网站。另外84％的人会在决定更深入地研究素材之前迅速扫描钩子元素, 例如标题, 句子, 图像或动画。这种行为不仅限于数字接口。例如, 人们很少阅读报纸上的每个字。相反, 他们扫描相同的元素(标题, 图像等)来确定什么是值得的。

因此, 可扫描性是对内容进行布局以使其易于扫描的方法。通常, 只有很短的时间才能在屏幕上给访客留下有价值的内容, 这对于完全优化用户阅读网络界面至关重要。无论数字产品是网站, 应用程序还是其他类型的用户界面, 可扫描性都是用户友好设计的最重要因素之一。

可扫描界面的好处

确定数字产品可扫描性的理想方法是从用户的角度观察它并回答以下关键问题：

1. 页面内容是否符合观众的期望？
2. 页面的主要信息在短时间内是否易于理解？

尽管可扫描的界面需要花很多力气, 但从长远来看, 它会通过创建粘性UI设计而获得回报。 Nielsen Norman Group的研究表明, 针对可扫描性进行了优化的页面在以下方面变得更加有效：

• 用户具有更快的任务完成时间
• 用户可以轻松定义内容是否适合他们
• 用户在回忆中犯的错误更少
• 用户可以更好地了解页面的结构
• 网站在信誉和内容质量上获得了更优惠的主观评分
• 跳出率降低
• 回访的可能性增加
• 搜索引擎优化(SEO)得到改善

Airbnb的登录页面具有可扫描内容的许多优点, 使用户可以轻松理解满足其需求的主要消息。

扫描模式中用户习惯的力量

每个人使用内容的方式都不同。但是, 通过研究, 出现了明确的眼动追踪模式。了解用户在最初几秒钟内如何与界面交互可以帮助设计人员确定内容的优先级, 将重要信息放置在主要的可见区域中, 并建立牢固的视觉层次。

眼动追踪研究会产生热图, 然后将其转化为独特的眼动追踪模式。它们指示用户最多查看内容布局的哪些区域。 (尼尔森·诺曼集团提供)

根据尼尔森·诺曼组织(Nielsen Norman Group)的说法, 用户扫描界面有以下7种常见模式：

• 著名的F模式：发现后十二年, 即使在扫描移动界面时, 该模式仍然是最常见的扫描模式。眼睛在水平方向上移动, 这是阅读时的典型现象, 然后跳到下面的内容。可以通过热点热图缓慢而系统地或快速地完成此操作。
• Z模式：之字形模型是典型的网页形式, 具有统一的信息表示方式和较弱的视觉层次。
• 分层蛋糕模式：用户在扫描标题和子标题时会遵循此模式, 以快速确定在页面上何处(以及是否可以找到)他们想要的信息。
• 斑点图案：广告素材通常遵循此扫描模型, 在该模型中, 他们跳过大量文本并扫描视觉组件(例如颜色, 形状和比例异常)以查找特定信息。
• 标记模式：就像舞者固定在对象上以在旋转时保持平衡一样, 用户在滚动时将视线集中在一个位置上-这是移动UX的一种非常常见的模式。
• 绕过模式：当列表中的多行文本都以相同的单词开头时, 用户有意跳过一行的第一个单词。
• 承诺模式：这是一种罕见的模式, 仅当用户对内容高度感兴趣并有动机使用所有内容时才会发生。

用户采用的模式将主要与访问网页的动机有关：他们正在寻找什么类型的信息？他们愿意花多少时间找到它？还有其他网站可以更快地提供此信息吗？

通过用户研究和扫描模式创造价值

创造了”以用户为中心的设计”一词的认知科学研究员唐纳德·诺曼博士(Dr. Donald Norman)写道：”仅凭功能性, 可理解性和实用性来构建产品是不够的, 我们还需要打造带来喜悦和兴奋的产品。 , 乐趣和乐趣, 是的, 人们生活的美丽。”

用户研究是以用户为中心的设计和UI设计最佳实践的基石。随后, 为了提高数字接口的可扫描性, 设计人员必须了解最终用户。从最终用户的角度设计UI模式时, 会发生自然而直观的体验。

有影响力的解决方案不是由抽象构成的。以下是一组美观, 可行和可持续的数字产品。每个设计团队都定义了主要受众, 使用了眼动追踪模式, 并设计了内容布局以产生粘性UI。

Instacart基于用户研究和Spotted Scanning Pattern设计了他们的Web布局设计。

Instacart通过其UI设计模式来利用以用户为中心的设计。他们的听众中有很大一部分是由视力障碍的老年人和用户组成的, 因此这些项目以高对比度的网格列出, 并明确强调了主要的CTA。该设计允许使用”斑点图案”扫描模式来容纳长期访问者。

Yelp根据F扫描模式向用户显示信息。

Yelp为搜索绝对最佳餐厅, 购物, 夜生活, 美食等的用户提供服务。人们很可能会根据自己的个人标准和深入研究来评估评论, 从而使F Pattern成为最适用的扫描模型。因此, Yelp以易于扫描的方式呈现内容, 并着重于特定元素, 例如等级, 图像和地址。

通过遵循”标记扫描模式”并制作可扫描的内容, Airbnb与用户进行了清晰的沟通。

Airbnb可以说是目前最受欢迎的应用程序之一, 这在很大程度上要归功于他们对用户的研究。因为他们知道他们的用户经常在移动设备上, 所以他们设计以适应标记模式。布局简洁直观, 以强调大型的全尺寸公寓图像。他们有意将每个屏幕的封面图像数量限制为两个, 以便用户可以适当地投入时间并查看列表是否吸引眼球。

当放置增强可扫描性的UI设计元素时, Airbnb会考虑使用设备。 (由爱彼迎发布)

改善数字产品的可扫描性时要牢记的一个因素是定义将在其上查看产品的设备类型。 Airbnb的移动平台吸引了大量流量。从拇指使用的热图可以看出, Airbnb在滚动和扫描时易于访问的位置上, 战略性地将最常用的UI元素(例如” Explore”和” Saved Searchs”)放置在易于访问的位置。

UI设计最佳做法, 以提高可扫描性

创建适当的视觉层次结构

数字界面的视觉层次结构是指UI设计元素的排列和表示, 以传达重要程度, 以便用户可以快速扫描所需的信息。设计具有适当视觉层次的布局时, 有几个因素：

• 尺寸
• 颜色
• 对比
• 接近
• 对准
• 负空间
• 重复

通过在创建UI布局设计时考虑这些UI设计模式, 设计人员将确保最终产品具有美观, 和谐且直观的可扫描布局。

Google的搜索结果页面使用了许多视觉层次结构原则。 (由Google提供)

Google的搜索结果页使用所有视觉层次结构因素来提高可扫描性。通过使用颜色, 大小以及随后的对比度来强调标题。每个标题周围的负空格会导致它成为用户要扫描的第一件事。

当用户找到相关的标题时, 他们可能会检查链接的可信度-由于颜色和邻近性而易于识别的元素。接下来, 为了更好地评估结果, 他们将深入研究颜色, 大小和接近度一致的内容副本。除了这些因素之外, 重复和对齐还使Google搜索结果通常易于扫描。

利用负空间

杰出的克劳德·德彪西(Claude Debussy)曾经说过：”音乐就是音符之间的空隙。”对于可扫描性也是如此, 元素之间的负空间是使布局成功的原因。 UI元素周围适当数量的负(白色)空间使焦点集中在元素本身上。它强调内容并提供必要的呼吸空间, 以确保布局不会混乱。如果没有呼吸空间, 人脑就不太可能扫描兴趣点, 并且更容易混淆。

使用负号可以更容易地扫描一段简单的文本, 而负号很少的段落会变得混乱和混乱。 (图片来自UX Planet)

使用子标题汇总内容

人们通常会对大量文本产生负面反应。如果该段落与他们的兴趣不符, 就会触发这样的假设：他们会浪费时间。 UI设计最佳实践为该问题提供了解决方案。通过在长篇文章的开头添加简短的副标题, 用户可以最终了解该主题。

在编写子标题时, 至关重要的是保持其正确性。只需传达以下内容所提供的关键信息即可。

创建项目符号和编号列表

人脑非常系统化-观察内容, 然后将其分组为有意义的单位。因此, 与合并到文本段落中的几个点相比, 用户更可能理解项目符号列表或编号列表。

列表创建的负数空间使用户更易于扫描, 因此仔细寻找机会是有益的。如果一个文本中有两个以上的点彼此平行, 并且每个点只需要两个以上的句子即可描述, 那么这是一个很适合的列表。尼尔森·诺曼集团(Nielsen Norman Group)在创建项目符号数字内容方面提供了更深入的了解。

可视化内容

现代数字用户具有自然的视觉效果, 并不总是能够很好地响应文本内容(即使其结构完美且遵循了所有UI设计技巧以实现理想的可扫描性)。外部环境将永远是一个因素。因此, 为了抵消大量文本的布局, 图像和图形的使用提供了内容丰富且令人着迷的视觉效果。俗话说, 一张图片值得一千个字！

原始的视觉效果(插图, 引人入胜的照片等)可以轻松吸引用户的注意力并支持一般的样式概念。而且, 它们可以改善视觉层次, 并使文本更易于理解。但是, 如果使用不当, 可能会导致图形产生反效果。在将关键思想转换为图形之前, 至关重要的一点是, 设计师必须完全了解他们正在设计的内容。

Apple提供了一个出色的示例, 使用可视化来改善界面的可扫描性和可视层次结构。

在CTA上设置适当的重点

大多数数字体验旨在引起用户的特定操作。尽管号召性用语(CTA)按钮通常看起来非常简单, 但它们的战略设计是为了帮助用户完成操作, 例如购买, 添加到购物篮或只是转到另一个页面。

UI设计最佳做法建议将CTA定位在描述操作的内容附近, 以使其对用户直观。测试CTA是否正确分配, 着色和定位的有效方法是将最终设计临时转换为灰度。如果CTA仍然清晰可见并得到强调, 则粘性UI会做得很好。

优步通过使用具有大量负空间的高对比度CTA来实现他们的”轻按按钮。

可扫描性的重要性

有很多因素可以确定用户是否会很好地接受UI布局设计, 例如内容相关性, 竞争对手解决方案和业务逻辑。据《福布斯》报道, 可扫描性可能是内容营销中最被忽略的因素。通过创建可扫描的内容, 短期访问者可以成为长期用户。

可扫描的内容向最终用户证明了他们的时间很有价值, 并提供了通过简单地浏览布局设计即可了解核心信息的机会。病毒博客和新闻学教授金·凯勒(Kim Keller)向设计师指出, “你正在与想要成为客户的人进行对话。这是一种关系, 如果你不一起度过时光, 任何关系都无法生存。尊重他们的时间, 并使之值得。”

• • •

在srcmini设计博客上进一步阅读：

• UI设计最佳做法和常见错误
• 空状态-用户体验最被忽视的方面
• 简单是关键–探索最小的Web设计
• 移动接口的启发式原理
• 为可读性而设计– Web排版指南