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

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

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

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

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

弹出式筛选页

有很多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

相关推荐

  • 面对大型项目的设计需求,设计师的定位与协作方式应该是这样的……

    工作需求每天都有,但总有一些冥冥之中会被更多人关注,如实事热点、周年庆典、大版本发布、热门合作等,那这些被更多关注的项目是否就是传说中的大型项目呢?视觉设计师在这样的项目中,又该如何发挥自己最大的作用,找到自己的最佳定位,保证高质量高效率的完成项目呢?Ps:养成良好的分类习惯,在需要时它也可以是你的加速度。ps:作为视觉设计师,要不忘设计的态度,时刻提醒自己,除了眼前的这个方案一定还存在一个更好的方案,时间允许的前提下不妨再对自己狠一点,过程虽然痛苦,但结果往往会带来惊喜!

    2017-05-10
  • SEO营销之浅谈用户体验

    好的产品不是做出来的,而是改出来的。任何一个产品都不可能一招致胜,都需要不断的打磨,改进,尝试过失败之后,才能更为光彩的进入用户的视野。在这个反复修改的过程中,大家提到最多的词恐怕就是“用户体验”了,没有之一。今天,山哥就来跟大家交流一下我对“用户体验”的理解,希望各位看官手下留情。什么是用户体验标准定义:人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗讲法:这个东西好不好用,用起来方不方便。总的来说,用户体验是用户...

    2018-03-23
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02
  • VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

    2018-04-21
  • 美术丨创意Game可用性微交互设计:视觉空间微交互设计

    文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

    2018-02-28
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • ”交互设计“菜鸟如何入门?

    大多数新手初次自学设计时有两大难关要过:我适合干这行吗?我该如何入门?带着这两种疑问上路,学习效果很难保证。今天小编特地分享亲身经历以及多年设计经验,为你解答这两大难题! 1. 我适合干这行吗? “我不是…

    2015-08-27
  • 网易考拉海购APP产品体验报告(可下载)

    干货分享:网易考拉海购APP产品体验报告,33张幻灯片解析产品体验

    2016-08-23
  • 经验分享丨赶集App中秋节的皮肤设计

    随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。

    2017-04-30
  • 提升用户验证,要好好考虑几件事情

    出色的移动端用户验证是怎样的?减少注册和登录的痛苦?

    2017-05-06