亚博账号登录

几何

最近,U.S.AComplete Nutrition公司的一款蛋白型Coffee 的sales volumevery睿琱opeWe能够重设计其stay线电商网站,以提升page面转化和sales volume。所以,应其要求,We也大致查看了对应的销售page面,find 确实存stay很多影响user使用和购买的problem。下面We就黄鹄看看specific 存stayWhichproblem吧。

存stay的problem

为弄清旧版网站转化率低的真正reason ,Wemain选用了两种方式收集user反馈:

邮箱和Facebook群组user回访。

弹窗式user调查问卷,实时收集网站和userrelevant数据,例如网站热力图(Heatmap)信息、user记家约皃ersonal信息等。

而以下是user反车膍ain网站problem:

 

1.网page加载响应太慢

user点击CTA按钮购买时,page面加载响应time太长(有时even to the extent that长达5秒),且期间没有任何加载状态或反馈设计提示user。user体验极差。

2.界面未provide任何样品试用

3.productPrice昂贵

4.user对product质量存有疑虑。after allraw material成分太多, 无法一一溯源。

5.部分userthinkpage面可读性太差。

6.user找不到productNutrition成分表。

7.user普遍不了解product退货政策。

8.user对公司的合法性和是否have售卖资质存stay疑虑。

 

of course,设计师并非神,解决不了Allproblem。比如,以上反馈的8个problem,除却前两个与销售和开发department密切relevant的problem,剩下的才是设计师能力范围内能够处理的problem。所以,下面的步庖瞭ake集中围绕剩下的6个网站problem进行。

此外,stay收集user反馈的同时,We也in the light of各个小page面设计进行了More深入的分析,并得到以下结论:

1.排版混乱:page面文字和picture设计都太过突出吸睛,反倒让user无法把握page面重点。

2.user无从了解productdetails 。购买按钮也设置staypage面顶康挠疑辖恰ser操作起来十分difficulty。

3.productNutrition成分introduce存stay重复且分布不均衡的problem。

 

总之,网站整体给人一种老旧过时的感觉。

know 了problem所stay之后,那We就黄鹄看看how 逐一解决this些problem吧。

紫龋让We先学习一个very实用的user心理学概睿

 

审美可用性效应

审美可用性效应是指user倾向于take更有吸引力的product视为更有用。

换句话说,user倾向于believe:视觉上更好看的product会更有用。尽管事实上,它们probably仅仅只是外观漂亮而已。所以,in the light ofthis一user心理效应,要让user充分信赖某一product或service,最有效的方法就是使其更具高级感。所以,要让user信赖此款蛋白型Coffee ,最有效的方法就是打造更具美感和高级感的stay线网page。

而为实现this一目标,Wemain从以下几个方面进行了重设计:

 

着陆page设计

如下图,新旧版本的着陆page主图模块设计明显是不同的。

着陆page主图模块旧版

着陆page主图模块新版

着陆page的main功能就是向user清晰展示和introduceproduct,让user对product有个大致印象和了解。

of course,也无需一次性呈现Allproduct信息。而左边的旧版设计,展示谌萏唷⑻导贰ll信息家还赡匀鹲tay右上角。and选用的文字尺寸也太小,user阅读起来verydifficulty。然而,右边男掳嫔杓圃蛲耆煌<蚨痰奈陌干杓疲钆涓清吸睛大图,既简单introduce了product,又清晰展示了product的外观,直观吸睛而不失美感,极具高级范儿。

此外,你是否也赞成take购买按钮放置staypage面顶部?becauseuser总是不太愿意滚动page面来购买,对吗?

但事实并非如此。useractually是very愿意滚动page面的!

如今,浏览网page时,滚动page面,已然成为人们的习惯性action。不信?不妨立即打开一个网站试试。stay限制不能滚动page面的情况下,你究竟又能坚持多长time呢?

ifuser根本无法了解product,即使take按钮放置stay顶部,吸引其完成购买,又有what意义呢?

所以,从this一方面来讲,take购买按钮设置stay靠后一些的地方是very有必要的。

但this并不意味着,购买按钮就应该放置staypage面的最后,例如page面的底部。

以下是Wethink不能this样设计的mainreason :

 

page面信息构架设计

事实上,重设计过程中,always困扰We的是整个page面男畔⒐辜堋e更hopepage面的每一个谌菽?槎寄芮〉胶么Φ某氏帧H缤迹

1.棕色箭头部郑Wetake旧版本中的顶部模块细分成了3个更小的模块,以奖鉼ser分类查看。

2.黄色模块:then,又添加了一个新的黄色模块, 以详细introduceproduct信息。既解决旧版中user无从了解productdetails 的problem,又provide了充足的空间展示product,提升page面质感和美感, 增强界面可信度。

3.深蓝色箭头部郑main调换了video和Nutrition成分模块的顺序。由于它们各自相对独立,并不会对user体验造成太大影响。

4.淡蓝色箭头部郑main调换了usercomment和常见problem模块的位置。because,相较于常见problem,user常常对productcomment更感兴趣。 尽管this样的改动probably并不会对page面的整体结构造成太大的影响,但commonly网page都习惯take常见problem放置staypage面最后,符合网page设计惯例。

如此,为符合user阅读习惯和page面设计惯例, 网page各部分信息放置都有一定的顺序和模式。

Now,你know 为what购买按钮不能设置staypage面底部了吗?

still不know 看鸢竌ctually很简单。即使是经常购买product的回头客,也不愿意always滚动到底部进行购买。 相反,they更愿意稍微滚动或者直接点击着陆pageCTA按钮进行购买。

对于新客户而言, they则更愿意按钮展示stay网page的顶部。 如此,stay完成page面浏览和购买之后,就能够fast速找到page面导航,完成其它操作。

 

购买设计

为提升productsales volume,Complete Nutrition公司最后still决定改变原有的商业模式。

为what呢?

We先看看新旧模式的specific 情况吧:

旧模式 ——user可按需定制购买数量。一次性购买三袋以上蛋白型Coffee ,即可获得免费Coffee 搅拌杯一个。

新模式 ——cancel原有的定制设计。user点击按钮,即可一次性购买三袋蛋白型Coffee ,并免费获得一个Coffee 搅拌杯。如此,结果此埔谎但user购买的流程变得More简单fast速。

所以,哪个模式的user体验会更好,结果显而易见不是吗?

旧版购买设计

新旧版购买设计

 

而in the light ofuser普遍反映productPrice太贵的problem,Wemain做了以下三方面男薷模

1.折扣Price和原始Price同行对比展示

尽管旧版设计也直接展示了每笔订单的Discount度,但其文案设计和摆放位置与原订单Price的关联性相对价睿瑄ser很难注意到。而新版中单独与每个商品relevant联的设计,让user深信they以更低的Price购买了more的product,且每件商品都享受到了Discount。

2. 突出“免费”

user都like免费商品。所以,stay新版设浦校琖e选用绿色突出“免费”字眼,以吸引user购买。

3.利用图标突出免费service

新版设浦校瑂tay免费送货和赠品serviceintroduce部分添加送急晟杓疲晕齯ser,激励they购买。而旧版设浦校嗨频纳杓圃虿还幻飨裕瑄ser很难注意到。

 

video推荐设计


video推荐部郑 直接展示推荐人年龄和职业的全新设计,很easilycause同龄或同职业潜stayuser的共鸣,从而激励they购买。

 

Nutrition成分设计

对于productNutrition成分模块,We做了以下更改:

1.旧版设计最大的problem就是:三种flavor的Nutrition价值actually是完全相同的,根本没有必要分别展示。

2.根据user习惯,简洁直观的Nutrition成分表更符合they的胃口。而旧版page面,点击红色“成分”字样,才能查看成分details 的设计, 则显得复杂而累赘。therefore,综合各方面的考虑,We最终选用了this样的解决programme:user点击各个Coffee flavor,即可fast速查看对应的Nutrition成分表。

3.徽章许可 —— staypage面设浦校砑觩roductrelevant徽章许可,体现product的合法性和真实性,以获取user信任, 也尤为重要。例如添加一些productrelevant产地证书和official认证等。尽管旧版设浦幸蔡砑恿死嗨粕杓疲但却放置stay了底柯植ド杓频淖詈笠籶age,user很难注意到。

事实证明,大部分user都直接忽粤说撞康穆植ツ谌荨<词看到,也不会查看轮播的All的谌荨W之,最后的结果就是:they完全没有注意到relevant的徽章许可。

所以, 新版设浦校琖etake徽章许可设计提到了更靠前的位置,以吸引user注意。

 

常见problem设计

this个部分的重设计就很简单了。Allproblem直接分两栏进行展示就sure了。

in addition,填写答案的位置也调整到了problem的正路健his样,user无需再从界面的一端阅读到另一端,更符合user阅读习惯,阅读speed也会更fast,体验of course也会更好。

 

底部设计

旧版设浦忻飨源鎠tay扩展链接和支付方式缺失的problem。所以新版设浦衧taythis方面进行了优化。in addition,为吸引user订阅product新闻资讯,也take对应模块的文案设计“Like what you see”直接优化成了“Get 10% off”。

以上就是Wein the light ofComplete Nutrition的productpage面重设计的全过程。hope对everybody有所帮助和启发。

 

原文地址:

author:Chethan KVS

翻译:摹客team

 

转载请注明:亚博账号登录 » 【UI/UX案例分析】设计提升转化,看高手how 重设计网page

登录收藏
 
你probablylike的:
护肤品details page,医美风护肤品,美妆details page设计护肤品details page,医美风护肤品,美妆details page设计
2020年最流行的插画style, 不得不看2020年最流行的插画style, 不得不看
提升user体验?指示性设计元素不可或缺提升user体验?指示性设计元素不可或缺
护肤品套装【水肌晶旅行套装】护肤品套装【水肌晶旅行套装】
为what单选按钮和复选框不能共存?为what单选按钮和复选框不能共存?
webproduct设计全新操作指南webproduct设计全新操作指南
B端设计指南01 —— 筛选B端设计指南01 —— 筛选
2020年网站首屏设计:最佳实践和例子2020年网站首屏设计:最佳实践和例子
网page的宽度到底该how 决定?网page的宽度到底该how 决定?
Sketch or Figma谁才是UI设计Software的未来?Sketch or Figma谁才是UI设计Software的未来?