从3个案例中学习! 如何使用正确的面包屑

从3个案例中学习! 如何使用正确的面包屑

本文是由日本人翻译的文章,经Webdesigner Depot 批准。

本文由文案撰稿人Marc Schenker发布。

当他们听到“面包屑”时,有许多人将格林童话故事“汉塞尔和格莱特”联系起来。

在故事中,汉塞尔在回家时将面包屑作为指南放在路上。

就像在Web世界中一样,面包屑在为网站访问者创建更好的用户体验时充当导航。

当您想要了解用户当前在您网站上的位置时,面包屑是值得的。 面包屑可以跟踪和显示用户访问过的页面。 页面可以按访问顺序显示,或者可以以其他排列显示。

本文介绍如何使用正确的面包屑。

三种主要类型的面包屑导航

有三种主要类型的面包屑,前两种可能比最后一种更频繁地使用。

位置类型面包屑列表

位置面包屑向用户显示他们当前在站点层次结构中的位置。 它是一个广泛使用的面包屑列表,因为它可以在现场以易于理解的方式指导用户。

位置面包屑在内容以多个级别组织并且导航以多个层组织的站点中特别受欢迎。

用户现在只需单击一下即可返回上一个更高级别层次结构中的内容。 位置面包屑是静态的,可帮助用户确定其在站点内的当前位置。

屏幕截图 -  2016年10月10日,在-2.36.17-PM-620x412

作为基本用法的一个例子,让我们看一下1-800 Flowers的网站。

当用户访问插花页面“这是我的生日”时,该网站按照首页(主页)和生日(生日)以及“我的生日”的顺序跟随页面您可以一目了然地看到它具有可以到达页面的结构。

用户还可以访问这些更高级别的页面。

属性类型面包屑列表

与基于位置的面包屑不同,属性类型面包屑不是静态的,并且随着用户的操作而不断变化,就像搜索过滤器一样。

它不显示网站中的当前位置,而是显示网页内容的元数据。

因此,属性面包屑通常用于EC站点,用户可以使用过滤器自定义和搜索“您想要购买什么”。 例如,汽车销售网站。

归因面包屑并不总是有助于返回您已访问过的页面。

作为一个具体的例子,让我们看一下Cars.com使用的面包屑列表。 当用户通过从汽车的“制造商”和“型号”搜索条件中选择一个选项进行搜索时,面包屑将出现在页面左上角的站点徽标下方。

用户从搜索术语“制造年份”,“制造商”和“模型”中选择的选项将显示,但您无法返回上一页。

屏幕截图 -  2016年10月10日,在-2.47.29-PM-620x411

因此,重要的是要注意属性面包屑与可以返回到先前访问的页面的位置面包屑不同。

路径类型面包屑列表

路径类型的面包屑是三种主要类型的面包屑中最不受欢迎的。 原因是,坦率地说,这个面包屑只是浏览器后退按钮的重新显示。

它对改善用户体验没有任何影响,而是一次额外的迭代。

基于路径的面包屑(也称为基于历史记录的面包屑)非常有用,因为它们无法为在站点层次结构的深层访问页面的用户提供其他上下文或信息。不能说。

一个示例是从用户已经点击的搜索结果中访问产品页面。

由于传递面包屑的这个UX问题,现在网站越来越少使用它。

什么是适合面包屑使用的网站?

哪种类型的网站最好使用三种类型的面包屑?

首先,您不必考虑传递面包屑。 它至少在改善用户体验方面没有任何影响,在最坏的情况下,它甚至可能导致用户混淆。

原因是它无法准确显示网站层次结构本身。 在这里我们将考虑另外两个。

位置类型面包屑列表

位置面包屑非常适合具有多种含量的大型,深度,深度位置。 大型网站的一个例子是eBay,其中列出了大量商品用于销售和拍卖。

因此,位置痕迹最适合具有深层内容层次结构的网站,因为它可以帮助用户以易于理解的方式浏览页面。

屏幕截图 -  2016年10月10日,在-7.53.49-PM-620x399

属性类型面包屑列表

接下来,让我们关注属性breadcrumbs列表。

正如我们在Cars.com网站上的示例中看到的那样,为用户提供许多可自定义的搜索条件选项的电子商务网站更适合导航,如属性面包屑。

因为用户经常希望看到他们在搜索或排序时所做的许多更改,所以最好按属性breadcrumbs查看过滤器,而不是使用位置面包屑。

面包屑最佳实践

当您在客户的网站上设计面包屑导航时,实践这些技术肯定会有效。
确保面包屑结构中没有重复的元素。 注意不要将单个页面复制到多个类别或级别的内容中,因为它可能会给用户带来混淆。
使用符号(>)分隔痕迹导航列表中的链接。 这是因为这种风格已经成为一种传统,并且很多用户都很容易习惯。
对于痕迹导航列表中的每个类别,请设置要在搜索顺序中反映的关键字。 它作为SEO措施是有效的。

正确实施面包屑很重要

与设计和用户体验的许多概念一样,如果没有正确实施,对用户真正有用的优秀技术也是障碍。

不是对UX没有影响或对UX产生负面影响的面包屑,而是拥有正确的知识来设计可以优化用户体验的面包屑是很重要的。这是目的。

面包屑在各个地方并非绝对必要。

但是,如果您网站的内容包含多个图层,或者您希望在搜索条件中包含许多选项,请使用面包屑添加有助于用​​户的导航。有可能。

了解每种类型的面包屑的目的使您能够实现适合您的站点的面包屑。 选择正确的面包屑将提高用户满意度并提高吸引客户的效率。

下次实施面包屑时请考虑这些事情。

TechAcademy有一个 ,新手可以在短短四周内成为工程师。 如果您想从现在开始学习编程和设计,请查看。

即使你过去独自开始但是你感到沮丧,你也可以在工作工程师或设计师的支持下工作。 正如您可以立即听到的那样,您应该能够掌握它而不会卡住。