本文为译文，作者：Peter Petrovics
Runkeeper
目的
这个UI/UX案例研究的目的如下：
-分析APP在头脑风暴阶段产生的冲突；
-进行可用性测试以验证痛点或发现新的痛点;
-设计原型来解决主要的痛点;
-不断迭代直到可以用数据验证所有设计；
为什么选择 Runkeeper?
RunKeeper 是一款GPS功能的健身跟踪app，让忙碌的人能够迅速制定运动目标和朋友一起完成。当我第一次开始使用app时为精心设计的用户界面感到惊喜。作为一个健身爱好者和产品设计师，我决定看看是否有任何我可以做的以改善用户体验！
结果
在可用性测试过程中，我进行的UI更改取得了如下成果：
可用性测试前后数据对比
人物角色
在进行可用性测试之前，我需要了解什么样的人都有可能使用RunKeeper。这是我的首要任务，因为我知道，对用户基础有一个彻底的了解将有助于我在设计过程中做的一切。
在对公司进行研究和阅读各种用户的推荐信后，我开始整理一些临时人物角色。然后，我进一步完善这些人物角色，通过采访用户的爱好，目标，以及以前接触的健身app：
persona
初步观察
正如我前面提到的，我对RunKeeper的第一印象比较好。界面通过采用大量的留白以及橙色相间呈现给用户一种干净，一致的感觉。在信息架构方面，有两个不同的部分：统计信息部分和底部操作栏。
留白区域
深入挖掘之后，我发现了一些我认为薄弱的地方，例如，设置一个目标和查看我的锻炼统计是一个有挑战的点。我还报名参加了一个培训计划，并希望快速滚动列表看到一些训练成果，实际结果是并没有给我这样的选择！
可用性测试
一些直觉的操作。我开始在Westfield商场进行游击测试（就是到一些公共场所去访问别人对你的产品的一些看法）来发现是否是真正的痛点。
这是预设的3个独立任务：
1 夏天来了，你想在海滩上看起来很棒，创造一个目标，在2个月内减肥10磅。
2 查看你上周的5km跑步中燃烧了多少卡路里。
3 你报名参加了培训计划，希望能在接下来的几周里快速地看一看你的健身计划，找到你目前的8周培训计划日程。
亲和图
在可用性测试之后，目标是分析我收集的数据并找出主要的痛点。我采取了视频的方式，每个用户与界面交互（已经获取他们的许可），并收集了各种观察笔记。接下来，将我的观察组合在一起创建一个亲和图。此图是基于用户正在执行的任务，不同颜色代表不同的用户。
Affinity Map
2X2矩阵
我做的每一项任务都是基于RunKeeper和用户的重要性粗略预测。结合亲和图，这个练习帮助我确定哪些痛点集中在什么区域，这些都是我通过研究公司和用户访谈来验证的假设。
和市场上其他的健身应用，RunKeeper通过提供用户选择购买先进的训练计划和更强的进展分析。因此，我认为锻炼统计和培训时间表是更重要的业务比为用户创造一个目标的能力。对于用户来说，目标设定是用户期望从一款健身app得到的基本的和必要的功能，他们想要创造并实现这个目标。
痛点
亲和图和2x2矩阵产生了一些非常有趣的结果！以下是2个主要被挖掘出来的痛点：
1 上传头像的图片icon识别性很低，用户不容易理解；
2 不能浏览目前正在进行的训练完整时间表；
结果和原型
我发现第一个痛苦点可以用以下三个任务来测试，作为参考，这里是用户执行的任务：
上传图片的图标唯一功能是选择一张个人头像，然而，似乎大多数人都不是很明白，在最初使用app 的5个人中，有4个人点击了照片上传图标，而不知道他们试图要完成的任务是什么。
Ooh, a big red button!
这里是优化前后的两张图片，以解决第一个痛点：
‘Me’ Page: Before and Afte
我的第三项任务是非常好，揭示了第二个痛点：用户不方便浏览他最近报名的锻炼计划日程表，日程也不能删除和预览。当被问及查看正在训练�的时间表有多重要时，每个用户都清楚地表明这是必要的。显然，添加此功能将解决他们的问题。花一点时间对比交互流程变化前后方案：
Before and After: Task Flows
下面两张图片是我针对训练页面做的UI调整。
Training Page: Before and After
如你所看到的，唯一的方法来查看完整列表的锻炼是预览一个具体的计划，一旦你真的开始了这个计划，你就不能再查看这个列表（或者预览它了）！为了让用户查看他们已经注册的计划的上市进度，我创建了一个单独的流程：
下面的屏幕显示是用户进行的现有流程，在他们还没有报名训练计划之前可以提前预览训练课表。注意：我没有改变任何屏幕的用户界面。
Existing UI Flow
正如你所看到的，查看完整的训练列表的方法是先查看一个具体的计划。一旦你真的开始了这个计划，你就不能再查看这个列表（或者预览它了）！为了让用户查看他们已经开始的训练进度，我创建了一个单独的流程：
New UI Flow
在此流程中的第二个屏幕以前只能作为预览，然后才开始计划。我添加了第三个屏幕，你可以在列表视图和卡片视图里做同样的选择。
验证和结论
为了可靠地验证我的UI变化有一个积极的影响，解决了主要的用户痛点，我需要比较一开始的可用性测试的结果和我的最后一轮测试结果。
请注意，我省略了所有其他迭代，只专注于开始到结束的变量。首先，让我们观察最初的游击测试者能在20秒内完成多少个任务：
最初的可用性测试
现在让我们来看看这些结果是如何在用户验证的最后一轮中改变的，新用户在每个任务中再次被赋予20秒的时间：
最后，观察下没有错误选择照片上传图标的人数：
最初的游击测试
最后的可用性测试
我很高兴地看到创建一个包含照相机图标+添加照片的上传功能为用户减轻很多认知负荷。至于完整的时间计划表，每个人都达到能够找到他们正在寻找的目标并继续完成这个功能。
未来计划
我收到了一些关于用户培训计划的建议，比如尽可能通过在日历页面内置一系列的可折叠下拉菜单来展示。这将允许用户查找所有安排的培训课程，并以简洁、互动的方式呈现信息。这是一个有趣的解决方案，我期待着进一步调查！
原文地址：https://uxdesign.cc/runkeeper-a-usability-case-study-2749e2403ef2
网友评论