Menu 关闭

手机上的手风琴

通过 拉鲁卡布迪乌5月31日,二千零一十五

总结:手风琴在移动设备上节省了空间,但它们也会导致定向障碍和滚动过多。Easy manbetx官方网站手机版design fixes improve the usability of these UI elements.


手风琴是一种设计元素,manbetx官方网站手机版就地展开以暴露一些隐藏信息.与覆面不同,手风琴将页面内容向下推,而不是叠加在页面内容的顶部。

TimMy.com:价格 过滤器是作为一个手风琴实现的,它在适当的地方展开,将页面内容向下推。

同时在桌面上使用手风琴是有争议的,手机上,手风琴是最有用的设计元素之一,manbetx官方网站手机版因为他们经常解决在太少的屏幕空间中显示太多内容.偶尔地,然而,手风琴会引起混乱;luckily,in the browser this confusion can be easily eliminated by extending the functionality of the背部按钮。

Mini-IAs,or Why Accordions Are Great on Mobile

One of the biggest advantages of accordions is that they often allow users to在关注细节之前先了解全局,and they can effectively mitigate the common problem of overly long pages.

当用户登陆新网页时,他们behave like animals foraging for food in the wild: they try to get a sense of what the page contains and whether that information is going to be relevant to their goal.As soon as they've answered that question,他们要么继续滚动(如果他们确信页面适合他们的需要),要么离开寻找更好的信息来源,if they think that the page is not what they need.当一个移动页面包含许多无关内容时,users need to scroll down to find them,当大部分页面内容不相关时,这是一个冗长而无回报的过程。users often停止滚动然后离开,missing the bits that respond to their questions simply because they are too low down the page.

世界野生动物基金会:手机页面显示了不同的页面部分。Mobile users had no way of knowing what type of content the page included — for instance,他们不可能猜到这个页面包含了老虎面临的威胁的描述,或者是一个捐赠链接,除非他们努力向下滚动到页面底部。顶部概述 节没有诱使向下滚动并找到该信息。

那么解决方案是什么?一good webpage announces what it is about.This is akin with having an in-page table of contents (or迷你IA) that is salient and visible right away,当用户第一次登陆页面时。这种目录有三个主要好处:

  1. 它告诉用户页面包含什么,以及信息类型是否可能与他们的目标相关。
  2. It gives users直接存取有兴趣的部分。
  3. 它帮助用户形成心智模型在这一页上,潜在地,的网站。

There are several ways to realize such a mini-IA or table of content: jump links,辅助导航栏,菜单or accordions.我们在new reporton the user experience of mobile apps and websites.今天我们将重点讨论手风琴,哪一个,其中,可能是最优雅的解决方案:它们占用最少的空间(因为它们可以作为节标题使用),并且具有保持用户就位的潜力。

关于药物页面,WebMD显示了通过手风琴实现的页面的迷你IA(右)。不幸的是,默认情况下,第一个手风琴被展开(左)并阻止用户快速浏览(不滚动)页面结构。一些用户可能认为该页面只是关于毒品警告,在向下滚动之前就离开了。

这样的手风琴不仅在内容页面上有用,但形式也是如此。折叠手风琴下的每一步都是将表单工作流传递给用户的有效方法,而不需要压倒用户(长表单在移动设备上通常令人望而生畏),也不需要加载多个页面。

skinyties.com的签出表单使用了允许用户查看整个工作流的手风琴,而不会被一个非常长的表单淹没。

Difficulties Caused By Accordions

手风琴下的折叠细节是我们在手机上大力提倡并反映了将辅助内容延迟到辅助页.Yet accordions can also introduce usability problems.

Disorientation

当用户展开手风琴时,manbetx官方网站手机版设计师可以将手风琴移动到屏幕顶部(如下面的webmd示例),以最大限度地查看手风琴内容。不幸的是,这样做的缺点是让用户认为他们导航到了一个新页面。因此,他们经常尝试使用背部按钮返回关闭手风琴的视图,but instead they will be taken away from the current page.

WebMD.com: When users expanded the副作用 手风琴,内容被推到页面顶部,使其看起来像加载了一个新页面。期望是通过点击浏览器的背部 按钮用户可以返回到关闭的手风琴视图。

为了防止这种混乱,也为了让用户能够迅速地以封闭的手风琴回到视野中,考虑使用背部浏览器按钮作为手风琴折叠按钮:如果最后一个用户操作是展开手风琴,然后敲击背部应将用户带到关闭的Accordion页面视图。本质上,这意味着将手风琴视为页面(锚定)链接中的手风琴。

另一种解决方案(以一种效率较低的方式使用空间,但是)是为了防止在手风琴展开时不滚动页面而产生新页面的错觉。此解决方案具有保持面向用户的优势。

滚动到下一个选项

大多数手风琴只需按下打开它们的同一个元素就可以关闭(尽管手风琴用于导航菜单时会有更多的变化)。

有时手风琴下的内容可能很长,结果,允许快速访问“关闭”按钮是有益的。For instance,在下面的维基百科例子中,的内容历史手风琴元素很长,如果读者决定停止阅读,转而阅读另一个副标题,they would have had to either scroll down to find the next accordion,或向上滚动以关闭历史手风琴。

维基百科网站:历史 accordion expanded to many screenfuls of content.Readers deciding to read for a while and then move on to another  subtopic had to scroll up to close the历史 手风琴或向下滚动以导航到列表中的其他手风琴。

在这种情况下,一个持久的手风琴头或另一个浮动元素,允许用户快速关闭手风琴,可以加速交互,节省人们一些精力。In the browser,将手风琴视为锚链并使用背部取消手风琴的扩展,而不是将人们带到上一页,like we proposed above,也可以加速互动。

为了解决滚动远离手风琴内容的问题,Android的Zappos为用户提供了Collapsebutton to let them easily collapse the accordion and get back to the filter-list view.不幸的是,在测试中,没有用户识别出该按钮的作用,所以他们没有使用它。(应用于列表的术语“折叠”对于用户体验书呆子来说是有意义的,万博官网manbetx下载but for an average user this word is mainly used with a meaning like "he collapsed from heat stroke.")

Zappos for Android: The品牌 滤波器是一个展开到位的手风琴(左);如果用户点击Collapse 按钮,它们可以返回到过滤器列表(右)。

亚马逊也使用手风琴,但不是引入一个不熟悉的按钮,它只是让手风琴控件粘在值列表的顶部。This solution was a lot more usable than Zappos's.

亚马逊网站:鞋尺码 一旦用户开始滚动大小列表,手风琴标题就变得很粘了。这种设计有manbetx官方网站手机版助于快速关闭手风琴和导航到下一个选项。

结论

手风琴是移动设计的一个很好的工具,因为它可以在有限的空间内压缩信息,使用户能够manbetx官方网站手机版看到大局,关注要点而不是细节。However,当手风琴下的内容太长时,它们可以迫使用户滚动太多,以折叠手风琴并导航到页面上的其他信息。Accordions can also increase user disorientation.Luckily,这些问题很容易通过小的设计变化来解决,例如持续的手风琴标题和将手风琴视为manbetx官方网站手机版jump links.

在本报告的最新版本中,进一步了解如何提高移动设计元素的可用性。manbetx官方网站手机版移动应用程序和网站的用户体验.