购物车结算页设计改版

2019年8月12日

过去一个月,我从同事手里接手了购物车结算的改版工作,借机梳理了这两个下单环节的所有场景和界面细节。

这次UED推行的设计改版,既有“设计先行”的天然优势——可以完全地把提升用户体验作为目标,同时也有着难以落地的苦恼——尽管事先安排了开发评审,设计稿交付产品和开发后,实现困难、排期紧张等原因还是不断拖长了战线。设计师需要反复地校稿和沟通,“改UI不改接口”常常阻碍改版的进行,而日常版本需求的并行也消耗了我们大量精力 >o< Anyway, 我们还是尽力优化到最佳,虽然结果看上去变化不大,设计和争取的过程却是值得我反思的。

这篇总结包含了「改版背景」,「前期分析」,「设计过程」,「方案细化」几部分,后期有上线数据也会加上「数据反馈」「问题总结」来收尾。

一、改版背景

购物车结算在电商平台的作用不作解释了,改版主要基于设计师的业务经验、当前用户诉求、设计风格走向和产品策略来进行。例如,优化点可能来自于业务重点转变造成的功能冗余,对可能发生误操作的及时减损,完善一个步骤前后的路径引导,等等。

二、前期分析

前期我们对产品自身的购物车功能设计做了走查,并与其它的电商平台作了比较:

我们得到了一些论点:

  • 相比其它平台,唯品会下单线比较冷静寡淡,抢购气氛不浓烈;
  • 购物车和结算对比商品详情,更要减少用户犹豫、加速转化过程,应该去繁从简地设计,区分信息层级,将关键信息清晰展现给用户。

而更多的优化和落地建议则来自产品经理,他们掌握了大量用户反馈,并给我们提供了产品策略角度的意见。我归纳了以下几点:

  • 填错收货信息仍是用户取消购买和咨询的一大原因,需要优先展示和提醒用户核对收货地址。
  • 海淘订单中的支付方式需匹配支付人信息,而用户常常选错填错、被海关退回,增加了很多退换订单,降低购买效率。因此需要提示用户正确填写。
  • 线上购物车商品的价格和名称并列一行,价格不够明显,希望可以和淘宝、京东等平台对标,将价格另起一行展示。

三、设计过程

前期分析并非定论,方案是在设计过程中一步步得到完善😉

三点一、购物车

购物车氛围

新页面将根据不同时期展示不同的氛围样式,分为“日常”和“大促”两种,大促图案可根据具体促销氛围(双11、周年庆等)进行配置。标题文案放大、居左,释放更多空间,让页面名称与倒计时更醒目。

购物车商品

新的设计放大了商品图区域,用趋势下的方图代替长图,并突出价格/活动标签的优惠氛围,根据产品策略移除了专场信息。所有元素采用圆角处理。

我们对商品信息尝试了重组,做了两个样式:价格继续与名称同行排列,以及价格另起一行、与上方左对齐。两样式各有优势:

考虑到价格确认对用户成功下单的影响,我们选择了左右结构,让视线寻找更明确。

赠品信息

作为附赠,赠品依赖其它商品存在,在概念上和用户主动加购的商品有区别,而当前并没有做明显的区分设计。新版中我们把所有赠品归为一类(底色区隔),文字图片均做了弱化处理,使信息优先级更明晰。

优惠券使用

在减少派发优惠券的策略安排下,需要减少用户“我有优惠券用吗”、“用了几张,是不是最优惠”的犹豫,加速下单。

新版将三个状态分开表示:无可用,已选择,有可用而未选择。当已选优惠券时,自动选择最优方案并显示“已选推荐优惠”,省去外露的券,少冗余。有可用未选择时,露出“x张可用”提示用户进入操作,比原先的“使用优惠券”按钮更具可视性。

三点二、结算页

收货信息

我们发现有多个收货信息的用户,很多情况是收货人相同、地址不同,也就是“寄到公司or寄到家里”的场景。即使选的收货人无误,地址也可能有误,因此详细地址可以帮用户更准确地确认信息。

因此,我们把省市区和详细地址分离,突出展示详细地址,收货人放在了地址下方。由于快递员尚未做到按用户想要的时间送货,我们去除了收货时间字段、以免引起不满。

视觉上从反色变为白底黑字,用邮寄、信封等符号来关联“地址”概念,表达更清晰、明快。

切换地址流程

当用户设置了默认地址,结算页会默认选中展示。然而,我们发现增加“设置默认地址”功能后,用户不会用或懒得用,常常需要切换地址的麻烦还是没解决。

因此,我们在切换地址中增加了逻辑:当频繁或连续跳转选中某一个地址时,询问用户“是否把它设为默认地址?”,让用户行为来触发对用户意图的推测,减少他们认知和操作的难度。

海淘支付人与支付方式

误填海淘支付人是通不过海关、造成退换的一大原因,有两方面造成:支付人身份证号与姓名不符,和支付方式不在支付人名下(支付人张学友,而用刘德华的银行卡支付)。前者我们可通过添加信息时的即时验证可以降低,改版企图减少后者的发生。

可以看到,原支付方式在应付金额下方,视觉动线需要经过总金额、唯品币、唯品卡的层层确认,最终落在支付方式的金额上。新版将支付方式提前到支付人下方,呼应支付人模块的文字说明,用位置的接近传达信息的相关性。

我们曾想要把修改符号统一为支付方式中的“...”,但海淘订单的清退风险需要引起用户足够重视,考虑到用户群体对可操作性的认知水平,最终我们保留了“更换”文字按钮。

目前支付方式有2种:在线支付和货到付款。策略上我们更推荐用户使用在线支付,原先箭头下拉的方式有些繁琐和占地方。新版改为了外露一种支付方式,点击卡片则弹出切换浮层,和其它模块保持一致。

唯品币/唯品卡抵扣

唯品卡、唯品币是会员购买的和浏览、下单等行为产生的代币形式,付款时可以抵用。当前这两个功能有一些需要改进之处:

  • 未选中时,项目右端也显示金额,容易被误解为增加或扣除了款项;
  • 金额计算优化后(见下方),唯品币唯品卡会在小计中再次出现,会让用户以为扣减了两次;
  • 随着业务倾斜,唯品卡使用变得很少,而“添加唯品卡”按钮较明显,有时独占一行;
  • “唯品币不可用”时未向用户解释原因。

因此,我们考虑了信息的易读性和有效性,将:

  • 可抵扣的金额直接放在文案中,将“选择操作”与“明细清单”区分开;
  • 简化文案表达,添加按钮放在一行内、减轻比重;
  • 根据情景增加“帮助”按钮,解答用户疑惑。

金额明细

金额明细是信息结构中改动最大的部分了。

原来的应付金额包含了商品金额、运费、优惠券、活动优惠(满减等),唯品币和唯品卡抵扣放在下方,而在支付方式中展示了抵扣后的最终付款金额:

这样的金额其实计算了两次,总结了前页的小计后又核算了一次抵扣信息,“应付金额”并不是真正所付金额。

“如小票般清楚明晰”。确认了这样的原则后我们提前展示了唯品币、唯品卡的操作项,去除了应付金额标题,在其中合并了所有计入付款的款项,包括唯品币、唯品卡。原本需点击展开的信息也变为自动展开,让款项一目了然。

“实付款金额”脱离了付款方式,而是在提交按钮的上方突出显示,与即将发生的付款行为充分结合。

这样,用户最关心的金额核对做到了两点优化:金额统计和总结前后一致,信息表现简洁清晰。

支付成功

现有的支付成功页,点击左上角按钮或侧滑,统统返回唯品会首页,引导用户重新浏览挑选好物。

然而对于单商品的订单,如预约抢货和预付商品,用户选购、确认的时间更短,完成订单的速度更快,支付成功后更应回到下单前的页面,继续刚才的浏览,而非回到首页、中断刚刚的操作。因此我们在流程中增加了这一判断:

四、方案细化

卡片式风格

在改版初期,视觉风格并未确定:是延续通栏样式,还是将各个模块卡片化。

虽然整行打通能容纳更多文字、缩短页面的长度,但购物车、结算页的信息零碎,需要用户逐个确认,而拟物化的卡片让信息聚合度更高,更容易理解为可操作的整块区域。因此我们采用了右边的卡片形态。

上滑、刷新效果

改版前几乎所有页面的标题栏都是正常高度。新版的大标题在页面上滑后置顶就显得太过明显,妨碍信息阅读,因此我们让它上滑后渐隐,同时渐现正常高度的标题层:

同样,旧的刷新动效在标题栏下面出现,而新的标题和下方配送、通知不适合拆散,因此loading放在了整个页面的上方:

最终呈现

购物车、结算页是app第一块采用新视觉风格的部分,在一些组件的设计上替换了原有的设计规范,希望能为后面其它改版开一个好头。

感谢下单线大总管亚洲和耐心的视觉同事李鹤、爆爆、乐乐,在整个设计和开发跟进中付出了巨大努力,比心💓

joyce gao

这个人太懒什么东西都没留下

文章评论(0)

你必须 登录 才能发表评论