[自译]Zara: 可用性案例研究

原文链接：Zara a usability case study

原文作者：William Ng

Zara是我最喜欢的服装品牌之一，但是当我用app的时候总会遇到一些问题。尽管我不在Zara工作，但是我想看看其他用户是不是也有相似的问题。我决定去做一做可用性测试，这可以让我发现很多的痛点，并且对体验的部分进行重设计。

同理心

用户画像

第一步，我围绕Zara的消费者进行在线调研。我创建了两个临时的角色来应对假设，最大的用户群是：20～30岁的中上收入阶层。

工作故事

除了了解角色之外，为了更近一步的了解用户在使用app时的动机和预期结果，我花费了很多的时间去理解用户使用的环境。

可用性测试

为了更好的理解用户，我决定去一家Zara的店，选择一些客人进行追踪可用性测试。我对人群进行抽样测试，确保他们在测试之前接触过网购。最终选定了七位用户。

每位用户都被要求想象一下他／她在一个场景中，并执行下面这些任务：

最近很冷，你想要去寻找一件冬天穿的外套，你会怎么做？

你看见了一件喜欢的衣服，你可以告诉我哪些因素让它吸引你？

当你添加外套进购物车后，你发现衣服的尺寸错了，你会怎么做？

定义&分析

亲密图

我仔细的分析测试录音，然后提出每个用户的问题与反馈。然后通过映射来反映这些痛点的关系，分类处理。

2X2分析

为了帮助分析问题，我试用了2x2地图来帮助划分问题的等级，通过他们在商业（x轴）和用户（y轴）的重要性来确定。假设app的主要业务目标是推动移动端商业收入，我认为购物车编辑是商业和用户之间最大的痛点。因此，这些问题都在我的重设计范围内。

定义问题

我仔细地分析了用户与购物车的行为和模式，想了一套解决方案。

当试图在购物车中编辑一个项目时：

七个人当中只有一个没有遇到问题

七个人当中有六个尝试tap购物车中的项目，但是只谈出来了一张图片

七个人当中有四个试图刷新项目，但是没有弹出编辑选项

七个人当中有两个不小心删除了他们的物品

其他问题

没有办法修改购物车中商品的大小和颜色，这意味着用户不得不返回再次选择内容

用户无法看到购物车中关于商品更多的图片

想象&创造

低保真UI草图

在回顾了购物车编辑的问题之后，我关联了每个痛点和可能的解决方案来解决问题。

高保真原型

在将我的设计应用在原型之前，我通过在低保真UI草稿的走查和参考更多的网购用户的意见。收集了一些不错的观点并融入了我的最终设计中去。

接下来是我的解决方案：

新的“edit”按钮取代了旧的“buy later”按钮；这是一个有意义的选择。在这之前，用户想要保存他们的项目，他们在购物车中只能这么做。我会添加“save for later”功能在product-browsing流中，这样用户在收藏之前就不必去移动它。

竖向的图片carousel与app中的其他部分交互模式保持了一致。在最初的可用性测试中，用户往往会水平轻扫去查看更多的图片，因此我添加了适当的视觉元素引导互动。

原型

准备好了试试看原型吗？

首先，想象你你刚在Zara的app中完成购物，并准备退出。然而你需要编辑一些在购物车中的物品。然后你可以试着使用原型（点击查看）看看了。

验证

我通过七位用户来使用原型来验证我的设计。这七位用户被要求去编辑购物车中物品的数量和大小。所有的用户都能够没有问题的完成任务。

重新设计后，任务的成功率从33%上升到了100%。

当用户在购物车中编辑一个项目：

通过追踪可用性测试，我发现了用户对已经添加进购物车中的商品编辑困难。进一步，有一些预期的普通功能并没有存在于购物车中。（例如查看更多的图片和更换尺寸）。我的设计优化了检验过程，方便用户在购物车中编辑和比较。让用户在整个过程中更平滑意味着更低的跳出率，进而带来更多的商业变现。