Web应用程序成功之路:原型和用户测试

这段摘录是第15章Web应用程序成功实用指南作者Dan Zambonini。

通过提及原型或用户测试很容易被关闭。它们经常唤起一次性,耗时,昂贵的工作图像。

无论您对这些主题有何看法,无论您在界面设计方面经验丰富,都不要跳过此步骤。这是迄今为止我们工作的最大考验。它突出了界面的实际问题,以及我们对应用功能的选择和实现,同时它们仍然容易且变得便宜。不要过于戏剧化,但它可以成就或破坏应用程序。

这也是令人惊讶的快速和廉价 - 你会看到只需30分钟的努力结果。

原型

随着交互设计,构图,网格,层次和风格的知识牢牢植入您的脑海,现在是时候勾画线框 - 潜在的应用程序界面。

如果您在一个小团队中工作,您可能会发现让整个团队参与此过程非常有用。如果您正在为客户设计应用程序,那么将其纳入可能有助于沟通和改进设计决策。

一个警告:仅包括了解人物角色和后续特征决策过程的人员。很多次,我看到一个线框会话由一个任性的开发人员主导,他认为应用程序应该围绕他们的工作方式设计。包括多人在内的好处是设计决策的沟通和人们定期参与的机会增加,“西蒙人会如何使用它?”这不是委员会的设计。

1.选择您的关键屏幕

如果你有时间和能力为应用程序的每个屏幕创建一个线框,它肯定不会受到伤害。实际上,您只需要对最重要的屏幕进行原型设计,并且通常可以将许多屏幕标准化为单个线框。

例如,Twitter和Facebook都使用类似的屏幕作为您的家庭饲料和另一个人的个人资料,因此只为这两个屏幕中的每个屏幕创建一个线框。这两款应用只需要大约四个对其成功至关重要的关键线框:用户注册,主要供稿,人物搜索和人物搜索结果屏幕。

如果您正在创建最低可行产品(MVP),则不需要超过四到五个关键屏幕。启动MVP后,您可以在构建MVP时对各个非平凡功能进行线框化。

2.列出屏幕元素

接下来,列出屏幕上显示的所有可视元素(文本,按钮,表单,图形,菜单)。如果你自己工作,只需使用笔和纸。

从最重要的屏幕开始,用户将花费大部分时间。我们可能会在屏幕上重复使用许多设计元素,因此我们需要确保它们设计为在主屏幕上运行最佳,如果您的应用程序有一个。

包括默认情况下未显示的任何屏幕元素,例如警告,错误,替代状态和反馈。

让我们回到之前的烹饪应用程序。为了论证,假设在进一步考虑战略输出时,决定MVP只包含一个特征:找一个替代成分

虽然这是一个偏离原始概念的转变,但它为最少数量的功能提供了最大可能的观众。替代成分不仅适用于毫无准备的厨师,也适用于患有过敏症,糖尿病或其他健康问题的人,以及那些宗教或道德信仰影响他们所吃的食物的人。

主搜索屏幕的屏幕元素可能是:

  • A)搜索框
  • B)错误搜索的异常消息
  • C)热门搜索
  • D)在用户输入时自动建议匹配
  • E)食品类别搜索,例如素食,健康,乳糖不耐症
  • F)服务的描述
  • G)添加替代成分的链接
  • H)我最近的搜索
  • I)应用程序徽标

3.对屏幕元素进行分组和优先级排序

列表中的某些项目自然属于一起。将项目放入组中,并将组从最重要到最不重要的优先级排序。

  • (a,b,d)搜索框,异常消息,自动建议匹配
  • (c,e,h)热门搜索,分组搜索,我最近的搜索
  • (i,f)应用徽标,服务说明
  • (g)添加替代成分的链接

对于小型MVP应用来说,这应该是一项相当快速的任务。如果您的屏幕需要更高程度的复杂性,并且最终需要对数十个元素进行分组和优先排序,那么可能需要执行简单的卡片分类练习。在索引卡或便利贴上写下每个项目,并要求一些团队成员或朋友独立地将卡片分组,然后将这些组按重要性顺序排列。应该出现一种共同的群体和优先事项模式。

4.每组的低保真模型

现在是时候勾勒出每个小组了。这些是关于界面的每个部分如何看起来的低保真度的想法。你真的不需要任何艺术能力,所以潜入。

这是一个创作过程,您可以为每组元素生成多个界面创意,因此不必担心第一次正确使用它。这些群体也不是一成不变的,所以如果您认为最近的搜索与搜索框的关系比与热门搜索更密切相关,那么请继续使用它。这就是重点 - 现在而不是以后迭代和更新这些想法。

不要担心元素之间的一致性:勾勒出界面的每个部分,而不会对其相对大小或位置有先见之明。不要把它们都想象成挤在同一页面上;我们希望页面能够解决这些问题,反之亦然。

Lo-fi sketches of interface elements

界面元素的低保真草图

这一步确实最适合用笔(或铅笔)和纸张。我们需要快速迭代基本思想,看看有什么作用,什么不行,所以暂时跳过软件。

5.线框

现在把各个部分放在一起,记住每个小组的优先级。在迭代的这个阶段,我们仍然不关心与网格系统,颜色或排版的精确对齐。这是关于在视觉上评估页面上元素之间的平衡,优先级和交互。

笔和纸可用于初始评估较简单的页面,但在此阶段我们关注重新排列和巧妙调整元素块,因此通常使用替代工具更快。为了达到复杂程度,您可能需要调查以下内容。

便利贴
在剪切到大小的便利贴上绘制每个元素组,以便于重新排列特征。您甚至可以使用不同颜色的便利贴对相关块进行颜色编码。如果您需要调整其中一个元素的外观,则只需重绘单个便笺而不是整个页面。

PowerPoint或主题演讲
我不喜欢接收PowerPoint文件中的网页设计和下一个人一样多,但演示软件可以成为快速草绘,分组和排列基本线框元素的有用工具。

Google文档图纸
谷歌文档工具套件有一个专用的绘图应用程序。虽然它并不专门迎合Web应用程序界面线框,但如果您希望在线框上远程协作,它可以是一个有用的工具,因为多个用户可以同时编辑绘图。

专用的Web应用程序
有许多网络应用程序旨在加快和改进界面线框流程。只知更鸟是最好的之一,它很容易上手。该铅笔项目提供另一种Firefox扩展。

专用桌面应用程序
Balsamiq Mockups是一种用于线框设计的非常好的商用桌面产品。如果您已拥有Microsoft Visio或OmniGraffle,则可以使用大量Web线框模板来加速该过程。尝试选择一种保留草图般的低保真风格,以视觉上强化设计的未完成性质,并防止你考虑太多的细节。

我个人的偏好是使用专用的线框/模型工具,无论是网络应用程序还是桌面软件,因为它们的内置通用浏览器GUI元素库使得这个过程比笔和纸更快。

The same wireframe created with pen and paper (left) and OmniGraffle (right). Once all the elements were placed on the page, I decided to add icons to the types of substitutes list. This doesn't only aid usability, but also adds bottom-right weight to balance the top-left- heavy logo

使用笔和纸(左)和OmniGraffle(右)创建的相同线框。将所有元素放在页面上后,我决定将图标添加到替换列表的类型中。这不仅有助于提高可用性,还增加了右下方的重量来平衡左上方的重标志

值得测试这个早期的线框,将它放在几个人的鼻子下面,但是不要用它来替代用户以后测试高保真模型。正如我之前提到的,颜色和其他细节可以极大地改变用户体验并需要进行测试。

6.原型

最后,是时候创建一个可以由用户测试的原型界面了。尽管此界面可能会多次迭代,但您应该开始添加可影响用户体验的美学细节:颜色,网格对齐和排版。

A first iteration prototype of the interface, with tasty food colours and grid alignment, ready for user testing

接口的第一个迭代原型,具有美味的食物颜色和网格对齐,可供用户测试

您可以使用Photoshop,Fireworks或任何其他图形设计软件来创建平面原型图像文件,但理想情况下,您希望它是交互式的,这样您就不需要在用户测试期间手动描述可能影响用户的行为。

交互性不一定是真实的 - 它不需要被挂钩到任何代码中 - 但是接口应该看起来像你期望它的反应,即使反馈是硬编码的。

创建交互式原型的选项包括:

  • 嵌入在简单HTML图像映射中的平面图像文件,以便用户可以单击界面的一部分并进入相关的下一个屏幕。
  • 从Fireworks等软件导出切片和HTML,以创建具有简单功能的HTML页面。
  • 如果你是一个快速编码器,你可以用HTML,CSS和JavaScript手工编写原型界面,利用像这样的库和工具蓝图CSSIxEdit
  • 原型设计软件如Axure RP要么Serena Prototype Composer对于许多更简单的网络应用程序来说,这可能有点过分。
  • 在我提到最后一个选项之前,你必须保证在你阅读它之后不要刻录这本书。诺言?那么......所见即所得的网页设计软件就像Dreamweaver中Microsoft Expression WebAdobe Muse允许您快速创建原型接口。请记住,您没有测试输出代码的质量,只测试接口的质量。不要让耻辱让你摆脱这些非常实用的选择。

用户测试

用户测试提供了对用户行为,界面可用性以及用户期望与Web应用程序功能之间匹配的宝贵见解。在原型阶段执行时,早期的洞察力使我们能够:

  • 预先确定并修复建议的选择和功能实现的问题。
  • 识别并删除冗余功能以节省开发成本。
  • 优化用户体验,提高客户满意度,转换和口碑营销。
  • 消除可能导致昂贵的客户支持的挫败感。

用户测试也可以使用或多或少的原型进行:它们是分析已经启动的应用程序的有用工具,甚至是在针对竞争对手网站进行分析时,这是一个项目早期阶段的战略规划工具。

用户测试并不是特别复杂:要求适当的用户使用应用程序执行许多设置任务,同时监控他们的操作和发声的想法。但是,为了从测试中获得最大收益,值得在计划和执行的细节上花一点时间。

您可以聘请专业的可用性代理商来为您担心细节。他们将选择相关用户,计划任务,调整会话并总结调查结果。不幸的是,这可能花费数万美元。

幸运的是,非正式的自助式方法既实用又便宜。它还为您提供第三方机构在最终报告中可能无法传达的定性反馈,您可以立即获得结果。

测试

在每个测试环节中,用户在最多45分钟内应该被执行不超过五个任务,超过这个任务,他们的反馈和行为可能会受到疲劳和离开的愿望的影响。

如果您在同一天进行多次测试,请尝试在两次会议之间留出二十到三十分钟,以便与您的团队进行测试后讨论,超支和用户迟到。

测试用户的数量取决于您的应用程序的规模。我发现,对于小众MVP原型,测试用户之间存在强烈的行为关联,这使得大多数问题只能从一个或两个会话中提取出来。对于复杂的应用程序,测试对象更有可能识别出独特的问题,随着测试用户总数的增加,收益递减。雅各布尼尔森表明五个用户在收益递减显着之前提供了最好的洞察力。

规划测试

选择并检查您的任务
您不太可能测试整个应用程序。选择并描述测试最常用功能的任务以及您认为可能遇到的可用性问题。一个好的任务描述更像是一个场景而不是一个领先的指令:

寻找沙爹酱的替代成分。 (任务说明不好)

今晚有一位朋友到处吃饭,他们对坚果过敏。调查如何相应地更新您的食谱。(好任务说明)

请务必自行测试任务,以确保原型正常运行并按照您的预期进行响应。你不想浪费时间来处理错误和不可能完成的任务。

选择指标
虽然测试结果的很大一部分将包含特定的可用性问题和定性反馈,但记录定量指标以直接比较接口的连续迭代或不同的测试用户组是有用的。

考虑录制:

  • 完成率:用户是否成功完成了任务?
  • 完成时间:用户完成任务需要多长时间?
  • 完成步骤:用户完成任务所需的页数/屏幕数/点击数是多少?
  • 错误的数量和严重性
  • 用户满意度评分(满分为5分)

选择您的用户
您必须与相关用户一起测试。在一周的大多数夜晚,与一个厌恶烹饪和吃冷冻比萨饼的人一起测试烹饪应用程序毫无意义。

根据之前的角色和市场调查,描述您正在寻找的人:目标用户的人口统计和兴趣。使用它从任何可以找到它们的地方招募适当的测试对象:

  • 朋友,家人和专业人士
  • 您的预告网站/博客
  • 社交媒体(Facebook,Twitter,LinkedIn和与您的应用相关的利基网络)
  • 公告牌,邮件列表和分类广告(例如Craigslist和Gumtree)

确定报酬
根据您的市场竞争和兴奋,您可能会发现测试科目不需要任何进一步的激励。如果您发现很难为您的考试招聘人员,或者您想让他们对您的业务有一个良好的感觉,您可以考虑向参与者提供一些小奖励:

  • 早期或免费访问网络应用程序
  • 现金(£10-£20)
  • 优惠券(亚马逊,电影票)
  • 葡萄酒或巧克力

选择你的工具
有许多工具可以方便用户测试过程。

至少在个人目的端,反馈军要求任意用户使用基于文本的回复来回答您的特定任务问题。如果您的应用确实针对一般人群,这可能会提供一些价值,但要获得真正的洞察力,您需要使用替代工具。

UserTesting.com稍微复杂一点。他们会为您找到用户,录制他们完成任务的视频并将结果发送给您。它既便宜又简单但有一些缺点。用户可以主要根据人口统计数据进行选择,因此如果您想选择每周至少五天在家做饭的用户并定期使用IMDB,那么您需要在自行选择测试时依赖他们的诚实。此外,在测试过程中,您无法获得最重要的互动,以询问他们为什么要做某事或他们的期望是什么。

如果您需要远程测试和与所选用户进行交互,更好的选择是使用屏幕共享和屏幕录制软件的组合。Adobe ConnectNowSkype的提供强大的屏幕共享软件,以及IShowU(Mac)和Camtasia工作室(Windows)提供屏幕录制功能,以及许多其他替代工具。

更好的是,亲自进行测试,全面了解用户反应的细微差别。要记录会话,你需要一个网络摄像头(或一个内置的笔记本电脑摄像头)和一个便宜的USB麦克风 - 不要把预算花在任何昂贵的东西上。然后,使用诸如的软件音拍(Windows)或优秀银背(Mac)记录和回放测试会话和用户反应。

进行测试
在测试当天,将所有内容设置,测试并准备就绪。欢迎参与者,并提前感谢他们的时间。

您希望让他们感到放松和放松,以便测试尽可能自然。提前付款,以便他们知道奖励不依赖于正确的测试结果。解释他们将要做什么以及应用程序正在测试,而不是他们。告诉他们尽力而为,但不要担心错误或弄错。

让他们签署一个简单的豁免,允许您与团队一起记录和使用测试会话结果,但也明确保护参与者的隐私,并防止外部发布或共享录音。

最重要的是,要求用户大声思考,不要害怕说话太多。让他们知道,如果他们向您询问有关如何使用应用程序执行某些操作的问题,您将无法回答,因为您需要仅使用应用程序复制他们的环境。

作为会议的主持人,您有责任保持客观和倾听。首先设置一个简单的任务,让参与者感到舒适。小心不要通过提出引导性问题来引出您想听到的回答。相反,给予鼓励,不明确的反馈,只有在你给他们足够的时间进行自我纠正之后,才能让参与者摆脱不正确的道路。

如果您需要参与者解释他们的行为或反应,请不要在您的问题中包含任何意见。你可能会问:

“你能描述一下你现在在做什么吗?”

“你在想什么?”

“这是你期望发生的吗?”

经过测试
当时间到了或任务完成时,请务必再次感谢参与者。这些测试用户可能会成为您的第一个口碑传播者,特别是如果他们真的是您的应用程序的目标市场。您可能在测试期间包含了一个简短的应用满意度评级的时间,在这种情况下,请求参与者在测试后立即完成。

一旦参与者被展示出来,立即捕获笔记和见解。最好记下测试中的所有想法,即使有些看起来微不足道:你总是可以在以后过滤它们,但你也可能在以后的测试中找到一个模式。

完成所有测试会话后,请审核调查结果,提取高优先级和常见问题,并尽快实施相关更改。

摘要

原型测试揭示了对应用程序的有效性和潜力的有用见解。至少,在纸上绘制一个粗略的界面,并与相关的潜在用户进行非正式讨论。

  • 列出每个页面上的元素,然后分组并确定优先级。
  • 使用笔和纸模拟界面元素的低保真度变化。
  • 线框和原型关键应用程序界面。
  • 使用适合您的任何工具,从笔和纸到专业模型软件,模拟高保真原型界面。
  • 在将其展示给测试参与者之前测试您的原型。
  • 在进行测试之前确定要测量的内容。
  • 使用基于场景的测试而不是特定的主要问题。
  • 测试参与者应该与应用程序相关。如果需要,可以询问朋友,在线联系人并使用本地分类广告。
  • 用小礼物奖励参与者。每45分钟的测试时间,您不需要花费超过20英镑。
  • 使用便宜的视频和麦克风记录所有测试会话。
  • 作为测试会话的主持人,您应该主要倾听并询问为什么要做出选择。除非绝对必要,否则不要提出引导性问题或提示。
  • 在测试会话之后立即捕获注释,并在所有会话完成后尽快实现对接口的更改。


翻译字数超限