标签界面是否令人困惑？

Question

我们正在设计一个网站，并遇到了一些用标签界面巧妙解决的UI挑战。用户将与站点的不同元素进行交互（有一些基本的视图/编辑/复制/粘贴功能可用），并且一次只能在一个选项卡中显示一个对象，这简化了很多事情。

我们当然对标签式界面完全满意，但新手用户呢？我在网上搜索了一些指导，但我还没有发现任何确定的内容。您是否有为新手用户提供标签界面的经验？他们遇到了麻烦吗？或者，我们是否达到了每个人都对标签感到满意的程度，我们可以毫无保留地使用它们？

可用性很重要 - 对于这个项目来说比大多数更重要。如果天真的用户对标签界面感到困惑，那就不行了，我们必须找到另一种方式。

Answer 1

在他出色的着作“不要让我思考”（Sensible.com）中，Steve Krug讨论了使用标签界面的好处：

• 他们是不言而喻的
• 他们很难错过
• 他们很光滑
• 他们建议一个物理空间

他接着描述了Amazon.com所展示的成功标签的关键：

• 他们被正确绘制
• 它们是彩色编码的
• 进入网站时选择了一个标签。

显然，他提供了书中每个子弹项目的详细信息（我不会在这里给他带来困扰）。如果您需要为新手和专家创建网站的指南，那么本书绝对值得一看。

Answer 2

选项卡已经变得很普遍，只要你正确地实现它们我就不用担心它们的使用了。确保使活动选项卡与其他选项卡在视觉上不同。

此外，尝试使用渐进增强功能创建选项卡，以便在禁用JavaScript的情况下仍然存在内容。有两种主要方法：

1. 加载每个标签，但第一个使用
   AJAX。标签本身应该是 链接到AJAX的内容 取。
2. 将您的所有信息保存在 页面，但使用JavaScript隐藏它。 当您在标签中循环时， 他们是从隐藏的人群中填充的 页面的一部分。

您可能会发现有用的设计资源是YUI Design Pattern Library及其tabs部分。

Answer 3

我认为只要选项卡可见，用户就可以理解。我见过网站，他们提供了一个垂直条，其中的链接类似于标签，但用户无法立即看到它，并且发现非常令人困惑。

Answer 4

我不得不反对那些赞成标签的人。在一个设计测试中，我们为一个流量相当高的网站（当时超过1mil uniques）进行了测试，我们发现没有使用标签。标签清晰标记，位于主要内容区域的右侧。基于这种经验，我建议找到一个替代方案，或者，如静态扫描建议运行可用性测试以确定哪些工作。

Answer 5

不要以为你可以先决定什么是可用的，什么不可以。可用性测试

“只有五个用户才能发现80％的高级可用性问题”Jakob Nielsen

Google可用性测试并开始学习。这并不难。

Answer 6

我倾向于同意lothar和ricebowl - 这些天人们似乎很熟悉它。任何GUI元素最重要的是清晰度 - 用户必须天生就知道当他们按某些东西时会发生什么（他们知道点击非活动标签会使其激活）;在导航中 - 它必须非常清楚它们当前在哪个标签上。正如Lothar所说，如果用户不能立即看到它，那就非常混乱了。如果你解决这些问题，那就应该没问题了。

Answer 7

只是想注意SmashingMagazine有一篇展示标签的新文章：Showcase of Tabs

Answer 8

我认为人们习惯于选项卡的隐喻（来自绑定器或卡索引等）。特别是那些使用网络任何时间长度的人。我认为，如果IE采用了一个比喻，那就暗示了对这个比喻的普遍熟悉。

所以，不，我建议他们不要混淆，并建议你去追求它。只是，也许，发布一个欢迎/第一次介绍（或这个介绍的突出“帮助”链接）使用标签。

Answer 9

我一直是Intranet应用程序的开发人员，该应用程序使用标签式界面，使用HTML生成并由JavaScript控制。这是IE7和Firefox之前的方式。事实上，它在网站上也有点新奇。

幸运的是，以前的开发人员发现，如果你把它看作一个对话框 - 甚至使用灰色背景，那么人们通常会理解这个比喻。我们还为初始页面加载中的所有选项卡加载了所有内容，并在选项卡式结构外部保存/取消按钮 。因此，大多数人立即明白他们可以在标签之间移动（我们使用JavaScript来隐藏和显示DIV），而Save会保存对所有的更改。

如果你想偏离这种明显的比喻，那么你需要做一些可用性研究。

Answer 10

良好实现的Tab界面不应混淆用户。

与其他人所说的一样，Tabs或任何其他导航界面要考虑的最重要的事情之一是它们在导航方案中的显而易见的位置。

另一个重点是不打破浏览器！许多AJAX或javascript实现打破了后退按钮。这对某些人来说是一个小小的烦恼，对他人来说是一个重大的不和谐。请务必在此处考虑您的目标受众。

Personaly我更喜欢oldschool方法，不预加载所有选项卡，但将每个选项卡作为自己的页面，并使用模板方法管理导航界面，无论是制表还是其他方式。这样可以维护浏览器历史记录，无论是否使用javascipt都可以正常工作。

Answer 11

标签等只是工具。我们如何决定将它们布局并使用它们决定了它们的有效性。

我要记住的是：

1）保持密切。我们使用最多的东西应尽可能在前面或靠近顶部，并根据使用/调整的频率将其余部分埋葬

2）妈妈可以轻松使用。如果没有以清晰合理的方式布置，所有界面都会让人感到困惑。

3）组织它的使用方式，而不是你认为它的意义。* 我经常使用制表符来分解流程中的步骤，或者分解基本/高级选项等领域。我根据相似性或用法对它们进行分组，具体取决于哪种方法效果更好

4）让他们保持少量无论哪种方式，我都会尝试保持低于7-10范围的顶部，因为人脑难以跳过7-10位数，所以我假设相同的碎片信息。垂直手风琴也可能是你想要研究的东西。

之前我还在标签中嵌入了标签。效果很好但大部分时间只有一层。

Answer 12

标签的另一个资源是最近关于粉碎mag的文章：http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/