设计师制作导航结构来帮助人们浏览网站,但是良好的结构和功能是不够的。导航不仅应该显示你可以去哪里,还应该显示你现在在哪里。网站上的每一个页面都可能是访问者看到的第一页,所以传达足够的背景信息是很重要的,这样人们就可以立即向他们的目标前进。

城市人行道上的独立地图柱的照片
从网络搜索中浏览网页有点像在一个陌生城市的任意地点下车。好的标识是必不可少的。照片通过RK摄影
在鞋类和零食之间有一张商店地图,上面有标记“你在这里”的照片
固定的地图,通常放置在购物区走道的显著位置,通过使用你在这里的标记显示他们的当前位置来引导人们。照片通过英国女

访客并不总是走前门

在一个搜索引擎可以把你的网站访问者带到任何地方的世界里,重要的是要表明用户在信息空间中的位置,这样他们才能从那里成功导航。甚至当访问者通过主页到达时,他们在浏览网站时也可能需要定向。

指示牌让人们放心,他们正在朝着他们所需要的方向前进。就像在火车站一样,网络定位指示器可能是颜色编码、照明、标志、箭头、路径和地标名称的组合。当人们感到困惑、担心或迷失时,各种迹象和信号往往会帮助他们对如何继续下去更有信心。

让访问者一眼就能看出网站和页面主题。在网络上,你在这里的信号通常是通过改变导航条、图标或菜单的外观来实现的。这种导航信号通过面包屑和标题来增强。购物结帐及申请手续(向导)往往也使用步骤名称和数字。

典型的你在这里机制

  • 商标和品牌:呈现一个标志表明内容的所有权。标识应该与主页相链接。其他品牌,如商标、调色板和签名字体可能用于触发对组织已建立的信誉的识别。通常情况下,这种努力集中在网站的左上角,这是最有可能在屏幕上的第一个角落,无论设备大小。
  • 导航的变化当用户选择该主题时,与导航相关的链接或图形元素(标签、按钮、标签等)在视觉上变得更加突出。通常这种突出性是通过突出颜色或在空间中抵消元素来实现的,或者两者都是(为了更好的易用性)。
  • 标题左对齐的标题帮助从左到右的语言读者快速扫描有意义的单词。可以同时显示多个级别的标题,以显示更多的上下文和路径信息。
  • 窗口(页面)标题HTML标题出现在每个窗口或选项卡的顶部,在搜索引擎结果、RSS提要、新闻聚合器、书签和历史列表中。描述性的、独特的标题有助于表明所有权、信息组织和页面的特定内容。
  • URL:精心挑选的、人类可读的网址对于共享、信誉、识别和回忆都很重要。页面的网址可以用来显示一些信息架构,以帮助上下文化内容。
  • 面包屑:在链接的路径中公开信息层次结构。与url一样,面包屑结构可以帮助以一种更易于探索的方式公开附近的内容。
  • 上下文线索:日期、标签、图标和其他符号和符号可以用于将信息放在正确的上下文中,包括时间和站点的信息体系结构。
  • 视觉设计的变化:颜色编码,品牌的变化,和其他可见的差异可以表明地点的变化。颜色编码(主要的颜色根据网站的不同部分而变化)通常出现在内容类型明显不同的网站中。例如,杂志、新闻网站和许多组织使用颜色和品牌变化来区分功能、部门和产品系列。
  • 步骤:签出步骤或其他顺序任务流通常在进度指示器上命名和编号。这些步骤指示器通常水平运行在应用程序页面上方,或者以左侧垂直列表的形式出现。它们显示了整个步骤的顺序以及您现在所处的步骤,以帮助您正确设置期望。
截图:BBC科技新闻,屏幕左上方有四个位置指示器。
BBC新闻通过(1)标志和品牌,(2)导航条改变,(3)标题和(4)上下文线索来提示你所处的位置。页面标题和URL包括文章标题和网站名称。
截屏:麻省理工学院公开课课程的必读书目。位置指示器出现在内容的第一屏,在典型的左上角页面区域。
麻省理工学院的开放式课程网站有很好的位置指示器:(1)品牌,(2)导航条变化,(3)面包屑,(4)标题,页面标题和URL,但它忽略了重要的,可见的,时间上下文。

页面标题和url也有助于显示信息背景和位置:

麻省理工学院的页面标题:阅读|技术传播导论:科技写作探索|比较媒体研究/写作|麻省理工学院开放式课程(它有点长,但非常描述性和关键词丰富。)

麻省理工学院的网址:http://ocw.mit.edu/courses/comparative-media-studies-writing/21w-732-5-introduction-to-technical-communication-explorations-in-scientific-and-technical-writing-fall-2006/readings/

在开放课程中,教科书的出版日期(1995-2003)暗示了页面的年份,但只有URL提供了关于课程年份(2006)的有意提示。最好在页面上显示可见的日期或日期范围,这样随着时间的推移而存在的信息就可以在其所在时代的背景下被理解。页脚中的版权(整个网站)显示2001-2015年,但对于技术或科学内容来说,这个范围太宽了。

“位置”显示在黑色水平导航条上的红色矩形中。按钮包括“查找库!”和“我附近的图书馆”。下面是图书馆的街道地址。
纽约公共图书馆网站的导航栏将当前页面的类别名称从黑色改为红色。页面上的彩色按钮具有指示页面用途的信息标签,并立即显示示例内容。标识品牌加上这些信号形成了一个连贯的指示,表明你在图书馆的数字领域的位置。
欧洲航天局的网站使用了两个导航条、面包屑、两个标题和醒目的品牌,将照片放在其基于时间和空间的图像集合中。
在较深的网站信息结构的较低层次上,很难有效地显示导航栏的变化。这就是面包屑拯救世界的地方。欧洲航天局在这两个领域都有很强的信号。(不过,2014年的照片被归类为2015年的照片,这有点令人困惑——可能是因为它的发布日期。)

测试有效的位置信令

许多网页设计使用的位置指示器太过微妙,无法很好地沟通。设计师注意到他们设计的一切,并拥有一个公司心智模型网站的结构。他们知道如何在网站上走动,他们不需要定向,所以他们很难像其他人一样看到设计。另一方面,网站访问者可能是网站的新用户,或者他们可能不经常使用网站,所以那里的一切都是新颖的,可能是有趣的。出于这个原因,一个在设计师看来明显得让人分心的信号往往甚至不会被访问者注意到。人们很容易忽视细微的变化

什么时候测试

现有网站可以随时测试位置信令。

对于新的网页设计,当您的网站视觉设计处于高保真阶段时,最佳地完成位置方向的测试。在网站生活时显示预期存在的所有类型的分心的真实内容 - 尤其是任何广告,动画和照片 - 因为这些是设计元素最有可能影响人们关注的内容

如何测试位置信号的有效性

  1. 在你的网站的不同层次上向人们展示不同的页面,一次一个,而不是导航到他们。
  2. 比方说:“假装你刚刚到达这个网页。你在网站的哪个位置?”
  3. 如果他们给出了一个答案(对的或错的),问:“你怎么知道?”
  4. 如果他们说不确定,就问:“你希望在这里看到什么来帮助你知道自己在哪里?”
  5. 如果他们仍然不确定自己在哪里,就问:“你通常会做什么来找到答案?”
Telegraph.co.uk错误页面(404未找到)
避免进入导航死胡同。有时,一个URL不再有效,已经落到linkrot.那样的话,告诉人们他们试着将URL留在位置栏中。如果有人打错了,用户可以看到并修复它。对于其他人,提供有用的建议和网站导航因此,人们可以迅速调整自己的方向。错误页面道歉,建议重新检查页面地址,提供一个索引链接和完整的网站导航,并提供检查系统状态和联系方式。没有结果的搜索结果页面应该以非常类似的方式处理。

底线

只有测试与用户可以肯定地告诉你,但如果分析显示有很多人在游荡,pogo粘,您可能需要解决信息体系结构问题。视觉位置提示可能不够强烈或位置不佳;导航标签、标题和标题可能不够充分或误导;或者以上都有。

历史上的注意

有趣的是,关于用户“在超空间中迷失”的担忧导致了很多这是早期超文本系统中非常有创意但更复杂的解决方案在万维网之前。这些天,网络使用实用和最小的路标约定,浏览器提供了很好回来按钮,用户所依赖的把他们带回已知的领地。

相关的课程

信息架构导航设计