4.提供更简单的编辑
一般来说,绝对用户不清楚他们在网站上做了什么。网上已经有足够分心的信息了,你所要做的事情就是给定明确的方向,以免分心。
但是,在结帐时,如果顾客在购物车中不同的颜色,大小或数量的商品中犹豫不决,可能会导致他们分心。不要让他们回看网站,在结账时给个编辑选项,从而明确使用路径方向。
维多利亚的秘密是个很好的例子:
当他们第一次到达结帐屏幕时,顾客将看到他们即将购买的物品清单。当点击每个项目旁边的大型“编辑”按钮时,将打开一个弹窗(如上所示)并显示原始产品页。基本上是原始产品页面上叠加在结帐上面。用户可以调整他们的选项并保存更改,而无需离开结账页面。
如果你在查看网站分析时发现,用户偶尔会在结帐后返回(可以在销售渠道中查看),请添加此内置编辑功能。从而防止这种不必要的返回,从而提供用户付费率。
5.开启多重身份结账选项
当消费者通过桌面设备登录电子商务网站时,如果他们每次都必须输入他们的用户名,电子邮件地址或付款信息,这可能不是什么大问题。当然,如果这些无用功是可以避免,网页端已经找到解决方案了(如允许网站保存其信息或使用LastPass等密码管理器)。
在移动设备上,重新输入这些信息是一种痛苦,尤其是哪些漫无边际的表单。因此,为了简化移动用户的登录和结账流程,请考虑可以简化流程的方式:
1.允许客人结帐。
2.允许一键加急结账。
3.启用可信来源(如Facebook)的一键登录。
4.在可信付款提供商的网站上启用付款,例如PayPal,Google电子钱包或条形。
Sephora已经采用方便的结账流程,好处之一是客户可以通过简单的切换自动执行登录过程:
当客户匆忙想要进入结账的下一阶段时,丝芙兰的自动登录功能肯定会派上用场,从而鼓励客户从移动网站更频繁地购买。
许多移动网站都会在登录页面的底部,告诉客户他们有什么选项。但维多利亚的秘密再页面最顶端,以最大的大按钮在最上面显示这些信息:
客户可以选择使用其帐户登录,作为访客结账或直接前往PayPal。但用户并不会因为没有提供他们偏好的结帐或付款方式而感到惊讶。
我也很喜欢维多利亚的秘密这样赋予用户选择权。在“以游客身份结账”但按钮旁边有个颜色鲜艳的“登录”按钮。首先,它为结帐添加了一些维多利亚的秘密品牌颜色,这是很好的品牌加强的方法。同时,按钮的颜色方式也明确了主要操作的要求(即创建帐户和登录)。
6.添加面包屑
当推送客户结帐时,你最不想要的是让他们分心。这就是为什么网站的标准导航栏(或汉堡菜单)通常会从此页面中删除。
尽管如此,如果客户不知道未来的情况,结账流程可能会令人感到恐慌。他们需要填写多少表单?需要什么样的信息?在提交付款细节之前,他们是否有机会查看他们的订单?
如果你设计的是多页结帐,请在页面顶部用明确标记的面包屑导航定义每一步,从而消除客户的担忧。此外,这将为您的结账提供更清晰的设计,减少每页的点击次数和滚动次数。
Hayneedle提供了一个面包屑导航的实例:
你可以看到有三个步骤被清晰的标记。这里绝对与用户在这些步骤中遇到的问题无关,这将有助于让他们心安。有三个步骤似乎足够合理,用户有机会在完成购买之前再次查看订单。
丝芙兰在结账时有另一种“面包屑”风格:
Sephora的客户不是将每个“面包屑”放在结账页面的顶部,而顾客可以看到下一步是什么,以及还有多少没完成。
如果你不想制作顶部导航或面包屑导航,这是一个很好的选择。相反,用户可以优先执行号CTA,这可以更好地激励客户向下移动页面并完成购买。
不过,我认为这两种面包屑设计都是有效的。因此,如果你不确定哪些会带来更多转化,则可能需要进行A / B测试。
7.仔细格式化结帐表格
移动端设计良好的签出表单遵循相当严格的公式。尽管在构建表单,每页步骤数量,图像等方面在桌面端可能会有不同的展示效果,这时候在设计的时候就要注意灵活性。
相反,在构建表单时需要非常细致:
1.设计结账表单的每个字段,以便延伸网站的整个宽度。
2.将字段限制为唯一必需的字段。
3.在输入框的上端和外侧给出清楚的标记。
4.至少使用16像素字体。
5.对每个字段进行格式化,使其足够大,无需缩放即可进入。
6.需要标记时使用可识别的标志(例如星号)。
7.在信息输入到字段后,一旦发生错误,一定要让用户知道。
8.将CTA用语放在表单的最底部。
由于结账表单是客户通过结账流程最重要的元素,因此不能乱用经过验证的真实公式。如果用户不能快速地从上到下浏览内容,如果这些字段太难懂,或者表单本身的功能就充满了错误,那么你可能会跟用户说再见。
Crutchfield展示了如何在创建手机上非常用户友好的表单:
该按钮可作为向客户表明他们还没有准备好提交其购买信息的指标,这非常棒。即使表单设计精美 - 所有内容都有很好的标签,字段很大,表单也是有逻辑有组织的 - 移动用户可能会意外地将字段滚动太远,直到点击CTA才会知道它。
如果可以防止用户收到可怕的“缺失信息”错误,那么用户能快速完成购买。
8.简化表格输入
深入挖掘这些表单的联系,让我们看看如何简化移动数据的输入:
1.允许客户使用浏览器的自动填充功能填写表单。
2.包含一个tabindex HTML指令,使客户可以在表单中上下点击箭头。这使得他们的拇指始终保持在智能手机的舒适范围内,而不是不断地进入新的领域。
3.添加一个复选框,自动将帐单地址信息复制到发货字段。
4.根据输入的字段类型更改键盘。
一个例子是Bass Pro Shops的移动网站:
对于初学者来说,键盘使用标签功能(参见键盘上方的向上和向下箭头)。对于手指短或不耐烦且只想在键盘上打字的顾客,这些标签有助于将双手保持在一个位置,从而加速结账。
此外,当客户选择仅限数字字段(例如他们的电话号码)时,键盘会自动更改,因此他们不必手动切换。再次,这是增加在移动设备上进行购买的便利性的另一种方式。
亚马逊的移动收银台包括一个快速复选框,可简化客户提交的账单信息:
正如我们在移动式结账表单设计中看到的那样,简单一点总是更好。显然,每次都需要收集客户的某些细节(除非他们的账户已经保存了这些信息)。尽管如此,如果可以提供快速切换或复选框,以使他们能够将数据从一种表单复制到另一种表单,然后执行操作。
9.不要跳过CTA
在设计桌面结帐时,对CTA的主要担忧是按钮的位置是否足够重要、颜色是否足够引人注目。
但是,在移动设备上,也必须考虑尺寸 - 而不仅仅是在屏幕上占用多少空间。请记住拇指区域以及用户握住手机的各种方式。确保按钮足够宽,以便任何用户都可以轻松点击它,而无需改变其手的位置。
因此,您的目标应该是设计(1)位于移动结账页面底部的按钮,以及(2)从Staples的移动网站上的情况一直从左向右拉伸:
无论谁正在进行购买 - 左手,右手或双手摇篮 - 该按钮将很容易到达。
在我们今天介绍的所有移动式结账增强功能中,CTA是最容易解决的问题之一。使其变大,赋予其独特的色彩,将其放置在移动屏幕的最底部,并使其跨越整个宽度。换句话说,不要让客户在购买的最后一步太费力气。
10.提供备用方法
最后,给客户一个替换的选项。
假设他们在移动网站上购物,将商品添加到购物车中,但有些东西并不适合他们,他们也不想购买。你已尽全力向他们提供清晰,简单且安全的结帐体验,但他们只是没有信心在手机上进行付款。
而不是仅仅希望清空购物车,给他们一个机会来保存它以备后用。这样,如果他们真的有兴趣购买你的产品,他们可以在桌面上重新访问并拉动触发器。这并不理想,因为你确实希望将它们保留在手机上,但对于无法保存的客户而言,此选项非常有用。
正如您在L.L.Ban的移动网站上看到的那样,结账时有一个选项可用于“移至愿望清单”:
关于这一点很好的是,L.L. Bean显然不希望浏览愿望清单或删除某个项目作为主要操作。如果“移动到愿望清单”显示为一个大胆的CTA按钮,更多的客户可能会决定采取这个看似更安全的选择。正如现在所设计的,它更像是一个“嘿,我们不希望你做任何你不舒服的事情。这是为了以防万一。“
虽然网页设计中的选项通常较少,但如果您的结帐在移动设备上的购物车放弃率较高,则可能需要进行一些探索。