

Zara是我最喜欢的服装品牌之一,但我每次使用Zara的线上购物的应用程序的时候都会遇到某些麻烦/问题。虽然我不是Zara的员工(无需为Zara调查用户体验效果),但我想知道其他用户是否也有类似的问题。
我决定进行可用性测试,这让我发现了多个痛点,并促使我重新设计了部分体验的流程。
01
移情 Empathize
用户角色 User Personas
我采取的第一步是围绕Zara的客户群进行在线调查。
然后,我创建了几个临时角色。这几个临时角色涵盖了我们所假设的,最大的客户群体:20-30岁区间的专业人士,以及中等收入阶层的专业人士。

02
Job Stories
除了创建人物角色之外,我还花了一些时间了解用户使用应用程序时周围的环境,以进一步了解他们的动机和期望的结果。

03
可用性测试 Usability Testing
为了能对用户有更好的了解,我去了一家有zara商店的购物中心。我选择了购物中心的顾客进行“ 游击模式”(即随机抽样调查) 的可用性测试。
我抽样调查了一些人,并在开始测试之前确认他们是否是经常在网上购物的人。最后我测试了七个用户经常在网上购物。
然后,我要求每个用户想象自己在一个场景中,并执行一系列任务,如:
- 最近天气很冷,你想购买一件冬衣。在这种情况下你会怎么做?(你会通过怎么样的方式去选择、购买?是否会对比不同的商店中的大衣?)
- 你看到一件你喜欢的外套。你能告诉我你怎么确定这是适合你的衣服吗?
- 你已经下单好一件外套了(使用网络购物的下单功能),但你意识到尺寸是错的。你怎么解决这个问题?

04
定义与分析 Define & Analyze
亲和图 Affinity Map
我仔细地查看了完成任务后的记录,并列出了每个用户所提出的问题和抱怨之处。然后,我使用亲和力映射,然后组织这些痛点并将其分组到各个类别中。

2X2 分析
为了帮助我更好地确定问题的紧急程度,我使用了一个2x2地图进行分析。将测试中所搜集到的问题,按照业务(x轴)和用户(y轴)的重要性进行排序。
假设该应用程序的主要业务目标是,提高线上业务收入,我认为在编辑购物车选项过程中,遇到的痛点对企业和用户来说是最重要的。因此,这些就是我需要重新设计的部分。

定义问题 Define Problem
为了给出一个更好的解决方案,我仔细分析了用户与购物车之间相关的行为和模式。

在尝试编辑购物车中的选项时(如删除/添加商品):
- 只有七分之一的人能够顺利地进入购物车选项的编辑模式。
- 7个用户中有6个用户会点击该项目,但是点击此处只会显示一张图片。
- 7个用户中有4个用户尝试在项目上向左滑动,但这不会打开编辑选项。
- 7个用户中有2个用户不小心删除了他们的购物车中加入的商品选项。
其他问题:
- 无法编辑购物车中项目的大小或颜色,这意味着(当用户重新进入购物车的编辑模式时)用户将不得不再次浏览这些(之前已经浏览过的)项目。
- 用户不能看到购物车中商品的更多图片(只能看到一张)。
05
创意与创造 Ideate & Create
Lo-Fi 用户界面素描
在回顾了围绕购物车编辑流程的问题之后,我将可能的解决方案映射到每个痛点,并创建了粗略的UI草图来概述解决方案。

高保真模型 Hi-Fi Mockups
在开始研究我的设计原型之前,我和更多的在线购物者一起浏览了Lo-Fi用户界面草图,完成了初步的验证。我收到了一些很好的见解,并将这些反馈纳入最终设计。
请参阅我提出的解决办法:

新的“编辑”按钮取代旧的“稍后购买”按钮
实际上,这是一个有意为之的选择。以前,当用户想要保存一个商品以供以后查看时,他们只能在购物车中加入商品时才能这样做。我会在产品浏览流程中添加“以后保存”的功能,这样用户就不必在商品收藏夹一栏中里将商品移动到购物车中。



如图所示,垂直图像的滑动模式与应用程序其余部分中的交互模式是一致的。
在最初的可用性测试中,用户往往倾向于水平滑动以获得更多的商品图片。因此,我增加了更突出的指标,以指导适当的互动。
05
原型 Prototype
准备好看看我制作的原型了吗?
首先,想象一下你在zara的应用程序上完成了购物流程,并且已经准备好退出了。但是,在这样做之前,您需要编辑购物车中的一些商品选项。
现在试着在我的原型中完成这个流程吧!(点击下面链接可以体验)
06
验证 Validate
我用我的工作原型测试了7个用户,进而验证了我的设计。这7名用户被要求浏览 【如何编辑购物车中物品的数量和大小】的操作过程。
测试结果 是所有的用户都能够顺利地完成任务。
经过重新设计后,当用户在购物车中编辑商品选项时, 任务成功率从33%提高到100%。
当用户想要编辑购物车中的商品选项时会出现如下图所示的情况:

07
结语
通过可用性测试,我发现用户在将商品条目添加到购物车后,在编辑商品项目时遇到了困难。
此外,该款应用程序中缺少了购物车通常有的一些功能(例如查看更多的图片或改变商品选项的顺序)。我的设计通过使用方便用户比较商品的模式和编辑购物车中的项目来改进购买过程。
提高这个过程的用户体验意味着降低与客户之间的摩擦,这反过来又会促进更多的销售。
原文链接:
查看链接 ↗ Ng
译者:益生菌菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
相关阅读
我 们

服务.体验.交互设计传道者

公众号
「yizhizhaojun」
一只朝菌设计学园

联络微信
平菇老师
「zhaojundesign」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办,致力于创造卓越的设计知识学习课堂,专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校,以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰:行胜于言。「一只朝菌」谨承母校百年教诲,时刻铭记师者之责,为好学者传道授业,为有志者掌灯引行。