创意与设计

用户体验检查表系列:导航设计

如果你把笔记本放在桌子上然后走开,你希望当你回来的时候它还在原来的地方。当你走进客厅的时候,你希望你的沙发还在原来的位置。类似地,当我们访问一个网站时,我们期望某些元素,例如导航条,在不同的网站上是一致的。

根据Jakob定律

用户把大部分时间花在其他网站上。这意味着用户喜欢你的网站以和他们已经知道的其他网站一样的方式工作。

如果用户因为混乱或不清晰的导航而无法找到他们想要的东西,那么无论一个网站多么“漂亮”或多么创新,你都需要一个新的解决方案。如果用户找不到他们需要的东西,他们会很快离开你的网站,去寻找一个更友好的替代网站。一个设计良好的导航条可以帮助新用户和老用户了解他们在你的网站上的位置,以及如何快速和容易地到达他们需要的地方。

根据CrazyEgg

一个网站的导航结构应该允许用户在三次点击中找到他们需要的东西。

在Seer,当我们进行用户体验审计时,我们经常标记混乱的导航条——它们会给用户带来摩擦和困惑。然而,如果你有大量的内容,这并不意味着你需要更少的页面在你的网站。

如果你有几十个页面,他们应该分类和优先级的基础上神奇数字七,正负二.短期记忆一次能记住大约7个项目,正负两项。因此,如果用户将鼠标悬停在导航上的下拉菜单上,上面有15个条目,那么他们很可能就会因为一些他们根本不想看的内容而过度饱和,他们就会离开你的网站去别处满足自己的需求。

一个好的导航应该:

  1. 增加列出的每个页面的点击次数
  2. 增加有机交通
  3. 给你的网站更多的可信度

你如何确保你完成了这三个?继续读下去!


类型的导航

虽然导航条涵盖了各种形状和大小,但为了保持用户的一致性,我们建议使用通用的导航结构,或结构的组合,为您的网站。

  • 前/主要标题:这种格式是首选导航的理想格式,因为用户会直观地首先查看这里。

图像03

  • 子导航:通常,这是主导航下的链接的次要列表。通常,子导航看起来不如主导航突出,以避免淹没用户。

图像01

  • 侧边导航栏:这是一个垂直结构,沿着页面的左侧或右侧运行,并支持滚动。侧边导航通常出现在移动网站上,但也可以与桌面的主导航一起使用。

图片05

  • 面包屑路径:这些链接通常用“大于”符号(>)或“正斜杠”符号(/)分隔,通常用在以分层方式组织的网站中。

图像04

对于内容较多的网站,这些导航结构可以结合使用(建议使用不超过三层的导航),前提是要保持结构层次,尽量减少视觉混乱。

导航在移动

37亿人通过移动设备访问互联网,所以如果你的网站没有针对移动用户进行优化,你就会失去大量的用户。

而隐藏或下拉菜单几乎可以将曝光度减半在桌面上,手机上的导航通常是通过汉堡包菜单来访问的,因为许多手机屏幕在纵向模式下只有720-828像素宽。

图像02

手机上的汉堡菜单(左),手机上的扩展汉堡菜单(右)

导航标签应该清晰、易于阅读,并且应该足够大,便于点击(了解更多关于链接和按钮大小的信息,请查看)UX清单系列:按钮设计).

构建你的导航

我们的目标总是在过于复杂和过于简单之间找到最佳平衡点。如何做到这一点?首先,你的导航应该是有意设计的-除了厨房的水槽,所有的东西都应该生活在你的主导航中。

神奇数字七,正负二是一种心理学理论,可以追溯到20世纪50年代,但至今仍然适用。我们的短期记忆通常包含7个条目,正负2个。

因此,您需要确保在主导航中只链接最重要的业务页面,否则可能会让用户感到困惑。

你可以把这个理论和系列位置效应,即一个人经常只记得一系列内容的开头和结尾。

为了增加一些额外的视觉冲击力,导航条可能会在屏幕的最右侧有一个CTA,如“现在购物”、“注册”等,作为强调按钮。这是一个很好的策略,可以用来突出用户可能采取的最重要的行动。

signupbar

此外,避免使用“文章”或“资源”这样的通用词,因为它们缺乏用户可能正在搜索的上下文。例如,一家宠物店可能会提供“照顾你的新宠物”的链接,而不是一个笼统的“资源”类别。

下一个步骤

底线是:导航布局和设计应该是有意识的。

无论是在台式机还是手机上,导航栏都是用户首先看到的东西之一,也是他们在你的网站上寻找内容的首选。它应该包含你最重要的内容-补充链接可以在子导航栏或网站的其他地方。

如果你现在访问你的网站,你能在三次点击中找到目标用户的需求吗?


注册我们的通讯,以获得更多这样的帖子-直接发送到您的收件箱!