设计人员使导航结构帮助人们通过网站移动,但良好的结构和功能是不够的。导航不仅要显示您可以去的地方,而且还要展示您现在的位置。网站上的每个页面都可能是您网站访问者看到的第一页,因此传达足够的背景是非常重要的,以便人们可以立即朝向目标进行。

一个独立地图柱子的照片在城市边路的
从Web搜索导航Web搜索有点像在一个陌生城市的任意位置被删除。良好的标牌至关重要。照片通过rk photography.
商店地图显示的照片与标记标记为“您在这里”,位于鞋类和小吃之间
固定地图,通常在购物区走道上放置,通过将他们的当前位置显示他们的当前位置来占据购物区走道。照片通过英国W.

游客并不总是使用前门

在一个搜索引擎可以在任何地方丢弃您的网站访问者的世界中,对于用户在信息空间中的信号,因此可以从那里成功导航。即使访问者通过主页到达时,它们也可能需要定向,因为它们遍历网站。

标牌让人们放心,他们正在走向他们所需要的东西。与火车站一样,Web位置指示器可以是地标的颜色编码,照明,符号,箭头,路径和名称的组合。当人们变得困惑,有关或丢失,迹象和信号经常帮助他们更加信心如何继续。

让访问者可以轻松识别网站和页面主题。在Web上,您是这里的信令通常通过改变导航栏,图标或菜单的外观来完成。该导航信号由面包屑和标题加固。购物结账和应用程序(奇才)倾向于使用步骤名称和数字。

典型的你是这里的机制

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

页面标题和URL也有助于显示信息上下文和位置:

麻省理工学院的页面标题:阅读|介绍技术交流:Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MIT OpenCourseWare(这有点长,但非常描述性和关键词丰富。)

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

在OpencourseWare,Textbook Publication Dates(1995-2003)在页面的葡萄酒上提示,但只有URL就课程年份(2006年)提供了有意的提示。最好显示页面上的可见日期或日期范围,因此在其时代的背景下可以理解随着时间的推移而存活的信息。页脚页脚(整个网站)的版权表示2001-2015,但这对于技术或科学内容来说太广泛了。

“位置”显示在黑色,水平导航栏上的红色矩形中。按钮包括“找到图书馆!”和“我附近的图书馆”。图书馆的街道地址出现在下面。
纽约公共图书馆的网站导航栏从黑色到红色更改当前页面类别名称。页面上的彩色按钮具有显示页面目的的信息标签,并立即显示样品内容。Logo Branding加上这些信号形成了您在图书馆数字领域的位置的连贯迹象。
欧洲空间机构的网站使用两个导航栏,面包屑,两个标题和突出的品牌,以时间为基础的空间图像集来定位照片。
在深层网站信息结构的较低级别下,难以显示导航栏的变化。这是面包屑拯救这一天的地方。欧洲航天局在这两个领域都有强大的信号。(但它略有困惑,2014年拍摄的照片被归类为2015年照片 - 可能是因为它发布日期。)

测试有效位置信令

许多网页设计使用太微妙的位置指示器沟通。设计师注意到他们设计的一切,并拥有一家公司心理模型该网站的结构。他们知道如何在网站上了解,他们不需要方向,因此他们很难看待其他人的设计。另一方面,网站访问者可能是该网站的新手,或者他们可能很少使用它,所以一切都有新颖且潜在的有趣。因此,对设计师来说似乎分散注意力的信号通常甚至没有被访客注意到。人们很容易忽略微妙的变化

何时测试

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

For new web designs, testing for location orientation is best done when your website visual design is in the high-fidelity stage. Show real content with all the types of distractions that are expected to exist when the website is live — especially any advertising, animation, and photos — because these are the设计元素最有可能影响人们注意什么

如何测试位置信号效率

  1. 在某个时候向其他级别的各种页面显示各级,一个时间,不导航到他们。
  2. 说:“假装你刚到这个网页。你在哪里网站?“
  3. 如果他们给出答案(右或错),请问:“你怎么能告诉我?”
  4. 如果他们说他们不确定,问:“你希望看到什么来帮助你知道你在哪里?”
  5. 如果他们仍然不确定他们在哪里,请问:“你通常会做什么,以便找出答案?”
电报.co.uk错误页面(未找到404)
避免制作导航死胡同。有时,URL不再有效,倒下了林特罗特。在这种情况下,显示他们的地方尝试要将URL留在位置栏中。如果有人弄错了,用户可以看到它并可能解决它。对于其他人来说,提供有用的建议和网站导航,正如电报所做的那样,人们可以快速重新定位自己。错误页面道歉,建议重新检查页面地址,提供索引链接以及完整的站点导航,并提供检查系统状态并联系人员的方法。搜索结果没有结果的页面,不应以非常相似的方式处理。

底线

只要与用户进行测试可以肯定地告诉你,但如果分析表明很多人都在徘徊,Pogo Sticking.和回溯,您可能有一个信息架构问题。视觉定位提示可能不够强大或良好放置;导航标签,标题和标题可能不足或误导;或以上所有。

Historical Note

有趣的是,对用户越来越“在高度迷失空间”的担忧导致了很多在早期超文本系统中非常具有创造性但更复杂的解决方案prior to the World Wide Web. It’s good that the web uses a practical and minimal set of signposting conventions these days, and that browsers provide a背部按钮,用户依赖把他们带回所知的领土。

相关课程

信息架构导航设计