浅析电商平台的产品对比功能,详细解析网页设

作者: 摄影方法  发布:2019-09-25

现实中的界面一般来说比较固定,这里的固定指的是位置、颜色、可见性一般不会随意变化,比如电灯开关,无论是否有电或者电灯是否出故障,开关中的按钮都会在那里,不会消失。

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

禁用,顾名思义,代表不可用的意思。有一个禁用,就一定对应着一个可用。不论是表单,还是复杂性管理界面,抑或是分步引导,这些场景中都有可能出现禁用状态,而如何合理运用禁用状态,让它成为体验的加分项而不是减分项,正是设计师要不断思考、深入实践的。这里抛一些砖出来,希望和大家一起探讨。

澳门百老汇电子游戏 1

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

这个不可点的按钮放在这里很鸡肋,我们是不是可以考虑去掉?

开关

需求分析

默认放出按钮吧,不能点也没关系,不然用户怎么了解产品中有哪些功能?

然而网络就不一样,你可以很轻易的隐藏一个按钮,或将一个输入框置为不可编辑。这样做其实有很大风险,你的设计一定能够不言而喻或者自我解释吗?如果不能,那对用户来说,就是件很需要make he think的事情。

1.目标场景

禁用状态可看为应用程序机制对外暴露的一个直接体现,什么时候展现,什么时候隐藏,也是设计中经常碰到的争议话题。

对于电子商务网站,当商品无货时,购买按钮如何处理是个很有意思的问题,隐藏?改成文字?置为不可点击?改成到货通知?

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

Alan Cooper曾提到,激活和禁止菜单可以帮助用户了解菜单所反映的用途,从而帮助菜单成为更好的教学工具。例如我们常用的Photoshop选择菜单:

澳门百老汇电子游戏 2

2.操作流程

菜单作为软件中最完备的功能集合,应该呈现所有的功能,这是第一个前提。在这个前提下,再根据具体交互的流程来展示哪些操作可用,哪些禁用。仔细想想,在我们日常所见的各种软件中,你并不会对菜单里的禁用项感到陌生。

澳门百老汇游戏网址,电子商务网站的购买按钮

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

菜单有一个好基友叫做工具栏。作为一种直观、快捷的功能呈现形式,有幸出现在工具栏上的操作一般来说是软件中最常用的功能,为用户提供快速、高效的操作入口。

当一个按钮不可用时,是隐藏它,还是保留它并给予解释?我倾向后者。因为:

3.用户需求

工具栏给用户的预期应该是稳定的,可靠的,用户会不知不觉地对工具栏的布局进行学习,记住常用操作的位置,形成使用惯性。如果某个按钮有时消失,有时出现,用户会感到迷惑,也不利于提高界面操作的效率。尤其是当工具栏上有大量操作时,固定位置的好处显而易见,例如Ribbon界面,每个子面板下都包括至少5个以上的按钮:

隐藏按钮,等于是先制造了一个疑问,然后再给予解释;

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

澳门百老汇电子游戏 3

保留按钮,在按钮上做些处理(灰色,不可点),给予解释,在用户看来也许更容易接受。

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

看上去,对于菜单、工具栏中的操作,不论是否有禁用状态,默认放出来是最好的选择。然而当操作较少时,设计师们仍然会做出思考和改进。

从另一个方面讲,购买按钮对于一个电子商务网站,存在的意义已经不仅仅是一个普通的按钮,而更像一个风向标,就好象搜索引擎不能没有搜索按钮一样,从用户习惯及情感上来讲,它不在那里,你会觉得缺少了什么,越是普通的用户,越会有这样的感觉。

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

澳门百老汇电子游戏,浏览器,一个所有人都离不开的软件,前进、后退是它的核心功能之一。在这件事上,Chrome和Firefox采取了不同的设计思路。Chrome的前进、后退按钮将位置固定在地址栏左侧,根据当前网页的访问路径判断该按钮是否展示为可用状态,如下图所示:

PS:上图中,欧酷的做法比较规矩合理,新蛋和当当的比较取巧,卓越和京东的做法不推荐

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

澳门百老汇电子游戏 4

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

这样设计的好处在于,用户第一眼就能明白功能的位置,便于形成操作惯性。虽然在某些情况下前进按钮会由可用样式改变为禁用样式,但用户浏览网页时几乎全部注意力都在网页内容上,这里的状态变化并不会造成困扰。

4.设计目标

在Firefox中,打开新网页时地址栏左侧仅有一个后退按钮。点击后退按钮后,一个可用的前进按钮快速滑出。也就是说,仅当前进按钮可用时,它才会出现,在不可用时它会被隐藏掉。

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

澳门百老汇电子游戏 5

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

澳门百老汇电子游戏 6

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

如果用户是按照开新窗口的模式打开新页面,浏览完毕就关闭窗口,前进按钮并不会出现;如果用户在同一窗口内新开页面,再点击后退时,前进按钮快速滑出,动画的衔接让它具备了功能自解释的属性,不会给用户造成理解上的困惑。当页面不能继续前进的时候,此时前进按钮瞬间变为禁用状态且快速滑动收起消失,用户也没有机会去点击。这样一来,Firefox地址栏左侧的空间在大部分情况下视觉感受轻量简洁,仅有一个最重要的后退按钮,而在需要使用前进按钮的场景下,操作也是流畅、自然的。

案例分析

这里不评判两种设计孰优孰劣,在处理前进按钮的这个问题上,Chrome和Firefox都有各自的答案。Firefox之所以采用这种较为大胆的设计,我认为和前进按钮的使用频率、使用场景有着密不可分的关系。再换个角度,Chrome也并不适用Firefox的设计:在Chrome地址栏左侧有3个按钮,如果中间的按钮有时会隐藏,那么最后一个刷新按钮的位置无法固定,在用户看来这个工具栏是有明显跳动存在的,而firefox的刷新按钮是在地址栏右侧,并不会有这样的问题。

阿里国际站

上文是一层操作的例子。那么多层操作呢?假如你面对一组信息列表,针对全部列表有一套操作,针对每条信息又都有一套新的操作时,就必须要考虑隐藏的设计了。

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

Gmail的邮件列表页在未选中邮件时,工具栏只包括3个针对列表的功能。选中具体邮件后,针对该邮件的操作出现在工具栏中,原有的操作消失。这样既可以避免未选中邮件时大量禁用操作摆放在界面上给用户造成负担,又保证工具栏在默认状态下的清爽简洁。然而,这种设计也给用户带来一定的学习成本,新手用户在初次使用时需要探索一番才能明白邮件选中前后的区别。

1.入口

澳门百老汇电子游戏 7

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

Dropbox也采用了类似的设计,在默认界面的表格标题栏中不呈现任何操作,单击选中文件后,具体操作展现在工具栏上。

澳门百老汇电子游戏 8

2.点击“加入对比”后

当我们面临不那么复杂的操作时,例如web上的发布表单、提交流程等,对禁用状态的取舍则需要更加细致入微的思考。以下是一些设计建议供参考:

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

1.需要应引导用户操作时,扔掉禁用

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

先来看看新浪微博的发布按钮。这个按钮仅当发布框中有文字时展示为明确可点击的红色;若发布框中没有文字,按钮显示为灰色,点击时发布框背景色变红闪烁,提示用户输入内容。

3.比较页面

澳门百老汇电子游戏 9

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

澳门百老汇电子游戏 10

这里设计要表达的目的很明确,既输入文字后才可以发布。然而,当发布按钮看上去呈现不可点击的灰色时,鼠标移上按钮仍然为手型,点击后系统也给出了交互上的反馈,这样一来按钮就被赋予了多重含义,在变灰时也可以点击,给用户造成了理解上的困惑。按照用户的认知,如果一个按钮看上去可点击,那么它应该实际也可点击。如果看上去不像能点的样子,那它就应该不可点。

4.极限情况

facebook 的状态发布按钮并没有设计禁用状态,当输入框内容为空时,点击Post按钮,页面上不会产生变化。

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

澳门百老汇电子游戏 11

腾讯微博的发布按钮也采用同样的设计,假如内容为空时点击按钮,在输入框的右下角会以橙色文字提示用户输入内容。

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

澳门百老汇电子游戏 12

京东商城

对于微博或类SNS的网站,发布状态是最重要的写操作入口,按钮在界面上可以起到良好的引导作用。这种情况下,仅赋予按钮一种状态,是不是更简单、更容易理解呢?

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

2.明确区分禁用和可用样式

1.入口

如果某个操作确实需要禁用状态,那么在视觉上需要明确区分可用的样式与禁用的样式。举一个反例,在tumblr发布文字时,左下角的发布按钮很难看清什么情况下是可用,什么情况下是禁用。

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

澳门百老汇电子游戏 13

上图中,红色圈出的部分是禁用状态。

2.点击“加入对比”后

澳门百老汇电子游戏 14

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

上图为输入文字后的状态,左下角的Publish此时已经可点击了,但按钮的颜色、立体效果均没有改变,仅文字变亮,而文字的亮度和禁用状态下仅有细微的差别,在比较差的显示器上是无法分辨的。

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

3.在恰当的时候给出恰当的解释

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

当禁用状态的变化对用户来说有些突然时,可以考虑设计清晰易懂的解释性说明。例如Bing搜索首页,当某张图片不能下载时,下载按钮置灰,当鼠标移动到按钮上时,tips解释了该按钮置灰的原因。

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

澳门百老汇电子游戏 15

OS X的设置窗口中,Advanced按钮默认是禁用的。在这种类似的设置窗口中,OS X使用左下角的带锁开关来控制高级的操作。对于那些关键性的系统级设置,需要开锁后才能进行更改。

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

澳门百老汇电子游戏 16

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

  1. 赋予禁用状态更多可能性

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

禁用状态总是会令人联想到冷冰冰的系统规则,但如果善用禁用状态,信息传达将更有效。例如在Twitter发推时,提交过程中Tweet按钮变为禁用,同时在按钮左侧出现loading动画,通过两个UI元素的组合表达了提交中这一动作。

澳门百老汇电子游戏 17

3.比较页面

新版flickr的上传图片工具中,点击提交后,按钮立刻变为禁用状态,而有趣的文案Hold on there,tiger也给界面带来生动感。

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

澳门百老汇电子游戏 18

小结

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

禁用状态是否始终可见,取决于它所属操作在界面中的功能属性。最重要的是保证核心功能交互体验流畅,用户不会形成理解上的困惑,然后再根据具体界面环境进行分析。如果需要展示禁用状态,我们必须让用户明白该操作变得可用的方法;如果需要隐藏禁用状态,在它出现时要让用户自然接受而不是被吓了一跳。更进一步,如果展示了禁用状态,那么就尽量避免样式上和可用状态的混淆,明确可点与不可点;在必要的时候给出解释和说明,不要让用户去猜测揣摩。

1.极限情况

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

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

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

ehealthinsurance

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

1.入口

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

2.勾选后

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

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

3.对比页面

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

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

4.极限情况

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

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

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

总结

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

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

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

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

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

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

补充

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

本文由澳门百老汇游戏网址发布于摄影方法,转载请注明出处:浅析电商平台的产品对比功能,详细解析网页设

关键词: