菜单 关闭

带托盘的移动平面搜索:新的和改进的设计模式manbetx官方网站手机版

通过 凯瑟琳·怀特顿7月26日,2015年

总结:在移动设备上以“托盘”覆盖方式显示面搜索控件是一种新的有效解决方案,可以在小屏幕上同时显示结果和过滤器。


最近,一些大品牌已经为移动设备上的显示面控件引入了一种新方法,把它们放在实际结果的顶部的“托盘”覆盖层中。这种新的设计方法解决了移动设备上许多分面搜索显示的一个主要缺点:在单独的屏幕上放置分面控件,manbetx官方网站手机版这迫使用户更加努力地理解方面控件如何影响结果集。但在理解为什么会这样之前,让我们回到分面搜索的基础知识。

什么使分面搜索特别?

面向方面的搜索允许用户通过应用全面描述搜索空间的筛选器来优化一组结果。对于需要在大内容集中找到特定内容的用户来说,这种缩小是非常宝贵的。这类搜索在电子商务和旅游网站上已经很常见,以及许多不同类型的文档和媒体集合。分面系统包括两个关键要素:

  1. 构造复杂搜索的简单控件:提供熟悉的控件,如下拉菜单和带有自然语言标签的复选框,使普通用户能够将一大组结果缩小到满足其精确条件的小组,而无需任何布尔逻辑或查询语法的专门知识。
  2. 同时显示刻面控件和结果:同时显示过滤器和结果,使用户更容易理解两者之间的关系;理想情况下,当用户选择一个筛选条件时,通过动态更新结果集可以加强这一点。

简单的过滤器控件是分面系统中最明显的组件。然而,同时显示的重要性不应低估。早在平面搜索变得流行之前,我们有“高级搜索”屏幕,具有创建复杂搜索查询的类似控件。大的不同之处在于第一分面导航系统是在展示方面控制和结果同时,使每个过滤器的效果立即可见。这种创新体现了10可用性启发:提供快速的系统反馈,为用户提供控制和自由。

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

平面搜索最初是为台式机和笔记本电脑用户设计的。manbetx官方网站手机版将这种体验转换到移动设备上是困难的,因为让分面搜索对用户如此有用的东西——能够同时看到过滤器和结果——很难在一个小屏幕上实现。没有足够的空间来同时显示完整的方面和大量详细的结果。

直到最近,大多数移动设计师甚至没有尝试同时显示方面和结果,manbetx官方网站手机版而是选择将它们放在单独的屏幕上。但这个解决方案迫使用户导航到界面控制屏幕,做出选择,然后导航回结果集,查看其选择的效果。istockphoto.com移动网站展示了向移动用户提供多方面搜索的典型方法。结果页面包含一个图标,用户可以点击该图标打开facet控件(假设他们可以了解图标的含义)。一旦显示了facet控件,用户可以选择不同的过滤条件,但是,不清楚选择方面会对结果产生什么影响,因为:

  • 此屏幕上不显示任何结果。
  • 文件的数量,显示在页面标题中的更新速度太慢。
  • 当用户向下滚动以展开并选择下面的facet时,显示文件数量的头甚至可能不可见。

由于这些限制,用户必须返回到前一个屏幕,以了解他们的筛选选择是否有效地针对最佳结果,以及他们是否已将结果缩小到可管理的大小,或者他们是否应用了如此严格的标准,以至于没有结果匹配。

iStockphoto.com上的移动搜索结果和方面控制
左图:和许多手机搜索设计一样,manbetx官方网站手机版istockphoto.com不在实际搜索结果页面上显示分面搜索控件。相反,它要求用户导航到facet控件,在这种情况下,通过搜索栏右边缘由线条和圆组成的神秘图标。右:面控件占据整个屏幕,为了看到他们选择的效果,用户必须返回到结果屏幕。

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

最近出现了一种为移动用户提供分面搜索的新方法:将分面控件显示为搜索结果上方的“推出”样式托盘。这种设计允许manbetx官方网站手机版结果的连续可见性:即使面控件打开,关于结果的一些信息在背景中是可见的。AmazoniPhone应用程序和eBay的移动网站现在都使用一个覆盖层在搜索结果的同一屏幕上显示面控件。

移动面托盘覆盖示例
亚马逊的iPhone应用程序(左图)和eBay的移动网站(右图)最近都推出了一个覆盖层,可以在与搜索结果相同的屏幕上显示搜索方面的控件。

设计模式元素manbetx官方网站手机版

亚马逊和eBay的设计都包含了一些细节,结合起来创造了一个良好的用户体验:manbetx官方网站手机版

  • 一旦激活,facet控件出现在覆盖在结果屏幕顶部的垂直面板中。
  • 结果总是在背景中可见,并且可以在用户选择方面时看到变化。(然而,就易趣而言,用户很难知道结果是什么。亚马逊的设计更好,因为用户实际上从后台获得有用的信息。)manbetx官方网站手机版
  • 结果总数始终可见,即使用户向下滚动了一长串方面。(Amazon通过在屏幕顶部固定头部来实现这一点,这样即使facet列表向上或向下滚动,它仍然是可见的)。
  • 半透明的灰色阴影稍微模糊了基本的结果,并确保facet控件脱颖而出。
  • 面面板出现在屏幕的右边缘,使结果的左边缘保持可见。(这很有帮助,因为左边缘更可能有有意义的内容;有了亚马逊,你就可以看到产品图片了。)

(您还可能注意到,亚马逊和eBay都使用了实际的词语-过滤器完善–作为访问方面的命令,而不是一个特殊的符号。任何通常用于平面导航的标签–缩小结果范围,精炼,过滤器-比神秘更容易理解图标,而且绝对值得额外的空间。)

为什么同时显示结果和面控件很重要?

在可用性测试,我总是惊讶于那些成功的人是如何立即理解和使用分面搜索屏幕的,它往往包含许多不同的元素和控件。只要控件显示正确,大多数人直接跳到创建和精炼他们的查询。即时结果是流程的一个重要组成部分,因为它们允许用户在应用了错误的筛选器时立即看到,或者采用过窄的标准,消除了太多的选择。如果你能立即看到你的行为的效果,这两个错误都很容易恢复,但是如果没有这种可见性,用户可能会陷入一个乏味的循环波戈粘住在结果和过滤器之间。

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

在我们的全天课程中,了解更多关于小屏幕视觉显示的最佳方法移动和平板电脑的视觉设计manbetx官方网站手机版.