如何找用户来进行一场快速的可用性测试?

如果你是交互设计师,是否纠结过某个左滑出的功能,用户是否会发现?如果你是视觉设计师,那么,你是否为某个按钮究竟用什么颜色而抓狂?如果你是产品经理,是否也曾怀疑过设计师为什么这么做,用户到底会不会买账?

对于有些疑问,多动动脑子,答案可能就显而易见,而有些争议,即使磨破了嘴皮子,也还是各执己见,不相上下。此时,要想说服自己以及他人,最需要的就是找相关用户来说话。本文要讲的就是在此情此景,如何找用户来进行一场快速的可用性测试。

是的,上述的种种都是我以及身边的小伙伴们正在经历的。对于有些疑问,多动动脑子,答案可能就显而易见,而有些争议,即使磨破了嘴皮子,也还是各执己见,不相上下。此时,要想说服自己以及他人,最需要的就是找相关用户来说话。本文要讲的就是在此情此景,如何找用户来进行一场快速的可用性测试。

什么是可用性测试?

可用性测试就是邀请真实用户或潜在用户使用产品或设计原型,对其在使用过程中的行为进行观察、记录、测量和访谈,进而了解用户对产品的要求和需要,并以此作为改进产品设计的出发点,提高产品的可用性。

所谓的快速可用性测试,主要针对的是短流程,小项目,或者多选一方案的用户可用性测试,这种方式高效、快捷,我们无数次的疑问、争议,都是通过这样的方式找到了好的解决方式。那么,究竟如何来进行呢?

1

第一步,明确快速测试类型及产品目标

快速测试类型我把它分为两大类:探索型及验证型。探索型即为让用户通过使用产品,找出产品的可用性问题,进行优化;验证型即为有几种(UE/UI)设计方案,通过用户使用,最终选择最优方案。

注意:在验证型测试类型中,产品目标一定要考虑进去,明确这几种方案背后的产品目标是什么?有可能测试结果并非其中任何一个方案,而是有了更好的解决产品目标的方式。

第二步,任务创建

选择型可用性测试,一般针对的是产品短流程或者整个产品,此时就需要相关人员协商讨论整个产品的主要功能点(用户常用功能、产品核心功能、亮点功能等),对照这个功能列表分别创建用户任务。任务的设计要具体,尽量贴近用户的真实使用场景。

2

验证性可用性测试,这种情况任务比较明确,只需结合几种方案用户所使用的场景,确保测试任务符合用户实际使用行为即可。

第三步,预测试

任务创建完成以后,千万不要着急进行测试,所以这里插入个人认为非常重要的一点:预测试。预测试的目的就是发现设计任务是否有漏洞,及时修复。可以找公司内部的同事快速测试来完成。基本上我在每次的预测试中都会发现或大或小的任务漏洞。所以,为了保证测试结果的准确性,这一步千万不要偷懒。

第四步,招募用户

1、找多少用户

对于快速的可用性测试,到底应该找多少用户来测试?说到这里,可以参考Nielsen的这张经典图表,可能对于用户数量业内有很多的争议。我个人的项目经验来说,一般发现产品的重大问题的话,6~8个用户足够了,而对于验证型的测试,可根据测试结果及时调整数量,一般也会控制在12人左右,基本上符合了Nielsen的理论。

3

2、 找什么用户

我们在项目中一定会有的两个参考因素:是否使用过该产品及程度、是否使用过相似产品及程度。此外,一些基本的人口学特征(性别、年龄、学历等)也在筛选范围内。

3、哪里找用户

可能这个是我们项目中比较难控制的,项目的不同,也就意味着需要不同背景的人来测试,没有固定的一个组群来维护,这里就给出一些我们平时找用户的地方作为参考:公司内部非此项目组的同事们(充分利用公司的各个大群/小群/群邮件)、周边符合条件的朋友、产品的线上用户、产品论坛/贴吧等等。

第五步,用户测试

一切准备就绪后,即可开始用户测试。主要就是让用户完成预先设计好的一系列任务,我们在此时需要对用户的行为进行观察、记录、测量和访谈。

测试过程中注意:切记引导性过强;操作行为是重点(用户的语言可能带有欺骗性,应更多关注“用户行为”,鼓励用户“出声思维法”,即要求用户在操作时,将完成任务时所有的思考、行为、感受都描述出来)。

4

第六步,数据分析

1、 探索型可用性测试

通过用户测试,可能会发现产品很多可用性问题,在问题整理完毕之后,需要对问题进行分类或者优先级排序。参考业内的整理办法,主要有二级、三级、五级等。我们比较常用的是三级划分问题的方法,把问题逐个梳理。

问题的三级划分:高(无法完成任务)中(完成任务,效率/满意度不高)低(完成任务,较快/满意)

说到这里,就又回到本文开头提到的可用性概念:产品在特定使用环境下为特定用户用于特定用途时所具有的有效性、效率和用户主观满意度。那么对于问题的评估也是从这三个维度来打标签,详细解释参考下文:

  • 有效性:用户完成特定任务和达到特定目标时所具有的正确和完整程度;
  • 效率:用户完成任务的正确和完整程度与所使用资源(如时间)之间的比率;
  • 满意度:用户在使用产品过程中所感受到的主观满意和接受程度。

2、 验证型可用性测试

这类的数据分析相较于前者简单一些,主要就是整理测试用户对每个方案的任务是否、效率、满意程度,最后让用户选出心仪方案,如都不选,则给出每个方案的优化建议。

上述就是结合自己的项目经验梳理出的快速可用性测试流程,再来回顾一下:明确目标—测试任务创建—预测试—招募用户—用户测试—数据分析,六大步。

总之产品可用性测试的好坏还是需要不断的实践练习才能有一个好的效果。诸位还是多多实践吧。

 

文/john 来源:http://www.woshipm.com/pmd/405753.html

从一个项目实践说起,产品设计流程是什么

产品设计(Product Design)没有一个合乎情理的流程,即使人们总是呼吁敏捷开发(AD:Agile Development)、极限编程(XP:Extreme Programming),但必要的产品设计流程肯定是客观存在的,只是说产品的流程可能是敏捷的(Agile &Scrum)。下文是一个产品新人(PM)结合自己的项目实践对产品设计流程给予的一点思考

 

产品设计(Product Design)流程是一个怎样的流程?这个问题太高能,产品后生晚辈亦不敢贸然回答。事实上,我对“产品流程”并没有一个完整的概念,故不忍信口妄语,有辱行业。然静思己过,内心了然正躬身其中,却茫然不知。结合自身的实践和思考,以面向过程的方式回顾一下整个产品设计过程。

产品设计流程

尝试将产品设计流程大致分为四个阶段:顶层设计、框架设计、项目实施、回归迭代;那么这四个阶段究竟是个怎样的过程呢?一起来看一下:

1.顶层设计

概念上来讲,就是需求分析与设计,如何把握住用户的核心本质需求——是每一位优秀产品经理的必要涵养;

a.需求理解:用户/运营向产品提出了大量的需求。需求量大、需求表意模糊、需求浮躁;各路需求方都认为自己的需求是最重要、最紧急的;产品人员捉急,逼死也没用;如此多元复杂的情况下,产品(PM)如何保持冷静、理智对待需求呢?“淡定和理智”很重要!整理好需求,自己仔细阅读分析后,主动联系需求方核对、商讨,直到弄明白需求背后到底是什么。因此,将需求理解透测是其他后续一切工作的基础和保障,需求偏了理解错了,产品也就歇菜了…

b.情境研究:面向对象的产品设计,大家不要理解错:不是,面向对象的编程语言C++。这里的[对象]指的是[用户],是产品受众。设计的产品必须要用户画像,充分考虑产品适用的用户群体及该群体的使用习惯和思维方式等,用户在实际生活中使用产品的场景是产品设计时重点要考虑的因素。综合考虑用户使用场景和不同用户群体是优秀产品都不曾忽略的。

c.需求管理:需求量大、需求紧迫是每个产品人面对的现实问题。“把所以需求都做了!“你是在吹NB吗?快醒醒吧!显然,将需求排出优先级,迭代增量式解决;需求的迫切程度、各部门的战略优先级、老板的意思、公司技术资源共同决定了一个需求的优先级。当然,如果你够屌,也可以独断专行判断决定一个产品的未来。

2.框架设计

通俗地讲准确理解原质化需求、对明确划限的需求进行结构性设计。明确产品需求范围和结构框架,构建细化产品信息架构;

a.原型设计:用户需求最终都要可视化,抽象的需求最终都要反映在具体的产品形态上。产品经理借助AXURE等原型工具,将抽象需求具体化、图形化,变得更加真实、可见。产品经理晋升艺术家粉墨登场,建筑师般的犀利。搭建具备良好框架的页面,且看如何构建有价值、可用性良好的信息架构。

b.信息架构:信息架构主要是为信息与用户之间的认知搭建一座畅通的桥梁,是内容直观表达的载体。通俗点,信息架构(IA)就是研究信息的表达和传递。信息架构(IA)是设计信息的组织结构。


Original Definition:Information Architecture is utilized in web development, user interactions, database development, programming, technical writing, enterprise architecture, and other activities that require expressions of complex systems. Information architecture has somewhat different meanings in these different branches of what might be called IS and/or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling Web sites, intranets, and online communities, and ways of bringing principles of design and architecture to the digital landscape.


一个产品可以用来做什么,产品所呈现的信息层次;筛选有价值信息元素,简洁、直接地传达给用户,让信息与用户相互适应达到最佳平衡。毫不夸张地说,良好的信息架构远比华丽的页面结构要有价值的多。

c.视觉设计:设计产品结构模块和信息元素,随即交付UI美工的产品视觉设计。UI设计犹如”装修“,对产品经理设计的线框图/原型进行润色、美化、调整,以产出极具美感的产品,到达用户眼前。UI阶段谨记两大原则:

x.产品框架结构不能偏移原型设计,结构清晰、模块分明、层次协调;

y.不能被遗漏或串改产品内容信息架构,一字一眼、毫无误差;

1

产品设计流程细节

3.实施追踪

产品规划路线图规划是前提,关键看需要实现,这样才有意义。在用户眼中,可用、好用的产品最终展现在面前触手可及才具有价值。技术研发人员程序化实现产品经理设计的产品,是从“抽象”到“抽象”再到“抽象”的双重抽象转换过程。

a.项目追踪:技术研发过程中,产品的理解上必定存在不同程度的偏差,产品经理肯定是要保证[需求]的真实准确的,确保最终产出的产品实现的还原度。产品实施过程的追踪是产品经理对技术研发的需求保证,也是对产品实现进程的管控,确保产品的按时按量上线;

b.产品验收:完成产品技术性开发,接下来就是正式上线了!技术实现与产品设计之间是否存在偏差?技术实现的产品业务逻辑是否存在错误?研发完毕的产品与产品经理的设计初衷是否一致?不论理念还是业务逻辑设计上都是需要产品去把控的。尽管之前的需求评审阶段已经做了详细充分的需求澄清,但只有经得起反复检验的产品才是真正地好产品;

4、回归迭代

产品交付到用户手中,貌似产品经理的工作可以告一段乱了。结合实际情况,产品上线无形埋下两个大雷。

a.实现偏差:技术实施过程中,必然有些需求因为现实的局限性被耽搁或者简化实现,那么上线后第一时间需要给出小幅优化的迭代完成之前研发阶段的历史遗留问题。产品规划前期产品需求细化增量式迭代也迫使产品经理无力停歇,赶往下一个里程碑;

b.反馈优化:用户眼中的产品近乎完美,要求苛刻不止。用户通过产品需求反馈通道,给出使用新产品的感受以及提交发现的产品问题和不足,及时响应用户的所求、为用户排忧解难也是新产品建立口碑的机会。问题反馈通道建设对于一款新产品迭代优化初期显得尤为重要,对产品快速增量式迭代及改善用户体验的重要都是不可估量的;


行文小结

规范产品设计流程(PDP)有利于产品实现!产品设计流程将整条产品线上的人员都串联起来,将产品过程“数据流”化,可谓气贯长虹、如梦般丝滑。产品流程将产品从各个原本独立的实施过程聚合成一个统一的变现行为。一个(互联网)产品必定映射着规范、理性、高价值的产品设计过程。当然,规范的产品流程不是为了约束产品过程,如果拘泥于具体的要求,将失去流程的初衷;产品流程为产品优质畅快实现服务,是产品实现过程的参照物,是一个目标,是一种信仰。产品本质上是产品设计者对现实世界态度和认知的反应。将人性注入产品之中,其必然也因爱而生,而流程就是信仰和良知!

文/Daviiwong 原文链接:http://www.jianshu.com/p/92f651ab51f2

UI设计中的纯色和渐变效果

纯色和渐变在高手眼里不仅是颜色的组合,它们可以引导视觉焦点、渲染氛围、传递情绪等等,是网页设计新的一个流行趋势。想运用好它们,最要紧是在色彩搭配与透明度上下功夫,今天由一群设计师高手用真实案例给同学们上课,教你正确地利用它们。

在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准?现代网页设计师们,证明了优雅的插画、精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调。气氛焕然一新,网站开始变得光彩夺目。的确,它有助于解决某些UI设计问题。

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担 。其次,它通过搭配传递各种情绪的色彩,很好地丰富了设计。第三,作为一层低透明度的遮罩,它不会掩盖主背景的魅力,对于想要轻微淡化轮播图或视频区域,却仍希望其吸引力不减的人 ,这点尤其有用。最后,它为前面的内容提供了坚实的基础,兼顾了可读性。

这种方案能非常协调地与各种元素协作:提供强烈反差的白色、极受欢迎的扁平风格元素,还有为项目增添精致微妙感的轮廓式图形。

这里有些杰出的网页设计,示范了如何正确地运用这项技巧。

Zimya

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

着陆页带有一层美妙的半透明渐变,立刻唤起积极温暖的感觉。从紫红色到橙黄色,遮罩层华丽的颜色令人着迷。

Red Collar

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

平滑的半透明渐变极大地丰富了背景图——这家机构的视觉象征。它增添了几分独特,不仅与整个场景形成互补,也形成了热情洋溢的氛围。

Ingram Cole and Land

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

这个网站基于一些非常棒的赏心悦目的效果,这不仅指它的动画,还有成功贯穿整个网站设计的照片处理手法。从紫色到粉色,温暖而微妙的渐变,使欢迎页面看起来相当美妙奢华。

Adopt Wales

clip_image005

设计师在视频背景上覆盖了一层迷人的粉色渐变,营造了亲切友好的氛围。颜色与透明度的选择很好地突出了上面的元素。

Snippet App

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

对于更喜欢创造冷静与便捷的整体感观的人而言,蓝与白的结合是非常有用的。设计师实际上用了三种色调,不过这两者占据主要地位。

Joyce Van Herck
网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

Joyce Van Herck是名高端艺术家,她的在线作品集网站嵌入了优美的几何图形。甜美的半透明渐变使斜线拥有活力,加强了这种愉悦的氛围。

Electric Mainline

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

和前面提到的Snippet App很像,设计师运用了蓝白混合。不论如何,低透明度的遮罩层,使用户欣赏其背后那张扮演主角的背景图。

Invelab

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

同样,设计师试图在背景与前景之间营造完美的对比,同时也将注意力引向工作室的图片。明亮的紫色有效地与白色形成互补。

M2B

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

欢快的半透明渐变强化了网站的视觉表现。正由于采用了这种方式,全新的色彩使得背后的图片陡然增色。而白色被用作一种补充色,使内容看起来醒目。

Numero Neuf

clip_image012

首页的特色是大量基于图片的导航,每一项都覆盖了一层黑色半透明滤镜。这种方式很常用:如果你想为文字营造完美的对比,并淡化菜单项,很自然就应该将注意力引向某个选中的项。

Evoluzione Telematica

clip_image013

绿色使人联想到正能量,此处就是这么用的。明亮的色调与白色共同建立了一种积极的形象。

The Place

clip_image014

这位设计师借极简主义的方式重现了优雅。所选的颜色反映了网站的个性,统一了视频样式。

Obbaki Foundation

clip_image015

颜色可以提升感观的协调程度。它丰富了网站的主题,同时轻而易举加入了一些戏剧性效果,对整体氛围有一定贡献。

Studio Up

clip_image016

这个机构通过迷人的效果展现了一个视觉差滚动的介绍页面,向普通用户证明了他们熟稔网页流行趋势。每一页都有其独特的颜色,覆盖在动态的背景上,用以突显其内容。

Hype Agency

clip_image017

设计师在焦点区域挥洒了一整片的橙色,为网站营造了恰当的积极的氛围。另一种颜色则是白色,非常明亮并融入其中。

Papertelevision

clip_image020

薄薄一层明亮多彩的颜色赏心悦目,伴随着每个主要部分。首页的深紫色几乎不容易注意到,但它仍然能使页面活泼有趣。

 

何为好的用户体验?

提出这个问题的目的,我希望能找出一种可以把用户体验可以量化的方法。例如好的用户体验可能是点击少,视觉位置漂亮醒目,功能的数量和使用次数的数量是否平衡。

我认为用户体验肯定是可以量化的,例如一种量化的方法就是用最少的点击数操作出最多的功能。

个人对用户体验的目标是,做到“自然”。

举几个例子,

1,我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解锁。自然和人的天性是一致的。大人因为成年后受污染较多,反而不一定立即学会iphone解锁,可能需要看文字解释来理解。所以不识字的小孩可能比老年人更快学会使用iphone。需要用文字来解释的交互不是好交互。

2,Apple在“自然”体验上做了很多尝试。比如,通常PC下的“文件夹”(甚至“文件”)是不太自然的电脑概念,被从iOS里面取消(文件只有和能解释它的应用关联才有意义)。MacOS尝试改变触控板的传统滚动方向,将手指滑动改为和内容一致的方向,并称之为“自然”模式,即,以前的触控板的滑动方向是“不自然”的。这样的改变很需要勇气,但也许Apple觉得长远来看更自然的模式才更有生命力,哪怕暂时会改变用户习惯而让用户不适应。

3,自然往往和人的本性相关的。微信的摇一摇是个以“自然”为目标的设计。“抓握”,“摇晃”,是人在远古时代没有工具时必须具备的本能。手机提供了激发人类这项远古本能的条件。设计“摇一摇”时,目标是和人的“自然”或者说“本能”动作体验做到一致。摇一摇的体验包括:动作 – 摇动;视觉 – 屏幕裂开并合上来响应动作; 听觉:有吸引力(男性是来福枪,女性是铃铛)的声音来响应动作;结果 – 从屏幕中央滑下的一张名片。整个界面没有菜单和按钮。但几乎没有比它更简单的交互体验了。感谢手机,让远古时代人们通过投掷石头来“连接”到其他人,进化到摇动手机来虚拟地“连接”人。

摇一摇上线后,很快就达到每天一亿次以上的摇一摇使用次数。“简单而自然”的体验人人都会用,并且因为“自然”,而“自然而然”地去用它。它也没有高端和低端人群之分。摇一摇给我们的最大启示是,一种通过肢体而非鼠标(甚至触屏)来完成的交互,也许代表了未来移动设备的交互方向(bump在这方面做得更早)。(顺便说下,经常有人说微信摇一摇是学line的,事实上,我们做摇一摇的时候,还不知道有line这个软件。考据一个应用“抄袭”了谁,除了获得心理安慰之外,并不能提升自身的能力)

pony三年前曾经送给很多人一本书,《don’t make me think》,光从字面理解,也是这个意思。自然的体验是不需要用户去思考的。我个人也欣赏原研哉等设计师的设计理念,设计应当挖掘人的本原的体验倾向。

“自然”并不只是在交互等体验上体现,更是一种思维方式。程序员都知道面向对象的方法的核心是更“自然”的对复杂事物的建模方法,“分类”是其核心之一。同样地,产品经理在面对一个复杂问题时,需要有一种符合“自然”原则的建模方法,来通过产品结构模块以及模块之间的联系来映射和解决问题。没有开发训练的人同样可以建立“自然”思维方式,事实上,“分类”是人类模式化和识别外部世界的本能方式,如果有意识地对任何问题都从“分类是否合理”的角度来考察,时间长了,会建立起直觉式的分类感觉,而避免形成“大杂烩”式的结果。而对任何一个界面和交互,同样可以用“don’t make me think”或者“是否自然到人人都能自然而然地使用”来反复思考。

比如,我们会鼓励每个界面尽可能有且只有一个突出的按钮作为用户不用思考就默认去点的操作点。当思考过一千个界面的交互后,对哪些交互是自然的哪些是不自然的就会很容易判断到。即便对于司空见惯的体验点,加以反思也会发现改进余地,比如,对一个列表,需要显示总的条目数吗(比如通讯录有多少人,用户需要这个数字吗)?一个进度条,需要显示百分比吗?数字对用户是自然能接受的反馈吗?

“自然”可能容易导致玄学,因此这里想强调的是,“自然”的思维方式一般是需要长期的非常理性的训练才能获得,而不是突然幻想自己获得了一种使用“自然原则”的能力。记得知乎上有个问题问“乔布斯为什么能凭直觉知道该怎么做”。我认为没有任何人有天生的可重复的直觉来立即成为一个领域的专业人员。比如,对于复杂事物,如何“抽象”为一个简单模型,是需要大量案例锻炼的。但是,如果经过一万小时的有意识的朝某个方向的训练(比如对“自然”的反复思考和实际工作练习),并且是极为理性的思维和实践训练,是可以获得一些直觉的。大量的理性训练有助于形成一种对同类事物的识别模式,这种模式形成直觉。比如大部分中国人其实是没有经受过“简单是美”的训练的,表现在现实中,很多人其实是很难接受一套极简主义的装修风格的居室的。只有当对“极简”有反复体验和思考,才能将“简单是美”变成骨子里的审美观,并体现在设计中。

简单和自然是什么关系?简单为什么就美了?留给你去想。