Project Description

对Demo进行可用性测试

最具有性价比的开发方式

对现有产品的用户测试可以快速开启,而且一劳永逸,但这只合适后续迭代和优化。

更多的,我们要的是产品没有投产前,进行用户测试。

过程

我们可以对现有产品进行改进,但更多时候,我们是在设计新品,这才是可用性测试的关键。

所有的可用性测试步骤,都是如下几步。每种步骤的差异只是方式的不一样。创建Demo,招募测试用户,获取用户行为数据。

最终的行为数据包括:录屏资料、热力图点击图、滚动图、用户反馈的意见。

实际上,任何对原型的可用性测试都不简单。我们构建好了原型,可能需要花费1-2天的时间来进行测试准备工作,花费3-5天来完成测试工作。

取决于测试内容和样本量,但无论如何,都不会低于2天。

本文介绍了两种可用性测试的方法,第一种是自己动手DIY配置环境,第二种是拿来即用的成熟方案。

看下范例,这是OS部分的匿名用户录屏。虽然无法面对面沟通,但我们可以看出,其对UI图片兴趣点很高,停留和互动概率比其他部分强。

这是服务保险模块的Demo测试,我们可以看出用户的鼠标轨迹

Previous
Next

这是以旧换新的测试的热力图,我们可以看出哪些部分点击率高。而滚动图可以让我们知道哪一步内容,页面流失严重,进而分析是否该部分内容存在问题。

热力图和行为录屏我都要

快速开启用户测试中,讲述了部署Hotjar开启全站的用户研究和测试。当然我们也可以用同样的原理进行Demo的可用性测试。

实施逻辑:制作Demo为Html形式,比如墨刀或者Hype都可以,将监控代码埋入头部,将连接发送给测试群体,然后我们就可以从后台查看用户如何操作。

接下来我们介绍步骤,全程不需要使用到代码和开发知识,会画图就行。

1、准备好的你的界面图片文件,Sketch或者JPG;

导出JPG的话,体积尽量压缩小一点,加载速度快点也是极好的。下图示例是Sketch做好的交互文件。接下来,我们将其转化为html文件。

2、将导出的文件创建为html文件,创建html的2种方式

在Sketch中,使用插件将画板直接导入墨刀项目,并用墨刀创建好原型,墨刀是极简单易上手的产品设计工具。制作完成后,点击又上角的下载 > 离线演示包(HTML)。如下图所示,是不是So easy !

既然有了墨刀这么好的工具,为什么还放出Hype呢。Hype是直接的H5工具,可以制作高复杂的动画效果,也可以做响应式适配。如果你的方案需要测试很多动画为主的,当然就是这个了。多个页面链接你可以自己创建,然后将其相互在场景中跳转或者多文件中跳转。

点击图片访问Hype官网,其网址是https://tumult.com,不要搞错了。

4、准备好网站的虚拟主机

上淘宝,拍个虚拟主机,便宜的20块/年,只当测试使用的话,默认的IP和域名都可以使用,不用额外再购买。

3、为html添加跟踪代码

解压导出的文件,找到里面的html文件,使用Dreamweaver打开,其他的js等各种文件不用管。在Dreamweaver中添加hotjar追踪代码到head标签。

在Dreamweaver中添加hotjar追踪代码到head标签。具体就是找到</head>,然后将hotjar的code粘贴进来,保存退出;具体的hotjar的操作方式,参见快速开启可用性测试

4、部署到你的网站服务器

你所购买的虚拟主机,会提供用户名、密码、IP地址,推荐使用FTP工具,如filezilla,支持Windows/Mac/Linux平台。连接后,找到你的网站根目录,如www或web开头的文件夹。将导出的真个文件夹拖拽入根目录,等待上传完成。长城联通之类的宽带可能会上传失败,失败后,在失败队列在加进去,直到没有任何失败队列文件。

5、验证并将链接分享出去

测试访问下吧,你的域名或ip地址+文件夹名称,如我的https://www.co-ux.cn/referral就可以访问刚刚墨刀做好的原型。同时验证下跟踪代码是否部署成功,操作步骤如下图。

5、回收测试结果

记得返回Hotjar开启热力图+录屏;下图就是墨刀+hotjar的测试结果。

简单点,热力图就很好了

上的方法有点复杂,需要用到虚拟主机,加入跟踪代码。有很多人希望有更简单的办法。所以我这里介绍第二种可用性测试方式。相对上一种方法,是简单很多,但是得到的用户数据也没有那么多:只有热力图。就是下面这种。

1、准备好你的交互设计文件

将准备好的文件,导出为JPG,一个步骤一张图。

2、使用Chalkmark

Chalkmark是Optimalworkshop的一种测试方式,Optimalworkshop是一家提供用户体验设计工具的网站,提供了几种测试工具。其中点击测试(Chalkmark)是最适合做可用性测试的。

该测试适用情况1:完成主任务,将准备好的文件,导出为JPG,一个步骤一张图。

该测试适用情况2:一个页面多个方向,使用随机顺序出现,以看哪个方案最能让用户理解。

下图测试时的范例和看到统计的结果。接下来可以跟随我的方法,设置完成视频中的这个测试。

3、对Chalkmark进行设置

登陆后,在Dashboard菜单下,找到Test your mockups with Chalkmark创建一个点击测试。如下图。

 

点击Setup旁的Task,设置测试任务。首先是上传图片,将之前准备好的图片上传上去。免费版只能设置3步。

 

填写每一步的任务指引,并设置正确的点击区域。

 

填写欢迎词,和这次测试的任务说明。

 

可以在开始测试前,询问一些问题,年龄,性别,区域,学历,经验等等随便你写。问题有选择题,打分题,问答题等等都有。

 

其他设置都不太影响你的测试了,Task选项卡右侧边task options,有一个随机出现task或者按顺序出现task,如果你是A/B型测试,请选择随机出现。我们整个案例按顺序出现。

 

既然都搞完了,你可先使用连接预览,反复检查有没有问题,毕竟一旦投放出去,就是泼出去的水了。

 

完成了以后,点击Launch发送吧,这个时候还没有正式开始,要点击菜单进入Studies激活该任务。

 

剩下的,就是将链接发送出去,邀请用户过来进行测试了。你可以使用他提供的测试服务,价格嘛,自己看吧,挺贵的。

查看回收结果

 

现在开始,你可以随时查看测试结果。下图示例就是我自己私自点了几下。

勾搭我们

探索更多

一些专业名词解释:情绪版、可用性....

先给大家来一段专业名词:可用性测试、人种志、情绪板、故事板、应用流、用户画像,是不是看到就很懵了。 让我给大家快速普及下这些知识。 设计调研、用户研究、可用性测试是啥? 任何设计,都离不开研究类的工作,让我们清晰方向、了解用户目标、做好用户画像和分析用户行为、做Demo进行可用性测试。很多人将这一切统称为用研。 实际上,这里有三个阶段:方向调研、用户研究、可用性测试。下图是三者之间的差异描述。 用户体验设计、交互设计、视觉UI设计如何区分? 想必这里很多人又模糊了,到底这些事什么设计??如果我们将设计岗位拆解的非常细的话,应该是这样的: · 用户体验设计师-做规划的人 UX负责调研和用研工作,同时也涵盖一部分可用性测试(主要是已有产品)。其产出物交付给交互设计师。 · 交互设计师-设计房子的人 IXD产出流程、框架、信息结构、制作demo进行可用性测试(主要是设计中的产品),其产出物交付给视觉设计,有时候也需要动效设计师参与。 · 视觉UI设计师-装饰房子的人 Visual/UI负责设计视觉画面,设计UI组件、颜色等美学性工作,其产出物交付给开发人员。

Read More »