做过B端产品的产品经理或设计师都能感受到,B端设计与C端设计有众多不同,比如相对于C端产品乐于向用户传递趣味性,B端的产品更需要向用户传递利益性;C端产品设计更偏易学性,B端的产品更注重易用性。

同时B端的产品的设计还需要关注许多C端产品所不需要关注的要点,比如B端的产品和服务要关注企业运作的周期性,需要在企业生产的不同周期提供不同的服务;还需特别保证产品的长期性和稳定性,因为企业更换一个产品与服务的成本非常之大,所以企业更倾向与稳定的产品长期合作。除此之外,B端产品还有一个需要重点设计的内容就是——协作。

本文就是着重讨论B端产品中的协作设计。关于这点,首先我们先要了解的是:

为什么B端的产品设计中要关注协作?

(1)B端产品用户是一整个组织
C端产品的用户一般是具有相同特征的一群用户,他们会有相对一致的诉求和想法,其实产品设计者可以将他们看成同一个人(即用户画像)。但B端产品的用户往往是一群有很大差异的用户,他们是不同工种,有不同的工作职责和不同的诉求。我们的产品需要在不同职责的用户中建立好互通和协作关系,促使所有人的达成和谐与统一,才能很好的服务整个组织。

(2)B端产品的用户决策是个分权进行的复杂过程
一个企业做一个决策往往不是由一个人快速决定的,而是一个多人讨论、协作并需要经过不同团队审核审批的长流程。例如同样是购买过程,一个C端用户只需自己做出决定即可,但一个企业的采购过程为了规避风险则涉及到多个部门共同讨论和很长的审批流程,从物控制工程师提报采购需求,到采购专员的收集供应商资料,到品控人员的质量检测,再到成本核算部门……到最终总监拍板决定,整个过程非常复杂繁琐。在这个复杂过程中涉及到的多种角色,就需要能够方便互相共享信息,以便都能方便的比较多种参数信息如规格,价格和交货时间,最后达成统一的决定。因此,面向企业销售的采购网站可能就需要为决策中的更高效的协作而进行设计思考。
B类用户复杂的决策过程

比如设计师观察到企业采购过程会有互相讨论方案、纸质文件审批、向高层进行PPT产品演示等一系列协作过程,因此在设计面向企业销售的产品网站中就注意到提供产品清晰大图的下载功能,以便于清晰地打印出来,演示。也有一键发送到同事邮箱或者手机的功能,以便于多人协作决策。
(下图的例子为:Hermanmiller.com这个网站提供电子邮件将大图片发送给同事的功能,这就使B2B的购买者更容易发送他们的选择给同事。——例子来源于《B2B Website Usability for Converting Users into Leads and Customers 3rd Edition》)

hermanmiller.com提供电子邮件将大图发送给同事功能

(3)B端产品的使用过程涉及合作与工作衔接
除了决策过程,B端产品的使用也是多人多工种的协作过程,每个部门或每个员工完成其中一部分内容,然后流转到下一个部门与员工。甚至是多人同时进行或来回交叉进行任务流转。B端工具型产品就需要时刻考虑到工作进度在各个工作角色之间的同步,并帮助他们进行无缝的工作衔接来为企业达成高效的生产运输,从而创造效益。
例如我们工作中经常会写周报,主管会进行汇总,再上一级主管会进行再次汇总,这其实就是一个共同工作协作形成一个工作成果的过程。这一过程中就有许多需要为协作而设计的内容,比如如何让大家周报更结构化更易其他同事阅读?如何让汇总效率更高?如何让整个传递过程时间更短?这些都是值得思考发散的协作设计。

正是上述这些特殊的B端用户群体和有别于C端的集体化使用场景导致协作是B端产品特别需要注意的一个设计要点。

那么如何做好B端产品的协作设计呢?

协作中需要关注的三个主体

协作的过程中,其实就是一个信息与工作任务在各个不同人或角色之间流转的过程。所以要做好协作设计,就需要关注这个过程中涉及到的三个主体:即角色(人)、信息、任务(工作),三者之间大体的关系如下图所示:
协作中需要关注的三个主体

一个工作角色拿到上一个工作伙伴传递过来的信息,利用自身专业知识能力进行处理判断,并基于这些判断来处理任务,完成自己部分的任务处理后,任务有了更新,会相应产生新的信息内容;然后任务和新的信息将传递到下一个工作角色。 将多角色进行合并,就可以得到以下的简单化的三角关系图。(图中虚线的箭头后文会具体解释)。
简单化的三角关系图

协作设计的渐进式思考
那么梳理出这三个主体有什么作用呢,其实这三个主体可以指引我们逐步做好协作设计。我们可以逐一思考,为这三者做好了相应的设计。

协作设计的渐进式思考步骤

STEP 1:意识到多角色

首先我们要先意识到B端的产品往往存在着多角色,设计师需要反复自省是否有遗漏任何一个角色,特别是一些做出决策的重要角色。例如下图例子中,这是一个买家赊购服务的卖家开通页面(卖家开通这个服务后,买家能享受到先购物,过段时间再付款的赊账服务),此开通页面是挂在批发平台上,当时我们意识到B端的卖家大多是一个小公司,而在网上进行操作工作的主要是客服或底层的运维人员,他们看到我们产品说明页面并不能决策是否开通此项服务,更可能是从他们角度根本意识不到此服务有助于促进店铺流量。而真正对此项服务感兴趣并能决策的应该是老板,但他们却不容易看到这个卖家开通页面。所以我们在页面上增加了一个“通知老板”的一键通知按钮,以促进此消息能流转到正确的决策角色那。

赊购服务开通中通知老板的功能

另一个例子,我们在设计B端产品的“我的订单”时,考虑到来这个页面的会有多个完全不同的角色,如代销的售后客服人员、补货的采购人员、收货后对货的仓库货管人员等,他们在“我的订单”这个页面需要完成各自不同的工作任务。因此我们为他们分别设计了不同表格形式的“我的订单”以满足他们不同的工作诉求。

图1:为售后人员设计的订单管理跟踪
为售后人员设计的订单管理跟踪

图2:为采购人员设计的再次购买
为采购人员设计的再次购买

图3:为对货人员设计的对货核算
为对货人员设计的对货核算

STEP 2:同步信息

意识到多角色后,接着我们要为多角色设计出有效并且高效的协同。要保证这点首先要保证各角色之间信息流转的高效,即我们时刻要注意到现有的各个角色是否在第一时间能获取到一致的信息。这包含两个要点,即信息内容的一致性和时间上的实时性。
例如在做1688进货单的概念设计时,我们发现B类采购人员经常将进货单作为一种拟定购物清单初稿的工具。而这个购物清单需要多人多轮讨论,并且清单内容会进行多次更改,这时我们就需要考虑将这个清单信息实时同步到所有参与购买讨论的人,因此我们考虑在进货单上增加生成共享的预购清单功能,同时还需考虑到B类客户的共享场景中,他们与同事分享产品的最常用的方法,是复制网页的URL到电子邮件或IM,所以除了电子邮件和通用的社交产品的分享,还支持生成一个共享链接,每个人点击此链接都能看到实时更新的内容一致的信息。

进货单中的协作

STEP 3:减少工作

在考虑到多角色并为他们做好信息同步后,我们还能更进一步着眼于优化工作结构以减少工作量,提高工作效率。

(1)减少重复工作
最简单的,是寻找各角色各自工作中的重复部分,想办法减少重复工作。例如在下图的例子中,我们发现小电商卖家发货中有这样一个过程,运营人员首先将所有待发货订单导出成一个excel,然后将excel发给发货人员,发货人员发货后,填写运单号到每个订单后面,然后将更新的excel发回给运营人员,运营人员再根据excel中内容,在卖出的产品列表中逐个填写运单信息。从这个过程中我们就发现填写运单信息的工作进行了两次,所以我们很快想到要支持运营人员上传excel,自动匹配订单批量完成发货,从而减少填写运单信息这个重复工作。当然更优化的方案是让所有角色登陆同一个云工作平台进行工作,进一步减少重复的导出传递过程。
减少重复填写运单号的工作

(2)转移工作,优化结构
其次,还可以观察整个工作流中各个角色所需要做的各自工作,然后思考某些工作是否能转移到上游角色进行,越终极的用户所承担的工作应该越少。这样的好处

1、是我们所在的市场绝大多是是买方市场,提升越终极用户的满意度,越能促进转化;
2、上游的一次工作就能覆盖下游多次工作,提高整体工作效率
3、上游的工作比下游更能保证质量。

下图示意工作优化的流向

工作优化的流向

举例来说,电商销售中,一个标品的图片让每个小B直接去拍摄制作不如让大B统一制作再分发到小B,这样更有效率更有质量,当然如果平台能统一支持,建立标品图片库,那么大B也不需要去拍摄,就进一步优化了结构,提高了所有批发商的工作效率
另外一层的工作转移含义,是指帮助一个公司内工作流程中进行优化,让最终的决策者更满意,更容易做出决定。比如采购员的一个重要工作内容是需要向主管或老板提供几款候选产品的对比列表,或者需要做演示PPT对候选产品进行说明与宣讲,那么我们就可以考虑采购员的这个制作对比表格和演示PPT的工作能否转移到上游的产品供应商那,如果产品网站上直接能下载到更具营销色彩的产品宣讲PPT模板,也能下载选中的几个产品的参数对比列表,采购人员按自己需求略微修改后就能用,这样就能为采购人员减少大量工作,同时保证了产出的PPT的质量,从而更容易打动最终的购买决策者。

(3)减少角色
出来上述两个减少工作的方法外,其实还有一个减少工作的终极方案,即减少整个角色。那么如何减少整个角色?
首先我们来看一个例子,最早的发货单是下图1所示这样的,标红色字母处需要手动填写所有信息。可以想象一个生意非常好的电商需要专门雇人来手工填写大量的物流单子。
图1:早期快递单
早期快递单需手工填写

然后很快就出现了ERP系统,可以支持打印机打印快递单,如图2所示所有内容都是机打,这样就减少了一个填写快递单的角色。
图2:打印的快递单
打印的快递单

再后来快递工作人员发明了电子面单,如图3所示,创新地在顾客下单时就同时生成相匹配的订单号与快递单号,此举省去了将快递单号去匹配订单号的过程,不但减少了一个在订单上填写物流信息的角色,还减少了快递分拣员的角色(机器可以直接从物流单号中获取订单地址信息,自动分发到各个地区,不需要人工分拣)。
图3:电子面单
电子面单

那么是否可以再深入思考下,在这个物流流程中还能如何减少工作与角色呢?我们继续往下思考:现在发货过程已很顺畅,但顾客在收到货后不满意要退货的过程中,也需要进行很多工作,需要联系卖家获取退货地址,然后再填写退货信息。那么在订单生成的那刻能否不仅仅同时生成发货物流单,还能同时生成退货物流单?
如图4设计稿所示,那么用户退货时就不需要联系卖家获取退货信息并填写不熟悉退货地址,只需在原盒原单上填好自己的信息后退回就好了,并且不需要将退货物流通知到卖家,因为退货物流单在发货时就已经匹配好,并和发货物流单一起贴在了包装盒上了,这样进一步减少了我们终极用户的工作,有效提高了整个链路的体验。
图4:设计带退货信息的物流单子
设计带退货信息的物流单子

总结上面的例子,我们发现当我们设计出很好的信息流转与任务流程时,就能减少整个甚至多个工作角色的全部工作量!这时我们再来看上文所提到的协作的三个主体关系图,我们发现,当信息能直接支持任务,也就是说通过信息能够自动化进行各个任务的执行时,人的角色就可以不用存在了。
简单化的三角关系图

由此我们可以得出一个非常有趣的结论:
协作设计的终极目标是消灭协作!

工作和生活中不缺乏美和创意,正因为小而美的设计,撑起丰富多彩的业务场景,阿里巴巴1688UED2014全年外观专利66件,发明专利22件,我们致力做有情怀的设计,洞见于新,巧思于行!

触动人心的设计

 做这个东西有两个目的:

1.       把业内一些零碎和模糊的东西进行分析、整理并加以亲身实践,制定成使用说明或者标准化的设计工具。现在国内的交互从业者对一些概念和工具的理解基本上只停留在老外创造的美好词汇和自己的臆想之中,融入到工作实践时总有这样那样的不靠谱,这并不是东西本身不实用,而是师夷长技的时候并没有结合自身情况。 

2.       抛块砖,引堆玉。希望童鞋们把UED的相关方法、工具和经验成果都规范总结起来,提高自己工作效率和作品质量的同时,也为整个UED行业的发展壮大贡献力量。在这条方兴未艾的行业道路上,我们需要交换思想,互相启发,彼此搀扶,共同进步。

 这只是团队工作和设计实践的经验总结,离所谓的标准和规范还差的很远,况且即使是标准和规范也都是需要不断完善和修正的。欢迎大家多提宝贵意见。猛击此处查看PDF文档

  

 该[规范]版权以及最终解释权为阿里巴巴(中国)用户体验设计部所有,转载请注明出处。

 

———————————————————————–

 

纸上原型设计方法说明及使用规范

Instruction of Paper Prototyping

ALIBABA (CHINA) UED Team 2009

Collected by Li Long

 

引言

1.1 项目综述:

此项目的目的是整理、定义、说明“纸上原型” (paper prototyping,简称“pp”)这一快速低成本的原型设计方法,并把其作为标准化设计工具引入到今后的交互设计流程当中。

通过在交互产品设计的初始阶段对pp的使用,设计师们可以更快速的构建产品原型,更早的开始需求确认,更方便的对方案进行沟通测试和修改,从而降低成本、节约时间、提高项目效率和产品质量。

该项目为期3周,历经火热头脑风暴1次,大小讨论和应用实践n次,在不断的整理分析和结论迭代验证之后,完成了最终的文档输出。感谢俞头,耿莉,塔瑞,马丁,宗博,小范,唐唐,若男,张云,金超和所有阿里巴巴中国站用户体验部的同事。

1.2 文档说明:

本文档是对纸上原型定义、特点、应用场景及建立过程的描述、解释以及示例呈现。

1.3 要点说明:

•原型(prototypes)是把系统主要功能和接口通过快速开发制作为“模型”,以可视化的形式展现给用户,用以征求意见,确定需求。同时也应用于开发团队内部,作为讨论的对象和分析、设计的接口。

•原型的根本目的不是为了交付,而是沟通、测试、修改,解决不确定。

•纸上原型是一种原型设计方法,它应用于交互产品设计的初始阶段。

•纸上原型具有快速构建、轻松修改、容易操作,关注流程,抛弃成本低的特点。

•特别注意:纸上原型不是手绘草图。

 

What ?- 什么是纸上原型

2.1 原型的定义及作用

原型(prototypes)是把系统主要功能和接口通过快速开发制作为“模型”,以可视化的形式展现给用户,用以征求意见,确定需求。同时也应用于开发团队内部,作为讨论的对象和分析、设计的接口。

需求的二义性和不完整性使开发者对所开发的产品产生困惑,也给产品方案带来不确定性。我们根据这些不确定性来判断系统中哪一部分需要建立原型和希望从用户(以及内部人员)对原型的评价中获得什么。接下来,构建原型,沟通修改,解决问题。

所以,使用原型的根本目的不是为了交付,而是沟通、测试、修改,解决不确定。

2.2 关于纸上原型:

纸上原型是一种原型设计方法,它构建快速、成本较低,主要应用于交互产品设计的初始阶段。

使用纸上原型的目的就是为了更快的解决不确定。

纸上原型所使用的介质和工具基本都是物理性质的,主要由背板,纸张和卡片构成。它通常在多张纸和卡片上手绘或标记(或打印并裁剪成模块),用以显示不同的目录、对话框和窗口元素,后将他们组合拼凑,粘贴到背景板上(去膜后的KT板),构建成模拟真实产品界面的原型。使用时,纸上原型的设计者代替电脑对用户(以及内部人员)的点击和按键操作给出反应,重组纸片,书写定制的反馈,偶尔口头描述一些效果(当这个效果比较难在纸上显示的时候),以达到仿真产品交互的目的。

这种简易的操作模式让纸上原型相比于其他计算机图形化的界面原型方法而言,应用更广,构建更快,修改更方便。但由于其精度较低(低保真),它更适用于流程、框架和基本功的设计决策。
 

  国外纸上原型案例展示

 

 

阿里巴巴中国站UED应用纸上原型进行讨论

2.3 纸上原型与手绘草图的区别:

纸上原型是一种原型设计方法,手绘草图是一种设计表现形式。两者在定义的维度上有所区别。纸上原型可以采用手绘草图作为一种表现形式,手绘的草图并不一定都是纸上原型。

另外也需要强调的是手绘草图与低保真原型的区别。现在普遍存在一个误解,手绘草图(如果画的是某个交互产品)通常被视作低保真原型的一种,但这种说法同样不准确,也是定义维度上的问题,前者是设计表现形式,后者是原型精度(原型精度是一个多维概念,它包括广度、深度、表现、感觉、仿真度等多个指标)。

 

Why? – 为什么使用纸上原型

3.1 我们为什么要使用纸上原型:

如上文所述, 我们使用纸上原型的目的就是为了更快的解决不确定。

1)构建纸上原型的确能更快速。对于大多数人来说,在纸上手绘或将卡片组合拼凑远比在计算机上使用绘图软件来的容易。同样的时间内,手绘能比软件画更多的界面。

2)纸或卡片上的东西很容易更改和重建。你甚至可以在用户测试或与他人沟通的过程中做即时的修改。你可以随时随地完善你的想法,轻而易举的例举多个方案。在很多方面,纸上原型都比数字原型更具可塑性。

3)纸上原型关注流程,忽略细节,当你在纸面或卡片上手绘时,不会受诸如具体尺寸,字体,颜色,对齐,空白等细节的干扰,而在软件绘图时,却必须考虑这些问题(有些甚至是不自觉的),这就使你必须多花费一些时间在上面,而当方案修改或设计被抛弃时,花在上面的时间也就被浪费了。另一方面,纸上原型可以减少沟通对象在与主题不相关的细节上的挑剔,帮助你获得更有意义的反馈。

4)还有一个不常被意识到的好处是纸上原型的抛弃成本很低,早期设计工作中的产品方案不修改几乎不可能,不幸的是,原型开发者(交互设计师)在用计算机设计和调试大量的仿真交互效果来创建实际可操作的界面之后,再想改变就很难了,原型开发者本人(交互设计师)不希望丢弃费了很大精力的工作成果,所以,他总是会试图保留一些框架或效果,尽管它们确实是无用的。相比之下,一个手绘设计怎么看起来都是未完成的,不会是不可更改的(也不会是花费太大心血的),所以更易于接收建议和改进意见。

3.2 纸上原型的一些弊端:

1)纸上原型的素材和工具保存起来不方便,毕竟,保存一个大的背景板和那些纸张卡片,不像在计算机里的文件夹里存储一个文件那么容易。而通过纸上原型得到的阶段性的确定方案,也只能通过相机拍照这么一种方式来进行保存。

2)纸上原型的复用成本比较大(虽然复用的可能性较低),在界面已经准备好的情况下,使用纸上原型进行展示和沟通的成本要比计算机的数字原型大,因为你必须付出一定的人力资源去说明一些交互效果,模拟计算机所提供的反馈。

3)通常情况下,纸上原型不管在看还是感觉上都是低精度的(虽然我们之前说话手绘和低精度没有必然的联系),它很难体现产品气质和一些交互细节。但值得庆幸的是,它能够任意地在广度(精度的一个指标)上进行深入,并且仅需很小的花费。更好的是,当用人模拟计算机的反馈时,纸上原型也能够在深度上进来一定的深入,也是只需要很少的成本。

4)一般来说,纸上原型不能代替设计阶段各环节衔接的交付物(精度不够),但它的确能为我们节省很多设计时间。假设之前交互同学需要先后出1、2、3、4、5期方案后才能最后确定的原型图,那么使用纸上原型的话至少能省去2、3、4的时间,纸上原型是1,最后交付原型是5。

 

How?- 怎样使用纸上原型(使用规范)

4.1哪些情况下需要使用纸上原型(适用情况):

如前文所述,当需要快速解决不确定问题的时候,可以使用纸上原型。例如需要快速确定一个基本流程时,需要快速确定一个框架方案时。

4.2 准备工具:

白板,KT板 —— 作为大背景和粘贴背景。KT板撕掉纸膜,将海绵面备用。(在试验了大量的介质素材后觉得这个最好用)

纸张,卡片,易事贴等 —— 用来写和画。

透明塑料片 —— 同样用来写和画,但修改更方便,特别是在模块尺寸变化时。另外,它也可以作为临时的内容输入介质,不会影响到纸张本身。

双面胶 —— 纸片和KT板之间的绝佳桥梁,它能让纸在KT板上任意移动再粘贴。(这点至关重要,之前说过了,原型的目的就是为了修改)

水性笔,马克笔,剪刀,尺子,修正带 —— 用于绘写。

相机 —— 对阶段性的确定方案拍照保存。

文件夹和信封等 —— 用来保存原型素材。

打印机 —— 如果有些东西是既有的,并且打印出来比画出来更方便,那何不打印呢? 纸上原型以快和简易为根本特征,形式上没有特别的限制。

 

4.3 使用中的注意事项:

1)纸张原型要比屏幕尺寸大。纸上原型的操作距离通常都要大于人与电脑之间的操作距离,而且人的手指比鼠标指针大,写的字也要比12点、14点大,所以要保持模拟的仿真度,就需要等比例放大一些,这样做测试的时候信度就较高,旁观者观察和记录也容易。

放大比例的经验参考值:952 pixel对应336 mm的纸面宽度。

按照这个比例制作出(手绘或打印)的纸上原型既能保证操作精度,又不至于让幅面变得太大而难以控制。这里有一个小技巧,把952 pixel宽的页面用72 dpi 的打印机打印出来的话,纸面的实际宽度刚好是336 mm(952/72*25.4),它比屏幕中看到的尺寸要大(一般情况下,打印机分辨率的精度要低于屏幕分辨率),字体和行距又与人实际使用尺寸类似,因此正适用于纸上原型。另外,如果有特殊的情景需求(展示和参与者较多的测试等),比例可以适当的再多放大一些。

 

2)除了尺寸,原型的操作高度及视距也需要注意。合适的高度和视距会让沟通变得更准确更舒适更高效,同时在用户测试时,也能在一定层面上增加这种测试方法的信度以及本次测试的效度。

我们参考了《室内人机工程学》及人因工程和人机工程协会对人体水平/垂直作业域的统计数据和尺寸标准,并且也进行了一些实践操作来对相关尺寸进行校正以确保其适用性(比如把一些常用辅助工具的长度考虑进去等),最后得到的经验参考值为:原型垂直放置时中心距地面高度140 cm,视距(操作距离)50 cm 。需要注意的是,如果让用户坐在椅子上对桌面上水平放置的原型进行操作,合适的视距在35 cm左右。

 

3)尽量用单色,这样更简洁,而且不会在重要的流程中分散注意力。当然必要时可使用鲜艳颜色的便签纸记录重要的修改方案。

4)不用在纸上渲染每个交互和视觉效果,一些情况可以用语言描述代替显得更简单实用。“篮球在旋转”,“进度条达到了20%…50%…75…”这些大声说出来反馈给你的沟通对象即可。

5)手绘不是唯一且必要的方式,你可以打印现有的网站界面产品,然后把他们按网页框架裁剪成模块,与手绘的纸张和卡片配合使用。

4.4 纸上原型测试时需注意的要点:

测试是原型用来解决不确定问题的一种方式,纸上原型的测试与通普通原型的测试原则保持一致。此外纸上原型还有一些特殊事项需要注意:

1)测试中代替计算机给出操作反馈的是设计团队的成员,他负责移动、切换纸片,写下电脑反馈,给出反馈描述,通过这些让原型变成可交互的。

2)模拟时不要提供任何计算机不能给出的反馈。要机械的思考,机械的反馈。

3)必须有一位设计团队成员担任“主持人”的角色,他给用户阐述测试目的,介绍测试流程,当用户提出疑问或操作中遇到问题而计算机又无法反馈时,主持人负责给出必要的解释和帮助。另外,他负责指导和协调整个测试任务,确保其正常进行。

 

纸上原型设计说明更改和追加说明
5.1 更改说明:

后期纸上原型设计说明的更改或工作模型的修正,将会通过适当渠道发布给使用者和相关的产品开发人员。

5.2 追加说明:

对现有设计说明的追加设置或修改(如项目应用实例、经验总结和输出物规范等),将会在完成后通过适当渠道发布给使用者和相关的产品开发人员。