菜单 关闭

移动设备上的旋转木马

通过 Raluca Budiu2018年8月19日

简介:旋转木马在触摸屏上饱受低的可发现性和顺序存取,而且不是所有manbetx官方网站手机版实现刷卡作为旋转木马控制。。


在桌面,旋转木马一直是一个受欢迎的方式坚持多条内容在首页没有占用太多的空间。在移动,旋转木马时增加人气iPad首次引入。(原始iPad manbetx官方网站手机版是着迷于etched-screen美学和想要控制布局最微小的细节。因此他们经常放弃垂直滚动的卡片或carousel-like manbetx官方网站手机版。)

就像菜单手风琴在移动,旋转木马有一个重要的优势:他们很多内容融入一个相对较小的足迹。第二大优点就是,他们可能解决内容排名优先争吵在组织内通过允许每个人让他们在主屏幕(尽管它经常变成一个看不见的标志)。但是,旋转木马也有一些重要的缺点:

  • 他们都是基于顺序存取:用户必须经过所有的物品旋转木马为了得到一个接一个,最后一个。这种交互是低效的。。
  • 他们并不总是发现。即使人们认识到旋转木马,他们往往会没有办法知道哪些项目是驻留在与旋转木马没有互动。。

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

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

顺序存取

经历项目一个接一个的希望找到一个感兴趣的可能是没有乐趣:大多数人停止后观察3 - 4不同页面的旋转木马。正因为如此,我们建议用户应该能够达到最后一项在旋转木马(我3 - 4步骤。e。和敲击,输入指令)。。

如果你有大量的物品,使用列表视图,而不是和允许人们直接访问页面上的任何物品。。

注意,建议3到4步骤达到最后一项并不意味着旋转木马应该只有3或4项。如果多个项目每个页面显示,旋转木马可能会更适合。Netflix在下面的例子中,英雄旋转木马每页只显示一个条目,需要5刷到6th项目在旋转木马,但另一个旋转木马每页显示3项(因此需要16刷50到列表中的最后一项)。。

的目标是优先考虑旋转木马的物品用户最感兴趣的,这样的第一所示。。考虑使用个性化使前几个啤酒更相关的特定用户。优先级减轻顺序存取的沉闷,因为用户通常不需要通过很多步骤来进行。同时,通过展示最好的项目,优先顺序可能吸引用户,鼓励他们坚持投影机超过一个随机序列。。

Netflix iPhone(左)使用旋转木马来显示长列表:Netflix上的受欢迎的旋转木马有70 +项目和要求用户滚动超过23倍最后一项。相比之下,好戏上演。com(右)正确使用只有4项英雄旋转木马。。

可发现性

匆忙移动用户寻找具体内容可能永远不会注意到旋转木马。即使self-animated旋转木马,一个移动页面太小,旋转木马的形象已经改变的时候,用户可能会浏览一遍,看不见它了。。

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

  • 点或线
  • 箭头
  • 连续性的假象

有些旋转木马线索比其他人强。。点通常是软弱的象征:因为他们很小,人们往往没有注意到他们。连续性的假象,由一半图像或文本看起来像他们继续超出屏幕的垂直边缘,是一个强大的旋转木马提示——用户快速了解,他们可以得到更多的内容超越屏幕边缘。。

另一个问题,使旋转木马提示如箭头和点容易错过,他们经常出现在一个旋转木马的形象。当UI元素出现在繁忙的背景之上,他们可以低对比度与周围的形象,可以融入它。手机这一问题尤其重要,眩光由于以外的使用也会影响质量的对比。。

下面是几个例子的manbetx官方网站手机版与强弱旋转木马的线索。。

Zara主页在移动
Zara。com没有旋转木马意符用来显示给用户,他们可以访问更多的内容用水平。旋转木马self-animated,但那些滚动过去大图像没有注意到它。。
NBC的手机主页上白色背景图像和白色箭头
美国全国广播公司(NBC)。com:箭头上的旋转木马图像混合的图像。。
屏幕的下半部分是一个旋转木马,股票图表和小点
弱旋转木马提示:股票iPhone显示低对比度点下的旋转木马。。
旋转木马的截图显示的截断项。。
强烈的旋转木马提示:一半图像(如在FilmStruck iPhone应用程序——左)和不完整的单词(比如OpenTable的iPhone应用程序——右)表示用户有更多内容向右或向左。。

即使对于旋转木马有良好的可能性,人们不会费心去看看后续项目如果第一项不是有趣的。第一项作为推荐信的内容在旋转木马和有效的来源信息的气味其他项目——人们会浏览旋转木马,如果第一项似乎与他们的目标,并将忽略它如果不(尽管,事实上,在旋转木马可能相关的其他元素)。。

因此:

  • 旋转木马的物品应该是高度相关的,所以人们能够预测他们会发现如果他们的内容的类型与旋转木马。。
  • 重要的项目中使用英雄旋转木马应该以其他方式访问,以防用户内容完全被忽略。如果内容以任何方式是至关重要的,应该有其他路径。。

控制旋转木马

当人们想与触摸屏上的旋转木马,他们刷。不支持高级旋转木马的这个手势是完全没有预料到的,是一种糟糕的用户体验。现在大多数用户都熟悉这个手势水平导航。。确保你的旋转木马支持刷卡。。

电脑显示器的图像与文字,点下面的文本
Dropbox不允许用户刷卡为了移动旋转木马;相反,人们利用下面的小点。(除了一个陌生的交互技术,要求打小点是有问题的任何UI,因为费茨的法律;特别坏的触摸屏,因为黄油手的问题。)

使用滑动控制投影机创建的问题刷卡模棱两可在iOS。。刷卡模棱两可指相同的滑动手势可以被解释为意味着不同的事情取决于执行的精确位置。自iOS 7,刷卡模棱两可已成为常数与iOS的危险。例如,Safari浏览器,水平滑动左边边缘的代名词回来:需要用户回到前一页。与iPhone X,刷的下缘水平接近屏幕切换应用程序。不幸的是,同样的动作还用于浏览旋转木马启动时在一个稍微不同的位置在屏幕上。因为刷卡不是一个手势nontouch设备可用,一些响应manbetx官方网站手机版选择放弃它在移动,代之以其他的方式推进旋转木马。例如,Dropbox预计人们点击下面的小点推进旋转木马旋转图像。首先,尽管这些点一直tappable iOS中实现旋转木马,绝大多数的用户甚至不会梦想点击——他们没有意识到这些点可以用来控制旋转木马。其次,即使他们想利用他们,他们那么小,接近对方,任何试图选择一个将是徒劳的。。

问题的部分解决方案由滑动歧义是离开一个“页面地沟”在旋转木马——从本质上说,一些空白,告诉用户,旋转木马边界不到达屏幕边缘。一些用户将继续刷靠近屏幕边缘移动旋转木马(和不小心离开当前页面导航),但其他人会让手指接近可见旋转木马边境,因此不刷卡模棱两可。。

左截图:一件衣服用点下的形象。正确的截图:两个图像的一半
Jcrew。com:旋转木马占据整个屏幕的宽度;用户不小心回到之前的浏览器页面时使用了滑动手势。。
左:用箭头在裤子;右:穿着灰色背景上一些空白。。
net - a - porter。com(左)和梅西百货。com(右)让用户更容易留下一些空白,刷卡通过图像旋转木马旋转木马和屏幕之间的边缘。net - a - porter箭头上提供额外的保险刷卡模棱两可(用户可以选择点击箭头,而不是直接刷卡,以保护自己免受刷卡歧义)。。

结论

使用一个旋转木马来节省空间的诱惑在小屏幕上可以大,然而旋转木马物品可以有小的可发现性,特别是当广告不好与强大的线索,例如连续性的幻觉或箭头。如果你得到一个旋转木马在你的手机网站或在你的移动应用程序,确保它没有过多的元素和它支持刷卡。。

更多manbetx官方网站手机版ing移动旋转木马,看到我们的报告移动应用程序和网站的用户体验。。