如何像PRO一样的设计出惊人的网页交互体验?

结帐体验可以说是您在线商店中最关键的方面。任何打h和客户都可能会分心,失望或离开,从而使贵公司的收入(支付您的薪水)流失了。它需要是完美的。作为用户体验设计师,确保结帐体验无缝有效是您的工作。没错

在本文中,我想讨论结账设计和一些原则,以实现最佳的购物付款体验。我知道。当您听到“结帐设计”时,您可能会很高兴……

…但是,在网上赚钱的过程中,橡胶恰逢其路。没有结帐,您将不会获得报酬。所以最好变好。

为了回答最佳结帐体验的问题,我在主要的电子商务品牌中寻找了三位经验丰富的UX设计师:ThinkGeek,Shopify和REI。这些公司看到数以百万计的美元,并且用户每天都要通过其结帐“通道”。这三个人是:

  • ThinkGeek用户体验总监 Matt Chwat马特(Matt)在ThinkGeek(互联网第一大(也是最讨厌)的在线商店)工作了九年。他既是UX设计人员,又是前端开发人员。
  • Shopify的设计总监Kevin Clark凯文·克拉克(Kevin Clark)是Shopify位于蒙特利尔的购买体验设计团队的设计主管。他负责监督负责整个电子商务平台的结帐体验的团队。用户单击购物车图标后,您就进入了Kevin团队的域。从电子邮件收据,商户与客户的互动,到实时订单状态页面,所有内容-如果您是在Shopify网站上购买商品的,那么奇数就是凯文及其团队的帮助。
  • REI高级UX设计师 Catherine Ho凯瑟琳曾在Intuit工作,在REI西雅图工作了两年。她喜欢UX,因为它专注于人,并且既具有技术性又具有创造力。她在REI的角色是研究与设计之间的混合体。她的项目包括店内设备,例如用于POS系统的iPod touch,iOS应用程序以及会员和帐户,特别是重新设计了登录和愿望清单体验。

在与他们的对话中,我注意到设计无缝结帐时要记住的5条通用原则。

 

1. Shopify结帐体验的三个黄金标准:易于理解,简单和快速

2016年,Kevin Clark及其团队负责重新设计所有Shopify网站的结帐体验。那几乎是一百万家商店。作为电子商务领域的榜首,人们的期望很高。

凯文(Kevin)和他的团队与主题小组紧密合作,致力于标准化通用Shopify结帐体验。所有Shopify主题都是相同的。

用户在处理金钱时需要感到安全和舒适。所有在线商店的结帐体验必须一致且熟悉。

— Shopify的凯文·克拉克(Kevin Clark)

除了基本的安全感外,Shopify的购买体验还应该易于理解,简单且快速。

设计与事务一样具有事务性和流程驱动性的最佳方法是测试所有内容。

例如,为了测试关于结帐体验应包含多少步骤的假设,他和他的团队进行了一项测试,将一页,两页和三页的体验进行了比较,每种体验都具有相同的信息。

单页结帐示例:


两页结帐的示例:


结果表明,一页让用户感到不知所措,因为它在一页上显示了太多的信息,两页将步骤划分为尴尬,而三页则变得简单易行。

这三个步骤是客户信息,运输方式和付款:


我们了解到,通过将相关信息按组进行分组并按逻辑顺序进行排列,可以使用户一次专注于一项任务。但是,有一个限制。您不想走得太远,就像拥有十步结帐的经验。

— Shopify的凯文·克拉克(Kevin Clark)

这三个步骤在所有站点上都是一成不变的。但是除此之外,商店所有者还可以进行一些定制以匹配其品牌。

我们查看了成千上万家商店,并确定可以通过为用户提供五个默认的自定义选择来复制几乎每个商店的设计:字体,强调色,按钮颜色,标题图像和徽标。

但是对于自定义,Kevin建议不要过度使用:

不要给用户太多绳索,以至于他们会自己吊死。

相反,应该设置适当的控件来保护一致,熟悉和安全的基准体验。一个示例就是Shopify系统根据对比度算法(即深色背景上的浅色文字)知道要使用和不使用的颜色,并调整其可读性。

高端网站设计的团队创建的结帐系统为在此基础上构建未来的工作奠定了基础。这是一个基于组件的系统,因此可以添加新的组件(例如字段和按钮元素),并且可以修改或添加功能,而无需对整个系统进行全面检查。

 

2.最终目标:“无摩擦”

Windows和Internet Explorer的父亲是前微软传奇人物Steven Sinofsky,目前为Product Hunt,Box等公司提供咨询服务,并是Andreessen Horowitz的董事会成员。他是一位内心的设计师,也是产品开发的大师。在他的无摩擦产品设计文章中,他指出了极简主义和无摩擦设计之间的区别。

他写道,虽然极简设计减少了体验的表面积,但无摩擦设计是要减少体验所需的能量。这在结帐设计中尤其重要。

他给出了无摩擦设计的6条原则:

  1. 确定默认值而不是选项
  2. 创建功能或任务的一条路径
  3. 提供个性化而非定制
  4. 坚持所做的更改
  5. 构建功能,而不是装饰
  6. 一直正确地猜测

在REI,凯瑟琳最近在一个项目上实施了无摩擦设计的示例。她的团队发现,当客户准备将商品添加到购物车中时,登录后会将客户转到新的网页,从而破坏了购物体验。为了解决此问题,她A / B测试了登录小部件,该小部件打开了下拉登录模式,从而将体验保持在页面上,而不是将购物者发送到新的登录页面。


返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》