美文网首页
设计模式——付款

设计模式——付款

作者: 嘎嘎开心 | 来源:发表于2022-04-26 12:50 被阅读0次

结账是有压力的——毕竟你是在要求用户捐出他们的钱!了解设计流畅的结账流程时需要注意的所有陷阱。

使用逻辑地址层次结构

虽然购物很有趣,但结帐过程可能恰恰相反。创建完美结帐的第一步是按逻辑组织表单。例如,国家应该排在城市之前,因为它在层次上更大——此外,它可能需要额外的数据,例如州或县。

使用章节标题

将结帐过程分解为步骤或部分,使其更加用户友好。只要记住保持视觉层次并强调更重要的元素——在这种情况下,就是章节标题。尝试使用尺寸、颜色、对比度和对齐方式来找到最适合您的产品的东西。

在移动设备上,18px-20px 是区分章节标题和正文的良好起点。

使用相应货币

使用智能默认值并预见用户可能犯的潜在错误。例如,一旦用户选择了他们的国家,让系统获取相应的货币——它可以节省时间和精力,并有助于防止错误。

保持结帐页面的重点

如果您希望您的用户完成结帐过程,请消除所有可能的干扰。结帐不是推广其他相关产品和服务的地方,这些产品和服务可以将用户带到另一个页面并分散他们的注意力——购买你的产品。

促销链接的一个很好的替代方法是复制粘贴促销代码,它不会将用户重定向到另一个页面。

保持计费信息为重点

现在要求在卡信息旁边提供促销代码为时已晚。它会分散用户的注意力并引导他们远离完成结帐。

应用促销代码的最佳位置是在用户查看订单并查看总数的结账过程阶段。输入促销代码并查看价格细分变化和最终价格下降是令人满意的。

根据提供的统计数据,优惠券在移动端 优先购物的前 5 名偏好中排名靠前. 只要确保输入正确。

允许用户自己决定

这与 Think With Google 统计数据显示,在使用设备购物的智能手机用户中,有 66% 的人每周至少购物一次。这意味着为将来的购买保存付款信息可能是一件好事,对吧?

但是,请注意静态默认值,除非您进行了用户研究并确定这就是您的用户想要的。大多数时候,最好让用户选择加入而不是退出。

一般来说,对任何金融用户数据保持敏感,以防止摩擦。

检测信用卡类型

使结帐过程尽可能顺利至关重要,这样用户就可以毫不费力地完成结帐旅程。根据前四位数字应用自动卡类型检测。

使用输入掩码

确保信用卡号布局遵循掩码格式。如果没有,用户可能会重新检查该号码一百次,因为 16 位数字很难扫描。

使用输入掩码防止错误

输入掩码经常与占位符文本混淆,但实际上它们完全不同。 占位符文本 是用户可能输入的内容的标签,而 输入掩码 对输入文本施加限制。我们使用掩码来确保数字或字符串符合预期的格式,例如货币、电话号码和信用卡。这有助于避免任何不必要的错误并减少系统验证之前的摩擦。此外,掩码还可以充当占位符文本的角色,建议可能的内容以及放置约束——这对用户来说是真正的双赢!

使用描述性支付按钮

在超市购物时,销售点 (POS) 终端可清晰显示结账总额。为什么不在数字世界中采用这种做法呢?在支付按钮中包含最终价格,尤其是在结帐摘要隐藏的情况下。

如果价格太长,请避免包裹按钮标签。在这种情况下,截断是完全合适的。

避免中断流程

模态消息会分散注意力,但在结账时更是如此。直接在输入下方使用内联错误消息,因为它们与上下文相关并且不会中断流程。

确保错误消息清楚而简要地解释用户必须做什么才能解决问题。

允许用户自动填充详细信息

只要有可能,允许用户自动填写付款详情。您可以使用信用卡扫描仪、应用保存的卡详细信息或与 Apple Pay 或 Google Pay 集成。

使用安全支付的视觉标志

用户应该始终相信您的结帐是值得信赖的。安全徽章或信任印章可能有点矫枉过正,但像锁图标这样的小细节可以提供足够的视觉安全提示,让用户高枕无忧。

如今,用户将安全支付视为常识。添加锁定图标足以保证安全,并且不会造成视觉混乱。

避免强迫用户注册

不要强制注册——步骤越少越好。电子商务研究由 贝玛德研究所 显示 30% 的用户如果不创建帐户就无法继续购物,就会放弃他们的购物车。允许用户成为您的客人,并使用客人结账功能,如果他们改变主意,可以选择注册。

使用安全结账的视觉标志

每当您处理敏感信息(例如密码或财务信息)时,请提醒用户他们的数据是安全的。使用 https 协议来保证安全性——这对于建立用户的信任至关重要。

减少用户的努力

将步骤数减少到最少。当要求用户使用 SMS 代码确认交易时,与设备集成以实现安全的自动填充。它降低了交互成本并保护用户免于在页面之间进行麻烦的切换。

使用本地化

在进行国际销售时,请记住当地差异,并针对不同国家/地区使用不同的格式。它涉及计量单位、电话号码、地址,当然还有货币。

允许不同的付款方式

根据 Baymard 研究所的研究,放弃购物车的主要原因之一是缺乏便捷的支付方式。您的用户离购买只有一步之遥——为他们提供全套支付选项,包括 Apple Pay 或 Google Pay。

在结帐时避免广告

广告具有侵入性,可能会转移用户的结帐流程。此外,它们会造成视觉障碍,最终导致购物车被遗弃。为避免这种情况,请避免使用广告。

及时通知用户错误

使用颜色为结账流程带来活力。例如,当信息以正确的格式输入时使用一种颜色,而当某些情况不正确时使用另一种颜色。它可以节省时间、减少摩擦并赋予系统信任。

使用相关地址占位符

由于地址格式因国家/地区甚至一个国家/地区而异,因此请为用户提供额外的输入以适应整个地址。确保占位符具有足够的描述性,并包含有用的详细信息,例如街道名称或公寓号码

本文内容为转载

相关文章

  • 设计模式——付款

    结账是有压力的——毕竟你是在要求用户捐出他们的钱!了解设计流畅的结账流程时需要注意的所有陷阱。 使用逻辑地址层次结...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 我爱记单词(微信篇)

    把语言模式调整为英语以后…… Wechat 微信 Wechat Pay 微信安全付款 Quick Pay 付款 B...

  • 设计模式

    《C#设计模式》 《C#设计模式》-设计模式概述 《C#设计模式》-面向对象设计原则 《C#设计模式》-单例模式 ...

  • 浅谈JS的一些设计模式

    @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 设计模式简介 设计模式概念解读 设计模式的发展与...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 设计模式之工厂模式

    设计模式之工厂模式 标签(空格分隔): 设计模式 工厂模式 设计模式的感念 设计模式的应用 工厂设计模式的产生 工...

  • JavaJavascript基础进阶(十七)JS中常用的设计模式

    单利设计模式、构造原型设计模式、发布订阅设计模式、promise设计模式 单利模式 构造原型设计模式 最贴近OOP...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

网友评论

      本文标题:设计模式——付款

      本文链接:https://www.haomeiwen.com/subject/bkgzdrtx.html