多年来,我们都知道这一点对于台式机用户来说,水平滚动很痛苦. 即使移动设备广泛采用触摸手势来滑动内容,桌面网站的用户还没有接受水平滚动.本文讨论了受触屏启发的水平滚动的一些固有问题,并提供了一些替代方案和建议,帮助用户横向移动内容。显然,如果你没有触屏,你就无法进行滑动操作;在本文中,我们将在单词“swipe”周围使用引号来指代桌面上的触屏滑动手势。

水平滚动的吸引力

在桌面网站上浏览长页面的主要标准是垂直滚动。传统的鼠标和滚轮便于上下滚动,强化图案。

一些网站故意打破常规,在页面上从左到右移动画布,通常是出于以下原因之一:

  • 跨设备的一致性.我们的研究移动设备表示水平滑动很常见,用户对手机和平板电脑触摸屏上的滑动手势感到舒适。响应型或移动优先站点在所有设备(包括台式机)上使用水平“刷卡”,因为单个跨设备设计的生产成本更低,而且据说可以提供一致的体验。然而,由于水平滚动在台式机上并不常见,用户通常不知道他们可以通过在大屏幕上“滑动”来发现内容。由于人们与移动设备和桌面设备的交互方式是不同的一刀切的方法可能适得其反.关键的一点是,用户最可能认为一致性适用于他们的用户体验在网站之间快速浏览在他们当前的设备上。他们不太可能记住某一特定网站在不同设备上使用的确切交互技术,在此之前他们访问过该网站。
  • 浏览无关紧要的内容.并非所有内容都是关键内容。对于次要信息,例如图片库中的图片,水平滚动可以让用户看到内容的一小部分样本,并让他们选择快速“滑动”或点击获取更多。对于某些内容,用户不需要滚动浏览整个幻灯片也没关系。只要确保你没有把重要的内容放在水平滚动条后面,因为不是每个人都能发现它。
  • 节省垂直屏幕空间。而不是在一个很长的页面上一次显示所有的内容,水平布局向用户介绍更小的信息块。布局灵活且可扩展,因为内容可以垂直和水平添加。
    用来节省空间的堆叠胶片
    幻灯片是按类别堆叠的,所以用户可以通过向旁边滑动或向下滚动来查看不同类别的选项。这种二维的使用可以帮助用户显示各种选项,而不需要访问单独的类别页面。
  • 展示独特的设计。许多网站,特别是那些艺术家和数字代理的网站,使用水平滚动在他们的网站上,以脱颖而出,并提供一瞥他们的设计能力。相反,对于主流网站来说,为了与众不同而与众不同是一种糟糕的设计理念。

桌面水平滚动的风险

虽然在某些情况下水平滚动是可以接受的,但在应用时应该谨慎。注意:桌面的水平滚动是少数持续生成的交互之一用户的负面反应.(有趣的是,对它的蔑视是如此普遍,所以我喜欢用它来向不熟悉这个领域的人说明什么是用户体验。我问他们是否能想到一个水平滚动的网站。他们通常会抱怨说他们讨厌它,然后我会解释我们是如何看待这类事情的,并想办法让它们变得更好。通常他们的反应是“谢谢你,我希望有更多的人。”).

请注意,尽管桌面上的“刷卡”不会引起与传统水平滚动条相同程度的负面反应,但它仍然会带来类似的风险。让我们看看为什么水平滚动和“滑动”在桌面上有问题的三个主要原因。

1.传统的水平滚动条需要持续的关注和更大的体力来维持拖动,这给用户带来了负担。

大多数人使用滚动条滚动,而不是滚动箭头。然而,穿过一个薄通道(如滚动条)是困难的,因为它需要小心地控制定点设备。(这是转向定律的一个例子,它说用户引导指针设备通过隧道所需的时间取决于隧道的长度和宽度:隧道越长越窄,用户将指针从一端移动到另一端所需的时间就越长。转向定律是从我们讨论的Fitts定律推导出来的我们学校的学生人机交互过程).因此,在桌面上使用滚动条有一个高交互成本让人慢下来。在最近的一次用户测试中,一名参与者在浏览产品列表时感到沮丧,并抱怨,“我花了好长时间才看完这个。”

2.用户可能会忽略通过水平滚动或“刷卡”访问的内容,因为他们不希望在那里看到内容。

我们的研究发现,即使是强有力的线索,如箭,也经常被忽视。人们希望垂直滚动来获取额外的内容,但他们不希望横向滚动。水平滚动对它们已经存在的内容起作用心智模型一个网页。

眼动热图幻灯片
Apple.com:这张眼球追踪热图显示,用户在观看产品图片幻灯片时,从来没有瞥过箭头,因此在幻灯片的其余部分也没有看到其他产品。

3.即使是明显的水平滚动提示也很弱信息线索

即使人们注意到了水平滚动的提示,他们可能也不想冒险加载他们无法预测的内容。被水平滚动条隐藏的内容处于不利地位,因为即使是明显的视觉线索也无法提供强烈的信息线索:用户很难猜到他们在点击箭头或水平滚动条时会得到什么信息。在使用整个页面“滑动”来显示新内容的实现中,失望的风险甚至更高:用户可能不得不等待很长时间的页面加载,最后才发现新页面与她的需求无关。

箭头具有微弱的信息气味
USAToday.com:用户忽略了文章页面两侧的箭头,因为不清楚如果他们点击会显示什么。当被特别问到箭头的时候,一名用户说,“我不会用这些。我想读我想读的。”

在桌面上实现水平滚动或“滑动”的建议

如果你正在考虑模仿滑动手势或在你的桌面网站上使用水平滚动,遵循以下建议,让用户更容易注意和访问你的内容。

1.不要让“滑动”成为你网站的主要导航。

不要强迫用户“滑动”浏览你的内容:有些人会,很多人不会。允许选择不同的导航方式:也允许用户使用菜单导航。菜单告诉用户你的网站上有什么,并帮助他们找到他们需要的信息。用户依赖它们深入你的网站或在不同类别之间移动。没有全球导航在美国,用户很难四处走动并发现更多内容。

全局导航和水平滚动
Dennys.com:这种设计提供了明显的全局导航,以及在内容中前进的箭头。在测试这个站点时,用户从未使用箭头在页面之间滑动。相反,他完全依靠全局导航,能够成功地完成所有任务。还需要注意的是,主面板两边的内容的部分可见性使得内容进入焦点时不那么突兀。

2.不要让用户猜测还剩下多少内容。

使用滚动条或分页显示还有多少内容。最好向用户展示他们在站点中的位置,这样他们可以更好地定位自己。告诉人们还剩下多少,这样他们就可以决定还要走多远。或者,在循环的情况下,用户希望知道他们何时回到起点。

在胶片上使用分页
页码和返回幻灯片开头的链接提供了有用的上下文,告诉你还有多少选项,以及如何快速跳转到开头。

3.为水平滑动创建明显可见的提示。

让用户通过点击和键盘浏览内容。如果箭头只在鼠标悬停时可见(就像下面Netflix的例子),人们可能永远不会发现有更多的内容。对于单个页面和旋转木马,设计可见的目标区域,人们可以点击进入新的内容。

悬停前无箭头
Netflix.com:在正常状态下,没有任何视觉线索表明有更多内容可用(上图)。箭头只在悬停时出现(下图)。此外,要查看类别中的更多内容,用户必须将鼠标悬停在箭头上。当他们这样做时,长条开始移动;如果用户想要看到更多的项目,他们必须小心不要将鼠标移离箭头区域。这种互动不仅需要花费大量的精力和持续的注意力,而且速度也会变慢,并可能导致令人眩晕的效果,这与其说是有趣,不如说讨厌。点击来推进整个集合会快得多。

结论

在桌面上水平滚动和“滑动”与在触摸屏平板电脑和移动设备上不同。这又是一个例子,说明了为什么理解人们使用移动设备、平板电脑和台式机的方式不同很重要,以及为什么针对不同的用途优化设计是有益的。避免仅仅为了脱颖而出或解决多平台开发挑战而打破惯例。相反,请评估水平滚动是否真正适合您的用户,这样您就可以确保您的设计增强了他们的体验,而不是降低了他们的体验。

了解更多关于水平滚动,旋转木马,和幻灯片设计,以及如何使他们可用在我们的网页设计课程