购物网站结帐流程页面设计的6 大基本原则

为了改善网站转换率，网站设计师或经营者常常花了很多心思在调整商品沟通页面，却忽略了购物车及结帐流程的重要性。若从漏斗模型的角度来看（图1），购物车和结帐流程更靠近最终销售，若能提高该等页面的易用性，对提高转换率的影响越直接。前篇文章已说明了如何设计出高转换率购物车页面，本文将分享结帐流程页面的设计重点，协助读者设计出高转换率网站。

1. 结帐流程页面中，尽量拿掉会让使用者脱离的连结

当使用者好不容易在购物车页面按下「结帐」按键进入结帐流程时，大多是已经下定决心购买。此时网站经营者要把握一个原则：「让使用者不用思考、心无旁骛地完成结帐程序」。为了达成这个原则，结帐流程中尽可能地拿掉会让使用者分心或跳离结帐页面的连结，只保留少数能让反悔的人回到首页或想查看购物金时能进入会员专区的入口。

2. 提示结帐步骤，降低结帐流程可能繁杂的错误想像

回想一下，当你在找路的时候，总觉得时间过了好久、走得好累，但走回头时发现原来当初的目的地根本不远，只是因为不知道尽头，所以心理状态觉得疲惫。在结帐流程也是同样的情况，少在网站购买的人往往不知道结帐流程会有几步？每一步会不会填很久？过程会不会很麻烦？为了消弭这种不确定性带来的负面情绪，结帐流程中一定要提示使用者总程序以及目前已经完成的步骤。许多网站喜欢用流程图的方式呈现，甚至加上完成度百分比，这都是不错的选择。

3. 切分步骤的逻辑尽量符合「MECE」的原则（不是步骤少＝好）

「结帐步骤越少越好」是评价结帐流程易用性的常用方式，较少的结帐步骤固然好，但这不完全代表高易用性。运用前述逻辑，一个步骤便可完成结帐便是易用性高。为此网站需把物流（选择寄送方式及填写地址…等）、金流（选择支付方式、使用购物金/点数、及填写信用卡等资讯）及确认订单资料全部放在同一页上，导致网页变得非常的长。这种设计只会使网站使用者产生负面观感而放弃购买。

究竟什么叫做高易用性的结帐流程呢？这因销售商品类型而异（试想卖民生用品及卖金融商品的网站一定有不一样的需求流程），但规划时beBit常采用MECE的原则，搭配检视总步骤的数量，以取得好平衡。

「MECE」的原文是Mutually Exclusive, Collectively Exhaustive，意思是相互独立，完全穷尽，更白话文一点就是包含了所有选项，但每个选项相互不重叠（例如：全球总人口=男性+女性）。若以一般网购网站举例，结帐流程大概可以分为物流、金流、确认订单等三个程序，若要填写的资讯不多，一个程序相关的资讯可以在同一个页面中完成，完成一个程序后再到下一个程序（试想，填写送货地址的页面中如果出现填信用卡资讯，不是让人觉得疑惑吗）。

为什么要采用MECE逻辑来规划结帐流程呢？因为我们希望减少让使用者「疑惑」的机会。MECE的架构让使用者在一个页面只思考一件事情，可以让网页更简单易懂。当然有时候网站因营运的复杂性（例如：台湾常见的数台购物车情况、法令规定要填写的资讯过多…等），无法设计出好的流程，但少步骤+MECE架构的平衡还是我们要把握的重要指标。

4. 页面长度的控制，尽量在第一视觉区就可以看到Action Button

许多人填表单之前有一个惯性向下滑页面的动作，这个动作是想知道要填的东西有多少，此时页面如果呈现一个很长的表单，大多数人会表现得不耐烦，不愿意填写，因此，页面长度也是一个重要的学问。究竟多长的页面较佳呢？从beBit的经验来看，页面的长度尽量控制在第一视觉区能够露出「下一步」的行动按键为主，至多至滑鼠滚一下（约1.5屏）的页面长度，让一进到该页面的使用者一眼就可以感觉要填的东西不多，不至于想放弃。另外行动按键除了提供下一步之外，也要保留上一步的连结（但可弱化，使用文字连结即可），让想要修改填写资料的使用者能够自在地在页面间移动。

5. 表单设计的易用性原则

不要轻忽表格的设计，不好的表格让使用者跳过该填的资讯，觉得页面过长过复杂！设计表格时，有以下四个基本的原则：
(1)栏位的高度须加以掌控，切勿使用过高的栏位让表格变得太长
(2)表头及填写区需要有明确的区分，让视觉产生秩序感
(3)必填项目的提示要明确，除了快速判断要填资讯的数量之外，也避免送出表单后产生错误
(4)错误项目的提示要明确，让使用者容易找到修正处

6. 手机网站或APP一定要有快速结帐，以及与电脑网站整合购物车的功能

根据我们的专案经验，多数使用者仍是偏好透过电脑购买商品，很大原因是安全性考量以及萤幕过小不易填写表单。但随着手机萤幕增大提高了页面易用性的空间；生物特征辨识技术的成熟（如：指纹辨识）增加了安全性保障，未来手机购物一定是一大趋势！根据beBit对当前手机使用者的行为观察，手机网站/APP的购物流程中一定要包含快速结帐以及整合购物车两项功能：

(1)快速结帐功能
相较于电脑网站使用者，我们观察到的手机使用者的行为是，较少在手机上做跨网站的比较、零碎的使用时间与空间（如通勤、上班的片刻、睡前）、冲动型消费、杀时间的浏览动机，因此使用者很容易被限时促销或大幅折扣等趣味资讯诱发冲动购物。由于是冲动型购物，网站架构要能引导使用者快速且一气呵成的完成结帐程序。网站储存信用卡号或送货地点等资讯（先不论通过认证的难易度），是满足快速结帐，减少在手机上操作繁琐程序的重要机制。最近推出的Apple Pay便是透过储存信用卡资讯加指纹辨识功能完成安全认证付款，虽短期内使用者仍对此功能有疑虑，但因方便性及互动设计相当符合手机使用情境，未来将是推升手机购物的一大重要环节。

(2)整合手机及电脑网站的购物车
如前段所述，手机使用者常在零碎的时间及空间浏览网站打发时间，当看到心仪的物品时常常先加入购物车，回去后再仔细浏览。第二次的浏览有时透过手机有时透过电脑，因此手机及电脑网站的购物车与结帐流程需要整合，才能符合使用者先在手机记录商品，回电脑再购买的情境，以免错失转换使用者的机会。

购物车以及结帐流程页面是影响转换率的重要页面，网站经营者绝对不可轻忽！尤其是网购有许多复杂的商业模式，导致复杂的购物流程（如：数台购物车、分批配送、不同的运费…等），这些都是可能造成使用者放弃购买的问题。网站经营者一定要以设计出高易用性结帐流程作为重要目标，抱持着替使用者解决问题的心态，无论透过网站界面设计、系统甚至经营模式的调整来解决问题，千万不可想着让使用者自己去解决就好，因为把问题留给使用者的后果就是大家再也不来你的网站了！

网页名称：购物网站结帐流程页面设计的6 大基本原则
网页地址：/news12/80762.html

成都网站建设公司_创新互联，为您提供App设计、搜索引擎优化、网页设计公司、标签优化、网站收录、软件开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联