【译】八个大限将至的设计元素

原文地址:http://uxmag.com/articles/goodbye-to-8-design-elements-whose-time-has-come

by john McKinney

去年,几个我不太喜欢的设计元素和技术手段的丧钟被敲响。其中一些已经销声匿迹,一些正逐渐消亡,有一两个最近走到了它们的终点。从长远看,我觉得它们的消亡会让14年的体验设计更好。

1.下拉菜单

下拉菜单从互联网的诞生之日起就是用户界面的基础之一。数不清的网站仍然使用hover状态的下拉列表来作为主要导航的一部分,但是随着响应式设计、跨设备设计趋势的到来,下拉菜单将没有用武之地。

现有技术格局中,下拉菜单无法再没有hover状态的平台上完成功能(平板电脑或者是手机)。随和移动优先的运动日益壮大,以点击为基础的导航变得更流行,如“汉堡图标”将整个网站导航纳入一个可点击列表中。

2.轮播

轮播图是另一个古代界面遗迹(至少从互联网标准来说是这样),它在页面首屏以上特定区域展示多重特色元素。基于时间的循环的轮播正被逐步淘汰,特别是在支持基于宽度自适应内容模块的新闻网站中。这种趋势消亡也是因为手机和平版电脑用户的增加,在他们尝试“滑动”轮播图或者元素中间的导航却滑不动的时候,就很令人沮丧了。我们所熟知的轮播将会进化成基于滑动的画廊式界面和导航而不是基于时间规则。

3.IE9

感谢互联网之神!一些大的互联网公司终于开始加快淘汰老版本IE浏览器的速度。记住,仅仅在几年之前,我们还需要舍弃一些用户体验来确保兼容IE6。更糟的事,我们一直受迫好多好多年才逃出生天。快进到今朝,像谷歌和脸谱这样的大哥大都基于标准的改革,迫使微软要么做同样的事情,要么就被拉在后面。

老的“拥抱、扩展、消灭”哲学并没有在浏览器大战中起到作用。如果微软不能赶上chrome、火狐甚至safari漂亮的创新的步伐,IE会持续失去浏览器市场份额。在2013年11月,谷歌宣布停止支持IE9,这通常意味着其它用户体验社区也会步其后尘。这对未来很有帮助,因为体验是基于你最弱的一环,兼容老版本的IE使得你失去创新的能力。

4.拟物化

设计呆子们之间最火的话题,拟物化和平面化之争在去年吵得沸沸扬扬,而且在2014年也会继续下去。毫无疑问,苹果是拟物化最大的支持者,它的IOS设计和其它2013年前使用的移动系统版本都证明了这一点,然而谷歌却以多年来的扁平化设计赢得冠军。随着安卓市场引人注目的上涨–同时微软通过新的Surface和手机操作系统也搭上扁平化的列车–苹果已经做出了选择:要么坚持固有无趣的设计趋势(也许是不友好的界面),或者是拥抱新的设计趋势。随着IOS7发布,苹果选择了扁平,熄灭了拟物化最后的火种。

5.FLASH

虽然苹果很晚才加入扁平化的阵营,但是他们赢了Flash的战争。当苹果发布iPhone和iPad的时候就决定不支持Flash,因为这些平台的流量不容小觑,广大广告商、网站管理员、和开发者们都积极接纳了“HTML5”风尚。在2013年,flash广告开始衰败,更不用说纯flash网站了。很多我所知的Flash开发者都开始接触Adobe Edge,一款基于HTML5、CSS和JS的动画功能,希望能留住某些网页开发者的心,但是这一切在如今随处可见的优秀开源工具面前,显得太晚、太微不足道了。最初发布于2011年,在2012年又做出了一些重大更新,Abobe公司大力在推广Edge,虽然Flash任然可以使用和支持,但是开发者们已不再青睐它了。你也很难再找到一些主要网站仍在使用Flash组件了。

6.网页

网页仍然随处可见,但是它们正在经历一些重大变革。上面提到过的内容不再赘述,我们越快逃离折磨集体智慧的旧版IE,就能越早放弃独特的网站页面。这种趋势是设计和技术变革结合的产物,几年前就开始酝酿,现在开始彰显它的魅力。现在很多网页开始“应用化”,大多数都是那些既没必要也不愿意开发原生应用来迎合平板和手机用户的平台。如Quartz、Facebook、Google App都顺应了这个趋势,并在网上获得不错的反响。

Gawker media是这种方法的早期采用者,2011年就推出备受争议和短命的hashbang驱动体验。他们的网站借助当时新的HTML5标准PushState实现无页面化设计,该技术实现在不更新页面导航情况下,异步更新内容。Pitchfork.com是另一个尝试这种技术的网站,很好推广了如PJAX和TurboLinks等工具,后者后来成为Rails4的核心特性。随着实现障碍的降低,越来越多的网站开始尝试这种思路,可以预见会有大量网站接受这种方法,因为它更简洁、更快、成本更低。

7.共享主机

在我预言主机提供商们即将完蛋的时候,它们实际上还活得好好的,还有一些公司需要物理服务器(虽然未来可能只有Google和Amazon两个数据中心)。“共享主机”的概念除了大量迁移到云计算和平台的耗费外,一无是处。为什么非要每个月支付给GoDaddy20美元来买一个你啥都不能控制的主机,你完全可以花更少的代价得到你需要的带宽。为什么你要同其它你不知道的人共享你的服务,忍受你无法攻克的瓶颈?现在几乎所有的主机公司(GoDaddy、MediaTemple等)都有云或者其它虚拟服务器,以便于Heroku、Amazon网络服务器和Google应用引擎竞争。

8.“m.”网站

在响应式设计的普及之前,只有一种向平板和移动用户传递内容的办法:读初始请求,检查用户设备,然后重定位到该网站的移动版本。移动版网站有不同的代码库和完全不同的特性。发布者任何时候更新网站版本,都需要对两个版本做同样的事情,维护起来更复杂,开发成本更高。即便是如此,“m.”网站在响应式设计出现后仍然有存在的理由。比如,广告平台需要一段时间来调整成单一页面能够输出两套截然不同的广告。为了解决这个问题,广告商需要为每个页面的所有服务,渲染基于设备的移动或桌面广告。类似这种特殊问题很早以前就被广告平台解决,现在“响应式设计”早就成了日常术语,支持单一平台而不是两种展示样式的成本收益很明了。

Read More

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