Content writing and its pitfalls

导航设计是您网站的基石。它确定了至关重要的指标,例如转化率和跳出率,页面停留时间,点击量,并且通常是决定您的访问者拥有良好体验并以比您所说的“ 用户流量 ” 更快退出网站的决定性因素。

但是好的导航设计是什么样的呢?一旦制作到位,如何改进它?让我们深入了解什么是网站导航设计,以及优化它的技巧:

什么是网站导航设计?

网站导航设计是所有导航元素的架构,它是用户访问您的网站时如何找到他们想要的东西。

为了理解它的重要性,让我们用一个比喻:想象一下有两家服装店。*个完全混乱。女鞋旁边是男裤,男领带旁边是儿童泳衣。

糟糕的是,似乎没有任何标志或店员可以帮助您找到所需的东西。

另一方面,第二家商店非常简单。所有服装均按性别和尺寸进行组织,有很多标牌指导顾客,店员随时待命以回答任何问题。确定在哪一个时间消磨时间是一个容易的选择,对吗?

良好的导航是杂乱无章的服装店与杂乱无章的服装店之间的区别。为了使您的网站更接近后者,请牢记以下一些做法:

优秀网站导航设计的5个好的做法

网站导航就是帮助您的用户找到所需的内容。当您解决此问题时,其他好处如SEO排名和可发现性也会随之而来。在进行网站导航设计时,请牢记以下五点:

提示1:规划网站导航设计

规划是必不可少的。实际上,这可能是此过程中重要的部分。您不只是想随意创建导航按钮。

因此,请谨慎对待该过程。这意味着坐下来,绘制出网站的所有内容资产,并确定如何链接到它们。

卡分类:

进行此操作的方法之一是查看网站的信息体系结构,或者网站的所有内容如何安排和组织。您可以通过卡片分类练习来完成此操作。为此,请将所有内容元素记下到卡片上,将它们分配给目标用户,然后让用户将卡片分类为有意义的组。

您可能要使用两种类型的卡片分类:

  • 开放式卡片分类:创建卡片,将其提供给研究参与者,然后要求他们对卡片进行分组。然后,他们标记组。
开放式卡片排序会话的示例(来源:InVision)
视力
  • 封闭式卡片分类:创建卡片并将其与创建的组列表一起提供给研究参与者。然后,您要求参与者将卡片分组。
封闭式卡片分类会话的示例(来源:InVision)
视力

切记:与目标用户实际合作进行卡片分类很重要。毕竟,在网站导航方面您可能会有偏见。

[ 阅读更多:用于网站重新设计的四种研究技术 ]

提示2:规划您的用户流

在决定如何安排网站导航之前,重要的是要准确地确定需要在布局中包括哪些元素。为了弄清楚这一点,您需要了解您的用户将如何与之交互并最终获得您的网站。这是  用户流程发挥作用的地方。

用户流程是在网站上完成任务的步骤。可以将其视为传统流程图,其中箭头从一个决定指向另一个决定,直到最终到达目的地。它们通常用于绘制用户在数字产品上获得的预期结果。

来自myWebRoom的示例用户流。
视觉

花一些时间,然后规划您的流程,以确保对您的用户有意义。这使您可以设计一个“ 幸福的道路 ”(或没有错误或异常的完成任务的方法),以实现网站上常见的目标。

总体而言,用户流程旨在作为您的设计决策的北极星。有了它之后,您就可以开始专注于能满足用户需求的内容,而忽略其余所有内容。

查看Freehand,满足您的所有集思广益需求。

开始创作

提示3:使用用户友好的文字

您的所有导航副本都必须对用户清晰易懂,这意味着避免使用含糊不清或过于简单的单词。清晰度不仅可以帮助读者浏览您的网站,还可以帮助您的SEO。

例如,假设您有一个用于dog狗业务的网站。您不希望导航按钮读取诸如“服务”之类的内容,因为这不是人们在寻找您的服务时搜索的术语。取而代之的是,他们搜索“ pet狗”,“宠物坐着”,甚至“ dog养率”。看到不同?在*个示例模糊不清的地方,其他示例则清晰明确。

提示4 :(尽量少用)汉堡包

也许没有比汉堡菜单更具争议性的导航元素了。

资料来源:InVision
视觉

尽管它对于辅助导航元素很有用,但您不想完全依赖它,因为它阻碍了可发现性,从而影响了您的内容。

考虑一下:这是用户与汉堡菜单进行交互的过程:

  1. 寻找所需的导航元素
  2. 意识到它不是立即可用
  3. 注意这里有一个菜单
  4. 确认这是一个汉堡菜单并且可以单击
  5. 点击那个汉堡
  6. 扫描其他菜单项的列表
  7. 找到他们要寻找的那个
  8. 点击它

您的用户要做的很多事情-整个八步。在设计世界中,简约为王。

现在,这并不是说应该汉堡包菜单从来没有被使用。相反,当您要包含的元素不能直接用于网站的主要目标时,请有意使用它。

让我们来看一个应用程序。这是来自优步的一个很棒的例子:

资料来源:InVision

Uber知道他们的用户在进入应用程序时只想订购汽车。他们没有给用户增加“过去订单”或“法律”之类的负担,而是将所有这些次要元素放在汉堡菜单中。

资料来源:InVision

[有关更多信息,请查看我们关于汉堡菜单的10个利弊的文章。]

提示5:遵循网站导航栏的做法

以下是一些常见的网站导航布局:

水平布局

资料来源:《纽约时报》

一种经过实践检验的布局,可与许多不同的屏幕配合使用。如果您要链接的网页数量较少,这特别好-尽管如果您拥有大型网站(例如上述《纽约时报》),也可以使用它,但您也可以使用它对所有页面进行排序。

当与下拉菜单选项结合使用时,例如,当您有不同主题的小节时,水平站点导航布局也可以很好地工作。在The Verge中查看一个很好的例子。 

资料来源:边缘

垂直布局

资料来源:Arbor餐厅

垂直布局是一种好的的移动友好替代方案。当网站包含许多导航元素时,它们非常有用。

汉堡布局

我们在*一个技巧中介绍了这一点,但在这里值得再次提及。汉堡菜单是一种导航布局,用于当您遇到屏幕上不适合的辅助导航元素时。

这是Google云端硬盘移动网站上的一个很好的例子:

资料来源:谷歌

固定的导航布局

资料来源:独立报

固定导航具有在用户向下滚动页面时跟随用户的元素。这是保持用户导向同时使网站其他部分始终可访问的好方法。但请注意:固定导航会吞噬网站的大量资源。当您只有几个导航元素时使用它,以免分散您其他内容的注意力。

网站导航设计:您需要了解的知识