amazon new nav

【译】去除全局导航:不要盲目跟风

摘要:对于桌面网站来说,把主要内容分列在下拉菜单中会让用户难以发现你的网站所提供的内容。

从传统来讲,全局导航应当出现在网站的每一页上,这样做有两个原因:

  1. 用户不论处于网站什么页面都能方便地在顶级分类中快速切换。

  2. 确保用户甚至在没有看到主页的时候都能得知网站大概提供哪些内容。

最近,一些网站开始把全局导航放到下拉菜单中。例如:英国零售商WHSmith网站,就将商店中商品分类放置在一个下拉列表中,代替直白的可见全局导航。

Image

WHSmith网站的全局导航被包含在一个“商品分类”的下拉列表中,而不是直接列出产品分类。

使用下拉列表作为全局导航,确实会让头部设计更容易–不需要担心怎样将这么多的链接在一排中列出来。但是代价是什么呢?用户在使用全局导航功能之前,需要完成额外的步骤。

很容易理解为什么设计师们开始采取这种激进的违背标准的全局导航的做法,如果你考虑到最近其它两个趋势:mega menus(鼠标划过时,会出现下拉菜单的jQuery插件)和移动端优化的导航。

下拉菜单给桌面用户显示更多更深内容

在过去5年中,大量网站开始使用megamenus。megamenus是包含多个链接层级的下拉菜单,它可以帮助用户预先了解上下文中更深层级内容。在很多案例中,它们代替笨拙的需要用户有高超的运动技巧的“层级”菜单。在多数地方,组织良好的megamenus清晰的栏目标题对用户和设计师都有好处:用户能快速浏览大量链接,设计师能轻松应对内容的改变。(下拉菜单能被调整大小,而不影响页面下面的设计,企业有了很好的灵活性,可以重新分类,而不需要对整个网站进行大的改版。)

举例来说,用户可能是通过点击谷歌搜索的广告到达Office Depot网站上平板电脑的页面。他们可能不会访问主页,但是也能很轻松从全局导航知道该网站还售卖纸张、家具和学习用品。

Image [2] Office Depot桌面网站有全局导航,会在网站每个页面展示主要产品类目,而且会提供大的megamenus来展示次级内容。

移动端优化的导航很省屏幕空间

megamenus在如今桌面设计中很常见,但是为移动用户设计现在也变得非常重要,因为移动端流量在持续增长。移动设备的显示器成了主要的设计约束,往往不可能在一个水平栏中直接展示所有的顶级分类;而且巨大的megamenus对小触摸屏用户并不适用。为了避免这些问题,许多设计师使用响应式设计技术,当网站被移动设备访问时,最小化全局导航,只展示一个可以到达全局导航菜单的按钮。

例如,Office Depot移动端页面保留了产品详情页的主要内容,只展示一个很小的图标来触达全局导航。虽然移动图标的设计标准仍然在演进中,有经验的移动用户也能够识别出“三道杠”图标表示打开菜单。

Image [3] Office Depot移动端页面通过右上角菜单按钮来打开全局导航(现在很流行的“汉堡”图标)。

移动设计影响了桌面设计

单独说来,这两种设计趋势意义非凡,它们在原始的情景中能很好完成任务:适用于桌面用户的megamenus,适用于移动用户的最小化的全局导航。

但是最近一些网站–特别是电子商务零售商网站,甚至一些国际化设计师–合并了这两种趋势,创建了一种新的可能存在风险的导航设计。新方案将网站顶级目录隐藏在下拉列表中,而不是作为全局导航栏直接展示出来。

亚马逊是第一个尝试这一技术的网站:在此之前很多年中都在持续调整他们的全局导航以适应日益增加的产品数量,他们最终将整个产品列表放到了一个巨大的下拉菜单中。曾经用来陈列主要商品类目的全局导航栏,现在变成了打开下拉菜单的链接。

Image [4] 亚马逊不再将商品类目直接展示出来,用户需要激活下拉菜单“商品分类”,才能看到产品分类目录。

亚马逊因测试新设计确保它们不会消极影响销量而闻名,但是这种模式适用于亚马逊不等于它适用于其它网站。很少企业享有亚马逊一样的压倒性的品牌渗透力,而且就算是家喻户晓的品牌也不能保证它们所有用户都对网站提供内容规模了如指掌。在亚马逊的案例中,这不是问题–它什么都卖(这也是为什么让它把商品类别放到单一导航栏很难的原因)。但是其他企业可能产品要少得多,就需要告知访问者它们提供商品的范围。

另一个让这种方案对亚马逊有用的原因在于它们有很多其他导航元素来帮助用户发现内容。举例来说,商品详情页在全局下拉菜单的下面,提供了一个水平的导航菜单,列出了本页商品相关联的类目。

Image [5] 亚马逊的商品详情页没有直接展示全局导航,但是他们在搜索框的下面展示了相关联的商品类目。(上图所示,用户在电脑类目下,导航栏显示了不同的次级数码产品分类。)

对于只有少量的全局分类的网站来说,将它们隐藏在下拉菜单中并没有什么意义。就拿T-Mobile来说,它把所有服务性内容和设备放到名为SHOP的下拉列表中。但是整个SHOP菜单只有5个链接,这些内容在一个水平的导航栏中很容易展示。但该网站并没有将这些分类以全局导航的方式直接展示,直接访问较深层级页面用户可能很难找到售后服务的入口。

Image [6] Tmobile的网站中,关于手机售后服务内容隐藏在“Shop”下拉菜单中。

在WHSmith网站中,把所有12个商品类目在全局导航菜单中直接展示可能有困难,但是将它们放到一个下拉菜单中并非最好的解决方案。对于大多数网站,解释网站提供内容的工作很重要,不能简单交给一个二级菜单来完成;访问者可能只大概知道该网站是卖书的,很多人都没有发现原来这个网站还卖电子产品和玩具。

隐藏全局导航的真正的代价在我们访问更深层级页面如商品详情页时,会更加明显。用户很有可能直接访问了这些深层页面,而不是通过主页访问。页面的内容可能并没有完全命中用户需求,如果有全局导航,用户能够浏览这些层级信息,了解还有哪些内容可以访问。一旦这种层级被隐藏,浏览网站将会变得困难。

Image [7]

WHSmith网站的产品详情页没有说明它是一个书商。页面提供的网站卖什么唯一可见线索就是本页所提供的商品。

隐藏全局导航安全么?

要将全局导航放到下拉菜单中的诱惑是可以理解的:它使得未来调整目录结构更加简单,同时你的设计也不会被导航栏打乱。再加上,这是让你的设计适应多设备的最简单有效的办法。虽然全局导航很难设计,很难维护,多数网站仍然应该讲顶层分类内容直接给用户展示出来。这是用户了解网站内容最简单有效的方法。

当然,任何规则都有例外。在很少的案例中,更具弹性的可调整的全局导航的重要性可能超过了疏远用户的风险。这可能对不需要帮用户定位的企业网站有用,因为:

  • 绝大多数用户已注册或者都是频繁访问用户

  • 用户只是用搜索或者关联链接来浏览网站

要决定隐藏全局导航是否适合你的桌面网站,我们建议先收集和分析数据来了解用户如何与全局导航交互。可以使用类似网站用户体验综合分析的方法。

  1. 点击追踪

你可以使用点击追踪工具(例如:CrazyEggClicktale或者页面分析工具Google Analytics了解网站关键点如首页、着陆页、目标页的全局导航点击有多少。(这取决于你的网站目的,目标页可能是一个包含产品介绍的页面,一个服务介绍页面,一篇文章等等)

了解从这些目标页进入网站的用户全局导航的点击很重要(换言之,用户通过外部链接直接访问你的网站内部页)。直接访问网站深层页面的用户没有了解过首页内容,这些用户需要帮助来了解网站范围。如果他们不知道你还提供什么内容,他们很可能就直接离开你的网站。

  1. session观察

使用如Clicktale的工具查看记录的session,了解实际用户如何导航。他们使用全局导航了么?或者他们仅仅关注局部导航,关联链接,或者其他导航组件?

隐藏全局导航产生了消极结果?

如果你已经将全局导航最小化,有些数据你需要关注来确定这么做是不是有问题:

1)目标页的跳失率

对比改变前后目标页面的跳失率来确定全局导航的缺失是不是使用户更少动力来逛和浏览网站。

2)点击追踪

新的菜单链接的点击率:多少用户真的点击了新的链接或者是图标,浏览了网站的第一层级?菜单的低点击率表明这么做是有问题的,但是只有伴随网站高蹦失率的情况下,才说明用户仅仅看了进入时页面然后就退出了。这意味着全局导航的缺失导致可发现性降低。

3)订单量(电商网站)

最小化的全局导航是否降低了平均订单量?对于电商网站来说,这是一个至关重要的信息。如果缺少对更多商品的发现使得订单量下降,那么隐藏的全局导航就是灾难性的。

4)定性的反馈

在目标页使用调查反馈工具(例如:Usabilla LiveQualaroo),看看用户有没有特别抱怨缺乏可选内容。对于类目内容过少或者特定主题下内容太少的投诉可能意味着内容的可发现性受到了牵连。

结论

如同其它网页设计趋势一样,结合考虑你的用户,他们的使用模式和你的目标,确定最小化的全局导航是否适用于你的网站很重要。简单地在桌面环境中模仿移动设计不适合所有网站。在明确目的下使用这种设计模式,同时牢记使用绩效衡量帮助你决定它能否真的让用户和你的企业受益。

相了解更多内容,可以参加我们全天的训练课程新兴的网页设计模式了解如何适度使用基于用户研究的新设计思维,也可以看看导航设计课程了解现今有哪些导航技术。

原文地址:http://www.nngroup.com/articles/killing-global-navigation-one-trend-avoid/

Read More