「购物车商品移入收藏」功能设计

作为用户下单前一步的重要盛放容器,购物车在每个购物平台的作用、功能和表现形式不尽相同。

唯品会购物车包含了有效商品和无效历史商品两部分,看似简单的设计背后有着细致入微的考虑,因为每一个细节都在影响用户的购买决定。这篇文章就从项目背景、需求评估、设计细化几个方面来反思一个”小需求”:「购物车商品支持移入收藏」的交互设计过程,希望以小见大,对开拓思路、提升设计的严谨性有所帮助。

一、背景和目标

1. 产品的特殊定位:为什么没做?

由于特卖商品库存低、抢购快的属性,唯品会app在商品加入购物车时立刻为用户保留库存,若20分钟后用户未付款,则商品自动进入“历史购物车”,库存释放。因此,和其它产品的购物车不同,唯品会的购物车不兼具“收藏”和“长时间等待购买”的功能,20分钟一到购物车就会清空,刚抢到的特价好货也许就被错过。

2. 项目背景:为什么要做?

  • 线上数据表明,“商品收藏”带来的日均销售占全站24.26%,这说明用户存在通过商品收藏来购买的习惯;
  • 购物车场景下,商品被用户加购后删除,说明用户曾有强烈的购买欲望,在“买和不买”间犹豫。将购物车商品移入收藏可帮助保存商品信息、方便后续加购,同时加快本次结算流程;
  • 历史购物车仅存近7天数据,用户看不到7天前删除的商品、无法重新购买,因此“删除”会给用户带来心理负担,而“收藏”可减少用户的顾虑,利于提高销售。

3. 目标:做了想怎样?

在购物车中帮助未决定购买商品的用户保存商品信息、减少删除商品带来的心理负担,加快后续结算流程。

二、前期分析

审视需求

对产品提出的需求点一一进行判断,评判需求的合理性。

2.1 评估“找相似”需求点

产品需求提出,购物车商品不仅支持移入收藏夹,还可“找相似”。

线上的“找相似”功能出现在:商品列表,商品详情,收藏夹以及已抢光的商品。列表和详情的操作为“长按/左滑”,已抢光商品露出按钮。

分析:用户使用“找相似”主要为了选择其它同类商品,而非立刻购买本商品。但在购物车情景中,用户已经对商品存在强烈购买欲,因此购物车里不需支持“找相似”,多一个选项会增加选择的难度。

结论:购物车商品操作中不引入“找相似”。

2.2 评估“历史购物车商品可移入收藏”需求点

需求提出,承载失效商品的历史购物车,也要像有效的购物车商品一样支持“移入收藏”。

分析:商品进入历史购物车有两种可能:主动删除商品,和20分钟内未结算、被动移入历史购物车。主动删除了商品,或在20分钟内没有下单,说明用户还没有充足的购买冲动,并非完全在“购与不购”间犹豫不决,因此这里不需支持移入收藏。

结论:历史购物车商品的操作不引入“移入收藏”。

三、设计过程

首先,“将放入购物车的商品移入收藏”是由数据和现有功能推测出的需求,因此它的定位并非类似“解决用户疑惑”的必要功能。

在充分了解需求、进行功能定位后,再对“移入收藏”的外在样式和操作方式进行定义,并根据各平台作调整。

引入新的“手势操作”后,必须将购物车商品功能进行整体上的考虑,思考因此带来的影响和变动。

作为最常用和关键的下单一环,看似简单的“小功能”在购物车情景下也要仔细考虑。最初我简单地增添了手势,并根据现有交互做了调整:

然而,原删除功能发生了变化,设计上产生了不合理之处:

手势加入删除:合适

  • 原删除易被发现、却操作不便(区域小),新删除可逐步替代它
  • “手势操作里有删除”已普遍被大众接受

新删除的反馈:不合适

  • 原删除2步完成,新手势需3
  • 如果去掉二次确认,两种删除的反馈不一致

梳理了问题后,第二版方案统一了新旧删除功能的步骤:

这样,点击删除按钮 → 唤起手势操作,好处有:

  • 两删除的反馈一致,均需2
  • 基于原操作、推广新用法,合理不突兀
  • 暴露“移入收藏”,设法留住交易

交互细节上,还涉及到怎样提示和引导用户使用新功能。这里设计了两种引导方式:

第一种引导进入购物车即展示,8秒后自动消失。这样的好处是,清晰地告知功能,不极力推荐、优先于“删除”使用,情感上保持中立,让用户自行判断决定。

第二种引导,虽然在刚进入时不产生干扰,但引导在手势发生时唤出,更加烦扰用户的操作,因此不予采用。

四、设计总结

留下评论