导航设计的10个原则以及为什么高质量的导航是如此重要

如果说内容是每个网站发布的核心,那么导航就是它的大脑,是信息架构设计的基本支柱。在处理大量内容时,导航的重要性怎么估计都不过分。无法找到的内容是无法阅读的。如果内容无法找到和读取,这意味着成本很高,但价值为零。

导航是网站的“目录”。在传统的发布中,您有页面编号来帮助您导航。你可以把出版物拿在手里翻阅。如果是大型出版物,通常在后面有一个可以使用的索引。然而,你不能把一个网站拿在手里。

导航设计原理

导航设计原理

你无法立即感受到它的规模和复杂性。你一次只能在一个屏幕上浏览一个网站。这可能会让人迷失方向。很容易混淆和迷路。在这个注意力缺失的时代,如果一个读者迷失了方向或感到困惑,那么他很可能会犯错误。回来”按钮。因此,创建一个导航系统,使读者感到舒适,并允许他们迅速找到他们想要的内容,这是任何网站成功的关键。

设计导航就像设计路标系统一样。首要的设计原则是功能,而不是风格。网络上的读者就像汽车上的司机,行动迅速。导航永远不是读者的最终目标。它是用来帮助他们到达某个地方的。(大多数人不会站在那里欣赏路标。)时导航效果最好读者几乎注意不到它的存在.因此导航设计应该永远要简单、直接、朴实,其首要目标是帮助读者到达他们想去的地方。

导航和搜索是相互交织的。搜索是一个形式的导航.在许多情况下,读者将使用“内容收集者”的组合。他们将使用搜索把他们带到他们感兴趣的主题领域或产品类型。然后导航应该开始起作用,为他们的搜索提供上下文。

导航设计要求详细规划.一旦推出,它就不应该随着一时兴起而改变。你应该把你的导航当作是“写在石头上的”,因为你冒着混淆你的老读者(客户)的风险,而这些人是你应该不惜一切代价避免混淆的。人是天生的,习惯性的,保守的。如果每隔几个月你就改变你网站的结构和导航,你就有可能疏远那些已经习惯了你的老套路的常客。

导航设计的10个原则

1. 为读者设计

导航设计的基本原则是你应该为读者——使用网站的人设计。避免简单地为了好看而设计导航。此外,要避免从组织的角度来设计导航,比如使用不太容易理解的内部模糊的分类名称。

记住,导航是对读者的一种帮助。除非你让他们参与进来,并了解他们喜欢怎样导航,否则很难设计出符合他们需求的导航。

在设计导航:

  • 让读者从第一天起就参与调查或采访,了解他们希望如何浏览内容。
  • 尽早创建导航的模型,并将其展示给读者以获得反馈。

2. 提供多种导航选项

如果每个人都以相同的方式浏览内容,那么导航设计人员的工作就会简单得多。不幸的是,不同的读者对于如何浏览网站有不同的偏好。因此,为了适应不同的读者及其导航需求,一系列的导航选项应提供。

无线的

纳选项

纳选项

有些读者喜欢在地理位置上导航。其他人则通过主题来导航。还有一些人想要阅读与他们刚刚阅读过的文档相似的最新文档。

没有一个单独的导航选项可以满足以上所有的要求。

纳选项

纳选项

允许读者以他们希望的任何方式浏览内容:

  • 提供多种导航选项;
  • 使用多个分类。

3.让读者知道他们在哪里

导航应该给读者一个清楚和明确的指示,他们是什么网页的网站。假设你在度假,你在城镇广场上看地图。如果地图设计得很好,其中最突出的特征之一会告诉你——“你在这里。”

CNN头

CNN头

CNN在这方面非常支持读者。在CNN娱乐版,你会看到用粗体大写字母写着“娱乐”的报头。

导航应该以超文本的形式显示。但是,如果它是图形形式的(只建议用于全局导航),则描述读者所在页面的分类名称应该与导航中的其他分类在设计上不同。

青春漫画婚礼

青春漫画导航

青春漫画导航

让读者知道他们在哪里:

  • 每页都有突出的标题立即告诉读者他们在网站的哪个部分;
  • 确保,如果导航的一部分是图形形式的,则描述阅读器所在页面的链接与该导航中的其他链接的设计不同

4. 让读者知道他们去过哪里

网站导航设计的一个基本原则是让读者知道他们在网站上的位置。这是使用超文本而不是图形形式尽可能多地使用导航的一个关键原因。使用超文本,当链接被点击时,它的颜色会改变。超文本的标准颜色是未点击链接的蓝色和已点击链接的紫色。

让读者知道他们去了哪里:

  • 在超文本中保持尽可能多的导航;
  • 未点击使用蓝色,点击使用紫色。

5. 让读者知道他们要去哪里

导航应该让读者知道他们要去哪里。实现此目的的方法是创建尽可能自解释的分类。

实现更清晰的方法:

  • 当读者点击一个链接时,他们希望进入一个HTML页面。如果你想让他们进入非html页面(PDF、Microsoft Word等),请提前通知他们。
  • 如果读者点击了一个链接,他们希望停留在他们当前操作的浏览器窗口内,除非你明确告诉他们不是这样。只有在有令人信服的理由时,才为读者打开新的浏览器窗口。

Asos标题文本

Asos标题文本

Facebook标题文本

Facebook标题文本

  • 如果导航元素是一个图像,例如一个公司的标志,并链接到主页,插入ALT文本上面写着“公司主页”之类的东西。

Asos Navibar

Asos Navibar

  • 当鼠标在链接上滚动时,改变链接的颜色。当许多链接紧密地放置在一起时,这是很有帮助的。因为链接会改变颜色,所以读者确切地知道他们将要选择哪个链接。

Asos下拉

Asos下拉

  • 考虑下拉导航,当鼠标在特定链接上滚动时,显示较低级别的分类。这使得读者可以进一步浏览网站,如果他们愿意的话。

问付款

问付款

  • 当用户被要求参与一个过程时,例如在线购买一个产品,有一个进度图导航会很有帮助。这将向用户显示流程中有多少个阶段,以及它们处于哪个阶段。

6. 提供上下文

主页的主要功能是为读者提供内容。主页导航不仅仅是功能导航,比如超文本和搜索。它还从内容归档中提取内容要点,以摘要或特性的形式显示它们。

为导航提供最好的可能的上下文:

Asos上下文

Asos上下文

  • 确保所有内容均已妥善分类;
  • 允许各种产品/选择主页发布最相关和最积极的内容,为特定的产品或部分;
  • 在文档末尾使用相关的导航,提供到类似文档或网站的链接。

7. 是一致的

当读者感到困惑或迷失时,他们会转向导航。不要通过显示不一致或不熟悉的导航设计来进一步混淆它们。分类的一致性是导航成功的关键。

导航设计要求:

  • 一致的分类;
  • 一致的图形导航设计;
  • 超文本的颜色一致。

8. 遵循Web会议

许多人本能地将网络视为单一的媒介。他们喜欢把从一个网站学到的导航技巧带到另一个网站,因为这让他们的生活更容易。

随着时间的推移,Web上出现了许多导航约定。设计者故意避免这些惯例,只是为了与众不同,除了迷惑读者之外,什么也做不成。去最大最好的网站。看看他们是如何设计导航的。不要因为模仿你找到的最佳实践而感到羞愧。

遵循Web上出现的导航和分类约定。它们包括:

自由Globalnav

自由Globalnav

  • 全局导航——这是指在每个页面的顶部和底部运行的导航,其中包含指向该网站主要部分的链接。
  • “首页”是约定的整个主页的名称。
  • “About”包含描述组织的历史、财务业绩、目标和使命陈述等内容。例如“索尼”。
  • " Contact "或" Contact Us "包含联系信息,如电子邮件、电话、地址或位置信息。

Coldstorage Globalnav

Coldstorage Globalnav

  • 组织的标志应该出现在每页的左上角。它也应该被链接回主页。

DIY Globalnav

DIY Globalnav

  • 搜索框应该在站点的每个页面上都可用。它应该放在报头的最右边。

自由页脚

自由页脚

  • 每个页面都应该有一个页脚,以超文本的形式包含全局导航。

9. 不要给读者带来惊喜或误导

永远不要让读者去做那些对他们来说不可能或困难的事情。一个典型的例子是强制所有用户填写“邮政编码”,而不管他们是否存在于该用户的国家。永远不要给读者提供他们无法使用的联系方式。

为了避免给读者带来意外:

  • 不要让他们误入歧途;
  • 清楚地告知他们例外情况。
  • 不要要求他们做他们不能做的事。

10. 为读者提供支持和反馈

在任何网站上,读者只需点击一下就可以联系到该组织。联系设施可能包括电子邮件、电话、回电或客户聊天支持。如果读者面对的是一个复杂的任务,一个“帮助”链接是特别必要的。

Hostgator

我们习惯于接受基于我们行为的不断反馈。然而,在网络上,唯一可行的和即时的反馈是通过文本。文本必须以一种综合的方式来告知读者他们行动的结果。

反馈

例如,如果读者填写了一个30字段的表单并点击了“提交”,网站应该提供以下类型的反馈——“谢谢”。您的表单已经成功完成。如果表单没有成功完成,它应该说:“您的电子邮件地址输入不正确。”

读者的支持和反馈应该:

  • 在每个页面上提供联系链接;
  • 为复杂的任务提供主题敏感的帮助;
  • 确保读者避免犯明显的错误;
  • 隔离读者所犯的错误;
  • 提供涉及过程的流程图导航;
  • 提供选项,让读者给予反馈。

结论

在为网站设计导航时,一定要考虑这些导航设计的10个原则.诀窍是让读者尽可能简单地使用它。请继续关注用于帮助有效导航网站的导航选项艺术。

2020-01-28 17:03
相关热门