浅析电商平台的产品对比功能

2014年在做新一站保险网产品对比功能优化时,做的一份竞品分析。

货比三家不吃亏,这个观念已经深入人心,这点在日常的购买行为中已经有所体现。通常,对于不熟悉或者重要程度很高的产品,例如汽车,会花时间和精力去搜集信息,找到符合自己需求的某些备选车型和品牌,通过对比后做出购买决策。随着互联网时代的到来,人们搜集和对比信息的成本越来越低,对比功能成为了汽车和3C产品评测网站的标配,不少B2B和B2C平台也有了这个功能,例如,阿里国际站和京东商城,本文挑选了这两个平台和一个国外的保险网购平台ehealthinsurance,从交互设计的角度进行了详细的分析。

需求分析

1.目标场景

需要购买不熟悉或重要程度很高的产品,B2B的初次采购,B2C的汽车、保险和礼品等。

2.操作流程

搜索>筛选>浏览并做简单对比,挑选出若干>仔细对比>联系或购买

3.用户需求

在同一个类别下进行比较,可以同时比较多个产品;

浏览产品时,可以加入比较;

比较过程中,如果不合适,可以随时剔除备选项;

如果不确定,可以查看详情,了解更多;

如果发现最优选项,可以直接联系或购买。

4.设计目标

产品列表页的每个产品所在区域有明显的“加入比较”,明确告知用户功能的限制;

自动更新对比栏,但不能影响用户的正常浏览;

对比页面清爽,可以轻松区分出不同的地方,删除、查看等操作易于发现和使用;

案例分析

阿里国际站

B2B平台上的采购行为是需求较为明确、决策相对理性的。通常,采购商是在寻求固定的合作伙伴,所以会全面的评估供应商的产品和公司,这一点有别于普通的个人购买行为。

1.入口

“加入对比”默认设置在产品列表页,但产品详情页没有。

2.点击“加入对比”后

点击后会有成功提示,还会有浮动层告知用户已添加多少,最多可添加多少。浮动层较小,且允许手动关闭,基本不会影响正常浏览。

不过,点击“对比”按钮后,返回产品列表页或者刷新产品列表页,会恢复到默认状态,这样用户难以识别出那些已添加的产品。

3.比较页面

点击对比后,会在新窗口打开。当发现有明显不合适的产品,可以选择删除,但删除后没有办法撤销删除;当用户想要了解更多时,可以点击产品名称和公司名称,可以在线联系供应商;如果有中意的产品,可以加入询盘篮,以较为正式的邮件询问供应商。

4.极限情况

只选择一个产品时,其实是没有办法进行对比的,阿里的设计是将对比按钮置灰,明确告知用户。但是,当用户已添加20个产品,再添加时,没有任何反馈。

不会记录用户已添加到对比栏中的产品,下次访问时,需要重新添加。

京东商城

购买经历较少的人(多为女性)在京东上选购3C产品时,会去反复对比自己心仪的产品,最终做出自认为最优的购买决策。

1.入口

默认以复选按钮的形态存在,设置在产品列表页,入口还是比较明显的。

2.点击“加入对比”后

勾选后,加入对比的按钮也会有明显的视觉提醒,对比栏从浏览器底部弹出,但是会影响正常浏览,需要手动隐藏。与B2B不同的是,京东仅支持同时对比4个产品。对比栏会自动展开,并利用视觉化语言传递这个信息。

对比栏的旁边有浏览历史,可以直接加入对比,打通了正在浏览与浏览历史。

点击“隐藏”后,对比栏收起为小按钮,切换到其他页面,对比栏也会保持隐藏状态,不过页面滚动后才会出现,比较难发现,且收起后不显示对比栏中的产品数量,会给用户增加记忆负担。

点击对比栏,它会展开,再次点击,不会收起,需要点击对比栏上的“隐藏”,这个交互前后反差较大,操作起来不太顺畅。

鼠标移入对比栏的某一个产品所在的区域,会出现“删除”按钮,比较隐藏。点击后,自动删除,但也不能撤销删除。

此外,对比栏支持“清空全部”,这个操作的使用频率不会很高,放在对比按钮的下方,容易造成误操作,因为清空后没法撤销。

在产品详情页,加入对比的功能设置的非常隐蔽。将新产品加入对比后,切换到其他页面,对比栏没有局部自动刷新,需要用户手动刷新。

3.比较页面

由于3C产品的规格和参数较多,需要对比的内容也就比较多,而用户关注的无非就是不同的地方,京东支持高亮显示不同项和隐藏相同项,这个设计还蛮贴心的。只是有些细节不是很合理,默认固定在浏览器底部,会遮住部分内容,其次按钮应该是“取消固定”。

当用户发现明显不合适的产品,不能删除。发现合适的,不能直接加入购物车。页面的用色混乱,有些地方用了链接色,但其实是不可点击的。滚动后没有固定产品的关键信息,不便于用户识别。

1.极限情况

对比栏中没有产品时,滚动鼠标,对比栏也会出现,这样的设计或许是在告知用户对比功能的存在吧。当用户只勾选一个产品时,和阿里一样处理,对比按钮不可点击。

当对比栏已满,继续勾选,会出现报错,但位置是在浏览器底部的对比栏上,等反应过来的时候,报错已经自动消失了。建议在当前勾选框下方出现,便于用户识别。

京东会用cookie记录用户已添加的产品,便于下次访问时尽快完成购买。

ehealthinsurance

这个网站是美国比较知名的第三方保险网购平台,产品多达13000多款。和前两个平台不同的是,它会让用户先选择产品类别,然后填写个人信息和需求进行表单式搜索。

1.入口

勾选框设置在产品信息的第一列,顺应用户的浏览视线,但产品详情页没有添加并对比的入口。

2.勾选后

添加产品后,对比栏在列表上方出现,在确定对比前,已选择的产品可以轻松删除。和京东一样的,它也采用了视觉化语言传递最多可以添加4个产品。

在列表页可以选择直接加载全部,页面滚动后,对比栏会固定显示,不会影响到用户的正常浏览。

3.对比页面

点击“对比”后,当前窗口打开对比页面。

滚动后,关键信息和操作会固定显示。如果用户发现不合适的,可以很方便的删除,删除后,右侧的会自动左移,有很明显的反馈,这点比阿里的要好一些。如果想了解详情,可以点击保险公司logo,也可以点击产品名称,还可以点击详情按钮。当然,如果选定某一款后,也可以直接申请投保。

4.极限情况

添加1个产品后,对比按钮可点击,但是点击后达到对比页面是没有办法比较的,幸好还提供了一个明显的返回入口,个人觉得直接将按钮置灰会更合理一些。

对比栏满了之后,继续勾选,弹出提示,着重引导用户去对比已添加的产品。

这个平台不支持关键词搜索,只能先选择险种,然后进行表单式搜索,所以比较功能仅适用于某一个险种,切换到其他险种时,自动清空对比栏,恢复默认状态,且不会记录用户已添加的产品,下次访问时,需要重新添加。

总结

综合以上的分析,可以发现,阿里和ehealthinsurance设计相对细致合理,京东的有些粗糙和复杂。当然,这三个平台在交互细节上,仍有一些待优化点,主要体现在:

1.阿里:刷新后,不能标示出已添加的以降低用户记忆负担;

2.京东:不能自动更新减少用户操作;

3.京东:遮住页面干扰用户正常浏览;

4.阿里、京东:缺少及时、易发现的操作反馈。

就可添加产品数量的限制而言,B2B属性的阿里最多支持20个产品,而京东和ehealthinsurance,产品库没有阿里那么庞大, 此外,B2C平台上的个人用户通常也不会同时评估那么多备选产品,不然很容易陷入选择困境,所以都只支持4个,和一般的3C产品评测平台差不多。

补充

列表页(尤其是图文模式)通常会展示产品的部分概要信息,用户在浏览过程中,也会进行对比。最近发现部分平台支持在列表页隐藏产品(隐藏后,还是可以找回的),还是蛮值得思考的。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,506评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,024评论 4 62
  • Alcatraz的安装与删除 1、安装:Alcatraz 的安装很简单,只需要在终端下输入以下命令即可安装完成cu...
    _源计划阅读 249评论 0 0
  • 因为停水没有做晚餐,我们决定出去吃。路上,老公一人在前面走,我和儿子在后面跟着。 看着老公出小区后走的方向,我忍不...
    画屏闲展阅读 272评论 0 2