以用户为中心的设计

论“面包屑”的倒掉

作者:Angela  |   发布: (编辑)UCDChina_test   |   时间:2008-07-27 16:55:26 文字大小:- +

很久很久以前,在大森林的边上住着一个贫穷的樵夫,他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔,女儿名叫格莱特。后来樵夫的妻子去世了,他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里。在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说:“等月亮一出来,我们就看得见我撒在地上的面包屑了,它一定会指给我们回家的路。”但是当月亮升起来时,他们在地上却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。

这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始,汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上,然后迅速地撒遍了全世界,变成了今天大家所熟知的“面包屑导航”。

在童话里,面包屑是汉赛尔在进入森林的路中偷偷撒下的,这是一种“历史记录”的应用方式,目的是帮助你追溯来路,因而它应该是一种线性的导航方式。不过在网页的应用中,“追溯来路”这件事浏览器已经做得足够好了,所以“面包屑”慢慢地就变成用来表达内容归属关系的界面元素,也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的东东。

那么这种元素还具有导航作用吗?如果用于导航,它有什么问题吗?为什么我觉得它应该“倒(dǎo)掉”呢?

再回头看看所谓面包屑的来历和它采用的形式吧,它是汉赛尔沿路撒下的一个个“点”,然后连成的“线”,这在信息架构中称为“线性结构”。一对比就知道,撒到网站上的面包屑是有先天缺陷的,这个先天缺陷正是这个“线性”。用“线性”的方式去表达本应该是“树形”甚至是“矩阵形”的结构,就好像让三岁的小朋友做诗写文章一样,结果不是把小朋友逼疯就是把家长急疯。

可能有人会说,面包屑不仅仅是用来表示信息的层级关系,它还能给用户位置的指示,同时引导用户点击更高层次的页面。如果你这么说,那么恭喜你,你和可用性之父Jakob Nielson想得差不多(Breadcrumb Navigation Increasingly Useful)。在这篇文章里,Jakob认为面包屑还有点作用的主要原因,是因为它是一件做起来不太费力、占用面积很小、没有什么学习成本的事情。

但是所有的这些,都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。

如果网站信息太丰富、太复杂,有些内容不能明确划分到某个类别中,面包屑就会变成鸡肋。这方面的典型就是门户网站,比如说这个: 娱乐圈10大发嗲美女 ,很明显就是为了面包屑而面包屑。

如果你的网站信息内容属性不明确,大部分信息都同时属于多个类别,面包屑就会变成一个涉及到复杂判断和算法的技术问题。这种情况的代表就是电子商务、社区类网站(没找到例子,因为要实现太难了)。

如果你的网站结构够清晰,内容也够稳定,那么极有可能是企业或个人网站(比如UCDChina或你自己的博客)。而这样一个网站,不管规模大小,用主导航就能解决位置感的问题,也没有必要单独留出一行来放置面包屑。这方面做得比较好的例子是微软和苹果(这么大的公司都放弃面包屑了,还不能说明问题吗?),反面例子就可以看看这个: IBM Support & downloads - Documentation - United States ,面包屑没有帮助我找到想找的东西,反而让我更糊涂了。

不过,关于“打倒面包屑”这件事仍然有一个前提,那就是你的主导航要做得足够好。之前提到的IBM网站,最大的问题就是没有在主导航上标明当前位置(技术问题?设计问题?)。由于这个原因,不得不增加面包屑来表示层级关系。在面包屑的先天缺陷和主导航设计缺失的双重努力下,用户点击“Support & downloads”以后迅速丢失了上一个页面“Documentation”的位置(不信你在 这个页面上 试一下回去的难度)。在这个例子中,面包屑还不如URL本身来得清楚。

反过来再想,我们其实可以有这样一个大胆的推论:凡是出现面包屑的网站,基本上都是导航系统设计得比较差劲的。

一直我们都认为,改进措施≠做加法,设计是“越减越妙”的,面包屑就是应该第一个从导航设计中减掉的元素。我相信,随着技术的发展、信息架构和用户需求的多样化,面包屑最终会悄悄地退出历史舞台。

一些补充说明:

写本文的时候我偷了一下懒,结果完全没有预料到一个已经逐渐淡出视线的页面元素还会引起这么大的反应。可能我们需要首先定义一下什么是面包屑。

今天搜到维基百科上关于面包屑的定义,把Websites那部分解释一下就是这样:

面包屑通常水平地出现在页面顶部,一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径),在层级架构中通常是这个页面的父级页面。面包屑提供给用户回溯到网站首页或入口页面的一条快速路径,它们绝大部分看起来就像这样:首页→分类页→次级分类页

以下是英文摘录:
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:
Home page → Section page → Subsection page

首先我很抱歉,没有把这个概念说清楚,另外也佩服一下写维基百科的这些人,这组定义可谓滴水不漏。

另外再请大家注意一下该页面下方关于面包屑的Usability的说明:

一些专家不认同“路径型”的面包屑(以尼尔森为代表),因为它和浏览器的“后退”功能重复。
Some commentators disallow Path-style breadcrumbs because they duplicate functionality that properly subsists in the browser; namely, the ‘Back’ button and browsing history.

“位置型”的面包屑不适用于内容过于丰富、单个分类无法完整描述单元内容的网站。这在拥有强大的“搜索导航”网站上是常见的情况(比如Amazon)。
Location breadcrumbs are not necessarily appropriate for sites whose content is so rich that single categories do not fully describe a particular piece of content. This is a common situation in sites employing a search-base navigation paradigm (for example, Amazon). In general, wherever a strict hierarchy is not applicable, Location breadcrumbs are inappropriate.

另外还有一个关于面包屑使用情况的调查报告,发布时间是2003年。

当然,面包屑并不是一无是处: It’s good for SEO, since it’s provided links to other parts of the website。这就是为什么我搜索到与面包屑有关的中文网站基本上是讨论SEO的原因。

以上资料仅供大家参考,我只提醒两点:
1. 你在设计网站导航的时候,面包屑是经过论证才设计还是临时出于需要加上的?
2. 你或者你的同僚们期望增加面包屑的情况是越来越多还是越来越少?

更多
打印  |  相关话题:面包屑(Breadcrumb)   |  类别:信息和交互   |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买