如何设计筛选器

近期我们对一个电商平台的高级筛选进行迭代,希望能提高玩家的选购效率。作为交互,在这次迭代中遇到不少令人纠结的地方,于是整理了几个小感悟,希望和大家聊聊到底该如何设计筛选器。

筛选器是一个在APP中俯拾即是的模块,从电商到酒旅,甚至在社交产品中,都能找到它的影子。它常出没于信息量大的地方,为的是帮助用户“更准更快”的找到想要的玩意儿。但如此常见的模块却并不简单,同样是价格筛选却以不同的样式在不同类型的产品中百花齐放,一味的“向竞品致敬”很难解决工作中的实际问题,只能从头探究一下其中奥妙。

什么是筛选器

假象一下,你年会中了大奖,在众人的“祝福声”中做出请大家吃大餐的艰难决定。你打开XX点评APP - 选择 美食 - 设置 热门商圈天河 - 选择 按人气排序 - 又咬咬牙在筛选栏按下『100-300元』,切换了几次菜式,终于选定目标。摸摸荷包倒吸几口气后,固作镇定的在群里说咱们去这里吧,大家敞开了吃,别客气~ 

以上便是从使用场景到消费决策的完整流程,筛选器在其间占了举足轻重的作用。每一步选择,都浇筑了你的良苦用心和美好祝愿。你是谁,为啥来这里,期望找点啥,都或多或少影响了你的选择。所以说,好的筛选器是各自不同的,但设计目标又是各自相同的:帮助目标用户,既快又准的找到东西。

筛选器的类型

随意打开手机中几个常用的APP,整理了下常见的选择控件样式,真是出乎意料的多(见下图)。

仔细一琢磨,诸多条件间,并没有明确的优劣之分。比如某电商在商品列表顶端,贴心得将关键条件外漏,但某资讯产品却将同样的条件以填鸭式选项卡控件收至二级。所以不得不感叹,筛选功能的设计无非是在各种筛选维度与UI样式的排列组合间,选取最优解。

筛选器的设计原则

高级筛选中,某条件究竟需要外露几个选项?是向改版后的数据提升妥协,还是像个老学究一样偏执于条件间一致性?这背后的纠结也只有参与过改版的人才明白。

1.收vs放

移动端受限于屏幕大小,如何才能“收放自如”显得尤为重要。如果某些维度是用户决策的必经路径,可以帮助用户快速明确目标;或者用户需多次变更的筛选条件,就需要把选项露出来。一些大多数用户不需要的条件,或者使用频次不高的内容,就建议把它用心收起。

2.结构稳定vs快捷偏好

上一次修改高级筛选时,我们结合用户选购时的喜好分布,突出常用条件,弱化低频内容,希望提供更符合“快捷偏好“的选购体验。上线后,在高级筛选处发生的成交数据虽然上升,但也意外收获了些吐槽的声音-用户对于不同条件的“选项展开数量”和“几个筛选功能中条件的包含关系”,表现出困惑和不习惯。

复盘后发现,我们希望带给用户更好的体验,本质是希望用户付出最小成本满足需求,但成本=操作成本+思考成本。之前的改版,就是一味顾忌用户操作的快捷,但无端增加了用户对规则的理解载荷。

所以当选购数据喜欢分布明显时,首屏露出最核心的几个消费决策项,收起低频选项,效果是显而易见的,但需要注意规则的一致及易懂。当玩家选购路径多元时,则需牺牲一些信息的简洁性来保证玩家能在至少一个主要场景下,找到完整的筛选条件。

3.稳定性vs灵活性

由于我们平台交易的是游戏道具,筛选条件多,且条件间关系复杂,容易因误操作带来无结果的消极体验。于是考虑引入“选项间灵活联动”。这在淘宝中使用较多,比如当你选购咖啡时,选择某“咖啡品牌”后,可选的“咖啡种类”会实时发生变化,自动剔除选项间互斥的内容(见下图)。

我们产品未必合适直接复刻这个体验。因为淘宝中产品特征突出,但我们以标品为主,条件间映射关系并不浅显;加之我们条件多,过多时隐时现的条件势必会让玩家迷失。所以最后只选择了几个关键的条件,添加了灵活联动逻辑;并将不可选条件灰显,而非消失,进而在顾忌选项灵活显示的预期下,对稳定性做出妥协。

做筛选器的经验尚浅,没有大而全的方法论,只能简单罗列几个小规律。又出于对工作内容保密要求的考量,删除了具体的改版示例,感谢能坚持看到这里的客官,期待你的小心心~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 每天进步一点点点点点点点点点点点点点点点点点点点点点点点点点点点点点点~~从开始只能写几句话、模仿别人的观点,到现...
    一个帅气的名字呀阅读 17,803评论 4 31
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 社交红利阅读笔记 书名:社交红利(修订升级版) 作者:徐志斌 出版社:中信出版社 正文前笔记: 推荐序1摘要 社交...
    凫水阅读 8,810评论 4 26
  • “啊!我不甘心!”我,是天下第一圣,有着无数神通法宝。虽然我已斩开仙界大门,却又耗尽了最后一滴圣血,掉下圣峰。“我...
    阳珊阅读 344评论 4 6
  • 01 1.最近看到一个有趣的观点:多做高收益值,长半衰期的事。因为半衰期是一个物理概念,所以物理老师很敏感。用人话...
    5c3196fd878b阅读 281评论 0 2