本文分享了电子商务产品购物车设计的一些经验和经验,希望能为您带来一些教训。
本文的目的:
参考主流电子商务,结合工作经验总结您的购物车原型组件库,您将来无法重复轮子和踩踏。我想制作一个《移动端购物车设计“小”全》,列举我的实践中常见的逻辑,功能,组件和交互,但我必须改变实际工作中的交易,否则它太麻烦了。
文章结构:
明确目的:购物车功能
快速入门:常见原型组件
数据监控:如何提高转换率
更多问题:离线购物车,空页设计等
文本
一,明确目的:购物车功能
1.为什么用户使用购物车
临时存储,如双十一的开始等;
批量结算;
收藏,没有决定购买,看到好手添加;
对比,将同类产品进行比较。
2.购物车在商家中的角色
易于管理订单和交货。如果没有购物车,一件物品只有一个订单,据说这是淘宝在初期经历的痛苦。
针对上述用户需求的指导消费。例如,如果它用于临时存储,它会提醒库存焦虑;如果用于批量结算,它将通知完全还原活动然后补偿;如果用于收集,它将显示货物的降价;如果它用于比较,只需再次推荐它。 “猜猜你喜欢什么”。但毕竟,我们不知道为什么用户一次只使用购物车,所以我会在这个简单的页面上显示如此多的信息。但我们至少了解自己:产品是否小巧精致,大而完整,用户习惯于订购或购物,产品价格高,SKU丰富,销售电器或销售水果… …定位决策功能,该功能决定了元素,在设计时明确目标是很自然的。
记录用户偏好数据。通过记录用户放入购物车的项目,可以收集数据以分析用户支出偏好。第4部分将被提及。
第二,快速入门:常用的原型组件
为了逻辑起见,我将购物车中的组件分为三个级别:页面级别,内部级别和商品级别。
电子商务通常根据仓库拆解货物,购物车中的货物可以从一个仓库运输。三级组件应用于整个页面,购物车中的所有商品以及特定产品的组件。三个抽象原型如下所示,后跟一个数字:
(图1三级抽象原型)
…………以下页面级别的组件编号为1-10…………
(图2页面级抽象原型)
1.页面标题
通常,它是“购物车(XX)”,括号中的XX是指此页面上的SKU数量,即用户已添加到购物车的SKU数量。购物车页面在页面标题,购物车图标和结帐按钮上有三个相似的数字。但这三者背后的逻辑是不同的。
(图3,三兄弟的数量)
页面标题数:指已添加到购物车的SKU总数,即项目ID的计数。
购物车图标上的红圈数字:指已添加到购物车的商品数量,即不计算商品ID的数量。红色圆圈编号的目的是通知用户其他页面上的购物车中有多少项目。消费者通常没有SKU的概念。他们容易理解的逻辑是+1位+ 1——这两个项目是否是一个SKU。相反,如果红色圆圈编号显示已添加的SKU数量,则会出现网易考拉的问题:点击产品详细信息页面中的同一产品,无论点击次数如何,该数字都不会改变。
结算按钮的编号:是指已选择的SKU的数量(项目ID是分隔的),或者是所选项目的数量(不计算项目ID)。
建议不要将这三个合理的数字同时显示在一个页面上,并且可以根据喜好进行选择。
2.批次管理按钮
单击后,所有项目都将进入可编辑状态。几家主要的电子商务公司可以分批执行不同的操作,包括规格,添加和删除,删除和集合的更改。
3.页面顶部的公告
通知购物车密切相关的信息,支持跳转到其他页面或关闭公告。格式可以是图片或字符串,但个人倾向于图片,因为显示效果是可控的(不可莫名),也可以制成动画。这个位置的内容必须与结算过程密切相关,否则很容易增加跳跃,特别是对于购物车重量轻的产品,他们的购物车只是浏览和结算过程,不像淘宝购物大车。它被许多人视为最爱。在这种情况下,最重要的是用户顺利订购。
(图4页面公告位)
4.送货地址
非必要因素,因为此信息可以放在下一个订单确认页面上。但也有主流产品将被放置在购物车页面上,无论是否查看数据。如果你想把它,你不需要显示详细的地址。只需拦截县级,用户就可以了解是否要更改它。
5.智能推荐区域
已成为电子商标的主流。如果它是一个无法做大数据的小项目,根据一定的规则,可以在用户按照一定的规则进行结算之前重新推销产品,但风险在于产品不足以使用户甚至想买它。如果您购买它,您需要在需要快速下订单时谨慎。还可以制作具有运输阈值的低成本单一销售区域。
6.toast提示
通常,它是完全或完全减少的提示,在用户选择某些产品之后,如果不满足要约,则提示用户是否满足优惠条件。该组件功能便于从用户的角度参与促销活动和订单,并且有利于从商家的角度提高客户单价。一个更典型的例子是饥饿梯子的吐司暗示。
(图5步骤式全面减少吐司)
7.选择所有组件
此组件的目的是选择要结算的项目。商品选择也有三个层次,即:
页面级别——可以在所选页面中结算。有时购物车中的商品无法结算(例如库存不足),并且无法选择此商品。另请注意,如果未选中某个项目,则还会自动取消选择以下全选按钮,因为并非选择了页面中的所有可用项目,并且组件状态应与逻辑一致。
车内水平——所有在这辆车上选中的商品都可以结算;其他逻辑和页面级别是一致的。
商品水平——检查项目,如果项目尚未结算(例如非销售),则该按钮应显示为灰色且不可点击。
应从正常车上取下库存不足(可销售量低于推车数量)的商品,并沉入页面底部,指出失败的原因并允许大量拆卸。如果用户不清除,请在放养后返回原车。
8.总计
此处显示项目金额减去折扣,如果可能有额外费用(运费,税金等),请通过简短的副本告知我们。
9.结算按钮
括号中的数字是指要结算的SKU数量或项目数量。项目1已经说过,不再重复。
10.底部导航
在电子商务中,它通常是整个产品的第一级导航。购物车图标不一定位于底部,但也可以在标题栏中显示。
…………以下是11-14号内部组件…………
(图6汽车级抽象原型)
11.选择所有购物车项目
项目7已经说过,不再重复。
12.购物车标题
它可以是仓库名称,商店名称等。
13.优惠券
当有可用于收集的优惠券时,引导用户接收适用于汽车的优惠券。推荐的弹出窗体。
14.车载声明
用于通知适用于此车辆的所有物品,该位置可以位于购物车标题下的所有项目上,也可以位于所有项目下。
…………以下是15-20商品级组件…………
(图7抽象原型商业级)
15.产品标签
可以用2-5个单词表达清晰的内容。
16.价格显示
如果有降价,最好显示前后比较,通过显示该行的价格或直接计算降价(“已下降X元”)。但有一个问题。假设两种商品,价格分别为1元和1000元,价格降低0.5元。你想强调前后的价格比较吗?个人认为必须展示1元,但1000元是最好的。显示,否则看起来太吝啬了。我的方法被定义为降价量< x元,或p=''y值根据其大部分产品的价格范围确定。 ≪=''降价金额小于原价比较价格的y%未显示。 X='' >
17.更多信息
需要用一个句子表达的信息比标签更明显。
(图8补充信息词表达)
18.左侧幻灯片编辑
通常向左滑动删除,还有电子商务协会加上收藏和“看起来类似”的“rdquo;”。
删除产品后,如果您有备用电源,可以尝试给用户“忏悔药”,如下图所示。
(图9:删除产品后的悔改)
19.相同的属性产品集合
有时甚至在汽车中,只有一些产品可以参加特定的活动。逐个标记标签当然是减少用户麻烦的一种方法,但如果涉及或减少X元素Y,则将活动项目放在一起可以更好地增加用户体验。典型商品如网易考拉。
(图10活动产品收集)
此方法还可用于集中预售和过期商品。这两个目前尚未解决的商品,要明确告知用户,如通过集中显示,更改背景颜色,按钮灰色不可选。密集型商品也可用于提醒用户尽快安装“库存紧”的副本。
本文最初由@羊双发表。未经许可,禁止复制。
该地图来自的,基于CC0协议