网站导航设计

网站导航设计
网站导航设计

《Designing Web Navigation 网站导航设计》P1-10

07年年底翻译过《Designing Web Navigation 网站导航设计》P1-10,已做废稿,大家凑活着看吧…

英文原稿见最后。

网站导航简介

全新的百科全书将出现,互相联系的轨迹网络贯穿其中,信息随时可以被放入机器“Memex”而得到扩展。

—范内瓦·布什《诚如所思》

本章内容

-导航的定义

-网站导航概况

-导航的作用

-导航设计和设计前景

在塑造我们的网站体验上,导航发挥了重要作用。它提供了获取信息的方式,增强了认知度,反映了品牌,并赋予了网站的整体可靠性。最终,网站导航和获取信息的能力,对于利益相关的使用者有经济上的影响。

导航设计是一个不仅限于选择整排按钮的任务。它非常广泛,同时微妙无比。导航设计师协调用户目标和业务目标,这需要领会每一方面,并深刻了解信息组织、页面设计和设计说明。本章为网站导航描绘了一个广阔的背景,以帮助你更好地理解它的目的,以及其潜在范围的重要性。

就导航而言

当网站导航好用时,它平淡无奇。当它根本未被注意时,导航是最好的。这就像一场体育比赛的裁判员一样。在比赛中裁判可能会做很多的决定,而你甚至不知道他的存在。但如果有一个误判时,裁判员就会突然成为成千上万起哄观众的关注焦点。

图1-1展示了BBC国际站上的一篇新闻。这是我们在网络上经常不期而遇的一种

页面。在导航上它没有什么特别有趣的地方。当你需要它时,它就在那里;当你不需要它时,它也不碍事。但这个页面说明了导航的一些典型特点。

乍一看网页时,你的焦点在哪里如果你不是在寻找一个具体的话题,你的眼球就可能会在网页上游荡。你也许第一次看到左上角的网站徽标,或者看到文章的标题。可能那张图片吸引了你的注意力。但是你可能没有注意到在新闻标题上面的链接“e-Mail this to a Friend”,或是右上角的搜索输入框。如果你正在寻找这些功能,不管怎样,你会轻松地发现它们。

不知不觉中,为了帮助你理解网页的导航和内容,你完成了一个方案。即使你看过所有文字,你已经创造了这个网页将如何聚集在你心里的意识图像:这里是主要观点,那里是文章的正文,底下是更多的选择。人们快速而自动地做此规划。

为了匹配他们信息需求中的文字,人们也快速地扫描网页。如果你正在寻找当地的天气预报,你已经快速地发现这是不适当的网页。但是你可能看到了在网页最上方有天气的选项。点击此项,你估计会到达气象网站。基于此原因,标签和文本的导航是至关重要的。

更重要的是,标签的组织和归类,也传达了如何定位有价值的信息。比如,在网页左边的头七个选项告知了关于这篇新闻文章的地理组织。又比如,在图1-1

中右部“climate change—In depth”的下方,链接集让你清楚地知道如何找到关于此话题的更多信息。

总体而言,各种各样的元素聚集在一起创造了导航系统。然而访客可能会察觉这个系统作为整体而言,我们可以剖析它的单个组件。例如,在网页头部中心位置(以“Home”开始)的标签被称为主导航。在新闻内部,地方导航被左部的垂直菜单所代表,这表明了你身在何处(突出了“Science/Mature”)以及你可以去哪里,比如关于非洲的文章或者商业新闻组。

这是一个好导航系统吗答案是基本上良好。你必须考虑各种因素,从业务目标到用户目标。但是,也有一些良好导航的通用原则让我们可以用来评估导航的质量。举例来说,在BBC网页上的导航是平衡的、一致的,并且对您身在何处提供了清晰的说明。总体而言,它合乎BBC这种类型的网站,并且使人们尽可能正确地找到他们想去的地方——这是衡量导航设计是否成功的最重要因素。

定义网站导航

让我们想想链接——互联网最基本的组成部分。链接在网页上是文本或图片,链到另一个网页或者一个单独页面的其他地方。它们让联系从一个想法跳跃到下一个想法——这是个强有力的概念。多亏了链接,当你读了一个关于中国外交政

策的故事,你就能接着跳到关于中国人口详细信息的网页。但是,链接不仅仅联接一个又一个的网页,它们还展示了重要性。链接展示了相关性。

网站导航是指三个方面:

1. 人们如何从互联网的一个页面跳到另一个页面的理论和实践。

2. 有目的的寻找和定位超文本信息的过程;对网络的浏览。

3. 在与既定的网站交互时,提供对网页的访问并帮助人们定位的所有链接、标签和其它元素。#1

网站导航的设计是关于链接的设计。它约定了你的站点上网页和内容的重要性以及关联性。这需要在网页信息之间建立富有意义的关系时进行判断。综合起来,导航的元素不仅决定了你是否能找到人们正在寻找的信息,还决定了你如何体验那些信息。

导航的需求

导航的批评者认为,它应该从所有网站上被淘汰掉。作为其中的一位,作家、交互设计的倡导者,艾伦·库珀,认为导航是不必要的。他写道:

“建立在互联网初期的朴实网站,必然只能以简单的HTML标记来编写,并被迫将它们的功能和内容分割到一个独立网页的迷宫中(一个网络)。这使导航方案成为任何网站设计不可缺少的部分;当然,一个清晰的、美轮美奂的导航方案,总比一个隐晦或者隐蔽的方案好。但许多网站设计师由此错误地推断出,用户需要导航方案。实际上,如果根本没有导航,用户才会高兴呢。”

接着他提倡了互联网上的一个不同范例:

“熟练的Web开发人员会使用新式的浏览器和站点构建工具,比如ActiveX和JavaScript,借此创造更易用的单屏交互,而不需要跳转一个又一个的页面。然后很多网站设计师持续不断地把他们的站点分割成许多断裂的页面。这些对屏幕的分层排列迫使他们把导航负担强加于他们的用户。”#2

诚然,人们特别不希望在网络浏览中遭遇迷路的危险。他们来到一个网站,是为了获取答案,或完成一项任务。这样,网站导航可视为达到目的的一种手段。但是此举是否必然是有害的呢如果导航不好玩,为什么强加给人们这个负担,就可能会潜在地混淆他们呢

很难想象一个网站,没有在我们已经渐渐习惯的网络上所熟悉的导航。更好地理解导航的需求,也许有助于考虑网站导航潜在拥有的不同功能。

网站导航

提供对信息的访问

展示网站中的位置

展示网站“相关性”

反映品牌

影响网站信誉

影响利润

#1 连接互联网上独立的站点无疑是重要的,但是本书的重点是设计网站内部的导航系统。

#2 艾伦·库珀,“导航不好玩”,库珀交互设计刊物(2001年10月)

针对上述各点,更详细的说明如下。

导航提供对信息的访问

有时这很难不言自明。当然,网站导航提供了对信息的访问。妇孺皆知;每天我们为信息而浏览互联网。然而,可替代的浏览方式仍然存在。考虑一些如何从你的站点上访问信息的可能的替代模式:

内容链接唯一模式

想象一系列的网页相互链接,没有特别的层级组织或模式。所有的链接都嵌入在文本之中。它们不是孤立的,被用来充当导航方案,同时没有传统的首页概念。该网站正好是一个大网站的相关信息。在概念上,它可能看起来像图1-2。

你可能会辩称这将在文件之间提供强有力的关系。在页面上的一个链接项或短语与目标页面上的内容有紧密的联系。但总体来看,这种模式的可寻性很低。人们将不可能在搜索信息中感觉到开始或结束,定位将非常困难。此外,访问时间将会更长。你不得不扫描整个文本以理解所有相关的内容。这肯定不是获取信息的最有效方式。

液态信息模式

这与内容链接模式类似,但不存在任何联系。相反,每一个字对于所有文本来说都是交互的。在文本和超文本之间,或者内容和导航之间没有区别。所有的文本都是链接,所有的链接都是文本。图1-3 描绘了这一模式。从某一页上的一个单词,任何数量的引导至新内容页的导航行为都是可能的。

英国伦敦大学交互中心(uclic,)主办的一个研究项目,探索使所有在线文本交互的可能性——与个体的单词无限交互。代替超文本,研究人员把这称为超词汇。基本思路是,当一个单词被点击时,一个选择菜单出现(如图1-4所示)。

然后你可以进行搜索,链接到相关文档,定义检索词,翻译等等。他们认为,这个目标就是要“结束链接的暴政”。这也将意味着导航设计的结束。

#3 液体信息项目见,hyperwords见。

过滤器模型

试想通过一个单一的网页访问一个网站的所有内容。这个页面包含了过滤和排序的控制器,以便每次展示不同的大块内容。这肯定将是高效的。搜集中的文件清单通过每次交互而萎缩或扩张。点击清单中的一个个体项目将揭示它的文本和图像。图1-5表明了这一概念。对某一页的单独控制将导向新内容,但内容在同一页面展现。运动因此是循环的:你从没有离开此页面,只是不断更新它的内容罢了。

这一模式表明了一个潜在的有效获取信息的途径,它类似于艾伦·库珀在本章节开始建议的模式。但对于导航或浏览,体验会差别很大。第一次的访客将不能很好地了解登载于此网站的内容类型。用户可能很难知道什么时候一次搜索将结束:可能你进行过滤和排序一整天,才得出新的内容清单。书签和普遍的可达性也变得复杂。

这种模式的效果实例,可见于IBM研究员开发的实验界面,以用来浏览美国作曲家飞利浦·格拉斯的作品。如图1-6所示,格拉斯引擎在一个独立页面内,通过不同的层面过滤了飞利浦·格拉斯的作品。每一个作品的标题和简短描述别展示在页面的中心,请听,《爱因斯坦在沙滩上》。

搜索模式

在访问此模型时,对于内部文件,没有任何导航或链接。相反,网站的访客只能按照关键字进行信息的搜索。用户在输入框中键入一或两个关键词,然后点击搜索按钮。这将产生他们可以访问的网页列表。对于个别的内容页面,唯一的选择是返回列表,或者进行新的搜索。图1-7表明了从左到右的这三个步骤。

搜索肯定是一个获取内容的有效方式。在互联网上,我们始终在搜索。但是只有当被查找的项目能事先知道时,关键词搜索才是有效的。它假设人们能够准确而完整地将自己的信息需求表达为一次查询。然而,这并非总是如此。

结构浏览模式

在这个模型中,只有一组在此网站提供信息访问的链接,它们也许在每个页面的一边。在布局上,这个区域从视觉上脱离了页面的内容。你可以通过点击导航选

项的层级,以进行每次的页面内容刷新,如图1-8所示。为了获取此网站另一领域的页面,你不得不回溯导航树并回落另一导航分支。没有嵌入式链接文本,没有搜索功能。和内容链接唯一模式相比,它可以从任何页面以任何方向建立联系。

均衡导航

讨论这些太纯粹的模式都是故意而片面的。一般说来,每个网站都具有混合模式,其中包括结构导航、内容链接、搜索和过滤机制。每一个模式都支持一个潜在的不同方式的查询。因此,针对互联网信息的导航工具已经多样化了。总之,网站导航系统提供有效而均衡的访问。

在现实中,网络导航可能看上去更像图1-9的描述,不同类型的访问被融合在一起。导航设计是为了创造一个信息访问系统。正是这个系统导致了网站导航的用户体验。

更重要的是,导航可以是一个更吸引人的信息体验,而不仅仅是一个关键词搜索。例如,可用性专家Jared Spool和他的同事们发现,在使用导航时,人们更倾向于继续购物,而不是做了一次直接的关键词搜索之后。

“因此,用户为了一个目的来到网站,并且他们尽最大努力去实现这一目的。问题是:当他们完成目的后,发生了什么我们该如何让他们找到有价值的内容,而他们不知道在哪里

那么,我们最近的研究发现了一些令人吃惊的统计数字。很明显,引导目标内容的方式影响了你是否会继续寻找。

在最近的一项针对30个用户的研究中,我们发现,如果用户在网站上使用搜索来定位他们的目标内容,当他们找到目标内容之后,只有20%的人继续寻找其他内容。

但是如果用户使用分类链接以找到自己的目标,62%的人会继续浏览网站。使用分类链接开始的用户,在结束查找前所无目的浏览的内容网页,几乎是使用搜索开始的用户的10倍。”#4

当人们浏览一个网站时,人们似乎会了解其他可用的内容。对于电子商务网站,这可能等于更多的销售;对于一个非赢利性组织,它可能导致更多的支持;对于一个医疗资讯网站,它可以提供对疾病的深入了解或治愈。换句话说,即导航系统如何提供对更重要信息的访问。

人们比较喜欢信息按顺序排列。他们喜欢浏览。导航提供了一个人们可以在互联网上追随的故事。它讲了一个故事——你的网站的故事。在这方面,有一些关于网站导航的即熟悉又令人鼓舞的事情。在网络上对访问内容进行导航,这个普遍而看似自然的方法,已作为一个叙事手段而展示它的力量。

导航展示位置

导航并不只是从一个网页转到另一个网页;它还是定位。有时,人们需要知道他们在一个网站的哪个地方。80年代针对超文本的研究表明——定位信息帮助人们浏览。许多人指出了在网站定位方面的三个基本需求。在浏览一个网站时,用户通常需要知道:

我是谁

这里是什么

从这里我可以去哪里

地点往往是在一个导航菜单中高亮显示的当前项,或是通过一个面包屑轨迹展示的路径。有些网站甚至用注释“你在这里”做出定位标记。

除了定位以外,在网站里了解你的位置还有其他含义:

对某一网页的理解可以改善——或者甚至要求——理解与其他页面的关系。当从一个站点结构中的次级页面进入网站,而不是通过首页时,这特别普遍,例如透过外部的搜索结果。或者说,导航并非只是你身在何处,还关乎内容的意义。导航根据页面标题和其它元素,帮助建立内容的前后关系。

在网站结构中,网页被视为更深而不是可能更精确。知道你在网站中多深,能对于你所遇到信息的间隔度和详细度给出提示。自然期望是网站中的高级页面实际上更普遍,当你在结构中移动远些时,细节才会展露出来。

知道你在网站中什么地方,暗示了搜索信息的详尽性。位置可以显示你是否可以继续寻找。那么,当搜索信息时,网站导航潜在地提供了一种闭合感。

例如,图1-10显示了欧洲开放大学的网站对学生提供财务支持的网页。要进入这个网页,你要做几次点击:成为一名学生 > 财务支持 > 居住在欧洲的学生。这个页面相对较深的位置表明,网站上没有关于这个主题的更多内容;如果要寻找更多信息,你必须拨打电话或者向提供的邮件地址发信。此外,居住在欧洲的学生可以独自查阅到更多的事情。知道这是属于“财务支持”的目录,给了它一个明确的含义。

#4 Jared spool, “分类链接后的用户延续”(2001年12月)

《Designing Web Navigation 网站导航设计》P1-10原稿:

相关主题
相关文档
最新文档