回首页 回首页 耘想科技台湾网页设计 - 繁体中文 繁体中文 耘想科技台湾网页设计 - ENGLISH ENGLISH 联络我们 联络我们
耘想科技台湾网页设计

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

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

【图1】漏斗模型示意图,数字代表进入本页面的剩余人数
enter image description here

数据源:beBit

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

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

下图2-1及2-2是amazon购物车及结账页面的范例。两页相比后很明显看出许多可能导致使用者跳离的链接,已经从结账流程页面中移除,让用户能专心完成结账程序。

【图2-1】amazon购物车页面中保留商品及广告连结
enter image description here

【图2-2】amazon结账流程页面中拿掉许多会离开结账流程的链接
enter image description here

2. 提示结账步骤,降低结账流程可能繁杂的错误想象

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

3. 切分步骤的逻辑尽量符合「MECE」的原则(不是步骤少=好)

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

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

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

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

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

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

5. 窗体设计的易用性原则

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

【图3】窗体设计示意图
enter image description here 
数据源:beBit

6. 手机网站或APP一定要有快速结账,以及与计算机网站整合购物车的功能

根据我们的项目经验,多数用户仍是偏好透过计算机购买商品,很大原因是安全性考虑以及屏幕过小不易填写窗体。但随着手机屏幕增大提高了页面易用性的空间;生物特征辨识技术的成熟(如:指纹辨识)增加了安全性保障,未来手机购物一定是一大趋势!根据beBit对当前手机使用者的行为观察,手机网站/APP的购物流程中一定要包含快速结账以及整合购物车两项功能:

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

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

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

本文出自beBit

 

数据源:http://www.bnext.com.tw/ext_rss/view/id/658015