手风琴菜单是垂直堆叠的标题列表,可以单击以显示或隐藏与它们关联的内容。它是您可以将内容暴露给用户的多种方式之一渐进的方式。允许人们通过扩展或推迟它来控制内容,以便稍后让他们决定读取什么以及忽略什么。给人们控制是#3在列表中可用设计的顶级启发式。In theory, this concept sounds reasonably human centered.

jqueryui.com:这是手风琴的一个例子。理论上,它是呈现内容的有用方式。通过让人们控制他们看到的内容以及仍然隐藏的内容,信息感觉越来越赘言。

将手风琴应用于富裕的内容的页面等其他优点:

  • Collapsing the page minimizes滚动
  • 标题用作迷你IA.页面。这允许用户形成amental model可用的信息。
  • 隐藏(一些)内容可以使网页似乎更加令人生畏。
  • 手风琴可以是更好的替代方案within-page links,这是有问题的,因为他们打破了人们的超文本链接的心理模型。人们期望点击链接将加载新页面。没有适当的线索,人们对网站上的地方感到困惑。

手风琴的主要可用性问题

While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.

  • 迫使人们click on headings one at a time to display full content can be cumbersome,特别是如果个人关心的列表上有很多主题。如果人们需要开辟大多数副主治,以回答他们的问题或获得完整的故事,那么手风琴不是去的方式。在这种情况下,最好立即公开所有内容。滚动页面更容易,而不是决定单击的页面。(每次决定,无论多么疾病或多么容易,补充认知负荷。) The experience feels less fragmented with fewer attention switches.
  • 手风琴增加互动成本。Readers treat clicks like currency: they don’t mind spending it if the click is worthwhile and has value. However, resentment ensues when a click is considered a wasted effort; it doesn’t take many wasted clicks to escalate people’s reaction to full-blown defiance. Acquiring click targets, such as links and buttons, and waiting for content to appear requires work and wastes precious time that users don’t want to give.
  • 减少人们背后隐藏内容导航’s awareness of it。需要额外的步骤来查看信息。标题和标题必须具有描述性和诱惑,以激励人们“花钱”点击措施。当内容隐藏时,人们可能会忽略信息。
  • Accessibilityis an important consideration。Pages and widgets must be coded with accessibility in mind, which is an added development effort. In contrast, plain text is inherently accessible (though it can definitely be too complicated for disabled users to understand, but that’s a standardwriting issue您应该在任何情况下考虑哪些。)
  • 印刷另一方面是读者正确指出的。手风琴往往不适合打印文件,并要求人们一次打印内容片段。确保优化您的打印​​页面。

关于桌面上滚动和长内容页面的神话

许多网站所有者出于错误的原因实施手风琴。

  • Myth#1:用户不滚动长页:用户滚动内容与相关性相关,正确组织,并格式化以便于扫描。事实上,当该页面内的主题回答正确的问题时,人们更喜欢滚动页面以获取分页的内容。鼠标,箭头键和轨道垫上的标准滚轮使滚动比获取单击目标更容易。
From our research report, How People Read on the Web: The Eyetracking Evidence: This example illustrates how far people read and scroll on a page where the information is relevant and properly formatted for the web.
  • Myth#2:客户不在页面底部读取信息:我们的眼压研究表明,虽然用户在页面上方的信息上花费了80%的注意,但它们将20%分配到折叠以下的内容。卷轴不愿是过去的行为。虽然你仍然应该注意人们有限的关注网站并明智地优先考虑内容,但你不应该担心长格式。如果你给他们的好理由去那里,人们会看到底部。
  • Myth#3:人们避免有很多内容的页面:人们有能力处理大量信息,当正确呈现。在我们的写作网络课程,我们强调了写作的要求,更重要的是,为基于Web的阅读写作。阅读和扫描模式在基于Web和基于打印的内容之间是不同的。虽然在线用户通常扫描信息,但它并不意味着他们想要更少的信息。网站不应该是信息灯。需要写入相同的信息,结构化和呈现不同的信息。

应用手风琴的标准

决定使用手风琴时开始的最佳地点是为观众评估常见和关键用例。了解人们的情景将帮助您确定手风琴是否合适。以下列出了一些最重要的考虑因素:

手风琴应该被避免当您的受众在页面上需要大多数或所有内容时,请回答他们的问题。更好的时间在用例支持它时立即显示所有页面内容。在这种情况下,不要担心页面长度太多。相关性胜过页面长度。如果他们的意图在同一会话中消耗所有内容,则保存人们单击链接的麻烦。只要页面上的内容与Web正确相关,相关,并格式化,人们会急切地滚动该页面。

newyorkcares.org:这里没有足够的内容来保证手风琴。立即曝光所有内容可能会使页面稍长,但这样做会揭示有用的信息,否则人们会错过的信息。

如果您的页面非常长,也许手风琴不是适当的小部件。许多人需要一种不同的导航方法,例如在几个更易消化的页面上呈现信息。但是,通过将内容切入短页面来避免诱惑来极端。

如果您使用手风琴,请务必一次为人员提供一个可以打开多个部分的能力,以便随时可用。打开或关闭的项目应留在该状态,直到用户更改它。

手风琴更适合当人们在单个页面上只需要几个关键的内容时。通过隐藏大部分内容,用户可以将他们的时间更有效地专注于重要的几个主题。

Another situation in which accordions are helpful is when the information is restricted to非常小的空格,例如移动设备。在小屏幕上,人们经常停止滚动,然后到达一个非常长页的末尾。如果页面有几个松散相关的信息,则用户往往无法猜测他们有兴趣的信息将在页面上的某个地方找到,并且在扫描全部之前,他们会退出。在这种情况下,极长的页面对用户体验有害。折叠信息是一个更好的替代方案:它最大限度地减少过度滚动,并为用户提供页面上可用内容的概述。在手机上阅读是困难的两倍那and the mini-IA provided by the accordions helps readers understand the structure of the page and lets them focus on the relevant pieces.

Conclusion

手风琴似乎是缩短长内容页面的好解决方案。然而,在许多情况下,当所有页面内容与用户相关时,即使在较长的页面中执行此操作,也可以立即显示所有内容更有利于。在桌面上,简单地简单地滚动页面,而不是决定点击哪个主题。我们的可用性研究和eyetracting研究表明,当信息有价值并正确格式化扫描时,人们滚动。