在桌面上,旋转木马一直以来都是一种很受欢迎的方式,在首页上粘贴多个内容而不占用太多空间。在手机上,旋转木马变得越来越流行第一次推出iPad.(原始的iPad设计被蚀刻屏幕美学迷住并希望在最目的细节中控制布局。结果,他们经常前所不应地滚动,有利于卡或旋转木马的设计。)

喜欢菜单手风琴,旋转木马在移动设备上具有重要的优势:它们将大量内容符合成相对较小的占地面积。他们的第二大并是他们可以通过允许每个人在主屏幕上制作标记来解决组织内的内容优先争吵(即使它经常变成隐形标记)。然而,旋转木马也有一些重要的缺点:

  • 它们是基于顺序存取:用户必须把传送带上的所有物品一个一个地看一遍,才能到达最后一个。这种交互是低效的。
  • 它们并不总是能被发现。即使人们认出了旋转木马,如果不与旋转木马交互,他们通常也无法知道它承载了什么类型的项目。

此外,并不是所有的旋转木马控制都能在触摸屏上正确实现。

在本文中,我们讨论了一些可用性指南,旨在缓解移动设备上的这些问题。

顺序存取

一个接一个地通过物品,希望能够发现一个兴趣之一并不好玩:大多数人在旋转木马看3-4不同的页面后停下来。因为那,我们建议用户应该能够在3-4步(即轻击或滑动)到达旋转木马的最后一个项目。

如果你有大量的项目,使用列表视图代替,并允许人们直接访问页面上的任何项目。

请注意,建议3到4个步骤到达最后一个项目并不一定意味着旋转木马应该只有3或4个项目。如果每页显示多个项目,那么旋转木马可以容纳更多项目。在下面的Netflix例子中,英雄旋转木马每页只显示一个条目,需要滑动5次才能到达6th但是其他的旋转木马每页显示3个项目(因此需要16次滑动才能到达50个项目列表中的最后一个项目)。

目标是优先顺序旋转木马物品,以便首先显示用户最感兴趣的内容。考虑使用个性化使前几次滑动与特定用户更相关。优先级减轻了顺序访问的乏味,因为用户通常不需要进行许多步骤。此外,通过先展示最好的物品,优先顺序可能会吸引用户,并鼓励他们比随机顺序更久地使用旋转木马。

iPhone版Netflix(左)使用旋转木马来显示很长的列表:Netflix上的热门旋转木马有70多个项目,用户需要滚动超过23次才能看到最后一项。相比之下,Showtime.com(右)在其英雄旋转木马中正确地使用了4个道具。

可发现性

匆忙寻找特定内容的移动用户可能永远不会注意到传送带。即使当旋转木马是自动画的时候,一个移动页面也非常小,以至于当旋转木马的图像发生变化时,用户可能已经向下滚动,再也看不到它了。

有三种类型的旋转木马线索传统上用于移动旋转木马信号:

  • 点或线
  • 箭头
  • 连续性的错觉

一些旋转木马的线索比其他的更强。点通常是薄弱的意叶由于它们很小,人们往往不会注意到它们。半图像或文本产生的连续性错觉,看起来就像它们在屏幕的垂直边缘之外继续存在,这是一个强大的旋转木马提示——用户很快就明白,通过移动到屏幕边缘之外,他们可以获得更多的内容。

旋转木马上的箭头和圆点等提示很容易被忽略的另一个问题是,它们经常出现在旋转木马图像的顶部。当UI元素出现在繁忙的背景上时,它们可以低对比度可以和周围的图像融合在一起。这个问题在移动设备上尤其严重,因为在户外使用时产生的眩光也会影响对比度的质量。

以下是具有强或弱转盘线索的设计的一些例子。

Zara主页在移动
Zara.com没有使用旋转木马符号向用户表明,他们可以通过水平滑动访问更多内容。旋转木马是自动动画的,但向下滚动经过大图像的人不会注意到它。
NBC的移动主页,白色背景图像和顶部的白色箭头
NBC.com:旋转木马图像顶部的箭头与图像融合。
屏幕的下半部分是一个带有股票图表和下面的小点的旋转木马
弱转盘线索:iPhone的股票在旋转木马下显示了低对比度点。
旋转木马在屏幕截图显示截短的项目在边上。
强烈的旋转木马提示:半张图片(如iPhone上的FilmStruck应用程序中的图片——左)和不完整的文字(如iPhone上的OpenTable应用程序中的图片——右)告诉用户,左边或右边有更多的内容。

即使对于具有良好能指的旋转木马,如果第一项对他们没有兴趣,人们可能也不会去看后面的项。第一项作为传送带中其他内容的推荐信,是有效的来源信息的气味对于其他项目——如果第一项似乎与他们的目标相关,人们会浏览旋转木马,如果不相关,人们会忽略它(尽管事实上,旋转木马中的其他元素可能是相关的)。

因此:

  • 旋转木马中的物品之间应该高度相关,这样人们就可以预测他们会发现的内容类型,如果他们参与旋转木马。
  • 在英雄旋转木马中使用的重要道具应该以其他方式使用,以防内容被用户完全忽略。如果内容在某种程度上是关键的,那么就应该有其他路径。

控制旋转木马

当人们想要在触摸屏上与转盘啮合时,他们就会滑动。不支持推进旋转木马的这种姿态是完全出乎意料的,并且具有糟糕的用户体验。到目前为止,大多数用户都熟悉这种用于水平导航的手势。确保你的旋转木马支持滑动。

计算机显示器的图像,上面有文字,文字下面有圆点
Dropbox不允许用户通过滑动来移动旋转木马;相反,人们必须敲击它下面的小点。(除了这是一种陌生的互动技术外,根据Fitts定律,击中小点的要求在任何UI中都是有问题的;由于肥胖手指的问题,在触摸屏上尤其糟糕。)

使用滑动控制旋转木马会产生以下问题刷卡模棱两可在iOS。刷卡模棱两可指的是,相同的滑动手势可以被解释为根据执行的精确位置来解释为意味着不同的事物。自从iOS 7,滑动模糊性已成为iOS的持续危险。例如,在Safari浏览器中,左边缘的水平滑动是同义词回来:它将用户带回到上一页。与iPhone X,水平滑动靠近屏幕下缘的位置将切换应用程序。不幸的是,当在屏幕上稍微不同的位置启动时,同样的手势也被用于在旋转木马中导航。因为在非触控设备上,滑动不是一种可用的手势响应的设计选择在移动设备上放弃它,并用其他一些推进旋转木马的方式更换它。例如,Dropbox预期人们将人们点击旋转木马图像下方的小点以推进旋转木马。首先,尽管在旋转木马的iOS实现中,但是绝大多数用户甚至不会梦想挖掘它们 - 它们并不知道这些点可以用来控制转盘。而且,第二,即使他们想点击它们,它们也是如此小而彼此接近,任何选择一个选择一个人将是徒劳的。

刷骨模糊的问题的部分解决方案是在旋转木马周围留下“页面沟渠” - 基本上,一些白色空间,告诉用户旋转木马边界没有到达屏幕边缘。一些用户将继续靠近屏幕边缘滑动以移动旋转木马(并不小心从当前页面导航),但其他用户将使他们的手指更靠近可见的旋转木马边界,因此不会陷入刷新中的膀胱边界。

左图:裙子下面有点的图片。右图:两张半图片
旋转木马占据了整个屏幕宽度;用户在使用滑动手势时不小心回到了上一个浏览器页面。
左图:一条侧面有箭头的裤子;右图:穿灰色背景的衣服,在图片周围留一些空白。
Net-a-porter.com(左)和Macys.com(右)通过在旋转木马和屏幕边缘之间留下一些空白,让用户更容易通过滑动图像旋转木马。Net-a-porter上的箭头为防止滑动混淆提供了额外的保障(用户总是可以选择点击箭头而不是滑动来保护自己免受滑动混淆)。

结论

使用旋转木马在小屏幕上节省空间的诱惑可以大,但旋转木马物品可以很少的可发现性,特别是当没有用强大的线索宣传,如连续性或箭头的幻觉。如果您最终在您的移动网站上或移动应用程序上有了旋转木马,请确保它没有过多的元素,并且它支持滑动。

更多关于设计移动旋转木马的信息,请参阅我们的报告移动应用和网站的用户体验