菜单 关闭

手机在上雕琢平面的搜索与托盘:新的和改进的设计模式

通过 凯瑟琳Whitenton2015年7月26日,

简介:多么控件显示在移动设备上的托盘叠加是一种新的有效的解决方案的挑战在小屏幕上显示结果和过滤器。


最近,几大品牌已经引入了一个控件在移动设备上显示方面的新方法,通过将它们“托盘”覆盖的实际结果这个新的manbetx官方网站手机版方法地址的一个主要缺点典型许多面向方面的搜索在移动设备上显示:控制一个单独的屏幕上的位置方面,这迫使用户难以理解方面控制如何影响结果集但在理解为什么会出现这种情况,让我们回到面向方面的搜索的基础知识。

面搜索什么特别之处呢?

面向方面的搜索允许用户完善的一组结果通过应用过滤器,全面描述了搜索空间这样的缩小是非常宝贵的对于用户需要找到具体的在一个大内容集这种类型的搜索已经成为常见的电子商务和旅游网站,以及许多不同类型的文档和媒体集合在上雕琢平面的系统包括两个关键元素:

  1. 简单的控制构造复杂的搜索:提供控制下拉菜单、复选框熟悉自然语言标签赋予普通用户缩小一套大型的结果一个小套,满足他们确切criteria-without任何特殊的布尔逻辑或查询语法知识。
  2. 同时显示方面的控制和结果: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria.

简单的过滤器控制是最明显的面系统的组件然而,同步显示的重要性不可低估Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries最大的区别与介绍第一个分面导航系统在显示方面 控制和结果 与此同时,这使得每个过滤器立即可见的影响这一创新体现了2的10 usability heuristics:提供快速反馈系统,并提供用户控制和自由。

在移动设备上显示搜索方面的挑战

面搜索最初manbetx官方网站手机版为桌面和笔记本电脑用户翻译这段经历在一个移动设备是困难的,因为这使得面向方面的搜索的东西有助于用户——能够看到过滤器和结果在同一时间,一个小屏幕上难以实现根本就没有足够的空间来展示一个完整的方面同时和相当多的详细结果。

直到最近,大多数移动manbetx官方网站手机版人队还没有试图同时显示方面和结果,而不是选择放在单独的屏幕但这个解决办法迫使用户导航到facet-control屏幕,让他们选择,然后返回的结果将影响他们的选择istockphoto.com手机网站展示了典型的为移动用户提供面向方面的搜索方法结果页面包含一个图标,用户可以点击打开方面控制(假设他们可以算出的图标是什么意思)一旦方面显示控件,用户可以选择不同的过滤条件,但它不是明显的选择如何影响结果方面,因为:

  • 所有的结果都显示在这个屏幕。
  • 文件的数量,显示在页眉更新太慢。
  • 头显示文件的数量甚至不可见一旦用户滚动到扩大并选择以下方面。

Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match.

移动搜索结果和方面控制在iStockphoto.com上
左:像许多移动搜索manbetx官方网站手机版,iStockphoto.com不显示在上雕琢平面的搜索控制实际的搜索结果页面Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen.

新的解决方案:“托盘”叠加显示方面的控制

最近为移动用户提供面向方面的搜索的新方法已经出现:显示方面控制作为“推出”风格托盘上的搜索结果这manbetx官方网站手机版允许连续的可见性的结果:即使在开放方面控制,一些在后台信息结果是可见的亚马逊的iPhone应用程序现在和eBay的手机网站都使用一个覆盖在相同的屏幕显示方面控制搜索结果。

托盘覆盖移动方面的例子
亚马逊的iPhone应用程序(左)和eBay的手机网站(右)最近推出了一个覆盖控制在同一屏幕上显示搜索方面的搜索结果。

设计模式的元素

亚马逊和eBay manbetx官方网站手机版包括几个细节,共同创建一个良好的用户体验:

  • 一旦激活,一方面控制出现在垂直面板覆盖在屏幕上的结果。
  • 结果总是在后台可见,可以看到改变用户方面的选择(然而,在eBay的情况下,用户很难分辨出结果是什么亚马逊的manbetx官方网站手机版是更好,因为用户实际上从后台获取有用的信息。)
  • 结果的总数总是可见,即使用户滚动了一长串的方面(亚马逊完成通过修复屏幕顶部的头,仍然可见即使方面向上或向下滚动的列表)。
  • 一个半透明的灰色影子稍微掩盖了潜在的结果和控制确保方面脱颖而出。
  • 方面面板出现在屏幕右边缘,离开左边缘的结果可见(This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.)

(你可能也注意到亚马逊和eBay使用实际的词语过滤器完善– as the commands to access facets, rather than a special symbol.  Any of the labels commonly used for faceted navigation –缩小你的结果,提炼,过滤器- - - - - -比神秘更可以理解吗图标,绝对值得额外的空间)

同时显示的结果和控制方面为什么重要?

在可用性测试中,我总是惊讶成功人士立即理解和使用面向方面的搜索屏幕,它往往包含许多不同的元素和控件只要控制得当,显示大多数人直接创建和完善他们的查询即时搜索结果是一个重要的过程的一部分,因为他们允许用户看到马上如果他们有错误的过滤,应用或应用过于狭窄的标准,消除了太多选择这些错误都是很容易恢复,如果你能马上看到你的行为的影响,但如果没有这种可见性最终用户可以在一个乏味的循环pogo-sticking结果和过滤器。

方面“托盘”的方法说明了亚马逊和Ebay不提供完整的可见性,因为只有结果屏幕的一小部分是可见的但是至少这些创造性的解决方案提供一些可见性的影响应用过滤器用户可能仍然发现他们需要关闭并重新打开方面控制,但这种方法更像是扩大当前页面的一部分,而不是在不同的页面之间来回跳。

找到更多关于视觉的最佳方法更小的屏幕上显示在我们的全日制课程视觉设计为移动和平板电脑