菜单 关闭

中心标志伤害网站导航

通过 凯瑟琳·怀特顿7月10日,二千零一十六

总结:当标识放在页面的中心时,回到主页要比放在左上角时困难6倍。


传统上,网站显示徽标位于左上角每一页(对于使用从左到右语言的网站)。此设计模式manbetx官方网站手机版满足了良好Web用户体验的几个关键需求:

  1. 通信当前位置.在每一页上显示公司徽标,让访问者快速了解他们当前正在浏览的网站。告诉用户他们在哪里在网络上至关重要,点击一次就会把你传送到一个完全不同的组织的网站。
  2. 强化品牌.用户看到徽标的频率越高,他们越有可能记住品牌.(这是人类记忆的法则之一,正如我们研讨会上所解释的那样人类的思维和可用性.)更好的品牌认知度意味着人们更愿意使用你的服务和购买你的产品。所有其他事物都是平等的,人们更愿意相信他们认识的组织而不是他们从未听说过的组织。
  3. 允许轻松导航到主页.网站徽标应该始终是直接链接到主页的可点击元素。当遵循本指南时,用户可以通过返回主页轻松“重新开始”,不管他们在哪里。新的开始对大型信息网站很有帮助,用户可能会迷失方向。它也经常用于用户尝试几个不同任务的站点,因为人们在开始一项新的活动时常常想回到主页。(即使有用于切换任务的持久全局导航,用户通常还是选择先回家。)

徽标的左上角位置对于用户来说非常熟悉,偏离此模式可能会严重损害用户体验。例如,我们以前报告过右对齐的徽标会损害品牌召回,根据对比,当商标在左边时,用户回忆起品牌名称的可能性是多少。右拐角处。

中心标志和响应式网页设计manbetx官方网站手机版

如今,以中心为中心的徽标在网络上出现的频率更高,也许是因为越来越多的反应敏捷的以及“移动优先”设计。manbetx官方网站手机版移动设计通常使manbetx官方网站手机版用左上角来显示菜单图标,并将徽标移向屏幕中心。在小屏幕上,左上角和上中心位置之间的距离通常较小。

但当这种设计模式在大屏幕上使manbetx官方网站手机版用时,距离变得非常重要-如下面图书馆酒店的网站所示。(图书馆酒店网站实际上有一个完整的全球导航菜单的替代设计,manbetx官方网站手机版但只有当视窗宽度超过1024像素时才会显示。)

图书馆酒店主页的屏幕截图,在页面标题中居中显示徽标
图书馆酒店网站,1024x768像素,在页面中央显示了标识。在左上角有一个菜单图标(在这里,徽标将采用更标准的Web设计)。manbetx官方网站手机版

中心标志对导航成功的影响

在移动和桌面布局中,将徽标定位在页面的中心位置可能会方便设计师,manbetx官方网站手机版但这对用户体验有何影响?

找出答案,我们将站点与左对齐的徽标进行了比较,将站点与中心对齐的徽标进行了比较。

关于研究

要了解徽标放置如何影响将徽标用作导航元素,我们比较了14个不同的时尚零售网站:8个以中心为标志,6个以左对齐的标志。所有的标识都是指向主页的可点击链接,而且没有一个网站提供到主页的文本链接。

50名用户参与本研究;每个站点都与一个站点交互,完成了两项任务:

  1. 为朋友选择一个价值低于100美元的礼物,然后将其添加到购物车中。(此任务从主页开始。)
  2. 转到网站的主起始页。(此任务从他们碰巧结束任务1的页面开始。)

第一个任务是为我们的第二个任务设置阶段所需的,但对当前的研究不感兴趣。

我们用过用户缩放的clickstream tracking记录研究参与者采取的每一项行动。对于每个参与者,我们记录下来该参与者是否能够通过一次单击导航到网站的主页。

研究发现

我们的结果表明,在有左标志的网站上,与使用集中标识的网站相比,用户更容易一次点击就导航到家。(<0.05,卡方检验)。

比较两种情况下导航失败的情况,用户失败的可能性是6倍当网站徽标居中或左对齐时,只需单击一次即可导航到主页。

结果图表比较居中和左侧徽标的导航失败
对14家时尚零售网站的比较发现,当网站徽标左对齐时,用户更容易通过一次点击导航到主页-这是一个频繁的任务,对于那些迷失方向的用户来说至关重要。(较低的杆更好。)

如上所述,快速返回主页的能力对于迷失方向或只想切换到其他任务或主题的用户至关重要。即使全球导航显示在每一页上并列出网站的所有主要部分,许多用户在想重新开始时仍会通过反射“回家”。

在大多数标识居中的网站上,至少有些用户很难导航到主页。对这些用户行为的分析表明,徽标位置是问题的一个重要部分。例如,在如下所示的Koshka网站上,一些用户单击了最左边的导航链接(低于29美元)而不是商标。

单击koshka.com的地图,显示用户试图导航到主页时单击的位置。
此clickmap上的绿色突出显示显示用户试图导航到主页时单击的位置。因为Koshka标志是居中的,许多用户意外地单击了最左边的链接低于29美元 进入主页。

在某些情况下,用户最终还是进入了主页,但仅仅是在几次错误的开始和错误之后。将用户在左侧徽标站点和集中的徽标站点上所采取的步骤进行比较,可以说明这个过程是多么痛苦。

在Stella和Dot的网站上(有左对齐的标志)用户的点击路径清晰明了,如下图所示。本例中的所有五个用户都是从不同的页面开始的,但是他们都使用可点击的网站徽标,只需点击一下就可以到达主页。

点击路径显示进入stelladot.com主页所采取的步骤
在stelladot.com上,有左对齐的标志,所有用户只需单击徽标即可成功导航到主页。

然而,在标识居中的网站上,一些回家的点击路径要长得多。例如,在马德韦尔的网站上,一些用户立刻单击了居中的徽标,但一个可怜的灵魂在最后到达主页之前尝试了其他四个链接。

单击路径显示进入madewell.com主页的步骤
madewell.com有一个居中的徽标。大多数用户仍然单击徽标导航到主页,但是有一个用户在找到主页之前额外点击了4次。

根据这些观察结果,很明显,左对齐的徽标比居中的徽标更好,以支持用户导航到主页。请注意,本研究中的左侧标志站点仍然会导致一些主页导航错误(尽管远低于中心标志站点)。这是因为一些用户没有意识到徽标是可点击的,尤其是当标志跟随平面设计manbetx官方网站手机版审美。把商标放在左边很好,但更好的方法是提供左对齐的可单击徽标和实际链接.

集中标识和品牌召回

在另一项研究中,我们还测量了标志是否集中在页面上(而不是左上角)是否影响了用户记住品牌名称的可能性。

关于研究

在本研究中,我们研究了4个精品酒店网站;对于每个站点,我们比较了两个版本:一个带有左对齐的徽标,还有一个中心标志。

128名参与者完成了两类任务:

  1. 接触酒店网站主页:每个用户查看了5个不同的酒店网站主页,以随机顺序呈现。(除了这里报道的4个地点外,用户还看到一些网站右对齐徽标对于每个现场,随机向用户展示一个带有居中徽标的版本或一个带有左对齐徽标的版本,然后回答了他们对每家酒店的看法。
  2. 品牌识别辅助召回测试:查看所有网站并对其评级后,用户完成了一项记忆测试,其中显示了10家不同酒店的列表,并要求他们确定在研究的第一部分中查看过哪些酒店。

研究发现

不同于我们的研究涉及右对齐的标志,这项研究没有发现以中心为中心的标识会持续影响品牌的召回(这种影响没有统计学意义)。有些网站的商标最好是左对齐的,有些网站的商标是居中对齐的。

中心标志与左标志的辅助回忆实验结果
对4个不同酒店网站的辅助召回进行比较发现,对于中心标识,品牌召回没有显著减少。(更高的杆更好。)

其他因素(如对比度,衬垫,品牌名称的易读性)对品牌召回的影响大于页面中心位置对左上角位置的影响。例如,诺利坦酒店网站在标识后面有一个背景图片,这可能掩盖了标识位置的影响:主图像围绕中心轴具有很强的对称性,并创建了一条通向中心标识位置(即原始设计中的位置)的视觉路径。manbetx官方网站手机版

比较真实的Nolitan网站和带有左对齐徽标的修改版本
我们比较了真正的诺利坦酒店网站(右),它有一个中心标志,在左上角(左)显示徽标的更改版本。

在我们调查的其他3个酒店地点,带有左标志的品牌被召回的频率更高,但效果没有统计学意义。

结论

当我们比较两项关于网站上标识放置的研究结果时,我们看到以中心为中心的标识在某种程度上降低了网站的可用性,但比不上右对齐的标志。换言之,徽标应向左倾斜.我们推测,造成这种差异的原因是,左对齐的徽标是标准的,也是用户所期望的,所以设计越偏离标准,manbetx官方网站手机版用户体验越差。居中徽标的位置与预期位置的距离不如右对齐徽标的距离。要将这一发现推广到标志设计之外:manbetx官方网站手机版

  1. 当一个站点不能满足用户的期望.
  2. 设计越严重偏离用户期望,manbetx官方网站手机版损害越严重。

品牌化航行网站的关键功能是否足以避免对这些目标产生负面影响的任何事情?把你的标志放在你能确定用户会找到的地方,您的站点将从这个关键的设计特性中获得最大的价值。manbetx官方网站手机版