bts防弹少年团演唱会

bts防弹少年团演唱会

何时使用选项卡式导航以及如何优化它

《何时使用选项卡式导航以及如何优化它》

我最喜欢的用户体验报价之一来自Nest的UX主管Chikezie Ejiasi

他写道:“生活是对话的。 网页设计应该是一样的。 在网络上,你正在和一个你可能从未见过面的人交谈 – 所以清楚和准确是很重要的。 因此,结构良好的导航和内容组织与良好的对话密切相关。“

选项卡式导航是否清晰准确? 当然它可以,这使它成为一种有效的导航和内容组织形式。 与大多数与UX相关的事情一样,重要的是如何实现它以及如何优化它。

首先,标签导航究竟是什么?

自由设计师兼开发人员Matt Cronin很好地解释了标签导航……

《何时使用选项卡式导航以及如何优化它》Matt Cronin ,自由设计师/开发人员

“嗯,它基本上是一组通常水平设置的按钮。 标签通常遵循许多不同的样式指南。

首先,标签组通常连接到容器或从容器略微突出,如下例所示。

《何时使用选项卡式导航以及如何优化它》

另外,请注意打开选项卡如何与容器的背景颜色匹配,其他按钮更暗。 这是另一种常见的造型指南。“ (通过Smashing Magazine)

通常,在查看选项卡式导航时,您会注意到一些共同特征……

  1. 圆角标签角。
  2. 标签的分离,无论是空间还是单行。
  3. 悬停在标签上的效果。
  4. 渐变以向选项卡添加深度和尺寸。

选项卡式导航基于文件夹隐喻,任何在办公室工作或看电视的人都应该熟悉。 只是Mifsud of UsabilityGeek解释……

《何时使用选项卡式导航以及如何优化它》Justin Mifsud ,UsabilityGeek

“在UI术语中,隐喻是用于促进用户和应用程序之间熟悉的想法或对象。

在UI中使用选项卡是一个很好的比喻,因为它们看起来像文件中的真实选项卡分隔符或文件抽屉中文件夹中的选项卡。

因此,用户更直观地知道这些标签将内容划分为多个部分,就像在现实生活中一样,到达标签(通过点击标签在网页上模拟)将显示相应的内容。“ (通过UsabilityGeek )

因为这个比喻很常见,所以你要小心实施。 选项卡式导航具有强大的原型,因此它们必须完全按照预期的方式查看和工作。

像任何好的导航系统一样,标签允许你……

  • 有意义地将内容分成不同的部分。
  • 向人们展示他们可以使用的内容以及他们如何获取该内容。
  • 直观地向人们展示他们在您网站中的位置。

何时使用选项卡式导航是个好主意?

通常,在…时使用选项卡式导航是个好主意。

  • 您有2-9种不同类别的内容。
  • 类别名称在位置和副本方面相对较短且可预测(即它们与原型相匹配)。
  • 类别的数量不太可能定期改变。
  • 这些类别的性质相似; 从逻辑上讲,它们是一起标记的。
  • 类别适合单行。

尼尔森诺曼集团的雅各布尼尔森解释说,当标签导航变得如此复杂以至于需要多行时,问题就开始出现……

《何时使用选项卡式导航以及如何优化它》雅各布尼尔森 ,尼尔森诺曼集团

“多行创建跳跃的UI元素,这会破坏空间内存,从而使%E7%94%A8%E6%88%B7%E6%97%A0%E6%B3%95%E8%AE%B0%E4%BD%8F%E4%BB%96%E4%BB%AC%E5%B7%B2%E7%BB%8F%E8%AE%BF%E9%97%AE%E8%BF%87%E5%93%AA%E4%BA%9B%E6%A0%87%E7%AD%BE%E3%80%82″>

此外,多行是过度复杂的确定症状:如果您需要的选项卡多于单行中的标签,则必须简化设计。“ (通过NN / g)

多行还会产生视觉层次结构问题。 当存在第二行时,它可以向用户发信号通知第二行中的选项卡是子类别,或者至少不如第一行中的选项卡重要。

《何时使用选项卡式导航以及如何优化它》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

通常,在…时使用选项卡式导航不是一个好主意。

  • 您希望人们同时比较内容。 这会对记忆产生影响并大大增加认知负荷
  • 您发现自己正在考虑添加“更多…”样式链接。

当然,这些只是基本准则。 您可以匹配所有“您应该使用它”规则并发现它不适合您的受众。 这最终是你需要测试的东西。

请记住,您可以使用数字分析来确定标签导航是否为访问者带来了问题。 从那里,您可以进行更改以解决问题或尝试使用新类型的导航。

争议

虽然现代设计实践有很多网站看起来像这样……

《何时使用选项卡式导航以及如何优化它》

……有些人确实使用选项卡式导航作为主要导航。

正如谷歌的Luke Wroblewski多年前记载的那样,亚马逊真正开创了这一趋势……

《何时使用选项卡式导航以及如何优化它》Google的Luke Wroblewski

“1998年,该网站有两个顶级类别:书籍和音乐。

随着其他类别的增加(例如视频和礼品),水平标签系统扩展得非常好,并创造了一个通过颜色区分产品类别的好机会。“ (来自LukeW)

以下是亚马逊在早期使用标签式导航的方式……

《何时使用选项卡式导航以及如何优化它》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

随着网站的普及,亚马逊需要的标签数量也越来越多……

《何时使用选项卡式导航以及如何优化它》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

1999年,雅各布称这是“一个糟糕的设计和滥用标签隐喻”……

《何时使用选项卡式导航以及如何优化它》雅各布尼尔森 ,尼尔森诺曼集团

“我认为,选项卡可以更好地用于在替代(但相关)视图之间切换,而不是导航到不相关的位置。

但不幸的是,如果越来越多的网站不断滥用标签,用户很快就会失去对标签作为特殊设计元素的理解。“ (通过NN / g)

尽管如此,许多网站仍然遵循亚马逊的领先优势,标签导航的定义开始从尼尔森的“在不同观点之间切换”转变。

截至2016年,尼尔森仍然支持他1999年的建议……

《何时使用选项卡式导航以及如何优化它》雅各布尼尔森 ,尼尔森诺曼集团

“使用制表符在同一上下文中的视图之间切换,而不是导航到不同的区域。 这是最重要的一点,因为在交替观看时保持原位是我们首先获得标签的原因。“ (通过NN / g)

虽然使用选项卡式导航作为主导航系统已经有点过时了,但它可以工作。 与大多数事情一样,您的主要关注点不应该是尼尔森关于标签式导航的说法,而是您的受众所说的内容。

他们发现难以使用吗? 他们是否正确浏览您的网站? 他们能找到您网站最重要的元素吗? 进行可用性测试以确保。

如何实现选项卡式导航

加拿大航空公司和大多数主要航空公司都使用标签导航……

《何时使用选项卡式导航以及如何优化它》

在自己实施标签式导航(在任何级别)时,请注意以下事项……

  • 首先,设计您网站的信息架构(IA),以便您可以做出更明智的与标签相关的决策。
  • 整个选项卡应该是可点击的,而不仅仅是类别名称(文本)。
  • 即使您在整个站点使用选项卡式导航,也不要使用“主页”选项卡。 相反,让您的徽标将访问者带到主页。
  • 该选项卡应连接到它控制的内容区域,以便清除选项卡的范围。
  • 类别名称应为1-2个字,并以简单的英语书写。 避免使用全部大写,因为它使标签更难以阅读。
  • 不要堆叠多行标签。 如果必须,请使用子类别(即选项卡下方的第二个水平条)。 如果您确实使用子类别,请确保所选选项卡与下面的子类别栏之间存在可视连接。 确保您使用的子类别数量不是很大; 凝聚和简化。
  • 应突出显示所选选项卡以指示当前位置。 但是,未选中的标签不应该被忽略,否则会被遗忘或忽略。
  • 应在页面之间维护一致的选项卡顺序,以便用户完全理解选项卡彼此之间的关系。

雅各布解释了为什么这种一致性很重要……

《何时使用选项卡式导航以及如何优化它》雅各布尼尔森 ,尼尔森诺曼集团

“1。 可识别性。 当某些东西看起来总是一样的时候,你知道要寻找什么,并且当你找到它时你知道它是什么。

2.可预测性。 当某些东西总是以相同的方式工作时,你知道当你采取行动时会发生什么。

3.赋权。 当您可以依赖过去所有可用功能的知识时,您可以轻松地组合一系列操作来实现您的目标。

4.效率。 没有必要花时间学习新的东西或担心不一致的功能的影响。“ (通过NN / g)

选项卡导航完成权的示例

理解选项卡式导航的最佳方法是查看一些示例,特别是因为它可以以多种不同的方式使用。

1.专辑艺术收藏

专辑艺术收藏是标签导航的一个相当流行的例子…

《何时使用选项卡式导航以及如何优化它》

这里有两件事很有意思……

  1. 导航是垂直与水平的。
  2. 导航包括图标。

通常,您会发现水平呈现的选项卡式导航。 这部分归功于设计原型。 由于它很常见,人们倾向于在徽标下方的水平空间中寻找导航。

当然,这并不意味着您只能使用该空间进行导航。 请务必使用用户测试。 出于风格原因,您不希望移动导航以影响网站的易用性。

请注意,虽然相册艺术收藏集使用导航图标,但它们不会放弃基于文本的描述。 图标可用性测试本身就是一篇文章,但通常情况下,基于文本的描述比单独使用图标更有用。 Six Revisions的 Jacob Gube解释说……

《何时使用选项卡式导航以及如何优化它》Jacob Gube ,六个版本

“避免使用图标替换标签控制文本,因为符号对不同的人来说意味着不同的东西 – 最安全的选择是使用纯文本来描述窗格信息。” (通过Smashing Magazine)

2.发票机器

发票机是您的基本选项卡式导航作为主要导航示例…

《何时使用选项卡式导航以及如何优化它》

但是,它们确实包含一个“主页”选项卡,这是多余的。 请注意所选标签的显示方式以及标签是否连接到内容区域。

3.缓冲

缓冲区是我最喜欢的标签导航示例之一。 由于他们为个人提供的服务与他们为企业提供的产品不同,他们使用标签将其内容分开。

这是个人内容的开始……

《何时使用选项卡式导航以及如何优化它》

这是企业内容的开始……

《何时使用选项卡式导航以及如何优化它》

这允许Buffer与两个不同的受众对话,而无需创建完全独立的站点或体验。 例如,个人服务于此副本……

“Buffer会在一天中的最佳时间分享您的内容,以便您的粉丝更频繁地看到您的更新。 充分利用每篇文章。“

虽然企业服务于此副本……

“缓冲区允许您的营销团队在一天中的最佳时间共享内容,以便增加流量并增加粉丝参与度。 充分利用您的内容。“

它是相似的,但定位会有所不同。

正如UX Booth的 David Leggett所解释的那样,标签式导航在初级和次级导航之外是相关的。 它们甚至可以在折叠之下使用,如Buffer的情况……

《何时使用选项卡式导航以及如何优化它》UX Leggett ,UX Booth

“标签不必限于主要和次要导航级别。 如果它们为用户提供了在相同内容的区域之间切换的能力,那么它们可以证明是非常有用的。

结合在不重新加载页面的情况下切换内容的技术可以为最终用户导航页面提供切实的感觉。“ (通过UX Booth)

要记住的3个最佳实践

在您尝试使用选项卡式导航或确定它不适合您之前,请考虑以下三个因素:可访问性,分块和速度。

1.可访问性问题

您希望残障人士或限制使用您的网站。 为了使用选项卡式导航,您必须…

  • 允许用户使用键盘上的“Tab”键导航标签。
  • 允许用户使用键盘上的“Enter”键选择一个标签。
  • 指示使用替代方法选择的选项卡。 例如,您可以包含带有“active”一词的title属性。

让您的网站更容易用于更多人永远不会伤害转换。

2. Chunking事项

使用选项卡式导航,您决定如何组织和分块内容非常重要。 这就是为什么我上面的第一个实施建议与您网站的信息架构有关。

Justin解释了为什么正确的组织至关重要……

《何时使用选项卡式导航以及如何优化它》Justin Mifsud ,UsabilityGeek

“标签将内容划分为有意义的部分,占用较少的屏幕空间。 在这方面,用户可以轻松访问他们感兴趣的内容(而不是在段落中包含所有内容)。“ (通过UsabilityGeek)

考虑您在网站上想要的所有内容。 然后,将该内容分组为4-5个桶。 可能,你将能够重复这个练习并最终得到2-3个不同的桶。 非常好。 进行用户测试以查看哪些人更好地响应和导航。

最重要的是,你要确保……

  1. 您的内容以对访问者合乎逻辑,期望和清晰的方式进行分块。
  2. 选项卡的顺序是有意义且合乎逻辑的。
  3. 您的标签遵循现有原型。 例如,SaaS网站通常以特定方式分块,而电子商务网站通常在另一个网站中分块。

3.速度问题

我们已经写的速度的重要性, 时间一次又一次 。 因此,速度在标签导航的有效性中起作用也就不足为奇了。

雅各布解释得很好……

《何时使用选项卡式导航以及如何优化它》Jacob Gube ,六个版本

“使用模块选项卡的目的是允许快速和交互式呈现内容。 为此,您应该尝试将非活动窗格内容内嵌在HTML文档中,然后使用CSS和JavaScript在窗体中样式化和隐藏窗格,这比要求页面重新加载或请求远程源数据更快。

在窗格之间切换时避免页面重新加载,因为这会显着延迟窗格之间的导航。 使用Ajax的远程加载内容可以作为动态和远程定位窗格信息的选项,但对于可能不知道文档树中异步插入DOM的节点的屏幕阅读器用户来说是一个挑战。“ (通过Smashing Magazine)

此建议不适用于使用选项卡式导航作为主要导航的建议,但使用标签式导航的方式应遵循加拿大航空公司和缓冲区的方式。

结论

选项卡式导航绝对可以与您的访问者进行“良好的对话”。 如果实施得当,它可以清晰准确地告诉您的访问者:他们到底在哪里,他们可以获得什么,以及他们如何能够访问他们可以使用的内容。

借助可用性测试和优化,该对话可以进一步提高。

但是,与任何事情一样,一定要进行您的研究(在这种情况下,您的信息架构研究)和测试,测试,测试。

综上所述…

  1. 选项卡式导航可用作主导航系统以及主要/辅助导航级别之外的导航系统。
  2. 如果您有2-9个固定的类似类别,并且短名称适合单行,请尝试选项卡式导航。
  3. 当您希望人们比较内容或发现自己想要添加“更多…”链接时,请不要尝试选项卡式导航。
  4. 您可以遵循实施最佳实践,但……
  5. 重要的是你的数据。 您的访问者是否难以使用标签式导航浏览您的网站? 进行可用性测试以找出答案。
  6. 修复弹出的问题。 或者,如果存在许多昂贵的问题,请考虑另一个导航系统。
  7. 在标签式导航方面,可访问性,分块和速度都很重要,因此请密切关注。

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注