干货|十步打造一篇好PRD

本文作者为eBay前产品管理及产品设计高级副总裁Martin Cagan,Marty Cagan作为负责定义和开发产品的高级经理人为多家一流企业工作过,包括惠普、网景通信、美国在线。

概述

PRD描述的是你公司即将创建的这个产品。它体现了整个产品团队的努力,以及公司的销售人员、市场以及顾客的支持与努力。对于一个公司来说,打造一个更重要、更高水准的产品是十分艰难的。

产品需求文档的目的,或者说产品规则的目的,是为了清楚的准确无误的表达产品的目的、特征、功能以及行为。产品团队需要利用这份需求文档去创建一个产品并测试它,所以它需要提供给他们足够完整的信息。

PRD写得好,不一定会诞生一个成功的产品,但PRD写得不好,它几乎不可能会产生一个好的产品。

PRD VS MRD

我们在这里做一个产品需求和市场需求(通常被称作MRD)的比较。简单说来,市场需求描述的是机遇或者市场需求,而产品需求描述的则是一个因机遇或需求产生的产品。

PRD VS Product Strategy & Roadmap

Product strategy(市场策略)描绘的是一个蓝图,比如说在2-5年之后,你的产品要走向哪;Roadmap(产品路线图)则描绘了到这里的各种步骤,而PRD描绘的是沿着这条路所推出的一款特定产品。

十步打造一篇好PRD

这篇文章的目的就是为了描述一个被证实过的、可重复使用的,创建一篇好PRD的的过程。文章中讲的十步都不容易,但它们能帮助你诞生一个特别棒的PRD。这个过程所花费的时间很大程度取决于你产品的尺寸和复杂度,以及你就这些知识和所需技能的准备程度。

第一步:做你的家庭作业

你PRD的目标是想出一款特定的产品。为了想出这款产品,你必须做家庭作业。这意味着你需要去研究你的顾客,你的竞争对手,你的团队能力,以及可能用到的技术设备。

从顾客、用户、竞争对手、行业分析、你的产品团队、销售人员、市场、公司执行力、以及其他任何对这个问题有见解和有可能解决方法的同事着手。

需要准备的还有很多,这些都在《Behind Every Great Product》中被详细讨论过,这篇文章同样可以在Silicon Valley Product Group中找到。

同样需要注意的是,使你的团队信服产品最后能成功是你能力中一个十分重要的因素,这是你自信程度的体现,如果你的家庭作业做得好,你将越来越自信,越来越使人信服。

第二步:确定产品目标

每一个好的产品都是从尝试实现一个需求开始。你必须对那个需求有一个十分明确的理解,并且知道你的产品如何解决那个需求。

产品经理建立一套清楚的、简洁的价值主张是十分有必要的,这能够让她轻松的和每个人沟通——产品团队成员、公司决策人员、顾客、销售人员——这个产品真正的点在哪里。

但是很少有产品有这样一个非常清楚的价值主张。想想“电梯法则”测试,如果你有机会和你公司的CEO搭乘同一部电梯,她问你,你产品的点是什么?你能在电梯上升之前回答这个问题吗?如果不能,你还有工作要做。

也许这个产品没有重点,也许尝试做了很多事情但没有什么脱颖而出。也许你认为是重大的事,可在客户那却没有任何响应。有可能你的产品正在尝试解决一个non-problem,也许你已经有了技术却仍然在尝试申请。

在产品策略中,产品是如何帮助用户的?价值主张中应该把这点弄清楚。然而你不需要谈到每一个小功能,就一个清楚的价值主张而言,少即是多。

产品需求应将产品的目标,以及目标如何被衡量明确讲清楚。同时这个目标应该确定优先顺序。

例如,你的目标可能是:1)很容易使用;2)零售价格低于100$;3)和之前发行的保持一致。然后你要详细阐述你将如何衡量这些目标。一个物品确定具体零售价格,这是很简单的。对于“很容易使用”这点,你需要去详细说明,产品需要的可用性应该达到一个什么样的水平。这通常是根据目标用户界定的。可用性工程师会根据所给的用户类型来评估产品的可用性。他们同样会评估可用性问题的严重性,你也许会详细说明这里将不会有主要的可用性事件。

关键是让每个相关人员清楚,成功的产品看起来是什么样子,并在平衡设计与实施时为产品团队提供引导。

第三步:确定用户特征、目标和任务

现在既然你已经理解了你想要解决的问题是什么,就可以开始对目标和顾客做一个深入的理解。在这个步骤中,和你的产品设计师一起紧密工作很重要。

用户特征

在这个阶段,产品经理将会遇见很多目标客户,并会花大量的时间来获得第一手的观察和讨论结果。现在我们需要将用户类型和客户分类,并确定谁是主要用户。

例如,你正在构建一个像eBay一样的产品销售平台,你知道你有买方和卖方,其中你有低流量/低频用户和高流量/高频用户。不难想象还有一些其他不常见的用户类型,例如企业购买代理人,会为他们公司买一些东西。

产品经理和设计师首先需要去做的事——确定最重要的用户,然后尝试用大量的细节将其描绘出来,以便你能够利用这些特征来指引你设计产品。这些特征有时候被称之为“用户角色模型”,然而当他们是虚假的时候,你应该尽可能的将他们描绘得客观、逼真、合理。这主要是为了构思出一个能够抓住这类用户本质的原型。

这里有一个例子:

Leon,超级卖家,46岁,男,住在弗雷斯诺,经营着一个小小的摩托车零部件业务。然而他这个小商店几乎所有的销售都来自于eBay,在eBay上他平均每个月卖掉400件东西。摩托车相关的大部分东西他都卖,但是卖得最好的是哈雷戴维森的挂包,他自己有两辆大的哈雷,他同时开着一辆1933年的丰田皮卡。Leon结婚了并有两个十几岁的儿子。

Leon买电脑仅仅是为了使用eBay,除了eBay和邮件,其余东西很少用。至今为止,Leon在eBay已经卖了3年了,他已经知道他需要什么来提高销售。他有一个引以为荣的超过5000的反馈评价。当eBay站点上发生变化时,让他来适应这个差别和变化是相对困难的。

Leon已经建立好一套规则:星期一他将商品上架,周五之前大部分拍卖结束,收到款项的几个小时之内把商品寄出去。

希望这些描述有助于你了解Leon,知道他来自于哪里。当我们考虑新功能的时候,我们就应该问我们自己,Leon对于这些新功能的反应可能会是什么样子,为了让他成功使用这些新功能我们应该做什么。

将用户范围缩小至关键人群是至关重要的。尝试去取悦每个人是没用的,并且反而会没取悦到任何人,所以重要的是去试着想出一些最重要的、最普遍的特征。同样的,如果你没有试着去准确的描绘你的目标人群,你就只会有一个抽象概念,并且很难理解你的顾客会如何反应。你会倾向于认为你的顾客比真实的他更喜欢你。

用户目标

一旦我们确认并描绘出了我们主要的用户类型,我们就需要去确认每个用户在使用这个产品时的主要愿望和目标。这听起来可能很简单,但要去理清根本性的问题并解决,其实是很具挑战性的,尤其是当你周围所有人都来告诉你,他们认为的、他们想要的解决方案时。

从CEO到推销员,到工程师,到顾客,他们每一个人都十分乐意来“帮助”你想出解决方案。他们会告诉你,在这个地方需要加一个按钮或者快捷键,或者增加一个具体的功能,因为你的竞争对手有这个功能,或者换一个颜色因为他们不喜欢这个颜色。

如果给予产品经理和设计师时间和自由来思考备选方案,他们常常能够想出更好的解决方法。

最好的解决方法源自于对问题的清楚认知。每个用户特征的目标可能不同,所以重要的是根据用户相关的特征来寻找目标。很有可能针对某一个问题所需要的功能,并不是主要用户特征的目标之一。

任务

手里边有了用户特征和与他们相关的目标之后,我们就可以设计任务来帮助这些人实现他们的目标。这是产品规范过程中的核心,也是创造力与创新尽可能被激励和提高的地方。

许多优秀的产品仅仅是用一种新的更好的方法解决了一个现有问题。有时候这来自于新科技的应用,但大部分是来自于洞察力——洞察力导致新方法。

举个例子,TiVo采纳了录制TV节目中的老问题并提出了一个完全新的方法,让顾客轻松实现他们的目标,并且建立了一种完全新的电子设备。

我们已经谈论了目标和任务,但我们还没有提及功能。这是因为功能支持的应该是映射了客户目标的任务需求。你会经常发现许多功能映射的或者是低优先级目标,或者完全是一个额外的功能。

你有充分的理由去掉任何功能,比如你能够以使所需的功能更容易溢出的名义。令人讽刺的是,拥有的功能越少,产品看起来就越强大。这是因为拥有的功能越少,客户实际去探索和使用的功能就越多,成功使用得越多,他们就越觉得你的产品强大。这个理由如此有悖常理,因为我们不是每个东西都像我们的目标客户,和不在我们这个行业的客户相比,我们更愿意花费更多的时间来探索新功能,忍受复杂度。

第四步:定义你的产品原则

现在你可以在你的需求和用户体验中构思一些具体的想法了。然而,你将面临数不清的决定与权衡,最好你能有一套标准,以便为你的产品作出最好的决定。

在大部分团队里,每一个产品团队成员的脑子里都有一些自己对于产品好的标准的想法,但是很少有两个人有同样的想法,这些差异最终会导致令人不愉快的意外。

尝试并制定一系列的产品原则来指引整个团队贯穿整个项目是十分有价值的。这个原则应该细致到你的领域和你的具体项目。

拿TiVO来举一个例子。当团队启动这个产品后,建立了以下产品原则并且跨团队共享:

·它是娱乐化的

·它是TV

·它是录像机

·一切都是光滑的妥帖的

·没有方法或深的层次结构

·尊重每个电视观众的隐私

·这是一个强大的设备,就像一个电视

这些原则大大影响了产品定义,并且很多情况下加大了实施的困难,但毫无争议,它们是产品成功的根源。

相似的是,eBay的原则也是如此:1)容易使用;2)安全;3)有趣

你可以看到像这样的产品目标,它是如何给整个团队提供一个恒定的指南,当他们在整个项目进度中不得不面对许多决定的时候。

第五步:原型和测试产品概念

这才是你真正开始构思产品概念的阶段。这一阶段你要尽可能的有创造力并且创新。

产品团队犯的最大最常见的错误之一是对于他们的产品规范过于自信,他们不断推进并会考虑调整产品,如果有必要的话,在得到beta反馈后。但当然beta不是重大改变的时候,因此也就不奇怪很多第一代产品发布后会不达标。

然而,对于大部分产品来说,你可以在这个阶段用各式的原型来做大量的产品验证测试。

首先,仔细考虑你可能需要的三种测试形式:

可行性测试:

一个直接的问题是不管你的产品短期内是否会建起来,你的工程师和架构师应该积极参与调查技术和探索可能的方法。一些路可能是死路,但有希望其他方法被证实是可行的。

最重要的是,如果研发团队认为在这个产品时间周期内,有不可逾越的障碍,现在清楚这点比之后再发现这点好。

可用性测试:

为了想出产品中功能的各种呈现方式,你的设计师(产品设计师)将和你紧密结合在一起工作,以便于不同的用户都能够明白如何实际使用产品。

可用性测试常常会揭露一些产品需求中忽略的东西,同时如果做得好的话,没必要和原始思路一样确定产品需求。在你想出一个成功的用户体验之前你应该设计多重交互方式。

可用性原型的目的是为了有东西可以给真人测试,可用性测试是从你的目标顾客中得到高质量的产品反馈的艺术与科学。尽管产品经理和设计师会利用原型并且从中学到很多,但是仍然无法替代将原型放到真实的目标客户群前。

产品概念测试:

最后,知道了你产品是可行的,可用的还不够,真正重要的是你的产品是否是用户想要买的东西。比如,他们到底有多喜欢,你正在做的这个东西的价值?这个测试通常与可用性测试结合在一起。

对于一些小的产品点来说,将你的想法画在纸上就够了。但是对于大部分带有复杂的交互方式以及新技术的产品来说,为了评估这个产品是否满足了产品目标,各种形式的原型是十分有必要的。

原型可能是一个物理设备,或者是一个软体产品的快速组装版。关键在于它需要足够的现实,你能在真实的目标客户身上测试原型,并且他们能够给你高质量的反馈。

在过去,设计原型有两大主要障碍。好的原型设计工具的缺乏,意味着需要很长一段时间来构建原型。另一个问题是,在无意识的管理中,并没有理解原型的构建与实际产品之间的差异,团队带着实践过程中可预见的坏结果,被迫使用原型作为最后产品的基础。

今天,许多杰出的原型设计工具使得工程师和设计师能够迅速构建功能原型,有效模仿未来产品,如果有必要,可以形成实际用户测试基础。

此外,今天大部分的管理者已经理解了构建一个模型和构建实际的产品还是有很大区别的——正如建造一座房子的模型和打造真正的家。

在你推进并且实际构建产品之前,很难去强调,证实你的产品概念的价值。一旦真正的研发开始,是很难作出重大的改变的,而且改变的代价也会增加得不可思议。

第六步:确认并且质疑你的设想

一旦你认为你理解了你想要解决的问题,你就可以确认并且质疑你的设想。作出假设很容易,甚至都没有意识到它们,确保你在PRD中没有一叶障目。

天文学最开始被定义为太阳和行星如何围绕着地球旋转的研究,这个定义中的假设就使得一些人得不到正确的答案。

第七步:写下来

你需要把这些过程全部写下来。大部分的PRD是WORD文档,但是有一些是WIIKI站点,一些是PPT,一些写在白板上。媒介和样式远远没有内容重要。不过,PRD能易于被整个团队读到是至关重要的,它不能丢失,并且PRD需要以一种不断被更新的形式贯穿项目始终。

记住,一个对话是在两个人之间,而PRD则需与整个团队交流。

同样需要牢记于心,并且与PRD同样重要的是,真正关键的是将产品运输出去。没有什么比那更重要。所以不要担心你PRD的漂亮程度或者厚度。所以只要它是可阅读的,能够理解的,内容才是关键。

PRD由四部分组成:

产品目标

你的工作是描绘目标。团队需要知道他们瞄准的是什么,目标需要被描述得尽可能清楚,确定你的描述涵盖了:

·你想要解决的问题,而不是解决方法

·产品是为了谁?公司,顾客,用户

·细节很重要,但大的蓝图必须清楚

·描述故事

当头脑风暴环节或者口头说明或讨论会产生更好的书面需求,如果它们没有被写进PRD里,它们就会遗漏。

特征

产品需求规则的主体当然是需求本身。需求的具体情况完全取决于你的领域,但是不论你在哪个行业,你的产品团队都会受益于一份将需求,而不是解决方案,表达清楚、明确的需求文档。

描述交互设计和用例中每一个层级的每个特征。你必须非常清楚每个功能是什么,用户体验应该是什么样,同时给研发团队留出足够多的空间。

同样重要的是确认你的哪些需求对应是被哪个特征支持的。这是“需求的可追溯性”纪律中的一部分,对于关键重大的产品来说,这通常是一个正式的过程。但每个产品规则都会受益于清楚的识别哪些需求支持哪些产品目标。如果有人决定去砍掉一个需求,可能很困难去理解砍掉的这个功能对于全局的影响。从需求到目标之间的映射有助于清楚的说明这点。

发布标准

发布标准只是挥挥手而已,但是一个好的PRD会充分考虑到真正的最低需求是什么,对于每个发布标准,其中通常包括:

·性能

·可伸缩性

·可靠性

·可用性

·可支持性

·本地化

日程安排

最困难的部分之一是描述产品所需要的时间范围。只列一个随意的日期是没用的,应该描述时间的背景和动机,以及描述一个目标窗口。

你想要整个团队带着正确的市场产品,和你一样积极的来达到那个目标窗口。

第八步:确定优先顺序

除了明确需求,给需求中的每一项确定优先顺序以及等级次序也是很重要的。大部分的产品经理,如果他们给所有的需求排序,就会简单的给每一个需求标为“must-have”、“high-want”或者“nice to have”。(或者一些相似的分类系统)

分类是重要的,不能掉以轻心。产品经理应该对任何标有“must-have”的东西持有非常高的把控。这就意味着即便只是一个“must-have”功能没有准备好,这个产品也不应该被运输出去。所以我们应该把注意力放在任何标注了“must-have”的功能上,这些功能直接反应了这个产品的核心价值主张。

“high-want”功能是重要的,在发货之前如果来得及,这些特征你全都想要,但又不乐意为了这些特征将产品延期。

“nice to have”功能对于产品团队来说是十分有用的,即使它们中的大多数在以后的版本中才被实现,但至少在将来,某个合适的地方,产品会被设计来处理这些功能。

需求分类是必须的,但还不够。还需要在每个优先顺序分类中,给每个需求从1到N排定等级次序。对于此有两个原因:

首先,上市时间永远是一个问题,时间表经常调整,为了上市你可能经常会被强迫来砍掉一些功能。你特别不想要产品团队先实现那些容易的功能,然后以几个不那么重要的功能准备好了,可客户真正关心的功能却被砍掉了而结终。

其次,在设计和实施阶段,随着问题的出现和解决,团队会学到很多,很有可能你也会识别并增加额外的重要功能。这个时候,优先顺序就能帮助你知道,砍掉哪些功能来容纳更加重要的功能。

关键是如果产品经理不根据这些功能在一个成功产品中的重要性,来确定优先顺序和等级的话,其余不相关因素就会影响功能点以及功能的顺序。

整个PRD的过程应该是一个思维不断被调整和打磨的过程。敏锐的思维等于可持续化的愿景。模糊的思维等于失败的产品。现在决定比在战斗的中心决定要容易得多,它同样能够帮助工程师想出一个发展方案。时间可能会改变优先顺序,这是好的,只需确定在PRD中有记载这些变化。

第九步:测试完整性

现在你已经有了一个完整PRD的草图,你需要来测试这个PRD的完整性。一个工程师能够完全了解这个产品的目标吗?QA团队能够得到足够的信息来设计测试方案以及写下他们的测试案例吗?

一旦利益干系人已经全部看了这个PRD,确认了需要增加的细节或者阐明的部分,并且这些问题已经得到解决,你就可以从这个PRD中建立一个产品了。

第十步:管理产品

在产品实施的过程中,即便是最好的PRD,也会有无穷无尽的问题需要确认。解决需求中的全部问题,在PRD中指明相关人员。如果PRD中没有写,那就补上去。你的工作就是快速解决所有的问题以及事件,并且将决定记录在PRD中。

如果你做好了你的工作并且保持PRD的准确性,任何的项目评审准备起来都十分简单,只需要从PRD中选取合适的部分。

PRD是一个不断变化的文档,从项目启动时起你就要在PRD中跟踪所有的功能。

最后你可能会发现你需要在PRD中增加一些额外的话题。如果你觉得为了实现你的目标,PRD中这些额外的东西是必要的,那就无论怎样也要加上它们。

原文链接:http://www.svpg.com/assets/Files/goodprd.pdf

线框流程图:一款用于工作流程或APP的UX交付

摘要:线框流程图是线框图和流程图的组合。当一些页面在动态变化时,它们能够记录工作流程和屏幕设计。

介绍

在UX领域,线框图是一种常见的的用来表现页面层级布局理念的交付,然而,流程图对于记录复杂的工作流程和用户任务是十分有用的。尽管这两种交付都普遍用于UX领域,然而它们并不是交流设计想法的最佳工具,尤其是在记录没有很多独特页面,却有一些会因用户交互而内容(或布局)产生动态变化的多核页面的手机、桌面、或者 Web APP 的时候。最近几年,一种可供选择的叫做线框流程图的交付,作为解决这些问题的方法浮出水面,线框流程图过去常常被用来表现普通用户任务中上下文的设计。

客官莫急,小的正在拼命为您加载~~

一个网页线框图能够传达那些主要是静态页面的网站或应用的布局想法,内容和页面层级设计,但它在交流复杂的动态操作流程时是没用的。

客官莫急,小的正在拼命为您加载~~

流程图被用来描述后端进程和用户任务流程(正如这个例子),然而,对于UX使用来说,它缺少页面的上下环境——一个严重影响用户体验的因素。

线框流程图作为一种工作流程交付

定义:线框流程图是一种将线框图式的页面布局设计和简化后的像和流程图一样的交互表达方法相结合的设计规范板式。

客官莫急,小的正在拼命为您加载~~

这个低保真线框流程图展示了一个简单的用户任务。屏幕设计的使用,而不是用抽象的流程图符号,使我们能够持续聚焦在这个用户将发生交互的产品上。线框流程图能被高保真创作用于交流详细的设计规范的同时,它们跟用来讨论交流交互设计和用户工作流程的低保真文件一样是有用的。

线框流程图作为一种团队中设计移动端APP时的普通方法出现,在流程图中的每一步都相当于一张填满手机屏幕设计的线框图。因为相对而言,手机屏幕尺寸较小,真实的页面设计(如线框图)能够十分容易取代线框图中的抽象符号。然而,线框流程图不仅限于记录移动端应用和网站——它们同样能被用于桌面产品,典型地就是被用来展示一个屏幕或网页因用户交互而变化的那部分。许多电子商务购物表单和收银台页面的设计,同样适合用线框流程图来细化。

为什么我们需要新的东西:流程图和线框图不能很好的记录复杂的APP

通常说来,介绍一个规范化的新样式是不好的,因为许多相关者不知道如何去解释它。通常来说旧的东西更熟悉。然而,我们确实喜欢线框流程图,因为对于之前见过线框图和流程图的人来说它很容易学,并且线框流程图有足够的优势来克服其他同类产品中的不足之处。

线框图是一种很好的表现布局的方法,但是它们不能很好的描述交互,它们尤其不能很好的记录一个带有很多动态内容的电子产品的布局,例如移动APP和Web APP。当记录带有很多不相关联的、相对静止页面或屏幕的网站(或者其他电子产品)时,线框图是很有用的,因为在这些页面或屏幕上,点一个链接或按钮通常会导航至一个完全不同的页面。

然而,很多现代Web APP和移动端APP只有很少的完整页面,但会基于用户对产品的交互,通过AJAX(或者其他科技)相应地改变内容和布局。不论是选择分类或过滤,产品页面展示就会发生变化的电商产品,还是基于工具、模型、或其他控制参数之间的交互,整体布局和信息的展示就会发生强烈变化的,复杂的、创造性的或技术性的应用,它们都有涵盖。在这些案例中,线框图不能很好的抓住各种布局的可能性,或者内容变化的规则。除此之外,线框图也不能够记录在用户与页面发生交互后,系统呈现给用户的重要反馈。(和系统认证过的用户进行交流得到的反馈,对于一个好的用户体验来说是至关重要的,这在十大易用性原则中被排在第一位。)

另一方面,流程图是一个能全面记录复杂的工作流程和带有多重步骤或路径的交互信息的工具,但常常会忽略交互中的上下环境以及它对用户的影响。用流程图作为一种主要的交付来记录(或构思)交互设计或含有多种用户任务步骤时,会忽视一些在表现在页面上下环境中的信息,而那往往会影响交互的成功。

线框流程图记录交互信息

线框流程图中十分经典的用例图是用来记录一个用户在产品上完成一个普通任务的过程(如,在一个社交媒体APP中“直接发送一条信息给你联系人中的某个人”)。线框流程图中的每一步,一个简单的线框图,或高保真屏幕设计都表现了用户可能用到的屏幕。

箭头是用来表示用户发生行为的特定UI组件(例如点击一个按钮,点击一个链接,等等),指向另一张作为交互发生结果的线框图。交互需求的第二个“点”的不是一个独立的页面或屏幕,而是,它能展示同一个页面中的交互结果,例如内容的改变,展现了交互结果的界面反馈(例如,一个确认信息弹出来,一个颜色的改变,或者一个错误提示)。为了减少线框流程图中的歧义,在流程中箭头能够清晰的说明点击这个“热点”(或者任务)会指向哪一步这是十分重要的。对于一个在单个页面中拥有多重行为目标的复杂Apps,能够清楚的表明热点触发行为尤为重要。

screen-shot-2016-12-12-at-4-59-34-pm

在这个简单的线框图中,展示了一系列的在一个常见的用户任务流程中多个移动端APP 线框图,每一个线框图都代表同一个APP页面,而不是代表了不同的APP页面。每一个步骤都清楚表示了在一个任务流程中热点所连接的下一步。除此之外,在第二步中线框流程图展示了视觉反馈的作用(为了标记这次点击,点击专辑时背景颜色发生了改变)。

除了被大量频繁用于移动端APP,线框流程图对于记录复杂的桌面应用和Web应用同样是有用的。由于用一个全屏桌面线框图来表现一个进程中的每个步骤会浪费很多空间,如果在每一个步骤中大部分的屏幕设计中会保持不变的话,所以仅仅表现屏幕在每一个步骤中变化的那部分(例如对话框,情态,过滤或者分类),就能有效的记录界面相关的,正在改变的那部分,同时依然能提供足够的上下环境。

客官莫急,小的正在拼命为您加载~~

对一个Web APP结构操作说明的做一个简后的高保真桌面流程图,不是屏幕设计的所有部分都需要呈现在每个步骤里的。由于桌面屏幕设计的尺寸更大,如果大部分能够被看到的信息没什么变化的话,没必要每一步都展示整个页面。用一种战术上的方法来展示相关屏幕设计,一种能够看到的只是因用户输入发生变化的那部分。

线框流程图不仅能够展示每个页面中的内容和布局会因用户交互而变化的APP和动态网站的工作流程,它也同样适合于记录在传统静态网站中的任务流程。然而关于用线框流程图来记录静态网站需要注意的是,每张线框图的尺寸可能过大,以至于会丢失被记录的进程的上下环境。

线框流程图对于合作构思

除了是一种程序相关人员和开发者之间交流的有用方法,作为一个团队之间配合的工具,线框流程图同样能够工作得很好。尤其在敏锐的环境中,跨部门团队间能够配合交流得好是十分重要的。

跨部门团队之间的设计研讨会能够碰撞出一些理解上的火花,在这些平行设计工作小组之中,团队成员构思和写下任务流程,然后整个团队讨论这些点,为了潜在的点可视化,UX用线框流程图的方式给每个步骤画草图(并且记录下团队已经同意的点)。

在一个配合的环境中,线框流程图不需要视觉上打磨,这种类型的讨论,用白板或者纸和笔画草图的方式快速的将想法和交互记录下来是非常有效的。

客官莫急,小的正在拼命为您加载~~

在一场NN/g UX 会议中的UX交付研讨,几个团队成员用粘上便签条的手机,标记笔,和纸来讨论一个设计环节中的流程图。这个过程用一个白板就能容易实现,或者仅仅用纸和笔。

结论

线框流程图是一种正在兴起的用于记录移动端和Webapps中用户工作流程和复杂交互方式的UX交付。它们非常适合于呈现一个APP中一个或几个页面的动态改变,通过大量的连接在一起的相对静止页面来捕捉流程却收效较差。作为一种团队间合作与构思的方法,用来思考用户工作流程、任务,以及构思进程中屏幕设计的每一步,线框流程图同样是有用的。

原文地址:https://www.nngroup.com/articles/wireflows/

交互设计的七个定律

关于交互设计的七个定律,开始之前,先说一段写在前面的话:
新手交互设计师,如何迅速成长?简单来说,新手设计师要争取做喜欢的事情。然后从做事中成长,进步会很快。

… much motivations matter. The Zune was crappy because the people at Microsoft don’t really love music or art the way we do. We won because we personally love music. We made the iPod for ourselves, and when you’re doing something for yourself, or your best friend or family, you’re not going to cheese out. If you don’t love something, you’re not going to go the extra mile, work the extra weekend, challenge the status quo as much …

这段话来自乔布斯传,大意是:

… 动机和热情至关重要。Zune设计不好是因为微软没有像苹果这样有热爱音乐和艺术的工作方式。苹果的胜利是因为员工热爱音乐,他们设计iPod是为了他们自己设计。当你是为自己、挚友、家人设计产品的时候,你才会全心全意、不迷失、不退缩。如果你不热爱这件事,你就不会付出额外的精力、时间,更不会去挑战自我、挑战现状 …

对于选择,当然不能盲目和冲动。但是如果思考好了前因后果,理清了风险和局限,就应该有一点点勇气。特别是年轻的时候,做你喜欢做的事情。

对于设计,诚然我们要考虑商业价值、技术局限、公司架构、市场导向、领导意见…… 但是回归本源,还是得看自己最初对设计的期待和梦想。一样,做你喜欢做的事情。

所以,做你喜欢做的事情。:)

交互设计七大定律

“除非有更好的选择,否则就遵从标准”,那在交互设计领域都有哪些法则定律被认作了标准了呢?

作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗?

 1. Fitts’ Law / 菲茨定律(费茨法则)

cf288b82bee7c5c745192cd6cb06baad_b

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

菲茨定律的启示:

1.按钮等可点击对象需要合理的大小尺寸。

2.屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

3.出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

2. Hick’s Law / 席克定律(希克法则)

定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

3. 神奇数字 7±2 法则

1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

4. The Law Of Proximity 接近法则

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

5. Tesler’s Law 泰思勒定律(复杂性守恒定律)

该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

6. 新乡重夫:防错原则

放错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。

如上图所示我们的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的,只有两者都满足了才可以。

7. Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。在极客公开课?走进 UC 中 UC 浏览器产品经理苏剑南在”UC 浏览器 For Android 产品设计思考“演讲中也有讲到该原理的应用,”如果 UC 手机浏览器要发布第一个版本 UC 1.0,你会选择哪五个功能?‘’

为了遵守神奇的数字 7 法则本篇就只介绍到这里了,如果你还有兴趣自己去找找其他的定律法则,如与费茨定律接近的 Steering Law转向定律、Gutenberg Diagram古登堡图法则以及雷打不动到哪哪适用的帕累托定律(80/20 原则)、三等分原则等。

最后想说的是虽然这些法则定律被很多人认定为标准,很多人也记得 Alan Cooper 说过的那句名言,但从实际出发这些法则定了起到的只是参考或启发作为,作为交互设计人员千万不能照本宣科,因为只有亲自做过后才会深有体会。

让你移动APP脱颖而出的小细节

Little Big Details For Your Mobile App
by Nick Babich让你移动APP脱颖而出的小细节

让你移动APP脱颖而出的小细节

你应用程序的成功,基于很多因素,但总的来说,用户体验还是最重要的。一个能在市场上脱颖而出的应用,用户体验一定很棒。对移动端产品的用户体验来说,追求最佳的体验是一条非常可靠的方法。在整体产品设计的时候,我们往往很容易忽略一些看起来很好,但又感觉不必要的设计元素。然而,好的与惊人的用户体验之间的区别往往就在于我们这些贴切的小细节的设计。
Your app’s success is based on a combination of factors, but the overall user experience tops them all. The apps that stand out in the market are those that deliver great UX. When it comes down to designing for mobile UX, sticking to best practices is a solid way to go, but during the creation of the big picture it’s fairly easy to skimp over design elements that feel like nice to have but not necessary. However, the difference between creating good experiences and amazing experiences often comes down to how thoughtful we can design these small details.

在这篇文章里,你会明白,为什么说这些小细节的设计与很多显著的设计元素一样重要,这些小细节的设计,同样决定着你的应用的成功

In this article you’ll see why these little big details are just as important as the more obvious elements of your design, and how they help determine the success of your app.让你移动APP脱

启动页
Slash Screen

当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得知道如何 吸引他们。启动页解决了等待的问题,让你有一个简洁有力的窗口来吸引用户。

When a user launches your app, the last thing you want to do is tell them to wait. But what if your app has a time-consuming initial setup phase and there’s impossible to optimize this step? You have to ask users to wait. And if they should wait, you should figure out how to engage them . A splash screen solves the waiting problem and gives you a short but vital window to engage a user in your proposition.

2-3

2-2

这里有一些小贴士,在设计启动页的时候记得注意:
Here’s a few tips to keep in mind when you’ll design a splash screen:
Google 和 Apple 都建议用启动页 模拟更快的加载 来提高用户体验。启动页给到用户即时反馈,表示 app 已经启动并正在加载。 为了保证人们等待的时候不厌倦,给他们一些 娱乐:有意思的,意想不到的,或者任何可以抓住用户注意力的东西,时间长到够 app 启动就好。
Both Google and Apple suggest to use the splash screen to improve the user experience by simulating faster loading times . Splash screen gives the user immediate feedback that the app has started and is loading. To ensure people don’t get bored while waiting for something to happen, offer them some distraction: something fun, something unexpected or anything else that catches your users’ attention long enough for your app to load.

3

如果 app 的初始设置超过 10 秒钟,考虑使用 进度条 来表示正在加载。记住,不确定时间的等待给人的感觉要比确定时间的等待更加漫长。所以,你要给用户一个清晰的标识,他们需要等多长时间。
If your app has a initial setup phase, which takes more than 10 seconds, consider usingprogress indicators to show that loading is in progress. Keep in mind that uncertain waits are longer than known, finite waits . Thus, you should give your users a clear indication of how long they need to wait .

3-3
Make the loading process feel natural by using progress bars.
通过使用进度条让加载过程更自然

让你移动APP脱颖而出的小细节

空状态
Empty States

我们通常会设计一个丰满的界面,布局中的所有元素都完美的放置,看上去很美。但是如果界面正在等待用户操作,该怎么设计?我要说的就是空状态。设计空状态是非常重要的,因为即使它是一个临时状态,它也会是 app 中的一份子, 并且对用户 有用。
空状态的意义不仅是一个装饰。除了向用户提示界面上将要展现的内容,它还可以作为一种 导引 (介绍 app,展示为用户做的事情),或者 助手 (出错时的屏幕)。这两种情况下,你都希望用户能做点什么事情,所以,屏幕不会立即变为空状态。
做好这4个细节设计,让你的移动APP 用户体验脱颖而出
We normally design for a populated interface where everything in the layout perfectly arranged and looks great. But how should we design our screen when it’s pending user action? I’m talking about empty (or blank) states . Designing an empty state is a very important moment, because even it’s meant to be just a temporary stage it should be a natural part of your app and be helpful for your users.

The purpose of a empty state is more than a just decoration. Besides informing the user about what content to expect on the page, empty states can also act as a type of onboarding (they introduce the app and demonstrate what it does to your users) or helping hand for your users (the screen when things go wrong). In both cases, you want your users to do something so that the screen wont’ be empty as soon as possible.
5

下面是一些设计空状态时的小技巧:
Here’s a few tips to keep in mind when you’ll design an empty state:

给新手用户设计空状态。记住新用户的体验很 重要。给他们设计空状态的时候要尽量简单。重点放在用户的主要目标,设计互动性最大化:清晰的信息,合适的图像,一个按钮,这就够了。
做好这4个细节设计,让你的移动APP 用户体验脱颖而出
Empty state for a first-time user. Remember that first time user experiences should be focused . When designing empty states for a first-time users, keep them as simple as possible. Focus on primary user goals and design for maximum interactivity : clear message, right imagery, and a action button is everything you need.
6

Khaylo Workout 是一个关于空状态设计的很好例子。这个空状态告诉用户为什么会看到当前界面(因为他们还没有挑战任何朋友)以及如何操作(点击 + 图标)
Khaylo Workout is a great example of a proper empty state design. This empty state tells users why they see it (because they haven’t challenged any friends) and how to fix it (tap the ‘+’ icon). Image credit: emptystat.es
错误状态。如果空状态时由于系统或用户错误,你必须在友好度和帮助度之间寻找一个平衡。一点小幽默通常可以抹平出错的沮丧,但是更重要的是你要清楚的说明解决问题的步骤。
Error state. If the empty state was due to system or user error, you must find a balance between friendliness and helpfulness. A short sprinkling of humour is often a great way to diffuse the frustration of an error, but it’s more important that you clearly explain the steps to solve the problem.

7
迷失方向,孤立无援,就像在一个荒岛上?遵从 Azendoo 的建议,保持冷静,点个火,然后继续刷新。
Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing.

让你移动APP脱颖而出的小细节

框架界面
Skeleton Screens

Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing. Image credit: emptystat.es
Skeleton Screens
我们通常不考虑内容的不同加载速度——我们一直认为都是立马加载(或者至少非常快)。所以我们通常没有为用户需要等待加载的场合设计。

We don’t usually think about different loading speeds for our content — we believe that it loads instantly (or at least very quickly) all the time. So we don’t usually design the uncomfortable moments when users must wait for content to display.

但是网速不是总是有保障的,它可能比预期的要慢。尤其是下载比较大的内容时(比如图片)。如果你不能缩短时间,至少要让用户等待得舒服一点。你可以用临时信息容器 来保持用户的注意,比如框架界面和图片占位符。比起转圈的加载提示,框架界面能建立对内容的预期,减少认知的负担。
But internet connection speeds aren’t always guaranteed and actions can take longer that expected. This is especially true when heavy content (such an images) is downloading. If you can’t shorten the line you should at least try to make the wait more pleasant for your users. You have a great opportunity to keep users engaged by using temporary information containers , such as skeleton screens and image placeholders. Rather than show a loading spinner, skeleton screens create anticipation of what is to come and reduce cognitive load.

让你移动APP脱颖而出的小细节

几点建议:
Here are a few tips for your design:
框架界面不必很抢眼。只需要凸显必要的信息,比如段落结构。Facebook 的灰色占位符就是个好例子——它加载时使用了元素模板,让用户熟悉正在加载的内容的整体结构。注意框架界面中的图片和线框并没有很大区别。
The load screen doesn’t need to be eye-catching. It should highlight only necessary information such as structure of the sections. Facebook’s gray placeholder is a good example — it uses template elements when loading content and makes the user familiar with the overall structure of the content being loaded. Notice that images used in skeleton screen aren’t drastically different from wireframes

8
对正在加载的图片,可以用图片中的主色填充一个占位符。 Medium 有一个很棒的图片加载效果。首先载入一个小的模糊图片,然后慢慢转变成大图。
For a loading image you can use a placeholder filled with the predominant color of the loading image. Medium has a nice image loading effect. First, load a small blurry image, and then transition to the large image.

9
真正的图片出现之前,你可以看到模糊图片填充的占位符
Before the actual image appears, you can see a placeholder filled with the blurry image.

让你移动APP脱颖而出的小细节

动画反馈
Animated Feedback

好的交互设计会提供反馈。在现实世界,像按钮这样的物体会对我们的交互做出反馈。人们会对 app 中的元素有同样水平的期望。可视的反馈让人们有 掌控感:
Good interaction design provides feedback. In the physical world, objects like buttons respond to our interactions with them. People expect a similar level of responsiveness from app elements. Visual feedback makes users feel in control :

它会告知交互的结果,让结果可见并可以理解。
It communicates the results of any interaction, making it visible and understandable.

它给用户一个信号,这个对象(或者 app )执行一个任务成功或者失败。
动画反馈通过即时的信息沟通来节约时间,并且不能让用户厌烦或者分心。最基础的动画反馈就是 转场:
It gives the user a signal that they (or the app) have succeeded or failed at performing a task.
Animated feedback should save time by instantly communicating information in a way that doesn’t bore or distract the user. The most basic use of animated feedback is in transitions:

10
当用户看的点击/触摸操作引发的一个动画反馈,他们马上知道这个操作被接受了。
When users see an animated feedback triggered by click/tap action, they instantly know the action was accepted.

11当用户点击勾选任务已完成, 包括这个任务的区域就缩小并且变成了绿色。
When user checks the box to indicate that the task is complete, the block containing this task shrinks in size and changes its colour to green.

but an app can truly delight a user whenanimation is used in ways beyond the standard scope of actions.

下面是关于动画反馈的一些提示:
Here are a few tips and things to remember for animated feedback:

动画反馈必须经久不衰。第一次看着新鲜的东西,100 次之后可能就烦了。
Animated feedback must survive long-term use . What seems fun the first time might become annoying after the 100th use.

12

13动画可以让用户分心,让他们忽略加载的时间。
Animations can distract your visitors and make them ignore long loading times.

14动画可以让用户体验打动人心,刻骨铭心。
Animation can make your user experience truly delightful and memorable

总结
Conclusion

用心设计。app 的 UI 里面,每个微小的细节都值得密切注意,因为 UX 就是让所有细节协调的总和。所以,请从一而终,持之以恒的打磨你的 UI,创造真正无与伦比的用户体验。
Design with care. Each minor detail in your app’s UI deserves close attention, because UX is the sum of all details working harmoniously. Thus, polish your UI from A to Z in order to create really amazing user experience
Thank you!

让你移动APP脱颖而出的小细节

Pinterest的再设计

当我还是一个在瑞典成长的孩子时,我房间里堆满了一些设计得很有趣的木质玩具。我记得我为这些简单的设计所着迷,明亮的颜色,抽象几何形状和有机形式的结合。它们的样子和动作能吸引你去和他们玩。
木质的火车系统是非常棒的。你可以把轨道部分组装成圆形,条形,s型,只要你想得到。但是你必须要思考你要怎么样创造路径——关于如何把碎片组装起来是有逻辑的,你不能违背几何构成。

二十年过去了,我的孩子也玩着我童年的那些玩具。现在我能听到他们正在用力地敲打木地板。这个持久性的设计已经跨过了很多年,经历了一代又一代的变化。
去年春天,当我第一次开始专注在一个关于Pinterest设计的大问题上时,这个奇妙的、自我证明的、有趣的童年景象出现在我脑海。实际上,是3个大问题。

1、我们的UI风格不统一
2、我们的视觉系统是过时的
3、我们的市场和我们的产品脱节

过去的这些年,我们网站、APP和营销的设计风格都在游移,所以大家都觉得它们不再是同一个性。很多新的特征被加进来,而没有一个清晰的视觉是关于如何适应整个设计的。所以界面就开始变得杂乱并且很难理解。当你浏览呈现给你的页面,没有视觉层次或系统帮助你理解什么是重要的。这样造成的结果就是,所有有灵感的人在Pinterest都没有最大的发挥——到目前为止,我们体验最重要的一部分正在消失。
事实证明,在某种程度上来说,我们很难设计出风格统一又独特好看的东西。
原则问题

Pinterest的整体体验非常需要保持简洁和统一。如果我们打算开始做,我们就需要想清楚我们自己的一些关键设计原则。
我退到Pinterest地下室的一个黑暗的角落,花了好几个星期的时间去研究设计。我甚至不确定我一开始要做什么——基本上就像是我自己的统一模块的升级版本。我开始琢磨这样的问题:为什么人们喜欢用Pinterest?是什么让我们的产品变得独特?我的个性特点是什么?我们是什么?
我越思考这些,我就越意识到Pinterest有很多的本质,就像我的家人喜爱收藏的有趣玩具。两者都鼓励你和不同的选项玩耍,把碎片连接起来,创造属于你自己的世界。你能开始做你自己的目标和项目,你能从别人正在做的和构建的东西中获得灵感。你投入进去,然后立即开始玩,在你想要的任何时候停止,然后回来,从你离开的地方拿起正确的。

再往更远的方向想,Pinterest和BRIO本质上有共同的3 个基本原则。这些描述了Pinterest如今最好的特征,奠定了我们想要在未来把产品带到哪里的基础。
1、清晰易懂的
它很直观,不需要学习
你能理解它怎么操作而不㤇任何直接的解释。
它可以让用户变得更强大
没有让你觉得不舒服的东西或者让你不能信任这个系统的东西。系统为您提供了正确的组件,会问你下一步做什么。
它让内容的阅读起来变得更好
框架是完全无缝和隐藏的。你没有必要注意它,除非你要和它发生互动。你可以决定它的样子,而不是我们强加给你的。
2、活泼的
它是富有色彩的
它的个性突出而醒目。
它是视觉上的反馈
是以物理的方式进行互动的体验
它是不意想不到的
这个体验是有趣好玩的,但不是压倒性的。
3、不易破损的
它是基于探索建立的
就像一个小孩的玩具,你想尝试它,看会发生什么。你研究得越多,你学的就越快,你得到得也就越多。
错误的点击是不可能出现的
被设计的内容都是帮助你导航的,让你准确地做你想做的。
它是可逆的
如果你不小心做了某个操作,结果不是你想要的,很显然你也知道怎么更改。
一旦我们概况出这3个原则。下一步就是把它们转化成有形的东西,可能是我们建立的一切向前发展的基础。
基本要素
形状——我们使用基本的容易触控的形状,人们很自然能理解,并想要和这些形状交互。边角是圆形的,目的是让用户觉得更加容易亲近。

1

颜色——我非常喜欢近似的配色方案。感觉很自然,让人觉得平静。当你把一点点不同类的颜色组合使用,最初是基于一些给定的互补色,结果是非常有趣和意想不到的。
2 3
层次——每个元素都是相当有层级的。最重要的信息总是很清晰。因为我们设计的时候问过自己,让用户理解最重要的是什么?我们能怎么变化去让信息更加明显?
4

留白——在旧版的Pinterest设计里,我们总关注在包含用户需要内容的边框上,它的比重甚至超过了内容本身。如你看到的,有很多的线条、渐变和灰色的阴影。没有让人呼吸的地方。留白会在元素之间有个自然的分割,而不会添加视觉的干扰。结果是平衡和稳固,空格的数量增加了个性和影响。
5

早期的探索和想法
我们想要知道如果我们把所有的边框从UI中移走会发生什么?能将焦点返回到对象本身吗?或者这个体验会完全让人崩溃?
结果证明减少边框后编排的感觉是很好的。Pinterest的设计师们终于重新找回了重点。我们并不是完全去掉边框,因为它们确实使得某条信息对应某个图片变得清晰。我们等着展示边框,知道你对点击拥有足够的好奇。通过这种方式,界面会教你怎么把信息和我们的系统连接重组。一旦理解了Pin是怎么被建立的,你就只需要去体验这个交互。

6
设计一套新的标准

经过了几个月对设计和交互的探索,团队和我最终把内容放到了我们觉得符合我们说的3个产品原则(清晰易懂、活跃的、不易破损的)的地方。我们准备对我们新建立的原则和设计系统进行测试。
我们想以一个边框系统开始,所以我们决定先使用在我们的iOS的APP上。对于我们的第一次测试,我们把焦点放在视觉设计上——之后将会重构信息架构。你可以在WIRED阅读所有关于iOS的改版设计和协调后端重建。
伴随着APP的改版,我们也重建了我们Pinterest的产品设计标准,包括:
系统——图形,文字,颜色,网格
框架——组件的组织
环境——所有我们正在设计的小东西
78

接下来9个月的时间,我们和开发人员紧密协作去建立每个组件,并且做了很多次的修改和调整。这需要难以想象的共同努力以确保我们建议的东西不仅仅满足我们的设计目标,同时也能被所有其他Pinterest产品的开发团队重复使用。
从系统、框架到环境:Pinterest 的再设计过程

史诗级的团队实现了改版
Pinterest的整个产品设计团队都为卷入审查和执行新的设计系统。
我们也有一个小型的优秀设计师团队 (Annie Teng, Jay Marsh,Kimberly Fellman, Linus Wahlstedt, LongCheng, Patrik Goethe, Rick Chatas,Susan Kare, TomWatson, Woosung Kang),他们和我以及一起紧密配合,我们很棒的工程师也一起进行设计迭代,来找到最适合的转场和曲线,做不同的手势图原型等等。这真的是这个过程最好的部分。跨团队合作,从多个角度整合了反馈意见(一个在Pinterest大家都知道叫做“编织”的方法),使得结果成倍增强。而在这个过程里,我们也感受到了很多乐趣。

最后,我和Pinterest的品牌团队密切配合去做新的品牌指南,这个指南能反映出这些相同的设计原则,我们最新的营销已经开始让人觉得它与我们的产品有着同样的气质了。

接下来,我们将着手解决下一波的iOS APP改进,重新设计Pinterest网站和Android APP,而且我们正在寻找更多主力设计师来帮助我们实现这个计划。当这个最终实现后,我希望你和我们一样兴奋

从微交互看设计趋势

我会谈到以下5点:
1、微交互将会大量主导产品设计细节
2、平,却不再那么平了,颜色,字体和质感将成为设计师追捧的视觉利器
3、The internet of everything真正崛起,将增加设计的复杂度
4、人的距离将会无限被拉近
5、触觉声音3D,我的五感都可以有交互

 

微交互将会大量主导产品设计细节

微交互这个概念其实早在2013年底就被提出了。Dan Saffer作为对我影响很大的设计师,他的书一直是我推荐给学生的必读之一。这个概念被提出后,Don Norman亲自回信提出好评。于是微交互,一下子成了个挺那么火的buzz word,设计师们都要赶个潮流,没事提一句两句的。

uisdc-trend-201610187

原图来着自作者官网,为引用Don Norman点评文章的截图。

可是我们其实忽视了,在原书标题Microinteractions之后提到的一句话: Designing for details. 微交互,不是只在小范围收到空间时间概念限制的交互,而是细微的,细节的,有人性化的交互。

uisdc-trend-201610181

为什么这个概念被提出了四年之后,我还老生常谈的说它要火了呢。因为我们正在进入一个信息复杂度超越以往任何年代的纪元。人脑能处理的信息,是有一定维度的,从今往后我们设计师要做的,不仅仅是考虑用户的使用体验,更多的是使用设计为用户所接触到的信息进行“降围”。而做到这一点的方法,就是通过细节对于用户进行引导。至于具体怎么做,可能可以写好几篇连载专门说,本文还是着眼于“预测”这个点,如果大家都对这个话题感兴趣可以留言,我会回来再多写几篇~

uisdc-trend-2016101810

平,却不再那么平了
颜色,字体和质感将成为设计师追捧的视觉利器

其实这也不是这一两天的趋势了。你看看Gradients(渐变色),不是火了去年整整一年了么。但是仅仅是渐变,怎么能满足设计师挑剔的要求呢。这一年里,Medium上面,层出不穷更是各样的文章表示现在是终结纯扁平化的时候了。

uisdc-trend-201610186

去年著名的Asana Redesign,巧妙的大量使用了Gradients,谁说B2B软件不能设计的很有趣?

喊了一年了,我认为时机应该差不多了。现下很多视觉方案,已经在努力突破扁平的桎梏,向着更有意思的趋势发展起来了。比如大字体,强对比,新的iOS 10阴影等等。毕竟,审美会疲劳,而用户面对如此大的信息量,我们要在平中寻找一个突破口,帮助用户走出信息过载的挣扎。这是对于视觉设计,排版,字体研究等的真正考验。

The internet of everything
真正崛起,将增加设计的复杂度

有一句特别喜欢的话,翻译过来是说:现在的科技能管到你的茶壶么,连了网就行。(Is IT in charge of the coffee pot? If it has an IP address and connects to the network, it might be.)

uisdc-trend-201610189

BI Intelligence给出的IoE的发展趋势预测

物联网,O2O根本都不是新词汇了,中国说实话比美国做的还要好。可是实际上,所有一切都联网了么?并没有。但是看看现在的智能家居,各大平台都在叫嚷要做AI也要做VR。也许真正的IoE还不会在短时间之内真正做到普及,但是在这个概念先行设计紧随其后的时代,做交互的我们,应该快速的适应现在的技术将延伸到生活的方方面面,我们今后的设计不会再简单的是个登录页面,而是你连接实体和虚无的高复杂度抽象交互。

uisdc-trend-201610182

人的距离将会无限被拉近

三年前在带领GoToMeeting Web项目的设计时,尽管拥有百万用户的我们,在当时其实还是感觉真正的远程办公还离我们很远。虽然号称硅谷的会议都是这样的,大量的人都在家办公,但是硅谷的小伙伴们扪心自问,这些机器人真的解决了我们工作中的沟通问题了么?

uisdc-trend-201610184

作为设计师的我们,其实应该感谢无数工程师的努力,技术的革新,使得我们的很多设计理想都成为了现实,那么下一个即将实现的梦想,就是人和人之间的距离,将会越来越近。不是靠哆啦A梦的任意门,而是更稳定的沟通桥梁技术,和我们在设计中引入的情感和思考。新的iOS 10 iMessage,也许你还没有适应那些新功能,但是这其中注入的情感化设计元素,一定是今后我们打开距离这道门的利器。

uisdc-trend-201610188

触觉声音3D
我的五感都可以有交互

苹果发布了Haptics Feedback(触觉反馈,即3D touch),褒贬不一。其实haptics已经存在很久了,早先Bill Buxton 就提出了”hands on = finger on”的说法。只是触感的使用,很多时候还都存在于所谓的Direct Manipulation中,很少被用来直接给出Feedback。

uisdc-trend-201610185

其实鼠标就应用到了Haptics技术,说起来也没有那么玄幻。

但这个契机,也许真的能够成为触感交互的起点。毕竟,语音交互出来了这么久,很多时候我们还是停留在调戏Siri的高度,而美国很多家庭已经用上了Amazon的Echo机器人。新的技术,需要点时间来被接受。现在的很多研究热点,包括这些不同感官在VR中的应用,我觉得对于我们交互设计师来说,全面的能力和扎实的理论功底可能逐渐会变得越来越重要。

不难想象在不久的将来(也许是很久的将来,毕竟过了这么多年3D打印还没真做出当年号称那个名堂呢),我们的各个感官,都能有了具体刺激的交互,感觉无数行业会因此而大大受益。

至于这一切对我我们设计师来说,意味着什么。我觉得是更大的机遇和挑战,毕竟福布斯都说了(Forbes Welcome),2017年,UX的重要性将会大幅度上升。庆幸自己在这个行业,能每天做出那么些微薄的贡献,让很多互联网用户的生活,简单愉悦那么一点点。

——————————-
文 / Spell  源 / http://hangyu.me/
作者:Spell,高级产品设计@Salesforce。曾助力微软,亚马逊,HTC,Citrix及若干创业公司的产品设计。当下乐趣是将UX的知识传递给更多的人,并创立了UXOffer-专注于帮助中国学生获得最好的HCI/交互设计教育机会。

移动APP可用性测试:实验室测试和现场测试的比较(上)

可用性测试的重点

可用性测试是在移动APP在设计、投入市场后用来评估可用性的一种常用工具。可用性测试实施时一般是使用发声思考,即用户在一个测试环境中被给予任务,并鼓励他们在尝试完成任务时出声思考。这能够帮助可用性测试的主试即实验者知道用户界面(APP设计)是如何帮助用户自然地思考和执行操作,强调对于产品的特色和改善方法的认知。

用研工作

如何去定义一个可用性问题修改的紧迫性?

可用性问题的严重等级是一个重要的因素。当这个问题阻止用户任务完成时,就需要最紧急的修复行动了。Dumas和Redish(1993)使用了4个关键等级,至今仍被用户研究员引用的较多:第一个等级为最严重的等级,表示最严重的问题,第四个等级为表示最轻的严重性。Kallio等人(2004)也将问题按严重性进行分类:高(导致任务执行失败),中等(不是那么严重,任务可以完成)和低(小问题)。

问题等级严重性

可用性准则

实验室 VS 现场

传统的实验室测试

传统的可用性测试一般是在可用性测试实验室实施完成,如阿里、网易游戏都有专业的实验室,一般是由一间类似于办公室的区域和一面单向玻璃的可监视房间组成。必须保障实验室环境是一个安静的空间,测试的用户能够全神贯注于任务的执行。

实验室测试的担忧

经常在实验室进行测试的用户研究员都会担心在实验室进行的评估会由于没有模仿用户的使用情境而缺少生态效度。因为在现实的使用场景中,打断、移动、声音和多重任务操作等,这些没有出现在实验室测试中的因素,都可能在现实情景中影响到用户的操作。

现场测试

然而现场的可用性测试是非常罕见的,大部分(70%以上)的移动APP评估是在实验室设备中做的。这可能是因为数据的收集,如出声思考、视频记录或者观察记录,这些在现场做比较困难。

幸好由于便携式录像设备在近两年快速发展,使得在现场进行用户测试变得容易些。这些发展允许用户研究员像在实验室那样,可以在现场做一些小测试了;也使得他们能够有意识的去跟踪屏幕上发生的事情,去倾听用户的评论。同时也允许在现场的可用性测试中使用出声思考的方法。尽管发展了合适的工具,现场测试仍然比实验室更加耗时,也可能需要测试的用户和主持人付出更大的努力。

研究目的

敏捷用研在APP快速迭代开发的环境下被提出和倡导,以用户为中心的设计和可用性测试一定要非常高效。敏捷测试需要用户研究员在产品开发时间被严格限制的期间内,发现最重大的可用性问题在上线前进行修复。所以,可用性测试的焦点绝不是发现每个可能的细小问题。

敏捷用研

如何使测试的结果最优化,选择正确的评估方法尤为重要。对可用性测试者来说,经过科学验证的合适的测试方法是非常宝贵的。在我们的研究中,主要的目的是了解清楚,当评估移动APP可用性时,现场测试是否有风险,或者实验室环境是否可以模拟出足够的生态效度。

对比研究

为了解清楚可用性测试中环境的影响,我们实施了一个对比研究,即同时在现场和实验室两种环境下开展可用性测试,并且保证其他因素(执行的任务,发声思考的方法等)都是一样的,只有测试的环境不同。

两种测试环境分别是:

  1. 实验室:一般用户研究员进行可用性测试的地方,预算较低;
  2. 现场:一个用户会真正使用移动APP的地方。

对比

研究问题和假设

(1)问题:在实验室和现场会发现同样数量的问题和现象吗?

假设:如果进行对比的两组测试都是在足够多的用户中进行,那么现场测试发现的问题数量会更多。

(2)问题:在两个测试环境中发现的问题和现象会是一样的吗?如果不是,有什么差异?

假设:两种环境中的问题将会是不同的。例如最常下载时间在现场可能更能被容忍。

(3)问题:如果发现的问题有不同,那么是因为实验室或现场发生问题的严重性不同吗?

假设:现场的问题会因为在任务执行过程中被打断而更加严重。

(4)问题:任务执行时间会不同吗?由此我们可以从测试中推断出什么?

假设:任务执行时间在现场将会更长。

(5)问题:环境会影响测试用户的执行吗?

假设:现场测试的任务在执行过程中将会有更多的被打断机会,而打断行为的发生次数会影响用户操作。

(6)问题:当评估移动APP的可用性时,是实验室更适合还是现场测试更合适?

假设:当评估移动APP的可用性时,现场测试将会更适合,因为情境影响使用和操作。

研究结果

然而对比研究的结果使我们惊讶,因为结果并没有支持大部分我们之前的假设。

(1)问题:在实验室和现场会发现同样数量的问题和现象吗?

根据我们的研究:现场测试发现的问题会比实验室多,但并未达到显著差异。

我们的假设是在现场测试会发现更多的问题,但是没有被实验结果支持。

(2)问题:在两个测试环境中发现的问题和现象是一样的吗?如果不是,有什么差异?

尽管观察到了同样的问题,但是同一问题在现场测试中发生的频率更高。

(3)问题:如果发现的问题有不同,那么是因为实验室或现场发生问题的严重性不同吗?

假设是在现场会发现更多严重的问题,但是没有被证实。有关问题的严重性,在两种测试环境中没有差异。

(4)问题:任务执行时间会不同吗?由此我们可以从测试中推断出什么?

个人任务完成的时间,现场测试的用户没有比实验室测试的用户更长。当然在测试所需要的总时间上,现场的确要比实验室长,这说明现场测试是一个更消耗时间的方法。

(5)问题:环境会影响测试用户的执行吗?

在现场,测试有潜在的干扰,但是对于用户的操作似乎没有太大的影响。因为当执行复杂任务时,用户会寻找一个安全的地方(方位/角度)去执行,只有一小部分用户会一边执行一边踱步。在现场,用户的注意力会非常集中在测试上,例如在进出地铁时也会持续工作,在地铁上他们似乎也没有被其他地铁乘客打扰到,即使其他乘客会来和主持人说话。

尽管主持人的行为在两场测试中是一样的,但是现场测试中用户的表现似乎更加放松、随便,表现在他们更频繁的去发表关于APP的评论。

(6)问题:当评估移动APP的可用性时,是实验室更适合还是现场测试更合适?

当做一款移动APP的用户界面评估时,现场测试可能没法显著增加测试的有效性和完全性。不是因为一些问题没有被发现,而是因为现场测试所需要的时间更长,需要付出的努力更多。基于我们的实验,实验室测试似乎已经能够在提高用户界面和系统交互方面给予充足的信息。

现场测试完成后,主持人和用户交谈的更随意,似乎用户更容易说出自己关于产品观念的想法。现场测试的方法适合于不仅和一个系统交互进行测试,还包括测试用户行为和环境。另外,APP或设备如有一定的机密性那么测试通常是在实验室进行的,特别是在还在开发周期的产品。

在现场环境中,用户似乎在寻找一个安静的角落来和APP进行交互。个人空间似乎并不只在与别人交流时才被需要;在公共场合,当人们在做自己的事情时同样需要隐私。

研究的影响和将来的研究

正如用户研究员的目标是在严格的项目经费和时间的限制下,找到最大和最致命的可用性问题,那么这项研究帮助用户研究员在测试地点上做了决策。当测试一个移动APP的可用性时,实验室测试能够给予充足的信息。

给予用户研究从业者的启示

当测试一款移动APP的用户界面时,现场测试可能不是最好的选择;多数还是因为它比实验室测试更加耗时。

如果需要进行现场测试,则需要准备好比实验室双倍的时间来进行;因为在现场,你可能一天下来只能测试实验室的一半被试,且你需要做好事情不按计划走的准备,因为除了测试还会有更多的干扰和意想不到的事情。

在做现场测试前,先做一个严格的预测试是必要的;因为许多细节都会很容易出错,你真的需要检查所有的准备来确保万无一失。

文  / 媛媛大王 链接 / http://www.woshipm.com/user-research/424328.html

移动APP可用性测试:数据的量化处理(下)

用户研究从业者常常在做可用性测试的时候碰到这样的问题,可用性测试作为一种定性的研究方法,拿到完成率、完成时间以及满意度等结果时是简单做下描述性统计分析(毕竟我们称之为定性),还是可以进一步量化、标准化比较呢?

不是所有的数据都可以拿来量化,这取决于这是哪一种可用性测试。

美国教育家和心理学家Scriven(1967)曾将用来测试学习成果的考试分为两类,一类是Formative test即形成性测试,目的是通过及时的反馈来改进学习(例如随堂听写);另一类是Summative testF即总结性测试,目的是通过测试成绩来评估学习的效果(例如期末考试)。

那么,可用性测试如果也分为形成性测试和总结性测试的话,结果会有什么差异吗?

形成性测试

大部分的可用性测试都是形成性测试,以查找和修复可用性问题为目的,数据也是以问题描述和设计建议的形式来输出。这时候的量化一般仅以问题发生频率和严重等级为代表,任务完成率、完成时间因没有可对比性,所以只做描述性分析。

总结性测试

而总结性测试既然目的是用数据指标去度量一个应用程序的可用性,那么这个指标必然需要一个可以比较的对象,不然又如何去评价这个指标代表的可用性到底是好还是坏。如果以“比较的对象”来划分,总结性测试则又可以分为“基准测试”和“比较测试”。

(1)基准可用性测试

基准可用性测试的目标是描述一个应用程序相对于基准目标的可用性程度(如用你的每门期末考试的成绩去和之前预定的目标成绩进行比较),那么这也就提供了改善产品修复问题的着力点(哪门课没达到预期目标就重点复习),同时为比较改善后的效果提供了基线(重点复习后下次考试是否达到目标)。

(2)比较可用性测试

比较可用性测试,一般设计两个及以上的应用程序进行比较。可以是当前版本与前期旧版本的比较,或者是竞品之间的比较。如果去设计一场比较可用性测试你需要考虑清楚是“被试内测试”(相同的用户完成所有产品的任务)还是“被试间测试”(不同的用户分别完成不同产品的任务)。

  • 被试内测试:在用户数较少(或能够给予的酬金有限,无法邀请多人参与)时可以考虑让每个用户分别去完成各款产品的测试,但是必须要切记不能让所有用户在每个产品上的先后顺序保持一致(打破顺序效应)。
  • 被试间测试:在用户数充足时可以考虑每款产品分别找不同的用户进行测试,但是这里需要注意的则是必须保证每款产品间的用户个体差异不大(即有相似的年龄、性别、学习经历、竞品使用经历),如果需要在每组内划分为新手用户、中间用户、专家用户,则须保证各组中三类角色的人数占比一致。

数据统计

虽然对如何测量有效性、效率和满意度没有具体的指导方针,但Sauro and Lewis在一项针对近100个总结性可用性测试的调研揭示了从业者收集的典型数据。大多数的测试包含任务完成率(失败率)、任务时间、主观评价、寻求帮助的次数、可用性问题清单(通常包括问题频次和严重等级)。

本文主要就以上几个指标的量化处理进行介绍,更多可用性测试中收集测量指标的实操技巧,请参见《A Practical Guide to Measuring Usability》(Sauro,2010)和《Measuring the User Experience》(Tullis andAlbert,2008)。

任务完成率

(1)定义

也称为成功率,是最基础的可用性测量指标(Nielsen,2001)。

(2)计算

通常以二进制测量形式采集,以任务成功完成以编码1、失败为编码0。

注:二进制完成率即是基础可用性度量指标,也是应用到所有科学领域的度量指标。

图3

图4

(3)置信区间

虽然我们计算出A产品任务1的完成率为80%(10个人中有8人完成)但是我们却没有办法保证当样本数量为几百人、几千人,甚至当我们有上万用户在使用这个功能时,完成率还会是80%。

如果想要知道在未知的用户总数中能够完成该任务的比例范围,我们需要在这一样本范围上计算出一个二项式的置信区间。Wald校正区间二项式置信区间是最常用的方法,对于任何一种被编为二进制码的测试都适用。并且除完成率外,另一种衡量可用性的常用方法是统计遇到了同一问题的用户数。在使用Wald校正区间公式时,如果3/5的用户遇到了UI设计上的一个问题,那么我们可以95%的肯定,所有实际用户中23%-88%比例的人可能遇到了同样的问题。

任务完成时间

(1)定义

即用户花费在一个任务上的时间,通常为成功完成一个预先设置的任务场景的时间总和。测量和分析任务持续时间的方式一般有三种:

  1. 任务完成时间:用户成功完成任务的时间;
  2. 直到用户失败为止所用的时间:从开始直到用户放弃或者未正确完成任务的时间;
  3. 任务总时间:用户花费在一个任务上的总持续时间。

(2)测量单位

可以是毫秒、秒、分钟、小时、天或年,通常以均值(算术平均数或中位数,两者适用场景不同)。

(3)算术平均数 VS 中位数

到目前为止,我们最常用的是将算术平均数作为衡量集中趋势和等级量表的平均数代表,但是当样本分布呈现为左偏态和右偏态时,中位数明显要比算术平均数更加合适(当为正太分布时中位数与算术平均数相近)。这样说来,是否以后都用中位数来报告平均任务时长就万事大吉了?答案是NO,别忘记了中位数与生俱来的两大缺点:变异性与偏差。关于中位数的变异性与偏差有疑问的同学可查资料或者后台留言哦,篇幅关系这里就不拓展解释了。

图5

(4)几何均值的计算方法

对于小样本而言(小于25人),几何均值比中位数、算术平均数都更适用(Sauro and Lewis,2010)。对于样本量更大的可用性测试而言,中位数则是最合适的估算方法。计算几何均值,首先要将原始任务时长数据进行对数转换,然后计算所得到转化值的平均数,最后再将其转化回原尺度。工具上可以用Excel函数=LN( )进行对数转换运算,或者使用大多数计算器上都有的“ln”按钮。

满意度评分

(1)定义

即用户使用系统时感知到的主观评价,可在完成一项任务之后立即完成(任务评估问卷),也可以一系列可用性环节结束后完成(整体评估问卷),更可以独立于可用性测试使用。

图6

(2)测量工具

虽然可以自己编写感知易用性的问题,但采用当前可使用的标准化问卷,评估结果会更加可靠。对用研来说标准化问卷是最熟悉的工具与助手,这类可重复使用的问卷,一般由一组特定的问题+使用特定的格式+按照特定的顺序呈现,基于用户的答案产生度量值后也用特地的方法进行统计。基于不同的研究对象和目的,可选用的标准化问卷也不尽相同,所有的标准化问卷都有其优点和缺点,每种问卷都或许在你特定的情况下是最合适的。

常见标准化量表:

图7

(3)比较方法

如果要判断例如SUS可用性评分、NPS或者任务时长此类连续变量的均值之间是否存在显著差异,你首先需要明确的是这是场被试间测试还是被试内测试。并且对于不同的数据类型(连续变量or 分类变量)、用户小组数、样本数,均有不同的统计方法。

下图为连续型数据(满意度评分、任务时长)选择统计方法的决策图。离散型二进制数据(任务完成率)的统计决策图,后面有时间会补上。

图8

可用性问题清单

(1)定义

一般包括所属模块、问题编号、问题描述、问题层级(一到四级)、处理优先级以及跟进人。

严重等级判断与可用性准则这里就不重复介绍了,此前的上篇已介绍过。

(2)问题优先级的计算方式:

[(问题频数X4)/总参与人数]+严重等级

如一个UI问题被提到3次,总参与人数为10人,严重等级为三级(一级最高),那么相应的优先级则计算为四级(4.2四舍五入为4),即表示该UI问题的修复优先级为最低四级。

但是在实际工作中,可用性测试中发现的问题,当确定好严重等级后,修复的优先级除了问题频数,还需要综合考虑开发成本、业务成本,最后需要用研人员与产品经理共同确定修复问题的优先级。上方公式仅可作为用研根据问题频次与严重等级去判断修复优先级的算法之一。

总结

关于可用性测试中收集的指标如何量化,本篇中就介绍到这里。其实对于可探索、可深究的问题仍有许多,例如一个复合型的度量指标是否可以全权代表可用性测试中其他指标?小样本数据的量化是否真的可以达到一个可靠的置信区间?

带着问题希望大家可以继续深入探讨,本次抛砖引玉的介绍就到这里,欢迎交流。

文 / 媛媛大王  原文 / http://www.woshipm.com/user-research/424355.html