重新设计了电子商务（微小的变化如何使用户体验得到重大改善） _原型设计

人们常说” 80％的结果来自20％的投入” , 即帕累托原则。
当我最近对两个大型电子商务站点进行以用户体验为中心的重新设计时, 确实是这种情况。该项目受到预算紧张, 资源和时间有限的制约。此外, 我无法触摸网站的外观。幸运的是, 尽管面临挑战, 但我仍然能够隔离出易于实施的重要UX改进。你可以说” 通过20％的修改, 用户体验提高了80％。”
这两个电子商务网站正在失去客户。他们面对低转换率和太多废弃的购物车。当我们询问客户时, 对其他可用性问题的沮丧情绪就变得很明显。需要做些事情。
许多UX设计师都知道：第一印象与设计有关, 占94％。一项研究发现, 后续的印象, 无论多么矛盾, 都无法弥补第一印象。
产品负责人意识到他们必须快速行动。最终目标是通过提供明显更好的用户体验来提高两个站点的性能, 从而提高访问者到购买者的转化率, 促进销售并将随机购物者转变为回头购物者。
该项目的近期目标是确定最关键的问题, 并争取” 低垂的果实” 。由于对ROI的期望很高, 这意味着我们需要在项目上花费的每一分钟和每一美元都尽可能地减少。

文章图片
原始网站
为了增加额外的压力和增加一层复杂性, 这些站点是使用响应式Web设计创建的。由于我们的选择很少, 因此我们决定对最微小的调整进行归零, 以最大程度地改善用户体验。
任务一：评估可用性
详尽的可用性测试通常会浪费资源, 因为进行广泛而昂贵的测试可能会过分杀伤力。基本的可用性测试简单, 快速且高效。这不是脑外科手术。一个简单的” 微可用性测试” 将告诉你客户是否可以使用你的产品。
我们设计了一系列针对性的测试, 以诊断特定的UI问题。形成性测试侧重于检测和消除可用性问题(诊断评估)。
【重新设计了电子商务（微小的变化如何使用户体验得到重大改善）】“ 你只需要测试五个用户” , 你就会从中获得巨大的价值。
我很快想出了一个受众群体概况(例如, 从音乐教育者到普通音乐人购物者的几种角色, 因为用户选择是关键), 精心设计了用户场景并进行了任务分析。为什么这很重要？原型角色描绘人物, 而用户场景则讲述故事。相反, 任务分析详细说明了一个人采取的动作序列。
有了上述知识, 我们进行了十次可用性测试会议-两次迭代研究, 每个研究五个用户-我们了解到：

该网站的整体吸引力不强, 从而降低了信任度
登录和注册是令人沮丧的体验(第一步！)
用户界面设计嘈杂；大多数用户不清楚功能的图标
绕过站点, 即导航, 并不是最佳选择
太多的不一致和令人困惑的语言
许多基本任务很难完成
用户在产品列表页面上遇到问题
在产品详细信息页面上, 重要信息显得杂乱无章
购物车混乱而混乱
保存购物车功能还不够明显, 没有清楚说明
结帐在移动设备上令人沮丧
总体而言, 点击次数过多；东西很难找到, 网站使用起来令人沮丧

任务二：找到有效的解决方案

把握我们学到的知识, 定义(重新定义)特定的问题和机会
提出以下问题：做什么值得做, 值得组织投资？
- 每个UX设计建议都必须支持” 为用户释放价值并推动转换为更多购买” 的任务。
- 定义：” 最终用户的成功是：……” (例如, 轻松查找和购买乐器)
- 定义：” 公司的成功是：……” (例如, 增加流量和销量)
在现实的时间范围内, 我们实际上能完成什么？
我们如何衡量成功的结果？

任务三：专注于最大的UX ROI
在进行可用性测试之后, 我进行了一次彻底的启发式评估, 目的是找出与用户期望不符的任何内容。启发式是” 经验法则” , UI设计约定和最佳实践。
已向产品和工程技术人员提出了最简单, 最快速地实施的建议, 这些建议有望带来最大的收益—快速修复列表。

文章图片
登录/注册经验
登录或创建帐户是一种令人不快的体验, 使用户从他们进入的页面转到新页面, 然后再次返回。弹出式窗口缺少层次结构, 难以扫描, 组织错误, 字体大小过多, 并且(无明显原因)Educator Login的颜色背景不同。措词不正确, 因为” 登录” 是适当的动词, 而” 登录” 是名词。缺少为教育工作者创建帐户。
在可用性测试期间, 用户没有意识到” 登录/创建帐户” 是可单击的, 并认为他们必须使用社交媒体帐户登录。解释性文本：登录或创建新帐户是多余且不必要的。
此外, “ 登录/创建帐户” , “ 使用Facebook登录” 和” 使用Google Plus登录” 都进入了重复所有选项的同一页面, 而用户期望的是, 如果他们选择了, 则会看到社交媒体登录窗口使用Facebook登录。
解决方案

制作主要的号召性用语按钮；用下划线表示辅助链接。
利用模式登录/注册窗口, 无论用户在网站上的什么位置, 都可以将用户保持在同一位置(我们将在后面看到, 当访客购物者/未登录的客户想要保存用户身份时, 这一点也很重要大车)。

文章图片
使用模式窗口进行登录/注册, 无论用户在网站上的何处, 都可以将其” 保持在同一位置”
注意：在登录窗口中重复使用社交按钮的原因是, 用户可能以访客身份或未登录的身份处于购物车中, 并且想要保存购物车。
展览二
平板电脑和手机上的汉堡菜单很尴尬。花了太多的水龙头才能移动到水平滑动的层次结构中, 然后返回到主菜单。

文章图片
平板电脑和手机上的汉堡包菜单
当用户点击” 商店” 时, 主菜单选项将消失, 并且许多重要的帐户选项不可用, 或者与用户期望不符, 例如订单跟踪, 已保存的购物车, 愿望清单和帐户设置(它们在标头配置文件弹出窗口中-up, 一个单独的菜单)。在滑入式菜单的外部轻按并不能将其关闭-用户必须向上移动到右上角的” X” 才能执行此操作。
解决方案
重新设计汉堡菜单, 以包含重要的帐户信息。利用手风琴菜单来提高可用性(当你要在隐藏和显示大量内容之间切换时, 它们很有用)。
改进了站点导航, 这可以按类别生成更有效的浏览, 并有助于访问帐户信息, 例如订单跟踪, 保存的购物车, 愿望清单和帐户设置。通过在菜单外的任意位置轻击, 可以关闭不选择菜单的汉堡包菜单。
展览三
帐户信息弹出窗口杂乱且难以扫描, 并且包含误导性标签。

文章图片
登录客户后, 他们将通过标头中的弹出面板访问帐户信息。几个设计问题导致了不良的可用性。
首先, 很难扫描两列, 需要使用Z型图案而不是垂直扫描。其次, 存在太多不同的字体大小, 并且不一致地使用了颜色。红色(用于链接)也与不可单击的节标题(例如” 订单和产品” 和” 支持” )一起使用。实际上, 这些列下面的黑色文本是活动链接。
解决方案
将弹出式窗口替换为与汉堡菜单设计相匹配的垂直菜单, 并包含清晰的层次结构, 该层次结构也将在移动设备上正常工作。
展览四
标头中未标记的图标在移动设备上存在问题。

文章图片
用户不知道这些图标是什么意思(购物车除外)。尽管其用途广泛, 但未标记的汉堡菜单仍然存在一些会影响用户体验指标的可用性问题。
人们不想学习应用程序；他们不想继续探索或试验之旅, 以查看有效的方法。为了获得良好的可用性, 必须使用标记清晰的功能而不是隐晦的图形图标。
解决方案
遵循UX最佳做法, 并在图标上添加文本标签。这将不会留下任何解释的空间并减少认知负担。
展览五
产品列表页面上有关于可用功能的混合消息。此外, 如果不转到完整的产品详细信息页面, 就无法快速查看产品并将其添加到购物车。

文章图片
有很多不一致之处。 “ 添加到购物车” 仅在某些产品上出现, 这使用户感到困惑。 (“ 为什么不能将其他产品添加到购物车？” )” 查看选项” 是多余的, 因为它可以将客户带到产品详细信息页面, 就像在产品图块上的任何位置单击一样。
假设购物者会理解某些产品可以选择, 而有些则没有, 而那些没有选择的可以从列表页面添加到购物车中。但是, 这种不一致使用户感到困惑, 从而降低了效率和清晰度。
分页上的间距存在问题, 因为它不符合平板电脑上的触摸兼容性准则。这些数字几乎是不可能用手指瞄准的, 因此用户很难进行联系。
大多数用户看不到” 网格” 和” 列表” 视图选项。手动输入页码似乎没有帮助, 也没有任何价值, 因为用户不知道跳转到任何特定页面后的期望。
解决方案

确保每个产品的” 添加到购物车” 一致。如果有可用的选项(例如, 银与漆), 则小的弹出窗口将允许你选择选项, 数量并立即添加到购物车(这在用户不想购买完整产品的价格较低的商品上特别有用详细信息页面)。
通过使用图标(而不是小的文本链接)来增加” 网格” 和” 列表” 视图选项的大小(使它们更可见)。
删除手动输入页码并增加分页间距以实现触摸兼容性的功能。

文章图片
在所有产品上都引入了一个过渡阶段, 即” 快速查看” 模式窗口, 该窗口使客户可以快速查看评级, 选择一个选项并获得足够的信息来做出决定, 而无需转到完整的产品详细信息页面。如果他们不喜欢所看到的内容, 则可以返回到” 产品列表” 页面-保持” 原位” 并享受更流畅的产品浏览体验。
从” 快速查看” 将商品添加到购物车后, 将在同一窗口中向客户显示推荐的附件, 并且能够将这些商品添加到购物车(追加销售机会)。
展览六
产品详细信息页面看起来杂乱无章-降低了信任度-一些重要信息被隐藏在选项卡下。

文章图片
此页面上没有添加到购物车按钮！客户被迫首先选择一个型号/颜色选项(如果他们能够理解的话), 然后将出现” 添加到购物车” 按钮, 这可能使用户在购物流程中感到窒息和困惑。如果他们想购买该产品, 则没有明显的线索可以进行。至少可以说, 这是一个电子商务网站上的严重设计错误。
客户必须单击星级以查看产品评论, 这一点都不直观。此外, 产品英雄形象可能更大。
原始页面上缺少重要的, 具有说服力的UI徽章, 例如” 特价” , “ 仅在线” , “ 最高评分” 等。无法将产品添加到” 愿望清单” 中, 并且产品视频在页面下方太远。
解决方案

重新设计产品详细信息页面, 使其显得更加平衡, 结构合理(增加客户的信任度), 并且在大多数屏幕上的首屏上方都可以看到重要的产品信息。
在所有产品页面上显示” 添加到购物车” 按钮, 并在需要时轻轻提示用户首先选择型号/颜色选项。
使用大胆的, 带有空白的文本来吸引眼球并展示最重要的信息。
将推荐的附件部分放在顶部附近, 以使其更可见, 以获得追加销售机会。
在浏览产品图片时, 请在主图片旁边提供产品视频。
使产品评论更容易被发现, 在评分星标旁边添加客户评论链接。

文章图片
此外, 当客户在购物车中添加昂贵的产品时, 就失去了巨大的追加销售机会。该公司提供了一项保修计划(延长保修的一种形式), 该计划只有在他们添加产品后才能在购物车中使用, 并且被大多数用户忽略。
交叉销售和向上销售是零售中重要的收入来源。据说亚马逊大约有35％的收入来自这些地区。因此, 除了展示推荐的配件(交叉销售)之外, 扩大覆盖范围的计划被认为是一个巨大的错过机会(追加销售)。
解决方案
我们以不容错过的方式将扩展覆盖范围计划添加到” 购物流” 中。当客户向他们的购物车中添加了昂贵的产品后, 我们通过一个较大的号召性用语按钮：Protect My Gear, 展示了一个模态窗口前后概述了计划的好处。
展览七
购物车显得杂乱无章, 再次降低了客户的信任度, 导致购物车被抛弃。价格上的字体大小太小, 缺少MSRP的折扣, 并且更改产品数量很麻烦(单击字段并手动输入数字, 然后在字段外单击以保存它)。

文章图片
“ 保存购物车” 链接是一项重要且方便的功能, 几乎看不见。如果客户未登录, 则将他们从购物车中带出, 进入登录/注册页面, 然后必须从该页面返回购物车, 这是糟糕的用户体验。
解决方案

重新设计购物车, 使其看起来平衡且井井有条。
增加价格的字体大小, 以便于查看。
使” 保存购物车” 成为醒目的按钮。
添加建议零售价(制造商的建议零售价)以强调折扣。
将数量选择器更改为下拉列表。

文章图片
如上所述, “ 保存购物车” 功能给客户带来了不愉快的体验：如果他们没有登录, 则将他们从购物车中带出, 进入登录/注册页面, 然后必须从中返回。
解决方案
设计一个站点范围的全局登录/注册窗口, 该窗口将使客户” 就位” , 即, 如果他们需要登录或创建帐户, 则不会使他们离开页面。
展览八
当客户将产品添加到购物车时, 作为确认的一种方式, “ 迷你购物车” 将从右侧滑入。

文章图片
一个好主意, 但是……它存在多个可用性问题。没有总计显示。 “ 查看购物车” 和” 编辑购物车” 具有相同的功能, 因此存在冗余。
如果客户在主购物车中添加了扩展的覆盖计划, 则该计划将在” 迷你购物车” 中显示为单独的项目, 看起来好像是另一种产品, 而应该将其捆绑在一起。促销代码(再次应用在主购物车中)没有显示在微型购物车中。而且它也缺少” 使用PayPal结帐” 选项-一个重要功能。
关于如何关闭侧面板, 没有明显的视觉提示(指示符)—直到用户在其外部单击之前, 它一直保持打开状态。没有直观的体验。
解决方案

显示购物车中物品的总价。
显示” 白金覆盖率” 与特定项目明确相关。
显示适用于特定项目的促销代码。
在右上方添加” X” 图标, 表示可以关闭小型手推车。
卸下多余的” 编辑购物车” 。
添加” 使用Paypal结帐” 按钮。

更好的用户体验引领改善底线的道路
产品的最终用户体验是其成功的基石。良好的用户体验并不能保证成功, 但是糟糕的体验几乎总是会导致失败。
在电子商务领域众所周知, 人们对产品的信任程度更高, 他们更有可能购买产品。这受整体用户体验水平和感知网站质量的影响。
根据斯坦福大学(Stanford)进行的网络信誉研究, 有75％的用户承认根据其网站的设计对公司的信誉做出判断。用户对网站发表意见需要50毫秒(即0.05秒)的时间, 所有客户都需要决定是否离开网站。
考虑到电子商务领域的激烈竞争, 关注用户体验至关重要。消费者在进行在线购物时有无数的选择, 他们总是会倾向于那些最愉快, 最无挫折的体验。
这可能不是唯一的问题, 但是性能低下的电子商务网站的问题通常可以归因于用户体验不足。通过检查用户体验并通过一些基本的可用性测试, 有竞争力的用户体验研究和启发式评估, 可以大大改善其前景。
由于我们的工作重点是通过小的特定修补程序来提高整体用户体验：