菜单 关闭

注意水平滚动和模仿桌面上的滑动

通过 凯蒂舍温4月27日,二千零一十四

总结:尽管越来越多的网站模仿刷卡手势,在桌面设计中加入水平滚动,manbetx官方网站手机版用户仍然不愿意通过内容横向移动。


多年来,我们已经知道了水平滚动对台式计算机上的用户来说很痛苦.即使移动设备的广泛采用,触摸手势用于滑动内容,桌面网站上的用户不支持水平滚动.本文讨论了触摸屏水平滚动的一些固有问题,并提供了一些备选方案和建议,以帮助用户在内容中横向移动。显然,如果你没有触摸屏,就不能真正地刷卡;在本文中,我们将在单词“刷卡”周围使用引号来表示桌面上触摸屏刷卡手势的模拟。

水平滚动的吸引力

在桌面网站上移动长页面内容的主要标准是垂直滚动。传统的鼠标和滚轮可以方便地上下滚动,从而加强了模式。

有意打破惯例并在页面上左右移动画布的网站经常这样做,原因如下:

  • 跨设备的一致性.我们的研究移动设备表明水平滑动是常见的,用户对手机和平板触摸屏上的滑动手势感到舒适。响应或移动的第一个站点使用横跨所有设备的水平“擦除”,包括台式机,因为一个人manbetx官方网站手机版跨设备设计的生产成本更低,而且可以提供一致的体验。然而,因为水平滚动在桌面上不太常见,用户通常不知道他们可以通过在大屏幕上“滑动”来发现内容。由于人们与移动和桌面设备的交互方式不同,这个一刀切可能适得其反.关键点在于,用户最有可能将一致性视为应用于他们所拥有的用户体验。在网站间传播在他们当前的设备上。他们不太可能记住一个特定的站点在不同的设备上使用的确切的交互技术,他们在一段时间前访问过该站点。
  • 浏览非重要内容.并不是每件事都是关键的内容。二次信息,例如,照片库中的图像,水平滚动可以让用户看到内容的一个小样本,并为他们提供快速“滑动”或单击查看更多内容的选项。对于某些内容,客户不会滚动浏览整个电影带,这很好。只需确保你没有把重要的内容放在水平滚动的后面,因为不是每个人都会发现它。
  • 节省垂直屏幕空间。而不是在一个很长的页面上同时显示所有内容,水平布局向用户介绍较小的信息块。布局灵活,可扩展,因为内容可以垂直和水平添加。
    用于节省空间的堆叠胶片
    hulu.com:按类别排列的胶片被堆叠,这样用户可以通过“侧滑”查看类别中的选项,或者向下滚动查看不同的类别。这两个维度的使用可以帮助用户显示各种选项,而不必让他们访问单独的类别页面。
  • 展示独特的设计。manbetx官方网站手机版许多网站,尤其是那些艺术家和数字机构,在他们的网站上使用水平滚动,以突出和提供对他们的设计能力的一瞥。manbetx官方网站手机版相反,对于主流网站,为了与众不同而与众不同是一个糟糕的设计理念。manbetx官方网站手机版

桌面水平滚动的风险

虽然在某些情况下水平滚动是可以接受的,应小心使用。注意:桌面上的水平滚动是少数持续生成的交互之一。用户的否定回答.(轶闻地,对它的蔑视是如此普遍,我喜欢用它来说明不熟悉这个领域的人的用户体验。我问他们是否能想到一个网站水平滚动。他们通常呻吟着说他们讨厌它,然后我解释了我们如何看待这样的事情,并找到让它们变得更好的方法。通常他们的反应是“谢谢你,我希望你们能多一些。”

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

1。传统的水平滚动条需要不断的关注和更大的体力来保持拖动,从而加重了用户的负担。

大多数人使用滚动条滚动,而不是滚动箭头。然而,穿越一条狭窄的隧道(如滚动条)是很困难的,因为它需要小心地操纵指向设备。(这是转向法的一个例子,这就是说,使用者引导指点装置穿过隧道所需的时间取决于隧道的长度和宽度:隧道越长越窄,用户将指针从一端移动到另一端所需的时间越多。转向法是从菲茨定律推导出来的。我们在讨论人机交互课程)因此,在桌面上使用滚动条交互成本高减缓人们的速度。在最近的用户测试中,一位参加者在浏览产品列表时感到沮丧并抱怨,“我花了很长时间来浏览这个。”

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

我们的研究发现,即使是像箭这样强有力的提示,也经常被忽视。人们希望垂直滚动以获取更多内容,但他们不希望横向滚动。水平滚动的工作方式与其先前存在的方式相反心智模型一个网页。

胶片跟踪热图
Apple.com:这张追踪热图显示了用户在观看产品图片的胶片时,从来没有看到箭头,因此,在电影的其余部分,从未见过其他产品。

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

即使人们注意到水平滚动的提示,他们可能不想冒险加载他们无法预测的内容。水平滚动隐藏的内容是一个缺点,因为即使是显著的视觉提示也不能提供强烈的信息气味:用户很难猜测一旦单击箭头或水平滚动将获得什么信息。在整个页面“滑动”以显示新内容的实现中,失望的风险更高:用户可能不得不等待一个长页面加载,结果发现新页面与她的需求无关。

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

在桌面上执行水平滚动或“滑动”的建议

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

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

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

全局导航和水平滚动
丹尼斯:这个设计提供了明显的全球导manbetx官方网站手机版航除了箭头推进内容。在测试这个站点时,用户从不使用箭头在页面之间滑动。相反,他完全依赖全球导航,能够成功完成所有任务。注:同样,当内容进入焦点时,主面板两侧内容的部分可见性使其不那么刺耳。

2。不要让用户猜测还有多少内容。

使用滚动条或分页来显示还有多少内容。最好总是向用户展示他们在您的站点中的位置,所以他们可以更好地定位自己。告诉人们还剩多少,所以他们可以决定还要走多远。或者,在循环的情况下,用户想知道他们什么时候回到起点。

在胶片上使用分页
Amazon.com:页码和一个回到电影开头的链接提供了有用的上下文,说明还有多少选项以及如何快速返回开头。

三。创造明显的,水平滑动的可见提示。

让用户通过点击和键盘浏览内容。如果箭头仅在悬停时可见(如下面的Netflix示例中所示),人们可能永远不会发现有更多的内容。对于单独的页面和旋转木马,manbetx官方网站手机版设计可见的目标区域,在那里人们可以点击进入新的内容。

悬停前没有箭头
Netflix.com:处于正常状态,没有显示更多内容可用的视觉提示(顶部)。箭头仅在悬停(底部)时显示。此外,要查看类别中的更多内容,用户必须将鼠标悬停在箭头上方。当他们这样做的时候,条带开始移动;如果用户希望看到更多项目,他们必须小心,不要将鼠标移离箭头区域。这种互动不仅需要大量的努力和持续的关注,但它的速度也很慢,而且会产生令人头晕的效果,这比娱乐更令人讨厌。单击以推进整个集合会更快。

结论

在桌面上滚动和“滑动”是一种不同于触摸屏和移动设备的体验。这又是为什么理解人们使用移动设备很重要的一个例子,平板,和桌面不同,为什么它有利于优化不同用途的设计。manbetx官方网站手机版避免为了脱颖而出而违反惯例,或者解决多平台开发挑战。相反,评估水平滚动是否真正适合您的用户,所以你可以确定你的设计会增强他们的体验,而不是贬低他们。manbetx官方网站手机版

了解有关水平滚动的更多信息,旋转木马,和电影设计,manbetx官方网站手机版以及如何使它们在我们的网页设计课程manbetx官方网站手机版.