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

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

访客并不总是走前门

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

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

可以轻松识别网站和页面主题一目了然。在网络上,你在这里的信号通常是通过改变导航条、图标或菜单的外观来实现的。这种导航信号通过面包屑和标题来增强。购物结帐及申请手续(向导)往往也使用步骤名称和数字。

典型的你在这里机制

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

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

测试有效的位置信令

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

什么时候测试

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

对于新的网页设计,定位测试最好是在你的网站视觉设计处于高保真阶段时进行。展示真实的内容,所有类型的干扰,预计存在时,网站是活的-特别是任何广告,动画,和照片-因为这些是设计元素最有可能影响人们关注的内容

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

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

底线

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

历史上的注意

有趣的是,对用户成为“缺陷空间”的关注导致了很多这是早期超文本系统中非常有创意但更复杂的解决方案万维网出现之前。现在的网络使用了一套实用的、最小的路标约定,而浏览器提供了一个后退按钮,用户所依赖的把他们带回已知的领地。

相关课程

信息架构导航设计