原型测试设计规范编写

2023年3月31日

何时需要可用性测试

从产品设计的实际产品开发流程,可从项目的重要程度、产品市场的创新程度两个维度进行判断是否需要执行可用性测试。

1 测试目标与方法

参与角色 需求方、设计师

1.1 目标

原型可用性测试在验证以下内容时尤为有效[1]:

  • 交互文案 —— 组件、按钮命名是否合理?

  • 组织布局 —— 信息是否进行了有意义的分类?功能摆放是否符合用户预期?

  • 初次使用的易学性 —— 常用功能是否易于新用户查找?功能引导是否简单易懂?

  • 有效性 —— 用户能否有效完成任务?有没有犯错?哪里出错了?出错频次高吗?

1.2 方法

用于可用性测试的原型类型有静态、动态[2] 。两种原型各有利弊。 纸面原型: 将所有页面通过纸面呈现,手动切换。在测试过程中用户的每一次操作,都需要由专人实时进行“响应”。设计者一边观察,一边充当电脑,手动切换页面/组件。 高保真动态原型: 原型可以直接与用户交互。设计者预先配置好所有响应,力求真实还原应用的最终实现效果。原型制作可以使用Protopie、Axure、Flinto、Figma。

静态纸面原型
优势 :节省原型的制作时间,方便进行迭代被试用户更放松 测试时动态原型自动响应,无需设计者介入,让设计者更关注测试本身;
劣势:可测试内容有限
适用情形:原型设计尚未确定前,评估页面核心流程、框架

高保真动态原型
优势:被试用户的操作更加真实;可以测试更多的动态效果和操作细节 劣势 需要设计者向用户解释操作的结果;
劣势:原型制作成本大
适用情形: 原型设计已经基本确定后,需要仔细观察用户对于新界面的反应,考察操作细节,多维度评估原型设计

2 测试任务

参与角色:需求方、设计师
输出物:可用性测试任务书

设计测试任务是可用性测试的必要环节,而且需要是真实用户在真实使用场景中会发生的事[3]。 任务的设计取决于可用性测试的目标,以及本次测试具体要研究的问题。主要聚焦于产品的关键功能上,或者团队悬而未决、不确定的设计点上。撰写时,可从任务、考察点、完成指标三方面来写[4]。

  • 任务 —— 测试内容是什么?

  • 考察点 —— 测试目的是什么?

  • 完成指标 —— 如何衡量?

2.1 任务设计 Do & Don't

例1 不要一开始就告诉用户去哪里操作、如何操作。

错误示例 :用鼠标单击屏幕右上角的红色关闭按钮。
正确示例:关闭这个页面。

前者 的任务设计不仅告诉了被试者去哪儿操作(屏幕右上角),还告诉被试如何操作(鼠标单击)。这相当于提前把答案写在考卷上,对于测试设计稿来说没有任何意义[5]。

例2 不要渲染情绪

错误示例:来试试我们的新开发的消息回复功能~
正确示例:在这个页面上回复对方。

前者缺少了客观性,似乎在这句话中提前给被试者植入了一些期待,在任务的设计过程中是不应该出现的。

3 招募工作

参与角色:需求方、设计师、负责用户招募的同事
输出物:用户画像、用户招募计划细则、用户信息表

招募工作可以通过多种方式展开,如游击招募、社群招募、线上定向投放等。 招募的被试者应该是一个产品或者服务的真实用户,或者至少有相似产品的使用经历的竞品使用用户。最佳的策略是提前准备一个简略的用户画像再依次开展用户招募工作[6]。

4 Demo制作

参与角色:设计师
输出物:交互原型

制作高保真动态原型时,需要充分考虑被试者视角。高保真动态原型应包含以下声明内容:


5 测试过程

参与角色:主持人、需求方、设计师
输出物:测试流程台词脚本、预实验问题记录表、保密协议签署、可用性测试现场记录表、SUS量表

5.1 测试开始前

正式开始之前,主持人做一下自我介绍,介绍一下测试的目的,希望用户可以畅所欲言。如果有录音或者录像,需要向用户告知会有此类行为。如有必要,需要签署保密协议。测试开始前可以问一些小问题,诸如产品使用习惯、产品偏好的问题,以及告知用户测试过程中的注意事项。 可以准备一个台词脚本文档,帮助推进测试顺利进行。内容包含:开场白、事前访谈、测试说明、任务宣读+测试观察、事后访谈、结束语。

5.2 测试进行中

主持人应告知用户任务的场景、任务内容。测试过程中以观察为主,不要诱导、干扰用户操作。应该鼓励用户有声思考。当用户操作遇阻,主持人应及时给予提示并记录下来,任务结束后追问受阻的具体原因。 有声思考法就是让用户一边说出心里想的内容一边操作,操作过程中用户能够说出这样的话:

“我觉得下面应该这样操作…”
“我看到了xx按钮。我想,如果我点击它的话应该就可以完成任务了”

这样我们就能够把握用户关注的是哪个部分、他是怎么想的、又采取了怎样的操作等信息。相比量化指标,这些用户主观的思考,更能帮助我们分析因果关系。

5.3 测试结束

测试结束之后,可以问一下用户对整体设计的主观想法,对记录的问题点继续追问。最后可以利用SUS量表,对方案进行整体的量化评估。

6 测试结果分析

参与角色:设计师
输出物:测试结果分析、问题结果存档

6.1 报告内容

标准的可用性测试报告包括:

  1. 测试背景、目标

  2. 用户画像

  3. 测试任务 *

  4. 实验方法

  5. 评估方法

  6. 测试结果 *

  7. 问题描述

  8. 问题评估和分析 *

  9. 优化计划 *

6.2 附:可用性测试报告的常用指标

有效性

可以用任务完成率来表示。有几成的用户可以独立完成任务,是最重要的一个指标。
常用指标:任务完成率、错误次数、提示次数

效率

可以用任务完成时间来表示。界面是为了让用户完成任务而设计的,因此能够在最短时间内让用户完成任务的界面是优秀的界面。最好限制每个任务的时间,在限定时间内未能完成任务,就被当做任务未完成。
常用指标:任务完成时间

满意度

可以用主观评价来表示。任务完成后,可以就“难易程度”、“整体好感”、“是否有再次使用的意向”等问题向用户提问,利用李克特量表法进行评估[7] 。
常用指标:SUS量表


参考资料

[1] Cooper Alan.倪卫国(译). (2020).About Face 4: The Essentials of Interaction Design (交互设计精髓4)[M].电子工业出版社.
[2] Kara Pernice.(2016).UX Prototypes: Low Fidelity vs. High Fidelity [EB/OL]. NielsenNormanGroup. https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/
[3]Kate Moran.(2019).Usability Testing 101[EB/OL].www.nngroup.com/articles/usability-testing-101/
[4]莫子非.(2021-01-31).原型测试怎么做?如何最小成本检验用户是否需要这款产品/功能?[EB/OL]. https://zhuanlan.zhihu.com/p/348399673
[5]Amy Schade.(2017).Write Better Qualitative Usability Tasks: Top 10 Mistakes to Avoid[EB/OL].https://www.nngroup.com/articles/better-usability-tasks/
[6]Jeff Gothelf.Josh Seiden.黄冰玉(译).(2018).精益设计:设计团队如何改善用户体验(第2版)[M]. O'Reilly Media, Inc.人民邮电出版社
[7]少穻.(2018-05-05)[2019-09-22].如何进行可用性测试[EB/OL].https://zhuanlan.zhihu.com/p/36307547
[8]鱼小小君.(2020-10-04).可用性测试(Usability )规范手册[EB/OL].https://zhuanlan.zhihu.com/p/261733930?utm_id=0
[9] Kevin.(2022-03-07).原型设计规范[EB/OL]. https://zhuanlan.zhihu.com/p/476903015
[10] Qualaroo Contextual Customer Insights.(2023-01-09).Prototype Testing: A Step by Step Guide[EB/OL].https://qualaroo.com/blog/step-by-step-testing-your-prototype/#How_to_Test_Your_Prototype_Step_By_Step

原型测试设计规范编写

2023年3月31日

何时需要可用性测试

从产品设计的实际产品开发流程,可从项目的重要程度、产品市场的创新程度两个维度进行判断是否需要执行可用性测试。

1 测试目标与方法

参与角色 需求方、设计师

1.1 目标

原型可用性测试在验证以下内容时尤为有效[1]:

  • 交互文案 —— 组件、按钮命名是否合理?

  • 组织布局 —— 信息是否进行了有意义的分类?功能摆放是否符合用户预期?

  • 初次使用的易学性 —— 常用功能是否易于新用户查找?功能引导是否简单易懂?

  • 有效性 —— 用户能否有效完成任务?有没有犯错?哪里出错了?出错频次高吗?

1.2 方法

用于可用性测试的原型类型有静态、动态[2] 。两种原型各有利弊。 纸面原型: 将所有页面通过纸面呈现,手动切换。在测试过程中用户的每一次操作,都需要由专人实时进行“响应”。设计者一边观察,一边充当电脑,手动切换页面/组件。 高保真动态原型: 原型可以直接与用户交互。设计者预先配置好所有响应,力求真实还原应用的最终实现效果。原型制作可以使用Protopie、Axure、Flinto、Figma。

静态纸面原型
优势 :节省原型的制作时间,方便进行迭代被试用户更放松 测试时动态原型自动响应,无需设计者介入,让设计者更关注测试本身;
劣势:可测试内容有限
适用情形:原型设计尚未确定前,评估页面核心流程、框架

高保真动态原型
优势:被试用户的操作更加真实;可以测试更多的动态效果和操作细节 劣势 需要设计者向用户解释操作的结果;
劣势:原型制作成本大
适用情形: 原型设计已经基本确定后,需要仔细观察用户对于新界面的反应,考察操作细节,多维度评估原型设计

2 测试任务

参与角色:需求方、设计师
输出物:可用性测试任务书

设计测试任务是可用性测试的必要环节,而且需要是真实用户在真实使用场景中会发生的事[3]。 任务的设计取决于可用性测试的目标,以及本次测试具体要研究的问题。主要聚焦于产品的关键功能上,或者团队悬而未决、不确定的设计点上。撰写时,可从任务、考察点、完成指标三方面来写[4]。

  • 任务 —— 测试内容是什么?

  • 考察点 —— 测试目的是什么?

  • 完成指标 —— 如何衡量?

2.1 任务设计 Do & Don't

例1 不要一开始就告诉用户去哪里操作、如何操作。

错误示例 :用鼠标单击屏幕右上角的红色关闭按钮。
正确示例:关闭这个页面。

前者 的任务设计不仅告诉了被试者去哪儿操作(屏幕右上角),还告诉被试如何操作(鼠标单击)。这相当于提前把答案写在考卷上,对于测试设计稿来说没有任何意义[5]。

例2 不要渲染情绪

错误示例:来试试我们的新开发的消息回复功能~
正确示例:在这个页面上回复对方。

前者缺少了客观性,似乎在这句话中提前给被试者植入了一些期待,在任务的设计过程中是不应该出现的。

3 招募工作

参与角色:需求方、设计师、负责用户招募的同事
输出物:用户画像、用户招募计划细则、用户信息表

招募工作可以通过多种方式展开,如游击招募、社群招募、线上定向投放等。 招募的被试者应该是一个产品或者服务的真实用户,或者至少有相似产品的使用经历的竞品使用用户。最佳的策略是提前准备一个简略的用户画像再依次开展用户招募工作[6]。

4 Demo制作

参与角色:设计师
输出物:交互原型

制作高保真动态原型时,需要充分考虑被试者视角。高保真动态原型应包含以下声明内容:


5 测试过程

参与角色:主持人、需求方、设计师
输出物:测试流程台词脚本、预实验问题记录表、保密协议签署、可用性测试现场记录表、SUS量表

5.1 测试开始前

正式开始之前,主持人做一下自我介绍,介绍一下测试的目的,希望用户可以畅所欲言。如果有录音或者录像,需要向用户告知会有此类行为。如有必要,需要签署保密协议。测试开始前可以问一些小问题,诸如产品使用习惯、产品偏好的问题,以及告知用户测试过程中的注意事项。 可以准备一个台词脚本文档,帮助推进测试顺利进行。内容包含:开场白、事前访谈、测试说明、任务宣读+测试观察、事后访谈、结束语。

5.2 测试进行中

主持人应告知用户任务的场景、任务内容。测试过程中以观察为主,不要诱导、干扰用户操作。应该鼓励用户有声思考。当用户操作遇阻,主持人应及时给予提示并记录下来,任务结束后追问受阻的具体原因。 有声思考法就是让用户一边说出心里想的内容一边操作,操作过程中用户能够说出这样的话:

“我觉得下面应该这样操作…”
“我看到了xx按钮。我想,如果我点击它的话应该就可以完成任务了”

这样我们就能够把握用户关注的是哪个部分、他是怎么想的、又采取了怎样的操作等信息。相比量化指标,这些用户主观的思考,更能帮助我们分析因果关系。

5.3 测试结束

测试结束之后,可以问一下用户对整体设计的主观想法,对记录的问题点继续追问。最后可以利用SUS量表,对方案进行整体的量化评估。

6 测试结果分析

参与角色:设计师
输出物:测试结果分析、问题结果存档

6.1 报告内容

标准的可用性测试报告包括:

  1. 测试背景、目标

  2. 用户画像

  3. 测试任务 *

  4. 实验方法

  5. 评估方法

  6. 测试结果 *

  7. 问题描述

  8. 问题评估和分析 *

  9. 优化计划 *

6.2 附:可用性测试报告的常用指标

有效性

可以用任务完成率来表示。有几成的用户可以独立完成任务,是最重要的一个指标。
常用指标:任务完成率、错误次数、提示次数

效率

可以用任务完成时间来表示。界面是为了让用户完成任务而设计的,因此能够在最短时间内让用户完成任务的界面是优秀的界面。最好限制每个任务的时间,在限定时间内未能完成任务,就被当做任务未完成。
常用指标:任务完成时间

满意度

可以用主观评价来表示。任务完成后,可以就“难易程度”、“整体好感”、“是否有再次使用的意向”等问题向用户提问,利用李克特量表法进行评估[7] 。
常用指标:SUS量表


参考资料

[1] Cooper Alan.倪卫国(译). (2020).About Face 4: The Essentials of Interaction Design (交互设计精髓4)[M].电子工业出版社.
[2] Kara Pernice.(2016).UX Prototypes: Low Fidelity vs. High Fidelity [EB/OL]. NielsenNormanGroup. https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/
[3]Kate Moran.(2019).Usability Testing 101[EB/OL].www.nngroup.com/articles/usability-testing-101/
[4]莫子非.(2021-01-31).原型测试怎么做?如何最小成本检验用户是否需要这款产品/功能?[EB/OL]. https://zhuanlan.zhihu.com/p/348399673
[5]Amy Schade.(2017).Write Better Qualitative Usability Tasks: Top 10 Mistakes to Avoid[EB/OL].https://www.nngroup.com/articles/better-usability-tasks/
[6]Jeff Gothelf.Josh Seiden.黄冰玉(译).(2018).精益设计:设计团队如何改善用户体验(第2版)[M]. O'Reilly Media, Inc.人民邮电出版社
[7]少穻.(2018-05-05)[2019-09-22].如何进行可用性测试[EB/OL].https://zhuanlan.zhihu.com/p/36307547
[8]鱼小小君.(2020-10-04).可用性测试(Usability )规范手册[EB/OL].https://zhuanlan.zhihu.com/p/261733930?utm_id=0
[9] Kevin.(2022-03-07).原型设计规范[EB/OL]. https://zhuanlan.zhihu.com/p/476903015
[10] Qualaroo Contextual Customer Insights.(2023-01-09).Prototype Testing: A Step by Step Guide[EB/OL].https://qualaroo.com/blog/step-by-step-testing-your-prototype/#How_to_Test_Your_Prototype_Step_By_Step

原型测试设计规范编写

2023年3月31日

何时需要可用性测试

从产品设计的实际产品开发流程,可从项目的重要程度、产品市场的创新程度两个维度进行判断是否需要执行可用性测试。

1 测试目标与方法

参与角色 需求方、设计师

1.1 目标

原型可用性测试在验证以下内容时尤为有效[1]:

  • 交互文案 —— 组件、按钮命名是否合理?

  • 组织布局 —— 信息是否进行了有意义的分类?功能摆放是否符合用户预期?

  • 初次使用的易学性 —— 常用功能是否易于新用户查找?功能引导是否简单易懂?

  • 有效性 —— 用户能否有效完成任务?有没有犯错?哪里出错了?出错频次高吗?

1.2 方法

用于可用性测试的原型类型有静态、动态[2] 。两种原型各有利弊。 纸面原型: 将所有页面通过纸面呈现,手动切换。在测试过程中用户的每一次操作,都需要由专人实时进行“响应”。设计者一边观察,一边充当电脑,手动切换页面/组件。 高保真动态原型: 原型可以直接与用户交互。设计者预先配置好所有响应,力求真实还原应用的最终实现效果。原型制作可以使用Protopie、Axure、Flinto、Figma。

静态纸面原型
优势 :节省原型的制作时间,方便进行迭代被试用户更放松 测试时动态原型自动响应,无需设计者介入,让设计者更关注测试本身;
劣势:可测试内容有限
适用情形:原型设计尚未确定前,评估页面核心流程、框架

高保真动态原型
优势:被试用户的操作更加真实;可以测试更多的动态效果和操作细节 劣势 需要设计者向用户解释操作的结果;
劣势:原型制作成本大
适用情形: 原型设计已经基本确定后,需要仔细观察用户对于新界面的反应,考察操作细节,多维度评估原型设计

2 测试任务

参与角色:需求方、设计师
输出物:可用性测试任务书

设计测试任务是可用性测试的必要环节,而且需要是真实用户在真实使用场景中会发生的事[3]。 任务的设计取决于可用性测试的目标,以及本次测试具体要研究的问题。主要聚焦于产品的关键功能上,或者团队悬而未决、不确定的设计点上。撰写时,可从任务、考察点、完成指标三方面来写[4]。

  • 任务 —— 测试内容是什么?

  • 考察点 —— 测试目的是什么?

  • 完成指标 —— 如何衡量?

2.1 任务设计 Do & Don't

例1 不要一开始就告诉用户去哪里操作、如何操作。

错误示例 :用鼠标单击屏幕右上角的红色关闭按钮。
正确示例:关闭这个页面。

前者 的任务设计不仅告诉了被试者去哪儿操作(屏幕右上角),还告诉被试如何操作(鼠标单击)。这相当于提前把答案写在考卷上,对于测试设计稿来说没有任何意义[5]。

例2 不要渲染情绪

错误示例:来试试我们的新开发的消息回复功能~
正确示例:在这个页面上回复对方。

前者缺少了客观性,似乎在这句话中提前给被试者植入了一些期待,在任务的设计过程中是不应该出现的。

3 招募工作

参与角色:需求方、设计师、负责用户招募的同事
输出物:用户画像、用户招募计划细则、用户信息表

招募工作可以通过多种方式展开,如游击招募、社群招募、线上定向投放等。 招募的被试者应该是一个产品或者服务的真实用户,或者至少有相似产品的使用经历的竞品使用用户。最佳的策略是提前准备一个简略的用户画像再依次开展用户招募工作[6]。

4 Demo制作

参与角色:设计师
输出物:交互原型

制作高保真动态原型时,需要充分考虑被试者视角。高保真动态原型应包含以下声明内容:


5 测试过程

参与角色:主持人、需求方、设计师
输出物:测试流程台词脚本、预实验问题记录表、保密协议签署、可用性测试现场记录表、SUS量表

5.1 测试开始前

正式开始之前,主持人做一下自我介绍,介绍一下测试的目的,希望用户可以畅所欲言。如果有录音或者录像,需要向用户告知会有此类行为。如有必要,需要签署保密协议。测试开始前可以问一些小问题,诸如产品使用习惯、产品偏好的问题,以及告知用户测试过程中的注意事项。 可以准备一个台词脚本文档,帮助推进测试顺利进行。内容包含:开场白、事前访谈、测试说明、任务宣读+测试观察、事后访谈、结束语。

5.2 测试进行中

主持人应告知用户任务的场景、任务内容。测试过程中以观察为主,不要诱导、干扰用户操作。应该鼓励用户有声思考。当用户操作遇阻,主持人应及时给予提示并记录下来,任务结束后追问受阻的具体原因。 有声思考法就是让用户一边说出心里想的内容一边操作,操作过程中用户能够说出这样的话:

“我觉得下面应该这样操作…”
“我看到了xx按钮。我想,如果我点击它的话应该就可以完成任务了”

这样我们就能够把握用户关注的是哪个部分、他是怎么想的、又采取了怎样的操作等信息。相比量化指标,这些用户主观的思考,更能帮助我们分析因果关系。

5.3 测试结束

测试结束之后,可以问一下用户对整体设计的主观想法,对记录的问题点继续追问。最后可以利用SUS量表,对方案进行整体的量化评估。

6 测试结果分析

参与角色:设计师
输出物:测试结果分析、问题结果存档

6.1 报告内容

标准的可用性测试报告包括:

  1. 测试背景、目标

  2. 用户画像

  3. 测试任务 *

  4. 实验方法

  5. 评估方法

  6. 测试结果 *

  7. 问题描述

  8. 问题评估和分析 *

  9. 优化计划 *

6.2 附:可用性测试报告的常用指标

有效性

可以用任务完成率来表示。有几成的用户可以独立完成任务,是最重要的一个指标。
常用指标:任务完成率、错误次数、提示次数

效率

可以用任务完成时间来表示。界面是为了让用户完成任务而设计的,因此能够在最短时间内让用户完成任务的界面是优秀的界面。最好限制每个任务的时间,在限定时间内未能完成任务,就被当做任务未完成。
常用指标:任务完成时间

满意度

可以用主观评价来表示。任务完成后,可以就“难易程度”、“整体好感”、“是否有再次使用的意向”等问题向用户提问,利用李克特量表法进行评估[7] 。
常用指标:SUS量表


参考资料

[1] Cooper Alan.倪卫国(译). (2020).About Face 4: The Essentials of Interaction Design (交互设计精髓4)[M].电子工业出版社.
[2] Kara Pernice.(2016).UX Prototypes: Low Fidelity vs. High Fidelity [EB/OL]. NielsenNormanGroup. https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/
[3]Kate Moran.(2019).Usability Testing 101[EB/OL].www.nngroup.com/articles/usability-testing-101/
[4]莫子非.(2021-01-31).原型测试怎么做?如何最小成本检验用户是否需要这款产品/功能?[EB/OL]. https://zhuanlan.zhihu.com/p/348399673
[5]Amy Schade.(2017).Write Better Qualitative Usability Tasks: Top 10 Mistakes to Avoid[EB/OL].https://www.nngroup.com/articles/better-usability-tasks/
[6]Jeff Gothelf.Josh Seiden.黄冰玉(译).(2018).精益设计:设计团队如何改善用户体验(第2版)[M]. O'Reilly Media, Inc.人民邮电出版社
[7]少穻.(2018-05-05)[2019-09-22].如何进行可用性测试[EB/OL].https://zhuanlan.zhihu.com/p/36307547
[8]鱼小小君.(2020-10-04).可用性测试(Usability )规范手册[EB/OL].https://zhuanlan.zhihu.com/p/261733930?utm_id=0
[9] Kevin.(2022-03-07).原型设计规范[EB/OL]. https://zhuanlan.zhihu.com/p/476903015
[10] Qualaroo Contextual Customer Insights.(2023-01-09).Prototype Testing: A Step by Step Guide[EB/OL].https://qualaroo.com/blog/step-by-step-testing-your-prototype/#How_to_Test_Your_Prototype_Step_By_Step

©️ 2023 LI DONG LIN

©️ 2023 LI DONG LIN

©️ 2023 LI DONG LIN