咕噜噜

我们做UI设计,一定要懂交互,其目的是为了了解用户的心理,能够使其提高转化率;最近双11刚过几天,那你付款的时候,是否有注意到淘宝付款订单界面有所优化更改,我们一起来看看。

小可爱们,我这里会定期推送插画、UI设计、排版等相关文章教程,有事没事来逛逛啊;
设计路上在学习,永不停歇,我们一起加油~

 

最近用淘宝买东西,选好商品后点击「立即购买」按钮,随后出现的「订单确认」页让我大呼惊喜!
界面信息展示十分清晰,并且优惠信息占据了最显眼的黄金位置。
这个改动,不仅是巧妙的创新,更能直击用户的爽点。  
 
图片
对于淘宝这个国内最大的电商平台,仍然不断进取,持续创新,真的要点赞
下面我们来详细说说。 
 

  感觉更省钱了

改版后的界面,最明显的改动,是把优惠信息提到了最显眼的黄金位置。
具体来说,新版界面中,设计师把与价格相关的信息都集中起来,做成一个卡片;
使用「icon + 文字」的形式去表达优惠信息的部分,使这部分信息在视觉上更突出,强化了省钱的印象👇 
图片 
页面的CTA(行为召唤)按钮,即「提交订单」按钮旁边,设计师还不忘将优惠信息再次展示,以促进该按钮的点击。
看到这么多的省钱信息,我的内心有个真实的声音在呼喊:省到就是赚到!

 

这种省到钱的感觉,对于购物体验是核心的、也是爽到心里的。
单是这一个改变,就可以断言新版界面肯定能提升这个页面的转化率。 
 
Why?
因为前人早已经总结过影响用户行为的因素,它们是:
用户的行为 = 动机 * 能力 * 触发
这个模型被命名为福格模型  
图片
 
 
新版的界面里,优惠信息给了用户付款更大的动机;
图片     
胶囊形状的「提交订单」按钮,较之前的界面里变得更为显著,这给了用户产生触发的视觉提醒。
这样的改版数据还不提升?
那还有王法吗。。。   
 
从这个改版的方向,我们也能看到淘宝在购物体验上的一些变化:
淘宝一开始,主打「万物皆可淘」:要在网上买东西?直接淘宝就好;
 
后来淘宝率先把兴趣推荐引入电商,并积极搭建内容社区。 
再后来,随着各种新兴类型电商的崛起,电商这块大蛋糕也被网易严选、毒、拼多多等更具垂类特色的app所瓜分。
就是在这种背景下,淘宝也悄然上线了淘宝省钱卡。   
 
图片 
 
 
不得不说,这个省钱卡的确会起到提升留存的作用。
沐风现在买东西,很多时候因为这个省钱卡的存在,会更倾向在淘宝买。
省钱作为一个刚需,在淘宝的新界面得到了放大。
这种放大,通过设计师的巧思就能够完成的。
不得不说,这是一个非常棒的设计优化案例。   

 除了感觉更省钱了,新版界面从直观的角度来说,右边的界面一眼看上去,就有一种清爽的感受👇

 

图片 
这种清爽,主要归功于3个改动:
分类,简化,视觉重点优化。   
 
 

  分类    

人的大脑喜欢归类。当一大堆物体被分门别类放在你面前,你会自然而然的心情愉悦,因为这样一来,大脑处理信息会容易很多。
图片 
淘宝的订单确认页,使用卡片的形式,分别呈现:
  • 收货信息
  • 价格明细
  • 商品信息
  • 分期信息
这种分类,减轻了大脑处理信息的负担,使界面看起来更有条理。   
 
 

  简化

新版界面,将旧版中一些非必需元素进行了简化,比如「收货人」文案、「收货地址」文案、收货信息下方的条纹图案。 
图片 
这些简化,是电商在培养用户心智多年之后,才可以进行的:
用户刚开始接触电商的时候,对一切都还不熟悉,需要非常明确的提示信息,像「收货人」、「收货地址」这些文案,都保证了用户清楚地知晓这里要填写什么信息。
收货信息下方、类似信件的条纹,也是在传达「这里是收货的信息哈」这样的提醒。
然而,随着用户对网上购物的日渐熟悉,大家都很清楚顶部的姓名和地址、电话都是用于收货用的,所以这些辅助信息就可以删掉了。
此外,界面中的分割线也被统一去掉,转而使用更大的行间距来进行区分,使视觉效果更简约。   
 
 

  视觉重点优化 

新版界面里,将顶部的品牌色去掉,使页面更突出内容本身,同时也使底部最重要的CTA按钮「提交订单」成为页面最显著的元素。 
图片 
另外,界面的字号都进行了合理加大,降低了阅读负担。 
总结一下:
合理的分类 + 大间距 + 更少的元素 + 更大的字号。
这样更清爽的界面,谁不爱呢?   

不得不说,这个页面的设计改版很优秀了。改版中没有增加页面的功能,在实际工作中,是完全可以由设计师主动提出的。

 

这样能够带动页面转化率的改版,不论放在什么样的公司,都必然是大受领导欢迎的。
原因也很简单:能够带来直接的现金收益。 
公司是以盈利为目的的组织。谁创造的盈利多,谁的话语权就大,工资就高,这是很自然的道理。
要能够做出这样的方案,只掌握形、色、字、构、质的UI界面设计技能,显然是远远不够的。 
设计师还需要对用户场景有了解、对心智模型有积累、对交互原则有掌握、对用户行为有感知,才能做出更能促进用户行为转化的界面。
这也是为什么,我一直推荐大家学习一下交互设计的原因。
 
因为交互设计就是在同时思考公司的业务需求和用户的行为和场景,从而做出能够既带来数据提升、又让用户喜欢用的方案。
大家如果想系统学习交互,可以阅读我写的《步步为赢》
微信读书和豆瓣评分都还阔以
 

原文地址:沐风与体验设计(公众号)

作者:小哥哥沐风

转载请注明:学UI网 » 淘宝订单页改版分析:如何提高支付转化率

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
改作业 | 有一说一,这个改稿效果真不错!改作业 | 有一说一,这个改稿效果真不错!
15条APP体验设计的思路分析15条APP体验设计的思路分析
设计师如何提升总结力设计师如何提升总结力
笔刷教程 | PS颜色动态功能在绘画中的作用笔刷教程 | PS颜色动态功能在绘画中的作用
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍
【蓝湖大咖访谈】流利说设计负责人黎静波:创业型设计团队的组织特点【蓝湖大咖访谈】流利说设计负责人黎静波:创业型设计团队的组织特点
如何基于业务思考设计B端的IP活动如何基于业务思考设计B端的IP活动
设计验证!如何进行可用性测试设计验证!如何进行可用性测试