这是我第一次涉足用户体验设计领域。本文案例来自General Assembly。
01
简介
两人一组，快速设计一个简单的移动应用程序的粗略交互式纸质原型，以有效解决情侣生活中的一个常见问题。
02
材料/工具
纸、笔、POP应用程序
03
方法
每个阶段的过程概述：
- 研究阶段：概念图绘制、共同创建草图、一对一访谈
- 设计阶段：用户流程、线框流程、界面草图
- 原型制作和测试阶段：使用POP应用程序进行快速原型制作，观察测试该应用程序的用户
04
研究和观察阶段
与我一同进行此练习的伙伴是Kirsty，我在这个项目中的首要任务是找出她生活中的一个问题，这将是我的移动应用程序原型的重点。为了深入了解她的生活，我们以概念图的形式开始了一些高级用户研究。我们坐在一起，我问了她一些关于生活和习惯的广泛的开放性问题。
在我们交谈时，我创建了一张概念图，我们都可以看到。随着对话的进行，我迭代了概念图，以尝试更深入地挖掘潜在的兴趣领域。最终的概念图如下所示：
最后确定的关键问题与她和男友Tom一起去电影院看电影的经历有关。Tom是一位编剧，对电影有着专业的兴趣，而且工作时间也十分灵活。关键问题洞察力来自Kirsty的以下陈述：
“这通常是他的选择……他经常（独自一人）去看我也想看的电影。”
在与Kirsty进行的一对一访谈中，通过进一步的调查发现， 由于他们不同的工作日模式和缺乏沟通，Kirsty的电影观影体验并不总是她所希望的那样。Tom已经看了Kirsty想看的所有电影。因此，当他们一起时，她必须看一些自己不感兴趣的东西。
05
假设
基于概念图和用户访谈的初步发现，我创建了一个故事板，并基于场景来测试是否可以使用某移动应用程序解决Kirsty的问题。 我使用故事板来帮助确定应用程序所需的关键功能，以便为设计和测试阶段创建一个假设：
Kirsty认为故事板（展示了现状和未来的状态）看起来不错， 我们能够用它来突显电影的“标签”和“这些标签的交流”，并将其作为应用程序设计的两个关键要素。
根据这些信息，我创建了以下假设来指导我的设计和测试阶段：
06
设计阶段
在共同确定了核心功能之后，我开始了一些初始用户流和草图，以确保Kirsty可以遵循一系列逻辑步骤来实现既定的目标。在我让Kirsty测试用户流时，我对它进行了多次迭代，并对我们希望实现的目标的确切性质进行了更改。
此外，通过围绕用户流的对话，我们确定了尽管与问题相关，但并不是我们最需要的功能，到目前为止，（例如用于协调Kirsty和Tom何时去电影院的日历和聊天功能，以帮助他们与朋友协调约会和电影），但这可能是未来的版本中值得探索的领域。
最终的用户流如下所示，尽管它着重于先前确定的标记和分享兴趣电影的主要目标，但现在还包括允许浏览电影（摘要和详细信息）、标记已观看电影的，以及选择是否分享更新的功能。这些新功能是在与Kirsty测试用户流并在流程的每个步骤询问她的需求时发现的。
一旦Kirsty能够通过用户流实现具体的特定目标，我就使用文档来描述出这些过程步骤将如何转化为线框流程中的屏幕。一个流程的多个步骤可以在一个屏幕上实现，因此规划应用程序中的各个页面之间的关系至关重要。同样重要的是，Kirsty将如何通过应用程序实现所有不同的用户流。在确定了按钮和“交互式热点”之后，绘制界面设计草图：
我一开始构建的线框流程可能有点太详细了，因此我没有时间对其进行多次迭代。我还注意到，在这个过程的后期， 我没有考虑到用户流中存在的每一个流程，因此不得不为那些研究较少的用户设计屏幕以支持设计过程。尽管如此，最初的草图还是在很大程度上被线框屏幕所影响。
07
原型和测试阶段
我拍摄了草图屏幕并将其上传到了快速原型POP应用程序上。在POP中激活了线框流程中标识的热点和按钮，然后要求Kirsty和其他测试人员使用原型来实现目标。
我要求测试人员在测试应用程序时大声说出来，以便我写下他们的想法和观察结果，帮助我进行迭代并创建更好的版本。
在第一轮测试中，Kirsty说浏览和分享流程非常清晰直观，但是她遇到了两个关键领域的困难：
“我真的没有get到——我必须滑动分享，我以为我只需要点击即可。这让我感到有点蠢。”
“我喜欢我可以看到我的哪些朋友也喜欢这部电影，但是当我看到谁想去的时候，我可能也会对它感兴趣。”
从这个反馈中，我的第二个迭代原型将滑动改成了点击，而且我还允许用户能够在“好友”屏幕上分享对电影的兴趣。 这第二个改变将导致用户流的更改。 一般情况下，我会这样做。但是，由于这是快速原型设计和迭代过程，因此我仅作了注释并更新了界面草图。
在对包括Kirsty在内的多个用户进行的第二轮测试中，我得到了其他反馈，这些反馈可用于该应用程序未来的迭代。例如：
_“在主页上标记“兴趣”或“看过”似乎是最基本的功能，但在详细的电影介绍页面上就不是了。我不知道为什么，虽然它们是相同的图标，并与其他链接有一些区别……也许是因为星标和其他的链接图标对齐？或者是因为用户希望在详细信息页面（我可以滚动的地方）看到某种提示？比如“感兴趣吗？” 或者“看到了吗？” ——Kirsty L，3月18日。_
_“我想可能是电影详细信息屏幕上的箭头将我带到了不同的电影界面，但我发现这确实有点令人困惑——或许可以将电影标题添加到顶部或使它更明显？我不知道这一点是不是真的很清楚……” ——Adam B ，3月18日_
_“我可以理解，最下面的星星（一个icon）是对这部电影感兴趣的人的名单……啊，不，这是我的最爱和看过的电影。所以，我想通过这些页面来确认，避免误会……” ——Adam B，3月18日_
_“我希望它能与Facebook以及某种形式的聊天功能结合在一起，以便我可以邀请朋友并就电影进行聊天……例如，我想安排一次约会之类的……我也希望能够有非公开的私人的聊天功能……”——Adam B，3月18日_
作为我进行测试结果的补充说明，将来我想花更多的时间来解释该应用程序要解决的上下文和问题陈述。我还将带上用户流程图，以告知我希望参与者完成的特定测试场景。我发现我并不总是能获得相关或适当的反馈，因为我没有正确设置测试。
08
讨论
快速原型实验的结果是，我们产出了一个允许对目标用户感兴趣的电影进行标记和分享的应用，最初的假设确实可以解决Kirsty的问题。当然，需要对产品进行进一步的迭代以进一步完善产品的功能，并且可能需要添加额外的功能（不包括在我们的用户流范围内），这样的方式才能真正实现所需的解决方案。
第一轮测试，kirsty认为可以满足她的基本需求。
Kirsty能够标记她对某部电影的兴趣并乐意与Tom分享。也就是说，Kirsty希望Tom能改变他自己，在一个人去电影院时能看一部其他的电影，他们两个人在一起可以看对方都喜欢的电影。
第二轮测试强调了以下方面，这些方面可以在将来的迭代中加以改进：
- 通过“详细”模式在电影之间导航。有些用户不清楚他们是否可以滚动浏览首页和详细电影视图中的电影，所以他们不停地返回首页浏览。测试人员建议将电影标题移动到详细信息页面靠近顶部的位置，但这也可以通过标记导航箭头来解决，例如，“下一部电影”。
- 在详细视图中标记电影。电影详细视图中的号召性用语引起了极大的困惑。正如Kirsty所说的那样，也行可以通过一个标签来解决此问题。
- 图标。尽管是一个粗略的草图，但这个眼睛的图标也使一些测试人员感到困惑。他们不清楚这是意味着要看电影还是已经看过电影。对用户进行进一步测试有助于确定一个更合适的图标来表示所需的消息。
- 整合社交媒体和聊天。在第二轮测试中，人们对该应用程序可以提供的更广泛的潜在的整合功能，非常感兴趣。用户对如何在应用程序中添加好友以及发送有关电影的私人消息很感兴趣。
这次只是一个基于纸模的测试并经过多次迭代确定产品的最终功能，这也是激发设计灵感的有效方式，一起尝试做起来吧！
参考文章：
作者：Annelise Nelson
译者：设计小菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
我 们
服务.体验.交互设计传道者
公众号
「yizhizhaojun」
一只朝菌设计学园
联络微信
杏鲍菇老师
「zhaojundesign2」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。