logo标签列表

选项卡界面容易混淆吗？

htmluser-interfacetabstabbed-interface
12
我们正在设计一个网站，遇到了一些UI难题，使用选项卡界面可以很好地解决这些问题。用户将与网站的不同部分交互（有一些基本的查看/编辑/复制/粘贴功能），每个选项卡中只显示一个对象，这样可以简化事情。
当然，我们对选项卡界面非常熟悉，但新手用户呢？我在网上寻找指导，但并没有找到明确的答案。您是否有向新手用户展示选项卡界面的经验，并且他们是否遇到了困难？或者，我们已经达到了任何人都能舒适地使用选项卡的地步，因此可以毫无保留地使用它们？
可用性很重要——对于这个项目而言更是如此。如果新手用户对选项卡界面感到困惑，那么它就行不通了，我们必须找到另一种方法。
在一个选项卡中只有一个对象可见，这样做可以使事情变得更简单。这会让用户还是开发者感到更简单呢？ - nailitdown
事实证明，两者都是。只有一个对象可见时，菜单选项的目标对象就不会存在歧义。但是，在对象之间进行拖放会更加困难，不过似乎可以通过从可见对象向目标对象的选项卡拖动来实现。 - David Stafford
11个回答
11
在他的优秀著作《不让我思考》（Sensible.com）中，史蒂夫·克鲁格讨论了使用选项卡界面的好处：
  • 它们是自证明的
  • 它们很难被忽视
  • 它们很流畅
  • 它们暗示了一个物理空间
他接着描述了亚马逊公司成功的选项卡关键因素：
  • 它们被正确绘制了
  • 它们被彩色编码了
  • 进入网站时有一个已选定的选项卡。
显然，他在书中为每个项目提供了详细信息（我这里不会抄袭他）。如果您想要为新手和专家创建网站的指导方针，那么这本书绝对值得一看。
+1 当我看到这个问题时，我本来想写一些关于“不要让我思考”的东西。 - Paolo Bergantino
5
选项卡已经变得越来越普遍，只要正确实现，就不必担心使用它们。确保使活动选项卡在视觉上与其他选项卡有所不同。
此外，请尝试使用渐进增强创建选项卡，以便即使禁用 JavaScript，内容仍然存在。有两种主要方法可以做到这一点：
1.使用 AJAX 加载除第一个选项卡之外的每个选项卡。选项卡本身应该是获取 AJAX 的内容的链接。
2.将所有信息都保存在页面上，但使用 JavaScript 隐藏它。当您浏览选项卡时，它们会从页面的隐藏部分填充。
您可能会发现 YUI Design Pattern Library 和他们关于 tabs 的部分非常有帮助。
3

我认为只要选项卡以此形式可见，用户就能理解。我曾经看到过一些网站，它们用链接呈现垂直条，像选项卡一样，但对于用户来说并不是立即可见的，我觉得这很令人困惑。

2

我不同意那些支持选项卡的人。在我们为一个相当高流量的网站（当时有超过100万个独特访问者）进行设计测试时，我们发现并没有使用选项卡。选项卡被清晰地标记，并位于主内容区域的右侧。基于这种经验，我建议要么找到一种替代方案，要么像staticscan建议的那样运行可用性测试以找出哪种方法更有效。

这是多久之前的事？我注意到今天Twitter和Facebook都使用了选项卡。Twitter有垂直选项卡，而Facebook在个人资料中使用选项卡式对话框。Twitter可能值得商榷（早期采用者不是新手），但Facebook对技术恐惧症、成年用户群体非常敏感。 - David Stafford
大卫：大约两个月前。我同意Facebook很敏感。但我打赌他们已经进行了广泛的测试，找到了最佳解决方案。如果你能做类似的事情，那么一定要去做。但如果目前不可能，我建议保险起见。 - MK_Dev
谢谢，MK_Dev。我们现在正在构建一个UI原型，并将其提交给我们的测试组。 - David Stafford
2

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

"只需要五个用户就可以发现80％的高级可用性问题" Jakob Nielsen

搜索“可用性测试”并开始学习。这并不难。

我们现在正在进行可用性测试，并且发现它在当前的设计中使用起来太困难了。选项卡界面有潜力简化它（只要选项卡界面对新手用户不是本质上令人困惑的）。 - David Stafford
1

我倾向于同意lothar和ricebowl的观点 - 人们似乎现在对它非常熟悉。任何GUI元素最重要的是清晰度 - 用户必须本能地知道当他们按下某个东西时会发生什么（他们知道点击一个非活动选项卡会使其活动）；在导航中 - 必须非常清楚地知道他们当前在哪个选项卡上。正如lothar所说，如果用户不能立即看到它，那就非常令人困惑。如果您解决了这些问题，那么它应该没问题。

1

想要提醒大家，SmashingMagazine有一篇新文章展示了选项卡：选项卡展示

0

我认为人们已经习惯了选项卡的隐喻（来自夹子、卡片索引等等）。特别是那些长时间使用网络的人。我认为，如果IE采用了这个隐喻，它暗示着人们对这个隐喻有共同的熟悉感。

所以，不，我建议它们不会使人混淆，并建议您尝试一下。只需发布一个欢迎/第一次介绍（或一个突出显示“帮助”链接到此类介绍）来使用选项卡。

0

我曾经是一个内部应用程序的开发人员，该应用程序使用了选项卡界面，由HTML生成并由JavaScript控制。这是在IE7和Firefox之前的事情。实际上，在网站上，这也是一种新奇的东西。

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

如果您想偏离这样一个明显的隐喻，那么您需要进行一些可用性研究。

0
一个良好实现的选项卡界面不应该让用户感到困惑。
与其他人所说的一样，考虑选项卡或任何其他导航界面时最重要的事情之一是明显地显示他们当前在导航方案中的位置。
另一个重要的点是不要破坏浏览器！许多 AJAX 或 JavaScript 实现会破坏后退按钮。这对某些人来说是小烦恼，对其他人来说则是大麻烦。请确保考虑您的目标受众。
个人而言，我更喜欢老派的方法，即不预加载所有选项卡，而是将每个选项卡作为自己的页面，并使用模板方法管理导航界面，无论是选项卡还是其他方式。这可以维护浏览器历史记录，并且可以在有或没有 JavaScript 的情况下正常工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接