每个电子商务网站都有自己的结帐流程,来将用户从挑选商品的环节带到购买的环节上。结账流程的细节会因为用户购买的商品以及其目的而有所不同,但是,最终付款的环节都同样重要 。 我们设计的结账流程要让用户保持一种参与感,并且并鼓励他们完成结帐过程。 我想分享一些可用性设计的建议,以便改进帐单表单的设计,并提高用户结帐转化率。 ...

每个电子商务网站都有自己的结帐流程,来将用户从挑选产品的环节带到购买的环节上。结账流程的细节会由于用户购买的产品以及其目的而有所不同,可是,终究付款的环节都相同重要 。

咱们规划的结账流程要让用户坚持一种参与感,而且并鼓舞他们完结结帐进程。 我想共享一些可用性规划的主张,以便改善帐单表单的规划,并进步用户结帐转化率。

译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述)  产品设计 第1张

弄清目的

咱们的方针是规划能够鼓舞用户购买的表单方法。 所以你要让这个进程尽或许的简略,特别是在付款阶段。咱们假如无法一会儿阐明整个结算流程,那么只需求坚持每个环节的明晰和简明,永久不要让用户对他的行为感到困惑或不确定而退出结算。

有一些你应该牢记在心的技巧会让你的作业做的更好:

  • 更大的字体
  • 易读的标签
  • 字段间的距离
  • 更易用的导航

此外还能够增加适量的icon来杰出视觉效果。

Threadless的结帐页面供给了一个很好的比方。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第2张

信誉卡图标的运用,让用户对自己挑选的付出方法明晰明晰。

相同,下方的图标也明晰明晰地展现了CVV验证码的方位。

你要做的便是尽你所能让用户在付款的每一个阶段精确地知道他们在做什么。

不该该有含糊的术语,不明确的方向,而且在整个流程中应该有很多提示 / 图标等等来回答用户运用进程中或许会遇到的问题。

界说文本格局

有些数据需求必定的文本格局,如电话号码和信誉卡号。

这种动态的距离能够地运用JavaScript生成,这是您能够增加到网站的最佳技能之一。

界说距离让用户知道在填写表单字段时处于正确的路线上。

比方在在表单中,当用户输入了正确的邮政编码时,表单主动切换到下一个字段。

相同的电话号码,你能够主动的匹配的电话号码的数字。

你能够在易趣网的结账单上看到这个。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第3张

但最有用的是信誉卡的4位距离格局。

信誉卡号码很长,很简单出错了。一个不正确的信誉卡号给用户带来的挫折感或许会让用户会否定你其他全部的规划。

这个自界说的信誉卡号数字距离在您的帐单字段中,使客户更简单输入他们的数字,并再次查看他们是否正确。

你能够参阅BodyBuilding的规划,其间还包含过错信息的反应。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第4张

简化操作途径

由于结算流程的犬牙交错,所以每个网站的处理进程总是不同的。这或许会让许多访问者感到困惑,这也是为什么电子商务在2000年代初期停滞不前的原因之一。

可是,不管表单长短,无非环绕以下准则来进行规划:

  • 为了简练,内容较少的结算流程尽量在一页处理
  • 较杂乱的流程应该进入进程以面包屑来进行导航

例如,semrush的结算流程是美好的。

很快运用,简单阅览,你需求知道的全部都清楚可见在页面上。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第5张

但我不介意再结帐进程中要有面包屑导航。

这些供给了一个清楚的指示器,阐明用户在结账进程中走了多远,以及还有多少内容需求进行完善。

这使每个人在每个进程中更简单完善和提交内容。假如他们不知道结账进程什么时候完毕,他们或许会感到困惑,焦虑,或许仅仅气愤和脱离。

Wiggle的结帐运用明晰的面包屑在每个页面的顶部。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第6张

两种不同的方法能够一起测验,运用一些A/B测验而且看看哪种风格的体现更好。你或许会对成果感到惊奇。

归纳购买

用户输入他们的账单信息之后,要点击“提交”按钮是最难的。

犹疑关于转化率而言是丧命的。

归纳的订单的基本信息,展现给客户,他们能够看到全部从他们购买的项目的总费用(加加工),乃至交货日期(假如适用的话)。

GitHub的Pro晋级计费范畴的广告购买都在同一页上。它阐明晰你要多久付款,最终的费用是什么,以及何时你能够等待下一个费用。大多数字段都是从你的个人资料中填写的,所以假如你有一个帐户,这个进程非常快。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第7张

另一个比方是亚马逊,电子商务商铺之母。

一旦你进入付款的环节,订单相关的全部的细节,如:送货地址和付款信息等都将以一屏的方法进行出现,以保证你真的了解你的收购。这削减了过错项目的退货率,而且能够削减用户在点击“购买”按钮时的犹疑不决。

 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述) 产品设计 第8张

咱们需求揭露通明与客户共享尽或许多的关于订单的细节。

完毕

结算行为是将潜在客户转化为付费客户要害的一步。这便是为什么方法优化如此重要。

我期望这些趋势能够协助你制造可用的和令人鼓舞的账单方法,为你的商铺和全部客户带来更多的收入。优化是一个继续的进程,但假如你不断测验新的主意,你将永久领先于竞争对手。

总结:

  • 内简单读;
  • 智能输入;
  • 流程明晰;
  • 展现到位。
转载请说明出处
知优网 » 译文 | Web端购物结算流程的可用性规划主张(试对网络商店的购物流程设计进行简述)

发表评论

您需要后才能发表评论