bts防弹少年团演唱会

bts防弹少年团演唱会

4种使用可视层次结构来改善用户体验和促进转换的方法

《4种使用可视层次结构来改善用户体验和促进转换的方法》

技术和消费者偏好正在迅速发展(似乎按小时计算)。 在这个快节奏变化的动荡世界中,我们常常忘记感官知觉和人类心理学的核心原则保持不变。

其中一个功能是我们如何查看和处理视觉信息,特别是视觉层次结构。

人类是视觉生物。

虽然在广泛分享的信息图和“内容营销”帖子中,我们处理图像的速度比文本快60,000倍, %E4%BD%86%E5%AE%9E%E9%99%85%E4%B8%8A%E5%B9%B6%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E7%9C%9F%E5%AE%9E%E6%80%A7%EF%BC%8C”>

因此,我们可以相当肯定地说,视觉效果会影响消费者在没有意识到的情况下做出的瞬间购买决策。

因此,营销人员必须了解他们如何在他们的网站或应用程序中使用视觉层次结构,以在销售漏斗的各个阶段利用%E5%86%B2%E5%8A%A8%E7%9A%84%E6%B6%88%E8%B4%B9%E8%80%85%E5%8F%8D%E5%BA%94“>

什么是Visual Hierarchy? 可视化层次结构定义

首先, %E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E7%9A%84%E8%A7%86%E8%A7%89%E5%B1%82%E6%AC%A1%E7%BB%93%E6%9E%84%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F”>

从本质上讲,它是页面布局的方式,用于直观地传达内容的顺序和重要性。 通过映射某些线索(例如大小,颜色,对比度,形状,定位和排列)来创建视觉层次结构,以形成深度感。

我们每天都体验到视觉层次。 为了给你一个简单的日常例子,想一想当你滚动浏览Facebook的蓝白界面时,最常出现的是什么? 充满活力的红色通知指示当然!

《4种使用可视层次结构来改善用户体验和促进转换的方法》

虽然视觉层次是网站和产品设计的关键原则,但概念本身并不难理解。 但要做到恰到好处,很可能需要一些试验和错误。

以下是如何结合神经学线索,在您的平台上创建强烈的视觉层次感……

1.建立定义的扫描模式

无论文化背景如何,每个人通常都会从上往下消费内容,而大多数人从左到右阅读。 重要的是要意识到访问者很少会致力于阅读网站上的每个单词。 %E7%94%A8%E6%88%B7%E9%80%9A%E5%B8%B8%E5%B0%BD%E5%8F%AF%E8%83%BD%E5%BF%AB%E5%9C%B0

2014年,Chartbeat着名地发现,平均而言,你在线阅读的%E6%97%B6%E9%97%B4%E7%BA%A6%E4%B8%BA15%E7%A7%92“>

“我们长期以来一直使用点击作为在线阅读内容的标准,因此值得广告客户购买。 真正值得衡量的是注意力 – 注意力是时间的函数。“

我们经常讨论一百万种“抓住”读者注意力的方法。 但我们有什么可靠的“保持”方式吗? %E5%B0%BC%E5%B0%94%E6%A3%AE%E8%AF%BA%E6%9B%BC%E9%9B%86%E5%9B%A2%E8%BF%9B%E8%A1%8C%E7%9A%84%E4%B8%80%E9%A1%B9%E7%A0%94%E7%A9%B6

对于文本较多的页面(如博客文章)或具有一致图像块的页面(例如产品列表),扫描行为始终以F模式发生。

看看这个跨电子商务网站,文章和(统一)搜索结果的眼睛流量热图:

您会注意到页面的左侧比右侧更受青睐。 虽然这项研究是针对讲英语的受访者进行的,但对于那些语言从右到左阅读的人来说,情况恰恰相反。 它基本上模仿了人类自古以来所接受的阅读模式。

多年来,随着移动应用程序的普及以及移动网页浏览,内容格式的变化,CTA的创新使用以及搜索引擎结果显示的全面转变, Neil” patel>图案“不再是一种共性了。”

另一方面,Z模式适用于更多面向视觉的页面,例如广告。

当内容未在块段落中呈现时,通常会发生此扫描习惯。 读者的自然倾向是从页面顶部开始,向相反的角落拍摄以获取更多信息,然后沿对角线向下以从左侧开始下一个块,然后重复。

如何将此概念融入您的网站或产品中以改善用户体验并获得转换?

网页设计师通常会围绕这些神经行为明确地制作网页。 由于两种模式都以相同的方式开始,因此将最重要的信息放在左上角是明智的选择。 查看领先的电子商务网站的主页。 这是亚马逊:

《4种使用可视层次结构来改善用户体验和促进转换的方法》

这是Etsy:

《4种使用可视层次结构来改善用户体验和促进转换的方法》

您会注意到徽标通常位于页面的左上角。 另一方面,有注册/登录选项。 然后,当眼睛走到中间时,游客会被引导去看产品。 终点通常需要CTA才能采取进一步行动。

利用这些神经学倾向和扫描模式,您不仅可以帮助您吸引用户探索您的平台,还可以有效地指导他们的潜意识决策过程沿着销售漏斗进行转换。

作为一个数据驱动的营销人员,我们知道您可以使用许多工具来发现您网站的特定查看模式。

这些包括用于%E7%9C%BC%E7%9D%9B%E8%B7%9F%E8%B8%AA“>

《4种使用可视层次结构来改善用户体验和促进转换的方法》

此外,应%E5%9C%A8%E5%8F%97%E6%8E%A7%E5%AE%9E%E9%AA%8C%E4%B8%AD%E6%B5%8B%E8%AF%95%E8%BF%99%E4%BA%9B%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%A7%81%E8%A7%A3%E5%92%8C%E5%AE%9A%E6%80%A7%E7%BB%93%E6%9E%9C%E3%80%82″>

2.试验白色空间

白色空间可能是视觉层次结构方案中最容易被忽视的设计组件。

信不信由你,使用白色空间在电子商务网页设计中具有独特的视觉意义。 基本思想是,元素周围的空白越多,它就会吸引越多的注意力。

就神经学影响而言,战略性地实施这一概念有许多优点……

1.白色空间改善焦点

无可否认,今天的用户以强烈的%E7%B4%A7%E8%BF%AB%E6%84%9F%E6%B5%8F%E8%A7%88%E7%BD%91%E9%A1%B5%E5%86%85%E5%AE%B9%E3%80%82″>

人类的大脑有两种推理系统: %E6%97%A0%E6%84%8F%E8%AF%86%E7%9A%84%E6%80%9D%E7%BB%B4%E8%BF%87%E7%A8%8B“>

《4种使用可视层次结构来改善用户体验和促进转换的方法》
决策过程中的双重过程理论( %E5%9B%BE%E5%83%8F%E6%BA%90“>

由于我们只有几秒钟的时间来吸引访问者的注意力,因此使用空格是快速让他们注意网站重要部分的好方法。 这可以包括标题,图片,CTA按钮或指向有价值内容的链接。

Apple通过明确区分信息(了解更多)和交易(购买)途径,利用空白来分割其产品页面的流量,同时满足有意识和无意识的思维过程:

《4种使用可视层次结构来改善用户体验和促进转换的方法》

2.白色空间削减了杂乱

当你看到它时,你会知道%E6%B7%B7%E4%B9%B1“>

它使访客超负荷并成群结队地驱赶他们。 顺便问一下,你有没有见过%E2%80%9C%E4%B8%96%E7%95%8C%E4%B8%8A%E6%9C%80%E7%B3%9F%E7%B3%95%E7%9A%84%E7%BD%91%E7%AB%99%E2%80%9D“>

《4种使用可视层次结构来改善用户体验和促进转换的方法》

当有%E5%A4%AA%E5%A4%9A%E8%A6%81%E7%B4%A0%E5%BC%95%E8%B5%B7%E6%B3%A8%E6%84%8F%E6%97%B6%EF%BC%8C%E8%BF%99%E5%B0%B1%E6%98%AF%E5%AE%83%E7%9A%84%E6%A0%B7%E5%AD%90%E3%80%82″>

《4种使用可视层次结构来改善用户体验和促进转换的方法》

如果您的网站看起来像是在90年代设计的,那么消费者可以轻松得出如下结论:a)您不再经营业务; b)您的网站不会保证其有价值的信息安全。 两者%E9%83%BD%E4%BC%9A%E8%AE%A9%E6%82%A8%E5%A4%B1%E5%8E%BB%E4%BF%A1%E8%AA%89%E5%B9%B6%E5%B0%86

更重要的是,过时的网站通常不会在搜索排名中表现出色。 Google每年会更新其搜索算法数百次,并重视用户体验,而不是大多数其他排名因素。

没有多少人知道Google经常进行%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E7%A0%94%E7%A9%B6%E4%BB%A5%E6%94%B9%E8%BF%9B%E4%BB%96%E4%BB%AC%E8%87%AA%E5%B7%B1%E7%9A%84%E4%BA%A7%E5%93%81%E3%80%82″>

在频谱的另一侧, %E4%B8%80%E9%A1%B9%E7%BB%8F%E5%B8%B8%E8%A2%AB%E5%BC%95%E7%94%A8%E7%9A%84%E7%A0%94%E7%A9%B6%E5%8F%91%E7%8E%B0%EF%BC%8C%E6%88%98%E7%95%A5%E6%80%A7%E5%9C%B0%E5%AE%9A%E4%BD%8D%E7%99%BD%E8%89%B2%E7%A9%BA%E9%97%B4%E5%8F%AF%E4%BB%A5%E5%B0%86%E7%90%86%E8%A7%A3%E5%8A%9B%E6%8F%90%E9%AB%98%E5%A4%9A%E8%BE%BE20%EF%BC%85%E3%80%82″>

3.白色空间创造平衡

为您的网站建立流程在很大程度上取决于您在%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%92%8C%E5%8F%AF%E7%94%A8%E6%80%A7%E6%96%B9%E9%9D%A2%E5%BD%A2%E6%88%90%E5%B9%B3%E8%A1%A1%E7%9A%84%E8%83%BD%E5%8A%9B%E3%80%82″>

索尼提供了如何在布局中使用空白区域的非凡示例:

《4种使用可视层次结构来改善用户体验和促进转换的方法》

当访问者登陆电子商务平台时,他们希望尽快看到产品的内容。 索尼使用尺寸和空白来创建导航地图,引导用户选择他们喜欢的产品。 您将看到任何时候都没有信息过载,深入分类是一个简单,直观的过程。

将白色空间视为将网站的整个视觉层次结构整合在一起的迫击炮。 在一天结束时,其主要目的是为人类记忆和注意力的边界服务,以实现顺畅的用户体验流程。

3.使用重复

重复已经一次又一次证明有效地对人类大脑产生了强烈的印象。 正如伊丽莎白·赫尔穆斯·马古利斯(Elizabeth Hellmuth Margulis) %E5%9C%A8TED%E6%BC%94%E8%AE%B2%E4%B8%AD%E8%AF%A6%E7%BB%86%E6%8F%8F%E8%BF%B0%E7%9A%84%E9%82%A3%E6%A0%B7“>

[…]“/>

这种现象得到了社会理论中所谓的%E2%80%9C%E7%86%9F%E6%82%89%E5%8E%9F%E5%88%99%E2%80%9D%E5%92%8C%E5%BF%83%E7%90%86%E5%AD%A6%E4%B8%AD%E7%9A%84

重复对人们产生如此强大影响的原因是因为它增加了我们的“处理流畅性”。换句话说,重复的效果对于我们的思想来说更容易吸收。

在20世纪60年代后期,心理学家罗伯特·扎洪克(Robert Zajonc)进行了一项关于“仅仅暴露的态度效应”的研究 .Zajonc将两组受试者暴露于一系列中国符号和表意文字中。 第一组对图像进行了五次曝光。 第二组只给了一个。 在两组中,曝光持续大约5毫秒(太快而无法有意识地处理)。

接下来,Zajonc展示了一系列更大的图像,包括新的符号和表意文字。 这些是以前的补充。 这一次,受试者能够查看图像一整秒(足够的时间来有意识地处理)。 然后,他们被问到他们每个人都喜欢多少。

事实证明,接受过五次短暂潜意识曝光的受试者比那些只看过一次的受试者更喜欢他们。 总体而言,具有更多曝光度的群体通常将图像评为%E6%9B%B4%E5%8F%AF%E7%88%B1” zajonc>

“重复体验本质上是令人愉快的。 它增强了我们的情绪,这种乐趣溢出到附近的任何地方。“

创造一个%E4%BB%A4%E4%BA%BA%E6%84%89%E5%BF%AB%E7%9A%84%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E6%B5%81%E7%A8%8B%E5%B0%B1%E6%98%AF%E8%A6%81

虽然重复是一个基本方面,但它的用途范围从简单到复杂。 在您的网站或应用程序上使用重复的一些显而易见的地方是字体,配色方案,线条粗细,形状等。在建立主题时,重复是通过空间强调和统一来保持一致性的重要因素。

网页设计中重复的首要目标是%E7%A1%AE%E4%BF%9D%E4%BF%A1%E6%81%AF%E7%9A%84%E4%B8%80%E8%87%B4%E6%80%A7%E3%80%82“>

在视觉层次方面,重复是帮助展示相对重要性的好方法。 回到Apple的主页:

《4种使用可视层次结构来改善用户体验和促进转换的方法》

主要焦点显然是全新的特别版红色iPhone 7。

在此之下,您将看到Apple推出的所有其他产品的其他产品,以相同尺寸的矩形排列。 通过重复平台上的某些组件,您可以为访问者提供视觉提示,以便他们了解内容并了​​解所有内容是如何组合在一起的。

最终,当品牌内容更容易消费时,客户的决策过程会加速。

如果贾斯汀比伯可以使用重复销售数百万条记录,为什么不能用它来推动网站转换?!

《4种使用可视层次结构来改善用户体验和促进转换的方法》
重复使音乐和用户体验成为热门( %E5%9B%BE%E5%83%8F%E6%BA%90“>

4.创建流程,然后打破它

一旦扫描模式和流程牢固建立,视觉层次结构中的有效技术就是中断当前的现状。

例如,打破你在布局中创建的重复将不可避免地阻止用户进入他们的轨道并获得新的关注。 但是,谨慎使用这种方法很重要。 过于频繁地破坏网站流量会使您的平台看起来草率而且没有重点。

人眼被(并且将永远) %E5%90%B8%E5%BC%95%E5%88%B0%E8%BF%90%E5%8A%A8%E4%B8%AD“>

《4种使用可视层次结构来改善用户体验和促进转换的方法》

看看%E6%8F%92%E7%94%BB%E5%AE%B6Miki” mottes> :

首先,这个网页看起来很有吸引力。 动画中的细微变化对于吸引访客来说非常重要。 但是,你的眼睛不可避免地会回到商业部分,这个部分位于中间。

警告:如果你的动画过于华丽,它可以a)是购物者看到的唯一东西,b)分散他们的购物体验。 如果它是一个自动播放视频,上帝禁止!

《4种使用可视层次结构来改善用户体验和促进转换的方法》

如果正确且有策略地应用,流量中断可以增强用户体验。

打破网站当前流量的方法有很多种; 不断增长的网页设计趋势是使用照片 – 视频混合或“cinemagraphs”。这包括主要由静态元素或照片组成的视频,偶尔重复移动单个元素。 在邦迪邦迪(Bundy Bundy)看看模特的眼睛如何微微移动看着你:

《4种使用可视层次结构来改善用户体验和促进转换的方法》

为了视觉层次结构,在您的网页设计中使用这种“干扰”最终可以帮助防止购物者的注意力徘徊(并且去你不想要的地方),并将其引导到CTA提示。

小心不要过火; 这种技术有点像通配符。 一如既往,亲自测试一下。

结论

在网站和产品设计中,您不能浪费任何时间来吸引和留住注意力。 视觉元素必须远远超过艺术装饰。 它们需要在战略上(并且实际上)放置以创建动作驱动的可用性流。

将神经系统触发器的视觉层次结合在一起,对于沟通您的业务目标和网站的整体功能至关重要。 你不这么认为吗?

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注