电子商务UX –基本设计策略和原则 _品牌设计

本文概述

网站发现
产品搜索和浏览
产品页面
购物车
查看
订单确认
摘要

随着整体零售业态的不断发展以及实体连锁店的挣扎, 电子商务市场有望增长。到2021年, 全球电子商务销售额预计将增长到超过4.48万亿美元, 是2017年的两倍多。
密切关注用户体验并遵循一套标准的电子商务UX设计原则以进行客户购物流程的电子商务零售商和设计师, 可以利用这一市场增长并看到有形的财务回报。
购物流程是一般的用户旅程, 如果实施得当, 可以带来更多的冲动购买, 更少的购物车放弃和更高的整体转化率。
用户旅程包括：

网站发现
产品搜索和浏览
产品页面
大车
查看
确认书

本文介绍了用户旅程中的这些关键点, 以及电子商务设计师如何使客户的体验愉悦, 直接, 轻松。

文章图片
电子商务网站设计中的用户旅程阶段
网站发现明确定位品牌
访客在短短50毫秒内即可形成网站的第一印象。电子商务网站需要通过清晰, 快速地展示其销售产品及其在整个市场中的适合位置来吸引用户的注意力。
例如, 豪华珠宝零售商的网站的外观可能会与注重预算的大盒子商店的网站有所不同。高端电子零售商Bang＆Olufsen通过使用优雅的字体, 精致的调色板和时尚的产品形象来传达其品牌品质。

文章图片
使用Bang, Olufsen的字体, 摄影和复制进行品牌定位。
显示相关的号召性用语
当用户到达主页时, 向他们及时提供内容和特定的号召性用语(CTA)。对应于当前季节或特定事件的大横幅图像以及适当的CTA可以帮助用户进入购物流程的下一步。创建CTA时, 请避免使用诸如” 入门” 之类的通用词组, 这些词组不会明确告诉用户接下来会发生什么。
宝丽来在假期期间通过帮助购买礼物的用户创建了有效的CTA。宝丽来公司没有使用通用短语, 而是使用了” 商店礼物” , 这清楚地表明用户将被带到礼物建议网站上的某个区域。

文章图片
宝丽来显示在首页上购买礼物的CTA。
SEO的定制着陆页
通过将用户的搜索词从Google之类的搜索引擎连接到特定的着陆页, 电子商务零售商可以捕获执行特定产品任务的用户。
用户搜索商品时, 很可能会打算购买商品。为常见产品搜索字词创建自定义目标网页会增加零售商获得销售(可能还有新客户)的机会。文具公司Papier在Google搜索结果中显示的页面专门针对结婚请柬而做得很好。

文章图片
Papier的婚礼文具专用登陆页面
产品搜索和浏览提供现场搜索
尽管它看起来很基础, 但许多网站仍不提供常规的整个网站范围内的搜索, 或者如果提供的话, 则没有进行适当的优化。但是, 现场搜索对于扎实的电子商务购物体验至关重要。
根据Invesp的调查, 60％的在线购买都不是一时冲动的。人们通常知道他们在寻找什么, 并在电子商务网站上的搜索栏中输入查询(例如产品名称或型号)比通过菜单选项进行筛选要快得多。
预测搜索或自动完成等附加功能可帮助用户快速查看选项。苹果将??这种策略与搜索字段结合使用, 该字段可动态更新产品的快速链接和受欢迎的建议搜索。

文章图片
Apple搜索实施
在发现模式下激发访客
尽管许多购物者会考虑购买特定商品, 但并不是所有访客都可以确定。根据尼尔森·诺曼(Nielsen Norman)的说法, 电子商务购物者有五种类型, 其中一种是” 浏览器” 。浏览器不一定要寻找特定的东西。而是, 他们悠闲地环顾四周, 看看是否发现了一些有趣的东西。
电子商务网站可以通过向购物者显示新产品或最畅销产品并允许他们轻松快速地查看产品类别来以发现模式支持购物者。
Etsy通过向浏览器显示当前流行的内容并在导航和首页内容中清楚显示整个产品类别来吸引他们。

文章图片
Etsy除了显示类别外, 还可以帮助用户发现受欢迎的内容。
使用过滤器和分面搜索
多面搜索使用过滤功能, 并允许用户一次选择多个属性, 从而使过滤操作更进一步。
创建过滤器时, 不要将选项限制在大小, 颜色或价格等一般标准上, 而应针对特定于所售产品的类别添加特定的过滤器。这些过滤器可能是适合衣服或衣服的面料, 字体, 邀请的场合, 屏幕尺寸或小工具的处理器。
用户应用过滤器后, 应该立即在UI中清楚地知道已应用了哪些过滤器。用户还应该能够轻松删除应用的过滤器。
Asos会为每个类别显示详细的过滤器范围, 并清楚显示已应用了哪些过滤器。

文章图片
ASOS特定类别的过滤器
产品页面突出显示主要动作
用户永远不要怀疑如何做一些重要的事情, 例如将产品放入购物车。将主要操作(例如” 添加到购物车” 或” 立即购买” )显示为按钮, 并将其放置在屏幕上相对于其余内容的显着位置。
家居装饰零售商Lowe’ s让用户知道如何使用绿色的大按钮将产品添加到购物车中, 这是该页面上最突出的内容之一。

文章图片
Lowe将” 添加到购物车” 的主要动作显示为绿色的大按钮。
提供详细的产品信息
显示高质量的专业照片和详细说明, 以帮助买家了解产品。
使用渐进式披露和可视层次结构为用户提供所需数量的适当信息。立即为他们提供最重要的信息, 然后在页面下方为想要了解更多信息的用户添加详细信息。
将详细说明分成几节；例如, 概述, 尺寸/尺寸, 详细功能和运输信息。像Myprotein一样, 对其他部分使用展开/折叠导航有助于防止用户感到不知所措。

文章图片
产品说明按Myprotein的一组可扩展部分进行组织。
建立客户信任
避免让客户猜测运输选项, 产品可用性和退货政策。确保所有这些信息都是随时可用的, 这可以建立客户的信心和信任, 并可以帮助将不确定的客户推向购买。知道他们是否以及如何可以退货可以帮助他们做出更明智的决定。
Asos使用从每个产品名称下的链接访问的模式, 在每个产品页面上清楚地显示重要的运输和退货信息。

文章图片
Asos在产品详细信息页面上以链接的方式显示运输和退货信息。
添加社会证明
社会证明是一个概念, 意味着人们会受到他人行为的影响。这个概念是Robert Cialdini博士(影响科学领域的领先研究人员)的说服原理的一部分, 并且已被证明行之有效。
【电子商务UX –基本设计策略和原则】电子商务零售商可以通过添加客户评级, 评论和评论来增强购买者的信心, 并提供社交证明。亚马逊上的产品通常有数千条评论, 用户可以按星级等级对其进行排序。

文章图片
亚马逊上的产品评论
购物车显示明确的订单摘要
在购买者完成购买之前, 请向他们显示清晰简明的订单摘要, 其中包括所购买的物品, 每件物品的数量和价格以及订单总额。允许用户编辑他们可能想要更新或删除的任何项目, 并通过包括运输摘要来避免运输费用意外。
Modist会同时显示清晰的订单摘要和收据。用户可以轻松地管理他们选择的项目(移至愿望清单, 删除, 更改数量), 并查看运输和税项的摘要和详细分类。

文章图片
关于Modist的订单概述和详细细分
查看让用户以访客身份签出
冲动性购买几乎占了电子商务花费的40％。通过允许买家以客人身份签出, 消除了创建帐户或登录的额外障碍。在按客人退房的过程中, 创建帐户的简单集成可能会将某些访客转换为帐户用户。
Aesop允许用户轻松以访客身份签出, 同时还可以选择登录或注册。以单一形式提供多个选项可以消除那些想要快速结帐的潜在购买障碍, 但也为想要注册的用户提供了这样做的机会。

文章图片
具有” 以访客身份继续” 选项的Aesop登录屏幕
在结帐过程中提供视觉反馈
包括进度条可以帮助客户了解他们在结帐流程中的位置以及需要完成的工作量。
Apple向用户显示过程中的每个步骤, 并允许他们使用进度链接在步骤之间导航。进度已保存, 因此用户在步骤之间移动时不会丢失任何内容。

文章图片
苹果有逐步的结帐进度栏。
使用常见的付款方式
除了允许通过主要信用卡付款外, 添加其他流行的付款方式(如PayPal)可能会为不想移交其信用卡信息的买家提高转化率。
在荷兰, iDEAL通常用于电子商务交易, 并且60％的荷兰消费者最近都在使用它。服装零售商Scotch＆Soda允许买家使用iDEAL和PayPal结帐。

文章图片
Scotch＆Soda的结帐流程中的付款方式不同
订单确认购买后显示详细的订单确认
客户完成购买后, 给他们确认, 包括成功的付款处理和交货详细信息, 例如地址, 交货方式和预计交货日期。
用于亚马逊的确认电子邮件的概念显示了订单号, 提供了已购买商品的概述, 并提供了发货日期和一些有关将来购买的建议。

文章图片
Drew Christiano的订单确认电子邮件概念
通过电子邮件发送订单和运输更新
除了确认屏幕外, 发送确认电子邮件还有助于使用户了解其购买状态。虽然所有客户都应该收到电子邮件确认, 但是在用户以访客身份退房并且在网站上没有帐户来查看其过去的订单的情况下, 这特别有用。
如果订单有任何变化, 例如交货延迟, 请发送更新。商品寄出后, 请发送包含跟踪号的电子邮件更新。
摘要本文中的原则提供了每个电子商务设计师都应遵循的用户旅程接触点的基线, 但这仅仅是开始。有关其他有关移动电子商务UX的更多详细信息, 请访问移动电子商务电子商务或阅读有关着陆页设计如何设计有效着陆页的更多信息。
不断增长的电子商务市场为零售商带来了许多机会。那些意识到UX的重要性并遵循最佳实践的电子商务用户旅程的公司可以保持竞争优势并对其底线产生积极影响。
? ? ?
在srcmini设计博客上进一步阅读：