12

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

当然，我们对选项卡式界面完全满意，但是新手用户呢？我在网上搜索了指导，但没有找到任何确定的东西。您是否有向新手用户展示选项卡式界面的经验，他们是否遇到过麻烦？或者，我们是否已经达到了每个人都对标签感到满意并且我们可以毫无保留地使用它们的地步？

可用性很重要——这个项目比大多数项目更重要。如果天真的用户对选项卡式界面感到困惑，它就无法正常工作，我们将不得不寻找另一种方式。

4

11 回答 11

11

Steve Krug在他的优秀著作“Don't Make Me Think”（Sensible.com）中讨论了使用选项卡式界面的好处：

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

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

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

显然，他提供了书中每个项目符号的详细信息（我不会在这里抄袭他）。如果您想要为新手和专家创建网站的指南，这本书绝对值得一看。

于 2009-04-07T01:10:27.673 回答
5

标签变得越来越普遍，只要您正确实施它们，我就不用担心使用它们。确保使活动选项卡在视觉上与其他选项卡不同。

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


  1. 使用AJAX加载除第一个选项卡外的每个选项卡。选项卡本身应该是指向 AJAX
    获取的内容的链接。
  2. 保留页面上的所有信息，但使用 JavaScript 将其隐藏。当您循环浏览选项卡时，它们会从页面的隐藏部分填充。

YUI 设计模式库及其选项卡部分可能对您有所帮助。

于 2009-04-07T00:54:37.603 回答
3

我认为只要标签是可见的，用户就可以理解。我见过一些网站，他们展示了一个带有链接的垂直条，这些链接的作用类似于标签，但用户并不能立即看到它，并且发现这非常令人困惑。

于 2009-04-07T00:45:15.143 回答
2

我不得不不同意那些支持标签的人。在我们为一个流量相当大的网站（当时有超过 100 万个独立网站）进行的设计测试中，我们发现标签没有被使用。标签被清楚地标记，位于主要内容区域的右侧。根据这种经验，我建议要么找到替代方案，要么像 staticscan 建议的那样运行可用性测试来确定哪些可行。

于 2009-04-07T01:05:43.503 回答
2

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

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

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

于 2009-04-07T01:09:43.777 回答
1

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

于 2009-04-07T00:51:31.090 回答
1

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

于 2009-04-07T16:08:45.830 回答
0

我认为人们已经习惯了标签的隐喻（来自活页夹或卡片索引等）。尤其是那些长时间使用网络的人。我认为，如果 IE 采用了一个隐喻，它意味着对这个隐喻的普遍熟悉。

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

于 2009-04-07T00:46:40.990 回答
0

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

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

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

于 2009-04-07T01:04:00.700 回答
0

一个良好实现的 Tab 界面不应该让用户感到困惑。

与其他人所说的一致，使用选项卡或任何其他导航界面要考虑的最重要的事情之一是，它们当前在导航方案中的位置很明显。

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

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

于 2009-04-07T01:05:17.327 回答
0

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

我要记住的是：

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

2)很容易让妈妈使用。如果没有以清晰和合乎逻辑的方式布局，所有接口都会令人困惑。

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

4)尽量少用无论哪种方式，我都尽量保持在 7-10 范围内，因为人脑很难跳出 7-10 位数字，所以我假设信息片段也是如此。垂直手风琴可能也是您想要研究的东西。

我之前也在选项卡中嵌入了选项卡。效果很好，但大多数时候只有一层深。

于 2009-04-07T01:13:35.903 回答