按键的位置是如何强化用户习惯的?

当设计师需要向用户展示大量的数据时,总是不可避免要利用到筛选和排序。筛选和排序可以帮助用户缩小他们正在寻找的数据范围。

当设计师需要向用户展示大量的数据时,总是不可避免要利用到筛选和排序。筛选和排序可以帮助用户缩小他们正在寻找的数据范围。

目前我正致力于提升一家大型电子商务的移动端用户体验。一个好的导航结构以及深思熟虑后的筛选和排序,是让用户轻松找到目标数据的关键。

筛选和排序的设计当然绝不是一件复杂的事情,但仍有很多不同的方案去实现。

弹出式筛选页

有很多APP使用这种方式。筛选页在搜索结果屏幕上展示给用户。筛选页覆盖在搜索结果页之上是为与已经展示的结果数据进行上下文的关联。

按键的位置是如何强化用户习惯的?

Foursquare

按键的位置是如何强化用户习惯的?

Amazon

按键的位置是如何强化用户习惯的?

Etsy

  • 应用场景:当筛选项不是很多,并且你希望能够对搜索结果数据维持关联时可以应用。在展示搜索结果时应用通常能收到好的效果。
  • 案例学习: Foursquare and Etsy 都使用了标准模式,而Amazon则使用更为个性化的解决方案。

满屏式筛选页

这种方式同上文的弹出式很相似,但是它需要更多的专注力和更多的筛选条目,因此牺牲了对上下文的联系。

按键的位置是如何强化用户习惯的?

Airbnb

按键的位置是如何强化用户习惯的?

Kayak

按键的位置是如何强化用户习惯的?

Hostelworld

  • 应用场景:当需要筛选的数据很多时,这种方式能够给你更多的可利用空间,并且用户在翻看筛选项时不会觉得有干扰。
  • 案例学习:上面的屏幕截图中,Hostelworld更适用与上下文联系的弹出式筛选页方式,因为只有两个筛选项要求用户选择;我会使用同上面的Foursquare相似的方式。Hostelworld还可以通过“重置”动作来简化筛选。

搜索结果再筛选

搜索结果是难以预料的,因为数据的返回很大程度上是基于用户的输入。哪种方式是好的解决方案取决于垂直线上的数量和数据的总量。

按键的位置是如何强化用户习惯的?

Apple

按键的位置是如何强化用户习惯的?

Etsy

按键的位置是如何强化用户习惯的?

  • 案例学习:苹果平等对待每一个搜索请求。在之前页面选中的分类现在放在满屏式的筛选页中。另一方面Etsy利用了更为灵活的方式:基于用户搜索请求的特殊性,提供给用户一个完全不同的方式。
  • 如果用户搜索一个一般性商品,例如“anchor(锚)”,Etsy就会提供分类让你缩小搜索结果范围。若果你是搜索更精确的商品,例如“anchor necklace(锚项链)”,Etsy就会马上返回商品列表。

排序

与筛选不同,排序不限制展示给用户的数据,但改变了结果的展现方式。通用的排序功能是按价格、品质或字母顺序。为了节省空间,可以学习上面的Etsy和Foursquare将筛选和排序合并在一个页面中。

按键的位置是如何强化用户习惯的?

TripAdvisor

按键的位置是如何强化用户习惯的?

Kayak

按键的位置是如何强化用户习惯的?

Hostelworld

  • 应用场景:当用户很难自己找出极限值(如最低价格)时,排序便会发挥作用。在手机上,这种场景很早就存在,因为设计师需要在很有限的视图尺寸上做设计。这是设计师必须做出的主观决定。
  • 案例学习:TripAdvisor和kayak都选择了弹出式,而Hostelworld却仍用满屏式。再一次地,我建议他们不要用满屏式,因为这样会将用户带离查询结果。

筛选项上:分开展示重要的选择项

并非所有项目都值得被筛选。展示顶层决定项是个聪明的选择,列如分别位于不同屏幕的产品类别。这些几乎是所有用户都会做出的决定,无论他们在寻找什么。

用户会知道在哪个类别下他最能找到他要找的产品,但他可能无法确定价格范围或颜色。

按键的位置是如何强化用户习惯的?

Postmates

按键的位置是如何强化用户习惯的?

Etsy

按键的位置是如何强化用户习惯的?

Apple

  • 应用场景:不是所有项都应该填塞在筛选中。会被几乎所有用户选择的重要的顶层选择项最好放在最前。这也助于理清和简化用户体验。
  • 案例学习:Postmates让你在进入APP上的一个商铺前先选定产品类别,进入商铺后即展示商品,并将产品类别藏于筛选页上。

结论:思索再三

筛选和排序是帮助用户更便捷地找到目标的有力工具。多花些时间去考虑你的可能选择——这会让你获益的。

记住,最好方法的是不需要筛选和排序——这是可能实现的。在这方面,Postmates是个很好的列子。

找出哪个筛选项被用得最多也是很有受益的。你可以基于这些结果为筛选项安排位置。airbnb知道房屋类型和价格是用户用得最多的,因此他们把这两项放在最上面。

就是这些了,正如我所说的,并不复杂~

来源: medium – Thierry Meier   译文出处:Tuesday_Woo

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30883/

(0)
CatherineCatherine
上一篇 2017-05-30 13:09
下一篇 2017-05-30 15:09

相关推荐

  • 关于交互设计细节,这里一个Case 就是 Pinterest的APP端,我们一起解读一下吧。

    Pinterest有着极棒的交互设计细节,同时,它构建的交流平台有十分丰富的设计作品。要知道,绝佳的设计能吸引新用户去更好的体验产品。 Pinterest是我经常使用的一个App,在我同时关注的好几个有关于UI和UX设计平台…

    2015-01-26
  • 用好的交互设计来管理复杂-“筛选器”

    我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。

    2017-05-19
  • 做好用户体验,掌握这些要素就够(三)

    用户体验这系列的文章要素,已经写到第三篇了,前面写的两篇《做好用户体验,掌握这些要素就够(一)》和《做好用户体验,掌握这些要素就够(二)》,更多的是偏向交互设计。而从这篇开始,会更多的偏向情感,也就是从人的情感、欲望、感觉方面来聊用户体验。

    2017-05-17
  • 响应式网页图片库设计的九个注意事项

    响应式设计 无疑是当前网页设计 领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网站中的图片库应当如何设计呢?

    2017-05-25
  • iOS 10锁屏交互大改,是革新还是灾难?

    本次更新除了锁屏交互的调整,也添加了一些更实用的小功能:例如删除系统软件、夜间模式等。虽然beta1版本体现出的诚意还不够,但是我相信两个月后的iOS 10正式版会令多数人满意。

    2017-05-22
  • 【设计竞赛】第二届“衲田杯”等你来挑战!

    📌编辑 | Cassi.W编者按:第二届“衲田杯”可持续设计国际竞赛报名正式启动!中国城市规划设计研究院院长、全国工程勘察设计大师杨保军担任本次竞赛评委会主席。别犹豫啦,招呼你和你的小伙伴,快来报名参赛吧!不知大家是否记得宿迁那片迷人的多彩衲田花海?又是否还记得2017年这些在衲田花海绽放的一大波创意?▼▼▼点击图片了解更多 ↑↑↑没错!就是2017年国际设计竞赛的一匹黑马:“衲田杯”可持续设计国际竞赛第一届“衲田杯”可持续设计国际竞赛...

    2018-03-22
  • 特殊情况下的APP设计(6):交互走查表

    本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy~

    2017-04-27
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08
  • 布局&构图&版式设计-木卫艾欧网-交互设计学堂

    编者按:想成为一个合格的UI设计师,光会画图标可不行,今天360的@Micu设计小哥从头帮你补上版式这一课,分享他的界面构图三板斧,此外,你还能学会如何用设计语言解构画面,这可是设计师的必备职业能力呦!

    2015-01-06
  • 3步帮你搞定PRD文档

    很多新同学问道写PRD文档时不知如何下手,在这小编整理了一下如何搞定PRD文档的思路,还望对大家有帮助,这样也就值了。 一、理解什么是PRD? PRD:Product Requirement Document,产品需求文档,可以看出它是用来…

    2015-06-05