概述
作为设计师,在产品设计之初通常都会做用户调研并构建Personas,帮助我们更好的贴近和理解目标用户。B类产品中的Personas和C类产品有何不同?Personas在B类产品设计中有哪些价值?如何正确从数据中提炼和使用Personas?文章分三个部分来探讨这些问题。
• 背景概念:B2B用户画像特色(Buyer Personas vs. User Personas)
• 相关原理:是用户肖像还是用户画像(User Profiles vs. User Personas)
• 方法价值:数据+画像+直觉=好的产品设计(Data vs. Personas vs. Instinct)
banner0
注:Personas方法源于国外,相关英文专业词汇和中文专业词汇的对应表达会基于笔者的不同而有些许差异。

一、B2B用户画像特色
B类和C类电商交易的本质都是物质利益的交换过程。但B类用户和C类用户因业务采购流程的不同而有着不同的需求和期望。通常B类影响采购的决策者较多,采购周期较长。C类用户采购商品为个人使用,用户能够独立快速完成采购决策。这两点特性,导致销售和产品端将B类用户在采购决策前后区分为”选择者”和”终端用户”(Buyer Personas vs. User Personas)。对于B类设计师来说,区分这两者可以快速梳理出产品众多用户角色的本质区别,并从具体用户需求中再做同类需求合并,提炼出共性。最后,基于产品商业目标的不同进行用户画像优先级筛选和创建。

以下为B2B产品设计Persona推导流程图,以设计企业级“混合云应用平台”为案例。
final

最初涉及的相关角色可能更多,但不管有多少,都可以依据以上方法得出产品最核心的用户画像,了解他们最关键的需求。

分析数据、提炼用户需求这个过程,在用户调研方法中运用的最多的是Affinity Diagram。以下为练习例子:
personaibm
将不同用户访谈后得出的重点信息(具体需求)写在便利贴上(或Excel表中打印后切片),再在不同的用户间将分析过后的同类需求用线做连接(需求合并同类项)。以用户的口吻将处理过的需求描述出来(例如:当在1688上经营服装店铺时,我想要提高品牌知名度,所以我可以让更多买家信赖我的产品,以此提高销售额)。B类复杂的业务特性和众多用户角色的不同,更需要设计师和业务方紧密协作梳理出用户需求和Personas优先级。

二、是用户肖像还是用户画像?
描述你身边一个最熟悉的朋友。大家肯定都可以说出他们的基本信息、爱好、学历、性格等。根据这些信息,我们可以快速做朋友归类。再试想,你要帮助房产经纪推荐一套合适的公寓给你的朋友。如果将之前的描述直接列给房产经纪,他也许会凭借自己的直觉和经验,推算出你朋友可能的喜好。或者,你可以直接提供给房产经纪朋友期望的学区地段、周边服务设施、喜欢的餐馆类型、是否有在小区周围跑步的习惯等,这些具体影响他购房决策的因素。

前者我们提供的是用户肖像,是细致而全面的用户信息集合。后者我们提供的是用户画像,传递普遍影响用户行为和决策的内外因(已处理过的用户信息集合)。两者都是为了了解用户,前者帮助我们了解产品为谁设计?(这套房卖给谁);后者帮护我们了解用户为什么会有这个行为?(这套房为什么会被买走)。
profilevspersona

在B类产品设计中,我们很少能像用户的闺蜜,快速给出房产经纪一个贴心的用户画像。所以一般情况下,需要大量的数据调研收集用户信息,再基于文章前面所提到的分析判断、Personas需求归类方法,得出用户画像。

B类产品中是否能将用户肖像和用户画像价值放大,同时使用?
以阿里巴巴ICBU-CRM给销售使用的客户服务档案为例:
CRMprofile
从上图中可以看到服务档案中所呈现的信息都是单个的用户肖像信息。帮助销售了解服务对象是谁。在头部可以看到一系列需要售卖的商业产品。销售的操作流程是,也许要在5000个没有特别购买意愿的客户中做筛选,最终选定一位目标用户,到达以上页面。

要在10个种类各异的商业产品中给用户做推荐,该首推哪个产品?哪个最适合?如果这个销售仅是初级销售、渠道销售,或者其实不只10个产品可以做售卖,有20个、30个、40个;同时,这个客户也许长期专注于线下店铺经营,并没怎么接触过阿里巴巴的商业产品。这样以来,可供销售分析的客户数据也就少之又少。而销售的学习成本和沟通成本却成倍提高了。

用户画像在这个产品中是否可以帮助销售提升工作效率呢?
CRMprofile2
基于之前提到的B2B产品设计Persona推导流程,如果在产品设计之初,已对这10个商业产品做了商家画像(设计出了前台营销页面)。此时,Persona就可以直接展现在对应的售卖产品下方,给销售做参考。销售可以理解这是一个定性和定量,基于成功售卖的用户真实数据在不断迭代和优化的典型用户攻略:愿意购买此产品的用户都由什么内外因影响而做下单决策,有哪方面相关问题销售需要在售卖时对用户进行回答。这时,不管有多少个产品需要售卖,都可以快速帮助销售理清思路,进行对应推荐。做到人人都是销售…

一个清晰的用户肖像帮助我们了解用户真实现状,一个有洞见的用户画像可以更高效的为设计师、销售、市场、产品服务。

三、数据+画像+直觉=好的产品设计
pdata3
调研显示,大多数产品团队1-4年更新Personas。B类大型商业产品不可能持续高频做Personas更新和业务调整。因为B类用户对产品稳定性要求极高,一个小小的改变都可能会对公司造成不可挽回的损失。

很多互联网公司在产品设计前期会通过快速上线,使用Google Analytics提取用户信息高效制作Personas(类似于1688的A+,udata线上数据分析产品)。并通过持续提取和分析线上行为数据完善Personas,做产品和设计的优化迭代。
googlehungry

数据和Personas相辅相成。Personas也可以帮助设计师分析数据,避免淹没于数据大海。

例如,当查看网站跳失率,我们很容易只关注全部来访者查看了多少个页面后的跳失率。但这个数据其实并不是非常有建设性。不同用户从不同地方来到这个页面,对于页面有不同的期望。跳失率需要基于产品设计之初建立的Personas群组做逐个分析,才能发现更有意义的信息。

两组不同用户的Personas: A.每天通过邮件订阅信息,点击跳转至新闻页的忠实用户老王;B.通过搜索关键词来到新闻页面的市场管理者小李。同是来到新闻list页面,忠实用户老王跳走了,这个情况是可以理解的。因为我们可以假设他已经看完了所有的文章。而市场管理者小李跳走了,就需要分析原因:是否用户搜索的关键词和进入页面前的期待,与进入页面后所呈现的信息内容不匹配。而这时我们应该如何优化设计?

pd
以上,不被数据麻痹,不完全依赖用户,不凭空臆想。三者平衡,创建一个有洞见的Persona让好产品走的更远。

做过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:设计带退货信息的物流单子
设计带退货信息的物流单子

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

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

关键词:兴趣派、创意团队、徽派风格、极简主义、表现异同、文化差异、产品本地化、产品国际化。

能工摹形,巧匠窃意。—— 毕加索
Good artists copy, great artists steal. —— Pablo Picasso

第一次看到这句话是在苹果公司总部的墙上,这也是早期乔布斯在访谈中所提到的:让自己了解和熟悉人类在各种领域的优秀成果,并尝试把它们运用到你现在在做的事情中。Macintosh团队中有音乐家、诗人、动物学家,而这些人也刚好懂电脑,所以Macintosh才会有和其他产品不同的体验。多样化的团队更有创意,更有创意的团队打造更好的产品并带来成功。我想这也是我们鼓励各种兴趣派开展活动的初衷。

11月初户外派自驾去了中国最美乡村——婺源。
清晨的婺源给了我这样的视觉联系。
wyfinal
图:从最原始的徽派建筑,到贝聿铭基于徽派风格设计的苏州博物馆新馆,到画家蒙德里安的系列作品,最后一张是进口无线组最近设计的二维码。

从建筑上出发,取其抽象元素,分析传统构成在现代美学中的运用是视觉创意的来源。但通过对徽派风格和极简主义更多的了解,发现背后的“交互思路”是截然不同的。徽派风格秉持了中国文化中的先抑后扬,外形简洁,屋内木雕极具匠心,并且被强烈的宗法思想影响,整个屋内是精神意蕴的大世界。屋顶的马头墙也把中国文化的一马当先、马到成功很好的借喻在其中。而极简主义是为了反对先前的抽象表现主义,去除作品对观者意识的压迫性,让观者自主参与对作品的构建。作者与观者有着流动的精神互动,从而形成一个完整的作品。
wuyuan2

流动的设计,因人的思想和自然变化而变化,这里不仅仅只是作者在创作:贝聿铭设计的苏州博物馆新馆运用自然光线投影作为设计辅助材料与观者互动;我们清晨在婺源拍摄徽派建筑群,利用雾气的渲染给安静的小镇罩上一层自然的滤镜。

每一天都是不同的创作。
%e5%a9%ba%e6%ba%90
表象类似,背后存在差异性。在商业产品中的例子是国内的滴滴打车和欧洲的BlaBlaCar(卟啦卟啦车)。同是当地主流打车软件,由于文化背景的不同,体验和营销侧重点也会不同。基于红包的传统文化,滴滴顺风车和拼车主打车主省油费,并且从车主思维角度出发做营销推广。乘客有优惠低价,再读读超赞车主故事。BlaBlaCar重点在于全级用户在狭小空间对于陌生人的信任和相处交流舒适度的体验升级。用户可以在个人信息中选择等级,Bla:让我静静; BlaBla:聊个五块钱; BlaBlaBla:让我们从东三省一路聊到海南吧!✧。٩(ˊᗜˋ)و✧*。

从小我们都被教育:不要和陌生人说话,不要进陌生人的车。但现在,体验的优化改变了人们对于信任固有的观念。相同的功能,不同的需求带来不同的体验,而不同体验的引导性设计造就人们日常固有行为的转化。
wuyuan3
如果说字、画、建筑是我们触摸历史最近的渠道,如今的互联网则是设计师传达自己思想的最佳媒介 (archive.org/web/ 真实记录和还原了国内外279万亿网站的每一个迭代上线)。文学家、艺术家、设计师作为先觉者、先行者、先倡者用自己的作品记录和推进整个时代文化的传承。

如果没有互联网,我们可能会从事其他行业,是互联网让我们走到了一起。我们所经历的生活,每一个人身上的特质都潜移默化的在我们设计中体现,影响着团队中每一个人成长,影响着翻阅和使用我们设计的每一个人。
wuyuan4
“The world is a stunning place, full of outstanding works of art… One lifetime is not enough to experience all cultures. But travel, especially while young, is an essential step to becoming more aware of other cultures and people. “

0
9月13日晚7:00,《UP夜校》第六期——《1688在这两年供应链模式的发展》如期举行。石岩和冯婷分别从产品和设计师的角度阐述了1688供应链模式的变迁,深入浅出,发人省醒。
1
石岩首先结合自己在番茄市场的实地调研,生动地引出话题——任何行业都有自己非常鲜明的行业特色。随后讲述了2009—2004年和2015年至今商业模式的变迁、核心业务的变迁、营收来源的变迁以及产品架构的变迁,并结合美国不同年代消费者偏好的演变、美国电子商务的变化分析了1688产品模式发生演变的原因以及我们所面临的机遇。结合时代发展大背景阐述了目前1688新模式下运营阵地和产品结构,并总结了产品结构变迁和运营模式变迁的几大特征。最后冯婷从设计师的视角以淘工厂项目为例阐述了自己对供应链的理解。
2
昨晚的分享干货很多,让我们看到了1688美好的发展前景,但是也很清楚所面临的挑战。我们可以结合嘉宾的分享,反思一下自己现在所做的业务,看看自己能做一些什么,也可以大胆预测一下,未来的供应模式会是怎样的,UP夜校期待你的分享~

感谢摄影派的辰七,为我们留下了精彩瞬间。

小调研:你有干货要分享么?你想听什么分享? 请戳:https://www.wenjuan.com/s/2eemmm/

0 8月5日晚7:00的《UP夜校》第五期可谓是一场知识盛宴,PD和UED的诸位大牛汇聚一堂,婷婷结合个人经历和过往产品设计的经验阐述了供应链探索的心得;小玉从自身专业出发,结合零售通业务阐述了供应链中的服务设计思维;最后,顺应业务发展的变化,望望和小帅讲述了对新岗位UX设计师的要求和期望。满满的干货让在场的小伙伴“应接不暇”。 01 虽然之前对婷婷有过了解,但万万没想到产品思维如此清晰的美女之前是学Java开发出身的。婷婷首先结合近几年业务的发展形象说明了供应链的推进势在必行,通过对买家价值的梳理以及对供应链模型的理解,自然引出目前零售通的业务架构: 选择通过与供应商联营模拟自营模型,提供确定性的商品和服务,引导买家与平台长期合作。通过对零售通目前各个角色以及生态的细致剖析,让我们对零售通的未来充满希望。 02 小玉是一个非常追求极致的全面发展的设计师,每次听她的分享都会有不一样的收货。此次分享小玉首先阐述了供应链目前服务生态的现状,并结合食物链的形象比喻表达了个人对供应链的独特观点:我们不消灭任何角色,仅仅是做桥梁。让角色间的衔接更高效、合作更顺畅。随后结合具体案例小玉给出了服务设计思维的三个关键点:1.以全局的视野理解问题。2.以系统的角度思考问题。3.以开放的观点激发创新。我们不妨按照这三点提示,有意识的将服务设计思维运用在以后的设计中,相信每个设计师都会有所收获。 03 最后压轴的望望和小帅分别阐述了UX设计师的特质以及具体要求。望望首先提出了现有UED的普遍问题:交互设计师和视觉设计师普遍觉得成就感不强。针对这种现状UED设立了新的岗位UX,UX设计师可以细分为三种类型:1.理性感性全面发展,比如女神。2.偏理性,比如小帅。3.偏感性,比如大师。发展通道有两种:1.“全能”用户体验设计师,渗透上下游。2.“创意”视觉设计师,用艺术和美的品味塑造个人风格,打造业务品牌。小帅首先带大家一起回忆了UED的岗位观以及设计观,随后详细阐述了新岗位UX设计师的要求,对于不同级别的设计师,自下而上需要有见解鲜明、感觉敏锐、技法突出、匠心独具、从容驾驭、独树一帜的特质。虽然目前UX设计师有一定的门槛限制,不过这个不是最关键的,相信听了望望和小帅的描述大家会更清晰的知道自己未来的岗位规划,以及组织上对我们的期望,每个UED的同学肯定都能找到最适合自己职业发展的那条道路。 04 昨晚干货太多所以大家可以结合嘉宾PPT慢慢消化:PPT云盘链接

感谢摄影派的屠钰钦,为我们留下了精彩瞬间。

小调研:你有干货要分享么?你想听什么分享? 请戳这里:https://www.wenjuan.com/s/2eemmm/

夜校四期 6月16日晚7:00,由网站产品部与用户体验部联合举办的《UP夜校》第四期——《1688基础产品体验优化项目分享》如期举行。妙乐和梅郁分别从产品和交互设计的角度阐述了基础产品体验优化的心得,干货满满,在场的小伙伴收货颇多。 1 妙乐结合无线端大额支付以及生意参谋两个案例分析了现有基础产品的体验问题:产品割裂,缺乏整体规划;持续优化计划缺失;部分产品变为无头案。针对现有问题提出了1234的针对性解决方案——1个小组,2 个机制,3个月,4个输出,同时给出了详细的项目效果评估机制以及关键节点的项目产出。思路清晰严谨,分析透彻细致。 2 梅郁首先结合UED最熟悉的五导家阐述了现有基础产品为何会产生那么多的体验问题,有些是因为我们为了赶工忽略了用户诉求,有些是因为在做小功能叠加的时候直接忽略了设计目标,这些问题值得所有UED的小伙伴反思。 3 随后梅郁结合生动的案例指出了设计师需要注意的几大问题:1.补上用户角色,明确设计目标。2.易用性和易学性的抉择。3.区分功能和需求。4.逻辑与场景的权衡。讲述风趣幽默,结合现场互动,让晦涩的理论变得有趣易懂。 4
现有的基础产品体验确实存在诸多问题,但是通过妙乐和梅郁的分享让我们对体验的优化充满希望。当然基础产品体验不是一两个人的事情,也不是一个项目组的事情,应该群策群力,大家一起为网站的体验优化贡献一份力量。

小调研:你有干货要分享么?你想听什么分享? 请戳:https://www.wenjuan.com/s/2eemmm/

妙乐PPT:http://yunpan.alibaba-inc.com/share/link/N3VTS7mj4p
梅郁PPT:http://yunpan.alibaba-inc.com/share/link/S3VTS7ijuO

感谢摄影派的苏林,为我们留下了精彩瞬间。

icon-testing

【译者注】
图标在页面设计中被广泛使用,图标设计的好不好、图标应用效果如何,是设计师非常关心的问题。本文作者提出从发现性、理解性、预测性、吸引力这4个方面来评价图标,也为图标设计构思提供了一个方向。

引言
设计师经常使用图标来节省页面空间、提高用户识别速度。随着像智能手机、可穿戴设备等这些小屏设备越来越流行,图标的使用也更多了。但是,这些图标是否可用?唯一的方法就是对这些图标进行用户测试。

如何进行图标测试
不同方法可以解决图标可用性的不同方面,判断图标是否可用可以从以下4个量化指标来测量:
1)发现性:用户能否发现页面上的图标;
2)理解性:用户能否理解图标的意义;
3)预测性:用户能否猜到图标点击会发生什么;
4)吸引力:图标是否美观;
以上4个指标都是图标设计中起着关键性的作用,但需要独立去思考如何来提升。

图标测试方法
图标评价的方法有很多,要根据评价目标和所处的设计阶段来决定测试方法。图标评价方法可以分为2大类:无背景的图标测试、基于背景的图标测试,区别在于图标测试时,是否将图标放在页面中进行用户测试。无背景的图标测试,就是单独用图标(测试素材只有图标,没有页面)进行测试;基于背景的图标测试,就是图标放在实际的页面中进行测试。
需要注意的是,尽管采用无背景的图标测试,受测用户也必须目标用户,熟悉产品行业并有相关背景知识或概念。

发现性测试方法
为了评估图标的发现性,需要将图标放在页面中实际位置,基于背景的图标测试可以用于判断:多个相似的图标放在一起是否会导致用户找到目标图标会比较困难,或者放在太隐蔽的位置或周边有很多广告导致图标被用户忽视。
查找时间测试是用于判断用户能不能容易地发现图标的最好方法,在测试过程中,受测用户需要按任务点击图标,计算受测用户成功找到目标图标的操作时间、首次点击准确率。

理解性测试方法
理解性测试最好进行无背景的图标测试:只向受测用户呈现单独的图标(而没有页面内容),让受测用户猜测图标所代表的意义,在某种意义上来说,这种测试也是洛夏墨迹测验的一种方式。这个测试的目的是保证图标能够被用户容易地理解。
从用户的描述或词语中来获得用户对图标的理解,如果用户的理解与图标想要表达的意义/内容不相符合,那就意味着需要重新构思图标,重新设计图标。
我们知道图标都伴随着文字标题,你可以会认为:先向用户呈现图标的名称,再让用户从多个图标方案中选择一个与名称最匹配的一个图标,这种测试方式更为合理。但是我们不建议使用这样的方法测试,因为在真实使用场景中,用户很可能只看图标,而是不看图标名称。因此,在测试时使用以下方式更加合理:以某种方式让用户知道需要在这个页面上查找某个功能,从而找到对应的图标。

预测性测试方法

不仅需要用户理解图标的意义,而且还需要预测图标代表是是什么功能。实际上,即使用户不知道这个图标是什么/叫什么,只要用户知道图标所代表的功能就够了。
用于评价理解性的无背景图标测试方式同样可以用于评价图标的预测性。然而,预测性测试不是简单地问用户图标代表了什么功能,而是当图标点击后,用户期望发生什么。不像理解性测试一样,在理解性测试中,需要向用户简单(但尽量少)描述一下图标所在系统/页面。例如:告诉用户手提箱是电商网站的一部分,请用户找出能够代表的图标。在预测性测试中,不能告诉受测用户网站的任何具体信息,也不能告诉用户任何产品相关的功能。通过这种测试方式,可以了解图标的用户心智模型。
另外,如果有多个图标方案,A/B测试也可用于判断出哪个图标的预测性最好。对于A/B测试,需要分析不同图标下的用户行为差异,同时需要分析用户是否存在这种现象:点击了图标然后又马上返回到前一页。这个现象是一种探索行为,通常说明图标的预测性比较差,表明用户点击图标后,对看到的内容不满意,从而返回原来的页面。在测试不同的图标图形方案时,不同图标需要放在页面相同的位置和使用相同的图标名称,保证没有其它因素影响了用户行为。

吸引力测试方法
图标需要进行吸引力测试,因为最普遍目标是使用图标来增加用户的吸引力,但不能保证所有图标的吸引力都很好。在图标吸引力测试中,既要进行单图标测试,也要进行图标组测试(一个产品或页面会有多个图标,一个产品或页面的所有图标称之为图标组)。
吸引力测试的最简单方法就是用户对图标吸引力进行1-7分的主观评分。如果有多个图标方案,叫用户选择一个最喜欢的图标,并解释对某个图标喜欢/不喜欢的原因。最后从多套图标组选择中,选择一套最喜欢和最不喜欢的图标组。图标组测试主要是为了避免整套图标大多数图标是好的,只要修改少数几个图标,整套图标就可能是最适合产品/页面的图标组。

标准的可用性测试与图标测试
标准的可用性测试可以发现一些图标问题,但不能准确地发现图标的所有问题。例如:在测试过程中,用户被其它一些页面元素搞得不耐烦,甚至不能完成操作任务。即使图标存在问题,但不准确地发现图标的具体问题在哪里:是用户没有识别出图标,还是用户不能理解图标的意义,还是用户没有发现图标?
由于存在多种可能的原因,所以不能单靠标准的可用性测试来评价图标的可用性。

产品开发周期
与用户体验研究方法一样,选择测试方法时需要考虑产品所处的项目生命周期。
1. 规划期:在早期的概念阶段,主要使用有利于形成概念、探索多种设计想法的测试方法。在这个适合进行无背景的理解性、预测性的图标测试,用于判断图标使用的可行性和确定合适的图标心智模型。
2. 执行期:在设计和实现阶段,主要使用有利于持续地帮助系统设计出最好的图标方案。一旦图标方案是可理解的,主要持续地进行无背景的图标吸引力测试,直至得到吸引力优秀的图标为止。接着进行有背景的图标测试,将图标放在真实页面中,让用户去查找目标图标,图标查找时间测试用于量化评价图标的发现性。可用性测试(开始使用纸面原型,后面使用高保真原型进行测试)可以在图标意义理解性与可发现性方面给我们更多的发现。
3. 评估期:产品一旦发布,图标测试主要用于评价图标上线效果、帮助图标持续优化。基于可用性测试的基准测试、图标查找时间测试可以定期开展来跟踪效果。在图标持续优化的过程中,A/B测试是衡量和选择图标方案的最好方法。

原文链接:www.nngroup.com/articles/icon-testing

夜校三期 UP=UED&PD,是由用户体验部与网站产品部联合举办的UP夜校,目的是希望UED同学与PD同学能够有一个在工作之外一起交流与学习的平台。

《UP夜校》第三期由云市场项目组的阮挺杰和阿里女神李恬带来《创新型业务协作》的分享。 1 云市场的PD挺杰首先简单地为大家介绍了产品的一些专业知识,包括产品的生命周期以及不同阶段产品和业务需要做哪些事情。不愧是大牛,简单几句话就让我们分分钟涨姿势了。 随后挺杰以市场方、档口主、买家三个用户角色为切入点,为我们介绍了云市场生态——为市场方和档口主提供工具支持,为买家提供采购与服务平台。 2 作为一个PD,场景图做成这样真滴好么,为啥不转行做UED嘞。 3 挺杰就云市场的几个重要产品做了简单介绍,包括市场内WIFI、室内地图与导航、市场百屏等等,满满的干货让在场的小伙伴收获颇多。 4 阿里女神登场啦,李恬从沟通的重要性、工作中的沟通技巧以及工作常用沟通密码等几个维度为大家讲述了沟通与协助的知识,结合在工作中遇到的经典小案例,形象生动。人那么美,情商又那么高,让我们情何以堪。 5 不愧是阿里女神呢,看小伙伴听得一脸幸福。 7 随后就云市场商品信息化女神提供了几个解决方案:工业化摄影设备高效高质量图片输出、自动化后期插件接入、自动化排版工具。 6 图为小伙伴与分享嘉宾互动。 8 相信有如此优秀的项目组成员,云市场会越来越好,让我们拭目以待。

嘉宾PPT云盘链接:http://yunpan.alibaba-inc.com/share/link/I3VT179jeM

感谢摄影派的王超,为我们留下了精彩瞬间。

下一期的分享嘉宾会是谁呢?大家猜猜看。

【译者注】为企业产品做设计,设计师经历的最大困难往往会是应对产品的复杂性。译者读过的诸多解决复杂设计问题的文章中,要么是从设计专业角度去解构分解问题,再剥离难点逐个击破,要么是从源头分析,对设计需求做简化和平衡去控制复杂度的影响范围。本文则从管理人员和意见、产品设计本身两个方面去应对复杂性的难题,特别适合以拥有“复杂业务逻辑构成的中后台产品”和“复杂成员身份组成的多元化团队”为标志的1688,也推荐给各位toB产品的设计师看看。

我写过一篇文章:《数据驱动的界面设计》,在大家对它展现出前所未有的热情和兴趣后,我觉得应该聊聊与此类似的重要话题:管理复杂性。

项目进行过半后,当设计师做设计概念提案时,如果没得到任何微笑、点头确认等形式的反馈, 各位一定明白那种令人不安的感觉。它有时会带给我一种被吓尿的感受,因为你知道还有很多复杂问题没有浮出水面,待基本问题解决后才会出现。假使你无法搞定它们,你的产出会受到影响,甚至会导致产品被扼杀在摇篮之中。

产品设计中的复杂性以两种方式呈现:1)管理人员和意见的复杂性。2)产品设计本身的复杂性。它在产品设计中并非像功能、用户和涉众那样显眼,因而让我吃过一些亏。在此我愿意分享一些见解,帮助大家学习如何在大型设计项目中应对这些复杂性。

改变对话方式

我们从改变对话方式开始,因为这是一个面向管理设计项目的主题。作为设计师,我们经常从其他设计师那里接过项目或者需求,并接受它们的现状。刚开始我们在只掌握了很少信息的情况下,都会试图把设计做好,但往往会因为应对不断变动的各种限制,被迫在设计上妥协,最后结果只能是令人失望的。

产品设计困难的一部分在于高风险的环境中,会夹杂许多人的意见。可悲的是,设计的发声还不属于这些意见之中。许多设计师很自然的就开始抱怨公司的业务,其实应该责怪的是设计师本人。

“作为设计师的责任之一就是改变对话方式,我们需要教育客户、老板和团队如何制定成功的设计流程。”

这并非易事,有时候我会觉得设计理念的宣讲是对牛弹琴,但它确实没有捷径可走,我可以分享一些技巧看看是否对大家有帮助。

预先引导

项目启动时,我会给相关涉众快速介绍设计流程,展示关键阶段和期待的设计交付。然后在项目的不同阶段,我会提醒各位目前项目进展以及接下来的目标是什么。

1
图1、流程案例与交付时间线

为了更好的解释流程,我认为说明“何种反馈是我期望得到并且何时得到”非常重要。有时候我甚至会解释反馈为何是必须的。如此一来,各方对如何帮助设计成功就建立起了共同的责任。

向上交流

无论何时启动一个设计项目,我都会要求跟老板见面。通常是CEO或者我能够触及的最高级别负责人。我希望从他们那里直接了解愿景及期望结果。

我会对此进行详细的记录,并视图捕捉与愿景和期望有关的情绪与声音,在宣讲设计决策时可以派的上用场。这点很有效,因为没人愿意与老板争辩。

当事情变得像往常一样混乱时,我试着将我在与老板的沟通会议中听到的内容重新强调。作为设计实践者,我们的工作就是以优雅的解决方案实现公司的愿景,没有比“来自管理层的声音”更好的方式来跟大家沟通全局形势了。

共情理解

在需求挖掘阶段,我们习惯将执行者与关键涉众召集在一个房间里,让他们描述对客户的理解。此时的目标是让涉众卸下防御,回头从共情的角度来思考产品。

我们使用了一种名为“共情地图”的设计方法来方便展开讨论。前提很简单,询问你的涉众“不同角色的客户在想什么、做什么、说什么、听什么以及感受到什么”。我们经常在产品的某个具体场景或者交互细节里为2-3名关键人物角色去使用共情地图。

2
图2、来自团队各方对共情地图一知半解的描绘

在一系列项目中使用这项技巧之后,我们得到了惊人的一致反馈:“这是大家第一次跟所有高管在一个房间里谈论我们的客户,确实很有见地”。因此我们沿用了这种方法,正如上图所示。

初看起来有些做作,但跟系统真实用户任务及洞见挖掘联系起来时,这种方法就很有效了。在许多情况下,那些我合作过的从未参加如此严格设计流程的涉众们,恰好从此开始以良性的方式帮助我们建立了设计权威。

知悉频度

如果你正在对现有产品进行整顿,经常会发现一大堆功能有必要在重设计时进行调整。大型软件研发的常见问题是,往往使用一套设计方案去适配所有情况。换句话说,用固有的产品形态应对不同的用户及场景。这类产品如有标签的话一定会是#复杂的#。对接这样的项目是很有挑战的,只有熟悉用户的使用频度才能成功。

了解一个功能、页面、标签或者输入框究竟有怎样的使用频度,能帮助你很好的处理优先级。这样可以非常有效的找出客户每天使用及划掉从来不用或者使用很少的功能,来帮客户梳理已有页面和元素。这就是我们常说的80/20法则(选出80%时间使用的功能并划掉其它功能)。

3
图3、要求客户勾出频繁使用的内容,划掉几乎不用的内容

上图是某个项目中我们为具体用户角色抽取关键因子的产出。目标是了解人们经常使用的功能以便在重设计流程中做好优先级排序。


找准始末

多数情形下产品意味着终结,产品的需求通常来自某处,对应某处进行产品的输出。

人们很容易陷入像素级别设计的细节流程之中,而忽略产品的开始和终结。用户不大可能在未受干扰的情况下,在适配的视网膜屏幕上紧盯你的产品细节。你应该更多的问自己“信息从何处来?”以及“信息接下来要去哪里?”

这些问题的答案对理解你app的上下文有关键作用。你产品所处生态系统的复杂性对设计的影响巨大。你可能获悉你的产品与超过30个的其它窗口在桌面并存,你的产品主要用于户外的平板电脑上或者其它意想不到的用途。

4
图4、走访中了解到人们使用截然不同的方式来使用产品

上图即该思路的实战案例。在现场采访中,我们将用户实际使用产品的情况与从涉众处听到的情况进行了对比,令人惊讶的是,每一个参与用户使用产品的方式完全与想像不同。

弄清楚用户集中使用什么功能,对其它产品和任务的关注度如何,决定了我们自身产品的重设计策略。

平衡可发现性及易学性

在手机上下载新app时,在应用商店只有一小块区域供其展现关键价值,如果无法引起人们的兴趣,那么这个app可以说已经挂了。这就是提升可发现性的原因,作为一个消费者你可以选择使用该产品,也有可能是你忽略了它而别人在使用它。

这类可发现性的不足甚至在企业级软件中也经常体现。我们已经听到客户有关“对用户无法找到某项功能的担忧”的批评,因此我们得让这些功能更加突出或者更容易被发现。如果经常这么做会怎样?没错,事情变得更加复杂更加糟糕。

这就是我们经常为易学性发生争论的地方,并非每个功能都需要大张旗鼓的宣传,用户能轻松学会有些交互,好的交互能让用户使用一次就学会。

这就是关键问题,复杂系统需要在可发现性的代价上对功能做优先级排序。我们的任务是揭示用户的主要用例并且让它们尽量符合直觉。用户绝非需要去“发现”这些常用功能,正如他们不应该在使用产品的时候依赖文档。

清爽度与清晰性

企业级产品的一个极大挑战是如何管理信息密度。页面上出现太多信息会将用户置于太过直观的繁杂中,太少信息则不容易形成有意义的见地。那么,它们如何平衡呢?

1、清爽度

有时你得在狭小空间容纳许多信息,而不是将其全部展示。此时,我们一般建议使用渐进式揭露策略来梳理界面,这是一种用户兴趣驱动的信息保真度的原则。

5
图5、渐进式揭露-兴趣驱动的进阶信息展现

上图即这种思路的案例。界面上的结构式信息中仅有核心元素是可见的,更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响,但你能得到一个更清爽更简洁的用户界面。

2、清晰性

另一方面,有的产品需要主干信息具备一定可见性以便顺利完成任务。金融、医疗保健和电商等行业的产品具备众所周知的复杂度。

当不得不保持一定的数据密度时,尽量做到在清晰性上的精细展示。使密集的用户界面更容易辨识的做法是利用超一致清晰的视觉语言。

6
图6、系统性的使用颜色、字体和标签来确保界面干净和简洁

这种一致性意味着实行极具约束性的规则:

字体变形

按钮样式

简单导航系统

与系统有关的:

颜色选择

标签

微文案

以上都形成了一个优雅的方案。这个话题当然需要更全面更深入的描述,我们暂且聊到这里为止。

标志性的动画交互

过去我们曾花费无数时光专注在设计各类线框图及与之相连的各种线条、方框与箭头。更糟糕的是,这样的交付物无法让客户更好的理解并导致错误的假设,引发令人费解的讨论。

我们在展示动效概念时无数次观察到观众兴奋的表情,因此我们开始在标志性的交互环节使用基本动效来传递设计意图。

7
图7、早期进行导航概念动画设计有助于改变静态设计沟通困难的现状

即时是使用基本的灰色线框,这些动画也能消除沟通的歧义。它并非完整线框图的替代品,但确是一个能帮助人们在同一个设计上化繁为简的利器。

满足需求并超出期望

亨利.福特最著名的格言很精准了描述了它“如果我问人们他们想要什么,他们会回答更快的马。”

客户经常需要“更快的马”,甚至可能对它的外观和工作方式有一定想法。是否相信它时常引发不必要的复杂性。正如大多数设计师一样,我们经常被要求设计一些无法使人兴奋的功能。然而,完成需求很重要,但完成正确的工作更重要。

这可能被看作对创新概念的呈现有所忌讳,尤其是这些概念都并非需求范围。当对如何改进和简化有了一定想法时,我们尝试创建一个极点视图并让涉众以全新的视角来思考问题。

8
图8、展示超出期望的想法或许能引发创新思考

我们的目标是通过基于依据和数据的理性执行,建立与客户之间的信任。我们不断挑战假设,将周到的想法摆上台面沟通,客户通常尊重并且普遍接受这些事实。

结论

设备、app访问数据的变化导致设计以令人激动的方式进化着。不到两年之前,为笔记本、手机和手表而设计的思想还比较罕见,如今却成为设计必备基础。交互设计的格局不断壮大,对复杂性的管理能力也要求更高。

过去的日子里为诸多客户打造伟大产品的经历如此有趣,如果有幸与你类似,希望这些想法能为你的下一个设计项目带来启发。

原文地址:

https://medium.com/truth-labs/designing-complex-products-8f9289ab26c9#.ijjaoq7po

译者:
阿里巴巴1688事业部/无线UED/舒舟

0 UP=UED&PD,是由用户体验部与网站产品部联合举办的UP夜校,目的是希望UED同学与PD同学能够有一个在工作之外一起交流与学习的平台。目前夜校每两周举办一期,围绕全网产品体验一致性规划思考,Work-平台整体规划,DPL模板落地,优秀作品案例,专家经验分享以及客户原声学习、讨论等课题展开。

《UP夜校》第二期由高级产品专家张建忠带来《1688全网产品体验一致性规划思考》的分享。 1

建忠首先对网站现有的主要问题进行了透彻的分析,结合SAAS类等竞品提出1688网站在体验一致性上的发力点,针对产品体验一致性的目标、实现策略及节奏发表了个人的独到见解,在场的小伙伴收货颇多。

2

针对1688网站现有的体验一致性问题建忠提出了“约束增量,改进存量”的改进策略,对现有的业务结构进行了梳理,希望能从新产品开始发力,逐步优化老产品。 3

用户体验部的望望也就网站体验一致性的问题发表了个人见解:如果我们从新产品开始优化,那如果新产品和老产品混杂在一套系统里面,仍然不是最好的体验。B2B中台DPL即将建成,我们能不能借助DPL,实现整个1688网站后台的整体升级,这样既能敏捷开发,也能更优地实现体验一致性。 4

现场的小伙伴和两位老大就网站一致性展开激烈讨论,相信每一次的思想碰撞都会让1688网站变得更好。 5

你对1688网站体验一致性有什么见解么?欢迎大家一起参与讨论,我们一起来共建。

WUP夜校

UP=UED&PD,W=WE,WUP=我们上夜校。此次由用户体验部与网站产品部联合举办的UP夜校,目的是希望UED同学与PD同学能够有一个在工作之外一起交流与学习的平台。夜校会围绕今年网站的业务重点、难点,例如供应链管理、体验一致性等等展开。

《WUP夜校》第一期———《1688中台DPL分享》,60多位小伙伴来到分享现场。石校长和望校长的精彩开场,嘉宾的干货分享,为我们的《WUP夜校》定下基调。大家满满的收获,也让我们对后续的夜校课程充满期待。

望望、石岩分享 用户体验部与网站产品部的掌门人对今年B2B的形式及发展方向进行了阐述,激励大家在B2B的发展道路上走的更远、更深。

主持现场 帅气主持的开场,为我们介绍WUP的来源及我们后续的计划与目标。爆满的现场体现了UED与PD同学的求知欲。

嘉宾分享三位分享嘉宾分别从中台、技术和业务的角度为大家介绍了DPL的来源、构成、实现及落地。DPL的开展为我们的1688全站体验的统一性提供了非常大的促进作用。

现场积极提问和讨论的同学获得阿牛白膜作为奖品。

1688骨架DPL已成功发布,有兴趣的同学可以回复评论,我们私下聊。

SMILE Design 每一个创新的方案不可复制,虽然我们都非常希望能提供一个简单易行的创新秘方,以保证每个项目都能成功,但是创新的稀缺性,恰恰决定了每一个成功的创新都是方案都是不可复制的,但其中的很多成功创新的案例中的基本规律和方法是可以借鉴的。在错综变化的商业环境中,我们需要快速响应并不断创新,在追求价值创新的极致体验中去打造“我绽放,你微笑”的设计。

几年前,一位家具设计师朋友问了我一个问题:“你认为互联网行业的设计与传统行业的设计有什么区别?”当时我回答他,说:“变化的速度”。 而时至今日,很多传统行业也开始踩着互联网的风,加快了发展的脚步。这让我想到龟兔赛跑的故事:兔子在乌龟爬了很久后醒来了, 开始飞快地跑,很快便把乌龟远远地抛在了脑后。乌龟发现自己的速度是不可能赶上兔子的,它想到一个办法:它利用滑板去加快自己的速度,慢慢便赶上了兔子。

 

虽然这只是一个故事,但事实上,现在很多传统行业已经开始步入了自己的互联网+时代。因为在全球化信息时代,科技正在改变着商业的方方面面,各行各业变化的速度空前,而且仍在加速。万能的淘宝让我们可以随时随地购遍天下物,各式各样的创新服务不断丰满你的口袋。而在许多行业中,一些多年以来的准入门槛也不复存在,现存的企业极易受到竞争和干扰的影响。

寻求差异化竞争

先来看下艾媒咨询在今年1月份发布的2015年中国几类APP的排名情况:

不知道视频类的APP大家的手机上装了几个呢?如果视频内容源都相同的话,我相信基本上大部分人只会装一个体验最好的,足以满足看视频的需求,但由于很多视频内容是被各大网站分别独家买断,以至于在寻找那部分视频内容时,我们不得不到另外的视频应用APP中观看。还有城市出行类APP,从因为服务内容相对集中,主要是:打车、代驾、租车等,同质化比较严重,市场竞争也就更加激烈。另外还有一些旅游酒店、地图、社交、新闻、音乐、等等,这里就不一一列举了,从这些排行榜中,除了看到各领域的APP的TOP排名,我们也发现各行业的市场竞争已经非常激烈,各同类性的需求被多样化地满足、甚至被饱和性的满足。

那么在竞争日趋激烈的商业环境中,我们如何占据一席之地,甚至抢占竞争市场的顶端位置呢?——寻求差异化,呈现不可替代的唯一价值。正如彼得·蒂尔《从0到1》中推崇的 “从无到有”的价值,或者说“道生一”的智慧:通过创新,给人类带来更多可能性,创造新价值,让整个市场蛋糕变得更大。 我们回归设计本源——用户需求,但在竞争激烈的商业环境中,需求是设计的本源,但也只是设计空间中的一个基础功能面。用户需求如何转化成设计,并最终服务于用户的过程中,服务体验的高度决定了市场的份额,谁能赋予更好的体验,便能获得更多的青睐。而当体验走向极致的时候,创新便出现了,创新带来新的体验,也带来抢占全新的市场的机会。

体验价值模型

基于商业环境下的服务设计,我们把体验价值分为三个层次:

1、功能价值:设计是具备功能价值的,即能满足特定的用户需求,这决定设计的目标受众,也就是用户的范围。但在竞争市场中,你如果只是同类功能产品的其中之一,那么你就很可能只是目标用户的备胎而已。

2、体验价值:在满足功能需求的基础上,体验能超出用户的期望。体验价值会影响用户的黏度,因为拥有了良好的体验,你就有机会在众多同类产品中脱颖而出,就有可能成为用户的首选。

3、价值创新:创造全新的体验,同时赋予用户不可替代的新价值,即便是同类性产品,你也就具有了差异化的特性,给人映像深刻的第一次。人的大脑更容易被新的事物吸引,从而被感动,借由第一次的感动及时机,便赢得了抢占市场的先机,成为用户的唯一。有一个经典的例子:在一群马中,跑得最快又持久的应该是其中最优秀的一匹,而汽车的出现则直接颠覆了马车时代的交通工具。

一个用户体验好的设计,必须具体功能和体验价值,而一个创新的设计,就需要同时具备:功能、体验价值和价值创新。因此创新是建立在功能价值和体验价值基础上,创造出可行的、更优的、崭新的解决方案。

如何打造有效创新

了解了不同层次的设计后,我们一定也是希望致力于进行创新设计,提升竞争力,从而带来更大的商业效益。那么如何在设计过程中去打造有效创新呢? 有两个大家熟悉的例子:Airbnb和Uber

Airbnb创立于2007年,当时住在美国旧金山的两位设计师——Brian Chesky与Joe Gebbia,他们正在为付不起房租而困扰。为了赚点外块,他们计划将阁楼再转出租出去。传统的做法是在Craigslist网站发招租帖子。但他们没有这么干,他们不希望自己的信息被淹没在各类招租广告中。而当时城里正好举办一个设计展,周边的旅馆都被订满了。于是他们结合展会,自己动手建一个网站,开始招徕“家庭旅店”的生意,以及供应家庭自制早餐服务的承诺。很快他们获得了3个租客。他们于是将这一做法复制到其他大型集会,七年之后,当年的Aired & Breakfast已经成为了享誉全球的Airbnb,其夜间租住的房间预定量甚至一举超过了酒店巨头希尔顿。截止2015年,Airbnb在全世界190多个国家拥有一亿两千万个房源,平均每晚有40万人住在 Airbnb 提供的房间里。

Uber的创立也很类似:Uber 这个通过整合社会资源,做到随时叫车服务应用的想法,正是创始人兼CEO特拉维斯·卡拉尼克(Travis Kalanick)在雪天打不到车而产生的。

在两个案例中,Airbnb和Uber的创新都是基于对空闲资源的再利用,通过提高闲置资源的利用率从而获得最大收益。同时我们也发现这两个创新的成功案例都是源于困境的一些痛点,当把痛点转变为爽点时,最有效可行、便能给用户带来幸福感的创新便诞生了。

类似的案例有很多,我们也尝试去梳理出一些规律:有效的创新大都是诞生于困境之中,当这些困境受到一些特定的束缚条件,便会把矛盾激化,而为了把矛盾变有爱,把束缚变成效,最佳的创新方案便诞生了。而这种矛盾的转化过程往往没有直达的捷径和固定的套路,必须需要经历了一番洞察、巧思、和速行,这个过程便也是最佳创新的诞生之源。 同时我们也会发现从困境(Strait)、束缚(Manacle)到有爱(Lovely)、成效(Effective)的过程需要:洞见(Insight)/巧思(Ingenious)/速行(Implement)。

而这条从SM-I-LE另辟蹊径的道路刚好构成了一个SMILE(微笑),因此我称之为SMILE Design(微笑设计)。另外也希望借由Smile(微笑)一词,把用户目标的预期更显象化,每一个创新方案的提出,一定是对现存方式或服务提出更好、更有效的新的解决方案,以消除用户的痛点,把用户从原有的困难与束缚中解救出来,除此之外还应该以创造非常有爱的方式以激发用户内心的愉悦,最终能带给用户微笑的极致体验。

而另外,对于设计者的心态而言,我们亦是心怀美好的憧憬:竭尽全力的极致,只为博得用户会心微笑。而如果是能带来长久、持续的微笑效应,还需要打造一个共创的循环,不断进行迭代和升级。

创新三维

在SMILE Design 中,Insight(洞见)-Ingenious(巧思)-Implement(速行),是创新的过程,也是正是Innovation(创新)实践过程中的三大核心要素,我们可以称之为“创新三维”。

洞见(Insight)

洞见的过程其实就是寻找灵感来源的过程,发现困境和束缚的矛盾点,便找到了问题,接着通过还原用户场景去对问题进行剖析:

1) 用户是谁(Who)、在什么样的场景(Where)、遇到什么问题(How);究其本质根源是什么?

2) 另外还需要判断这本质根源是否具有共性,而非某一用户个案需求。

3) 如果是是普遍用户的共性痛点,那我们就可以依次来确认设计目标。

举个例子:我们在做用户调研的时候,有用户反馈:“下单流程不方便,希望能够增加导入收货地址的功能,可以快速填写不同收获地址进行批量下单。”如果不管用户的本质需求直接增加此功能,其实会觉得是一个比较莫名其妙的功能。于是我们还原该用户场景时,发现:这是一个有代销行为的B类买家,在进行代销下单的时候,需要直接填写下游终端消费者的收获信息,而这类订单经常需要对同一个商品填写多个不同收获地址,需要不断重复填写各个收获信息分别下单,因此下单流程时收获信息的填写非常繁琐。于是基于这个现象我们就去进行数据检测,发现在网站的交易买家中,有接近30%(此数据为一个假设数据)的B类买家有代销行为,那么我们可以判断这是有普遍共性的痛点,就有基于问题设定一个目标:优化代销交易流程。

所以,总结一下,洞见需要去做一个有心者,善于发现问题和矛盾点,因为问题和矛盾背后必然隐藏着机会点,抓准机会的三个关键点就是:

1) 从现象到本质

2) 从个性到共性

3) 从问题到目标

 

巧思(Ingenious)

有了目标之后,就是需要基于目标,制定策略、并设计解决方案。如果设计的过程就如对事物的信息进行重新组合编排,那么创新就是创造新的排列组合方式,因此思考的过程并非是毫无头绪的随机发散,而时可以有基本规律的策略方式,甚至可以用最基础的几种数学方式来解释:

1)加法策略:即一专多能,也就是给产品、服务中的某个部分分配一个附加的任务或功能,让它在发挥原本作用的前提下完成新的任务。

2)减法策略:包括简化流程、去掉一些步骤、或则减掉一个功能,也许更有另一番更好的体验,使得“更少”变成“更多” 。

3)乘法策略:可以先明确产品、服务或流程的组成部分,通过选择某个基本部分加以复制,从而将其改造成 “更有新意”的部分。

4)除法策略:就是化整为散,通过分解以致胜。很多时候我们容易把某产品或服务看成一个整体,认为它们就应该以我们熟悉的样子而存在。当打破这种固有结构,把功能分解成多个部分,然后将分解后的部分重新组合,往往就会出现惊喜。

5)变量共创:通过梳理出个性化的规律,给予属性巧妙依存的策略,让原本不相关的属性,以一种有意义的方式关联,选取产品或流程两个原本不相关的属性,让一个变量随着另一个变量的变化而变化,就会获得千人千面的结果。这其实也就是让用户参与共创的,从而获得各种可能性的新品,让用户实时体验未知的新服务。

继续刚才的例子如果以“优化代销订单流程”为目标,如何通过五度发散策略,进行创新设计发散。 首先还原用户的大场景,以淘宝买家在1688进行代销下单的行为流程进行分析:基于商家在货品在下游消费者买家的销售情况来到1688网站中找到合作供应商中并进行下单行为。

1) 分解:我们对代销下单的操作流程进行分析,就下单行为还可以拆分成这么几个行动点:找到目标商家、进入旺铺、找到订单制定商品、选择商品规格数量、加入购物车、确认订单信息、填写收货信息、付款下单等。

2) 加法:如用户说的在增加收获信息时候,增加导入收获地址的功能/或者是整个收获信息的导入,若用户同时也是淘宝卖家,直接获取其在淘宝的下游买家的收货信息;

3) 复用:可匹配导入收获信息的功能同样可以服用到:找到目标商家、进入旺铺、找到订单制定商品、选择商品规格数量、加入购物车这几个流程中。

4) 减法:于是我们大胆假设,这几个流程可以合并删除,完全由系统自动匹配完成即可,那么商家在进行代销下单时只需要做确认信息和付款的操作即可。

5) 变量:同样的此种方式适用于淘宝平台,基于商家自身的行为和偏好为其智能匹配他的C类的电商平台,并依据规则设立同样的交易方式即可。

同样的加法策略、减法策略、乘法策略、除法策略、变量共创等发散方式可以适用于其他创新设计以及实践案例的策略发散中。如果

速行(Implement)

经过多种策略发散而得到多种方案后,还是需要基于自己的现状进行整合汇聚,对各方案进行筛选取舍,从而作出最佳选择进行实践落地,因为能够真正实践落地的设计才是完整的,也才能有机会论证设计的结果,最终的用户使用反馈才是设计的最终评判者。因此把实践的过程称之为速行,包含了约束和速度两个部分,或者也可以称之为束行和速行。

束行:就是基于市场环境、技术能力/自身能力优势、各方案的实现成本、项目资源情况、时间计划、及预计可达到的商业效益,进行综合评估去进行实践方案的选择,可以说束行也就是环境的约束。

速行:也就是实践的效率,天下武功唯快不破,行动的效率和时间很重要,这往往也觉得了最终谁是优先出现在用户面前,可以获得的用户的第一次新体验。 一切发想止于实践,一切成功也将源于实践,在这条创新之路上,实践是至关重要的环节。

 

虽然我们都非常希望能提供一个简单易行的创新秘方,以保证每个项目都能成功,但是创新的稀缺性,恰恰决定了每一个成功的创新方案都是不可复制的,但其中的基本规律和方法是可以借鉴的。因此SMLIE Design中:从洞见(Insight)-巧思(Ingenious)-速行(Implement)的创新实践过程的正是构成了Innovation(创新)最核心要素。

但关于创新,还想说几点:

1、有效、成功的创新是稀缺的:创新的结果一定是惊喜的,但通过惊喜的过程却往往比想象中的艰难,创新的过程中:“为了找到一个王子,我们可能需要亲为无数个青蛙。”

2、一些创新的灵感是偶然发生的,或者需要一些天时地利人和的因素,但通过一些规律的练习,我们可以提高偶然的发生概率。

3、创新有时候是孤独的,因为创新是超前的,需要点时间,但不要灰心,请耐心等待时机的到来。同时尽量给自己的创新以保护,比如申请专利。

回顾

最后来回顾下整体的内容,也希望大家带走三张图:

1、体验价值模型:基于商业环境下的服务设计,我们把体验价值模型

2、在打造创新设计的过程中,我们亦是心怀为用户创造幸福感的服务体验为目标,发现各场景的触痛点,并转化为能让用户尖叫的愉悦体验,这个从SM-I-LE另辟蹊径的创新之路,称之为SMILE Design。同时也需要通过不断迭代与升级,能带来长久、持续的共创效应。

3、在SMILE Design 中,Insight(洞见)-Ingenious(巧思)-Implement(速行),是创新的过程,也是正是Innovation(创新)实践过程中的三大核心要素——“创新三维”。

两点之间不仅仅只有直线,有时候拐个弯,你会发现原来微笑最美。微笑送给用户也送给每一个设计师,因为快乐的设计师才能创造令人愉悦的服务。

原文链接地址:http://heyuchan.com/?p=864

【译者注】Adobe近日发布Adobe Experience Design CC(原Adobe Project Comet)公测版,新兴的原型工具Silver被InVision收购,业界类似事件的发生再次掀起了原型工具讨论的热潮。尽管当前阿里集团各团队的研发流程不尽相同,各有千秋,但原型对团队的帮助却越来越明显。 译者上家公司的Scrum团队就是在Sprint中以交流、草图和原型为主,文档输出逐渐弱化,可惜5年前的设计工具还没有发展到这么成熟的阶段,很多创意只能依靠静态的paper prototype沟通。这是设计师最好的时代,原型设计再次成为设计师必备技能,那么应该以何种心态和思维方式来对待原型设计呢?相信这篇文章可以给部分设计师带来启发。

本文内容经过即将出版的新书《Sprint:搞定难题验证想法5日秘诀》授权和许可改编在medium发表。

很荣幸能够在第一时间收到我的三位Google风投合作伙伴Jake Knapp, John Zeratsky和Braden Kowitz编写的新书《Sprint:搞定难题验证想法5日秘诀》。几年之前,Jake就引入了敏捷开发中Sprint的概念,它是通过设计、原型制作和同客户验证创意来快速回答关键问题的流程。从某种程度来说,它是业务策略、创新、行为科学、设计思维等内容的合集,是一种能够适用于任何团队实战检验的流程。它被广泛运用到他们在GV所投资公司的工作流程中,例如Slack,Blue Bottle Coffee和Foundation Medicine。如今,这些方法被编写成一本书,这样团队可以在任何地方开始尝试自己的Sprint。

一个Sprint发生在短短的五天内。周一,分解需要解决的问题。周二,在纸上用草图描绘有竞争力的解决方案。周三,决定如何将创意转化为可检验的假设。周四,推敲出一个原型。周五,与真实用户进行测试检验。

Jake邀请我从书中选择一个章节发布简要摘录,我选择了自己最喜欢的一章内容:原型设计。Sprint提供了良好机会,在你正式开始打造MVP(敏捷开发概念,最小价值产品,被广泛用到精益设计流程中)之前,就能从这些时刻与原型保持互动的客户身上学习。现在你就可以随处预订本书,来了解相关内容。

0*VmBiscec4cJRiteZ

原型设计思维

一个长着方下巴的西部牛仔站在酒吧门外,他调整帽子后瞥了一眼满是尘土的街道,发现五个黑西装的男人骑在马上,手中紧拽着散弹枪。远处的街上,商店周围有村民在交谈。尘土飞扬如旋风,无人说话,但大家都清楚:镇上有麻烦了。

如果看过一部老的西部电影,你可能非常熟悉这一幕。大量的情景剧中,好人戴白色帽子,坏人则是黑色。小镇看起来是影片中最真实的部分:隔板建筑物、木板通道与大门随风摇曳的酒吧。

当然,这些复古西式电影场景从来不是走完全写实的路线。有时候,导演找到一个看起来不错的拍摄地,比如废弃的鬼城或者风景如画的意大利村庄。但大多数电影都在好莱坞的某套外景中拍摄。牛仔身后的酒吧?仅仅是一个虚幻场景而已,外墙之后什么都没有。

这对观众来说没有什么区别。当看到小镇的一段时间里,我们完全沉迷在故事之中。无论是虚幻场景或者鬼城,沉浸的想象力发挥了作用,让一切看起来似乎那么真实。

在一个Sprint中,周四即虚幻场景。当你对一个正在跟进的问题获得灵感或解决方案时,不需要花费成年累月来构建它。你能够在一天之内就做出原型,让一切显得那么真实,正如复古西部电影中的虚幻场景。到了周五,你的客户就像电影观众一样,会忘记周遭一切虚拟的场景而专注于体验产品。

虚幻场景比你想象中更容易搭造。比如你正在进行一个需要100天完成的项目,能做到90%的程度已经足够逼真,从而方便进行测试。简答的数学判断是,你需要花费90天来达到90%的程度,这样你得在3个月左右之后才可以测试。不过,要是仅仅做一个虚幻场景,便能在一天之后就达到90%的程度。

“哇,伙计!”你可能认为这有点扯。正如周四早晨时,除了白板上的涂鸦与纸上的草图你还未做任何事情,我们能指望在一天内制作出真实的原型吗?这是否不可能呢?确实不可能,除非你已经在Sprint前三天中完成了最困难部分的工作。使用一个故事板来移除所有产品功能范围的猜测,画出解决方案的草图,配上文字和细节说明。这时候你已经准备就绪,能够利用合适的技能来打造原型了。

没错,制作一个更完美的原型需要更长时间,但这样做的话只对学习进度有所延缓。如果产品设计方向无误,这些都无所谓。但面对的现实往往是并非每个创意都是对的,无论你是冒险尝试一个大胆想法,或者仅仅在无法确信时寄望于及早弄清方向。在错误的事情上浪费时间无疑最让人心烦,也许最大的问题是,你越花费精力投入的东西,不论是原型或真实产品,你越无法承受测试后的糟糕结果。仅一天的投入,你还能接受反馈及时调整。要是三个月的投入,或许你在发现错误后已经觉得回头太难。

0*TDee7qOeG9q7wkcH

0*a6GJO9VXfxT7EVTd

0*U-6d1QR3c3HEfarv

起初,你处在以上图表的甜蜜点,仍未确信你的想法是否靠谱,万一测试结果不理想,你会很容易调整或者抛弃想法。如果你相信虚幻场景的力量,很容易像图中的弧线一样在短时间内达到90%程度的效果。不需要管道,也没有布线,也没有结构工程,只要搭建一个虚幻场景即可。

或许做一个虚幻场景让你和团队都感觉心里没底,为了及早测试想法,你需要在观念上做临时改变:从完美到恰好为止,从长期品质到暂时模拟。我们称之为原型设计思维,它由四个简单原则组成。

1、万物皆可原型

这么说听起来有点老套,但确实如此,请务必相信。如果在进入周四时怀着乐观的心态,保持总有方法制作原型并测试产品的信念,你就能搞定。在下一章节中,我们会聊聊制作硬件、软件和设备原型的具体方法,它们可能对你有帮助,可能需要你充分利用各类资源来自己搞定。只要保持乐观并且秉承原型设计思维,几乎总有办法。

2、原型阅后即焚

不要试图制作任何不愿意抛弃的原型。切记:这个点子可能不靠谱。所以不要让自己容易沉溺在花费数日准备原型的想法中,减少对原型上额外工作回报的期待。与此同时,迷恋上可能会被证明失败的方案,你会更加失落。

3、原型点到即止

原型存在的意义即验证假设,所以请保持它聚焦在目标上。我们不需要一个完整功能的产品原型,只需要被测试的与用户互动的部分看起来像真的一样。

4、原型必须真实

为了获得周五检验结果的准确性,不能要求客户凭想象去完成测试。你得展示真实的原型,如果这样,客户的反应将是真实的。

怎样才算真实?周五测试原型时,你希望客户的反应是自然真实的。要是仅仅出示虚幻的原型,比如手绘的纸上原型或者简单的线框设计,是没法奏效的。

一旦客户无法完全沉浸在真实场景中,他们就会自动切换到反馈模式。这种模式下的客户会努力表现的更有帮助并绞尽脑汁的提供建议。在周五测试时,客户的本能反应更具价值,而反馈的意义就要大打折扣。

反应和反馈的区别很重要。人们往往希望通过原型来验证客户的本能反应,在一天的日程之内越真实越好。我的合作伙伴Daniel Burka说过,理想原型应该拥有“金发女孩的品质”。要是原型质量太低,人们不会相信这是真实产品。要是原型质量太高,会耗费太多精力以致于无法按时完工。原型需要“金发女孩的品质”,不要太高,也不算太低,恰到好处即可。

0*S055Tip5b7H2ra9X

诚然,“金发女孩品质”对不同的产品要求也不同。该书中收录了5个团队的详细案例,从iPad应用到医学诊所的原型都有。当你阅读他们的故事时,你将了解每个团队如何确保原型达到“金发女孩的品质”,并且学习到他们是如何将原型设计思维融入独特的挑战之中。

原文地址:
https://medium.com/galleys/the-prototype-mindset-396c979a356f#.2puoc7uep

译者:

阿里巴巴1688事业部/无线交互/舒舟

【译者注】在移动设备上进行可用性测试是大多用户体验设计团队既关注又头疼的部分,市面上的各种专业测试工具各有利弊,如何抉择是一道难题。性能好、对用户干扰少、录制质量高、能记录用户面部表情和手部操作、价格便宜等要素成为大家在选择工具与方法时重点关心的内容。本文作者Colman Walsh提供了一种讨巧的方式,能较好的解决测试中大部分问题。尽管不完美(无法记录用户与移动设备屏幕互动),依旧值得一试,有精力的同学可以结合Lookback(https://lookback.io/),或许能捣鼓出一套更完善的解决方案来。

移动端令人难以置信的增长趋势和移动设备的全面普及,让用户体验设计师的工作更具挑战性与趣味性。这意味着移动应用与移动站点的用户测试成为用户体验工具中的重要一环。

与桌面环境有所区别的是,移动端可用性测试缺少像Silverback或Camtasia这样开箱即用的软件记录工具。

即使不开发一款移动应用,你的网站大部分流量也可能来自于移动设备。执行常规的移动可用性测试,便成为衡量该渠道是否正常工作的唯一途径。

此时需要一定的动手能力,经过多年实验,我们认为已经找到了最理想的手段。如果你想简单测试iPhone或Android的体验,这套方法不仅简单,性价比高,而且效果出色。

旧法:线缆加胶带

过去我们使用“雪橇”将智能手机与摄像头固定在某个位置,从而方便我们记录用户在屏幕上的行为。(要制作一个雪橇,我们在五金店买了一些丙烯酸通过烤面包机将其弯曲成型,非常有趣)

我们将摄像头用胶带粘贴在雪橇上,并且把手机用胶带和尼龙搭扣装好。回头看来,这种做法还是很简陋的。用户不得不经常用两只手托稳手机以保持雪橇稳定,当然也谈不上自然体验。

Mobile-testing-old-way-500-opt
图1. 用户正在使用绑着摄像头与雪橇的手机

从技术上说它是不可靠的。由于使用了一台笔记本的双摄像头(雪橇上的摄像头和笔记本内置摄像头),我们不得不同时开启两个摄像应用,这导致了一定性能问题。要么在设置中造成内存紧张,要么在测试中摄像头熄灭,往往两者兼而有之。

还有其它一系列问题,比如屏幕炫光和摄像头失焦。总得说来,设置测试环境非常耗时,而且性能不可靠,测试环境并非最优。尤其是客户在身边时,压力尤其大,但这也是那时我们能做到最好的情况。

新招(当然更好):无线

理想情况下,用户应该无法看到测试环境与软件。我们希望创造尽可能自然的测试环境,只有用户与智能手机,没有线缆、雪橇、摄像头或胶带等干扰。

对于用户体验团队来说,在用户测试中不断学习和洞察才是关键。我们不希望一直为设置测试环境或者摄像头熄灭而费心。

我希望通过介绍一个简单的设置来达成这些目标,它帮助用户体验团队专注于真正重要的事情,让用户专注于他们的手机。因为它非常可靠,所以我们经常在培训课程中面对客户使用。

接下来重点谈智能手机的可用性测试,我们使用一台MacBook作为记录设备。当然,这种方法也适用于Windows PC。

Mobile-testing-wireless-500-opt
图2. 无线测试的方式更加自然

【第一步:安装软件】

产生神奇效果的关键在于Apple的AirPlay无线技术,该软件能让你把流媒体(音乐、视频)通过无线的方式传送到Apple TV上。

因此,首先你需要购买并安装一个叫做Reflector(大概15刀)的软件,它能将笔记本变成一个AirPlay信号接收器,像Apple TV一样。这样一来,我们能够把用户智能手机屏幕以镜像的方式投射到笔记本电脑上,用户屏幕上的内容将在笔记本屏幕上同步出现。

现在我们可以不需要额外摄像头来录制用户屏幕了,只需要在笔记本电脑上通过屏幕录制软件进行录制即可。强烈推荐ScreenFlow(大概99刀),不但可靠性高,并且在测试环节中能通过笔记本电脑摄像头捕获用户面部内容,这是任何可用性测试的重要组成部分。

【第二步:设置显示器】

这一步是可选的。因为我倾向于使用外接显示器,使主持人和记录员不必同时瞥过用户肩膀来观察行为。这样也能将用户干扰降至最低,用户不会看见面前笔记本电脑屏幕上的巨大手机屏幕投射,它会出现在外接显示器上。

所以,为你的MacBook连上外部显示器,如果外接显示器与笔记本屏幕显示一致内容,意味着这不是我们希望设置的镜像模式。打开“系统偏好-显示”,将“镜像显示”去掉勾选。

Mac-system-preferences-500-opt
图3. Mac的正确显示设置

【第三步:设置Reflector】

要将智能手机内容发送到笔记本电脑屏幕上,只需打开Reflector,在笔记本电脑屏幕左上角的工具栏上可以看到它的图标。

Mac-reflector-toolbar-500-opt
图4. Reflector打开后你将看到的图标

【第四步:对智能手机进行镜像】

现在就是见证奇迹的时刻!如果你使用的是iPhone,从屏幕底部上划,启动AirPlay。然后从列表中选择你的MacBook,再打开镜像按钮。

iOS-mirroring-setup-500-opt
图5. 在你的iPhone上打开镜像

你的iPhone应该出现在外接显示器的中间,是不是很神奇!(要是iPhone出现在MacBook屏幕中,只要把它拖拽到外接显示器上即可)

使用Android 4.4.2或更高版本设备的,从屏幕顶部向下划动进入设置,选择“投射屏幕”选项,然后选择你的MacBook。

注意:你的智能手机和MacBook必须保持在同一Wi-Fi网络中,要是出现问题,这是故障排除首先进行的事情。

【第五步:设置ScreenFlow】

开始录制前,打开ScreenFlow。初始设置对话框弹出,你需要做如下设置:

ScreenFlow-recording-setup-500-opt
图6. 设置ScreenFlow

1、“录制桌面来源”

选中并确保从下拉菜单中选择你的外接显示器。(参照示例中的2270W)

2、“录制视频来源”

选中并确保选择默认选项“FaceTime高清摄像头(内置)”。

3、“录制音频来源”

选中并选择“内置麦克风”。

【第六步】开始录制测试内容

让用户处于MacBook正前方,这样你能在ScreenFlow的预览中看到他们的面部。然后按下红色录制按钮,搞定,现在已经开始录制了。

当你与记录员在外接显示器上观察用户行为时,用户正端坐在空白的笔记本电脑前,像往常一样使用手机,没有线缆、胶带、摄像头或者其它干扰。

在以下截图中,我在iPhone上把玩Spotify。你能看到,在录制手机屏幕的同时,ScreenFlow提供了画中画窗口来显示用户面部表情,完美的可用性测试。

screenshot-of-recording-500-opt
图7. ScreenFlow输出录制内容的截图

当然,这种方式依旧不能展示用户的手指与设备互动的过程。但总体说来,它的优点还是很多(见结论中的列表),算是一个无可非议的好方法。

【设置总览】

需要明确的是,让我们回顾下设置的全貌。用户应该坐在MacBook面前,使用自己的手机,主持人和记录员应该坐在附近,通过外部显示器观察用户行为。

user-testing-overview-setup-500-opt
图8. 测试中房间与屏幕等设施的安放方式

使外接显示器正面远离用户视线,否则大屏幕上的手机屏幕影像会干扰用户的注意力。


结论

我们介绍的这种方法有诸多优点值得一试:

1、简单

首次将所有环节调试完毕之后,接下来每次只需要花费5分钟左右来设置。

2、可靠

它并不完美,但软件崩溃和设置问题出现的几率很低。然而,雪橇+摄像头的方案出现问题则是意料之中的事。

3、性价比高

假如你使用MacBook,整个解决方案只需花费不到200刀。(与之对应,专业高端的可用性测试软件Morae售价2000刀)

4、专业

高质量并专业的输出,看上去不像是黑客技术。我们把录制的内容与参与的客户、高管们分享,效果很好。

5、灵活

这种方案适用于主流平台:PC、Mac、Android和iOS。

6、方便

因为不需要任何胶带或者尼龙搭扣,测试者还能使用自己的手机,这让你的测试更加自然有效。

原文地址:
https://www.smashingmagazine.com/2015/12/simple-and-painless-mobile-user-testing/

译者:

阿里巴巴1688事业部/无线交互/舒舟

20161.001 如果说我们做的业务最终输出的是一首歌,那我们设计师就是歌曲的编曲者。产品和运营进行歌曲本身的创作,我们设计师在了解了歌曲主题、听众是谁之后,选择乐器进行编配,最终输出一个编曲DEMO,由工程师进行录音、均衡和输出。我们的设计过程应该如音乐创作一般美好~

一、背景:

见网友、见笔友已经成了一种见光死的另一种说法,在线上聊天时浪漫深情忧郁的才子,见面时成了这样:满脸胡渣的黑脸大叔,在一条垃圾随处见的小巷子里请你吃烤串:
20161.003
这是因为触点发生了变化。 在线上聊天时用户触点是聊天工具,网友设计的是语言艺术,他的设计目标是把自己打造成深情忧郁男子,你们之间的交互也仅限于聊天工具提供的功能如文字、表情等;但见面时,触点不是数字设备,而是真实的人、真实的饭堂,触点发生变化,但设计方案却没有因为触点的变化去结合设计目标“忧郁深情男子”对触点界面进行调整。这就是一种一致性体验上的断裂。 除此之外,还有体验流程的断裂或不可用、不易用,很多都是由于对用户的连续行为、行为地点、触点考虑不全导致的,随着O2O业务的发展这些问题随处可见。
左:比如这个支付成功页,单独看是没有一点问题的。但是当餐厅服务员告诉我要把这个页面展示给他,并且他咪着眼睛抄写订单编号的时候,我和服务员的体验都不好。一来没有引导我需要打开这个页面,二来服务员弯下腰来靠近我的手机同时拿纸笔记录很麻烦。解决方案有很多,就不说了。
右:这个天花板上的旗帜,里面的二维码非常小,根本无法扫码成功。这也是典型的没有考虑到用户行为场景和触点导致的体验断裂。
20161.004 用户行为就像音乐一样,是连续的,以往互联网设计只针对一类触点比如PC端的某套系统、无线端的某个APP,而通过制定DPL,也可以将跨实体触点的数字触点保持在体验上的连续和一致性。但O2O中随着用户行为在不同场景的切换,单独对一类触点进行分析去设计是不完整甚至是割裂的。

二、《O2O用户体验五线谱》方法:

1.方法论概念
早在20世纪九十年代初,Richard Buchanan教授就清晰地把交互设计的对象定义为行为,“creating and supporting human activities through the mediating influence of products”(通过产品的媒介作用来创造和支持人的行为)。【《交互设计:从物理逻辑到行为逻辑》–辛向阳】在这里的媒介(本文称为触点),可以是软硬件,也可能是身体的某个部位,甚至可能是外在的环境媒介。产品界面仅是媒介的一种,O2O场景下的触点会有更多真实实体、人物等。
所以在这里介绍O2O用户体验五线谱,我们使用线的形式,表现出用户在我们设定的业务场景中连续的行为,像音乐一样连续不间断,并且线谱的形式扩展性较好,增加一条线即可增加一个维度。在这个方法里我们使用5条线,包括用户行为、地点、触点、设计策略、设计方案,其中用户行为、地点、触点是即定的,也就是在进行设计前已确定好内容的维度,属于产品与运营层面,同时随着行为的变化,地点与触点发生变化,设计策略与设计方案需要结合地点与触点特性进行推导;而在整个过程中常量维度为用户、设计目标(设计目标推导方法建议使用《五导家——设计师的Think-flow》–李龙),就像一首曲子事先的定调与定速度一样,设计策略与方案需要遵循整体目标为特定用户打造。
所以五线谱的方法核心是,在多触点任务过程中,以用户连续行为为主线,随着行为与地点、触点的变化,围绕设计目标,结合地点、触点特性进行设计,保证用户获得符合场景的体验。 20161.005

纵向在针对单个用户行为进行设计时首先需要有以下几点考虑:
-考虑用户行为,是否为主动行为,主动行为是指用户主动选择的,是经过思考,选项很多,需要我们进行激励才会转化到的行为。业务层面并没有在用户的主动行为上做强激励,就需要我们用设计的力量引导用户的主动行为,我称之为转化关键点(标红星),也就是要唤起用户何种感受时会转化。被动行为是指不需激励自然会产生的一步,比如我在餐厅点完菜了,下一步自然是吃饭。再考虑主动行为前是否有合力行为,就是连续的用户行为共同唤起用户的转化关键点,在这部分行为中要反复关注到唤起用户转化的感受。
-分析地点特性,用户行为的环境有什么特点,会对用户行为有什么影响,如何辅助设计
-分析触点特性,O2O业务中,触点会以实体、数字两种形式出现,要清楚这些触点都有怎样的特性,如何辅助设计。

然后进行设计的推导时,可以用以下的方式去辅助自己思考:
-用户在(什么特性)的地方
-利用有(什么特性)的触点
-做(什么动作、交互)的用户行为
-为让用户体验达到(怎样)的设计目标
-考虑到(什么用户感受、激励)的转化关键点
-在这1步或多步,有(怎样)的设计策略。设计策略是围绕整体目标针对这这1步或多步行为的设计方向,到这一步为止我们在这个场景的设计思考已经比较周全了。
-最后是设计方案的推导,就是针对具体设计的对象产生具体方案,可以思考,为实现(怎样)的设计策略,利用(哪个/些具体的)地点或场景的特性,利用(哪个/些具体的)的触点特性。
推导.001.jpeg.001

2.方法论具体应用
我们下面就以一个通俗的例子来诠释这种方法。
有个男孩为了追求自己心仪的女孩,希望通过做亲自为她做饭的形式提升女孩对她的好感度,在这里业务方就是男孩,用户就是女孩。 20161.007 根据业务诉求,为了让我心仪的女生感觉我重视她,为她亲自做一顿晚餐,使我们有更多时间相处并且她对我产生好感,和用户诉求,一位文艺、日系的单纯女生,对浪漫恋情还有向往,希望身边的人与出入场所都有文艺气质,内心的声音是成为苍井优一般的文艺女神。我们推导出了这次的设计目标是“让她感觉我重视她、相处时感到舒适,将自己打造成日系无公害暖男,晚餐整体(菜品、环境)的文艺浪漫气息”。
然后我们梳理出在“邀请女孩到家就餐”的过程中,她的行为是“收到邀请—接受邀请—到访家中—等待晚餐—共享晚餐…”,在接受邀请的一步属于主动行为,我们先将其标红星,很遗憾在业务层面男孩子没有能力将女孩的偶像请来共进晚餐,我们只能通过设计的力量去加强主动行为的转化;各个行为对应的地点与触点,也就是前期在产品运营层面(即男孩)已确定的用户行为触点分别为“微信—家的玄关—客厅及相关配套—晚餐及相关配套—微信”,过程中触点有四种变化,这样的情况我们就可以用“五线谱”的方法对各个触点进行设计推导。地点的维度帮助我们了解用户触点所在场景,辅助我们进行设计方案的发散。这里我们把两个在过程中的常量,用户与设计目标作为指导,不同触点的设计关键点的考虑,都围绕着用户与设计目标展开,以保证整体设计方向。
20161.009
下一步我们就可以针对每一步用户行为,结合地点与触点特性进行设计策略与方案的发散。以“收到邀请—接受邀请”这两个行为为例。地点与触点均一样,我们使用同一套设计策略(在地点与触点类型相同或性质类似的连续行为下可使用同一套设计策略)。首先分析行为,接受邀请是主动行为,由于男孩在业务层面没有进行强化,我们需要用设计唤起女孩“男生无害,晚餐有趣”的感受,能激励她接受邀请;然后分析行为地点,使用微信接受邀请可以在任何地点,为显得“男生无害”,我们可以进行地点的假设,是在一个“在有安全感的、舒适的地方”女孩更容易接受邀请;再进行触点的分析,“微信自带各种沟通辅助工具如表情包、照片、视频、位置、分享等”。

所以辅助设计推导的思考过程为:
-女孩在(有安全感、舒适)的地方
-利用(微信以及其自带沟通辅助工具如表情包、照片、视频、位置、分享等)的触点
-做(收到邀请与接受邀请)的用户行为
-为让用户体验达到(让她感觉我重视她、我是日系无公害暖男、相处感到舒适)的目标
-考虑到(让她感到我无害、约会有趣)的转化关键点

推导出的设计策略为: 选择用户有安全感与舒适的地点与时间,利用微信中可体现无害、温暖的视觉元素,使用日系风格照片、分享等工具体现对约会重视程度以及展示个人魅力。

设计方案是针对具体对象进行具体设计,即为:
-在晚上8点至10点间发起聊天(即假设女孩在家);
-聊天语气温柔,使用兔斯基表情;
-向对方展示自己曾经的厨艺作品使用日系风格滤镜;
-发送用MAKA制作的精美邀请函;
-对方接受邀请后表示开心;
-用位置发送家庭地址,给女孩出行建议;
-提示她早点休息,给她分享一首安静的轻音乐;
20161.010

女孩到访男孩家后的有连续行为“到达家中—等待晚餐—共享晚餐—离开”,触点都是实体,地点都是在男孩家中,因此我们可使用一套设计策略,这些连续行为下女孩的感受,会合力影响到下一个用户行为“女孩再次收到邀请与接受”,转化的关键点在于女孩在整个合力行为的过程中感到“放松、感动”。因此在这个过程的设计中需要反复关注到女孩这种感受。所以结合设计目标、地点、触点特性,在这几步用户行为,推导的设计策略就是,“在女孩的触点,视觉、听觉、触觉、嗅觉等多方面针对女孩日系的喜好进行设计,让女孩感受到放松与舒适,同时在女孩触点表现出家庭型文艺暖男气息”,再进一步推导的设计方案,例如在“等待晚餐”时,地点在客厅,触点是“沙发、茶具、水果、糖果等招待相关”,设计方案则是“沙发与茶几整洁干净,准备亚麻质感靠垫;准备日系茶具、果盘,水果摆放精美;为她泡一杯日式抹茶;茶几错落放几本文艺书,其中一本为正读状态;播放小野丽莎音乐;提示女孩可使用的服务比如电视、IPAD等”
201611.001
20161.001

三、回顾几个重要的点:

1.五线谱设计方法,适用于多触点任务的业务。

2.五线谱是以用户连续行为为主线,随着行为与地点、触点的变化,围绕设计目标,结合地点、触点特性进行设计,保证用户获得符合场景的体验。

3.在做多触点设计时多思考:用户在做(什么动作、交互)的行为时,在(什么特性)的地方,可利用(哪个/些具体的)地点或场景的特性;使用有(什么特性)的触点,可利用(哪个/些具体的)的触点特性;为让用户体验达到(怎样)的设计目标;考虑到(什么用户感受、激励…)的转化关键点。

【译者注】Mobile First(移动优先)大概是移动设计师听到最多的设计理念之一,2011年Luke Wroblewski大神提出它时,打破了原来“先完成web设计再移植移动设计”的常规方式,为移动设计注入了一针强心剂,一时各大企业和团队纷纷投入,推动了移动设计的快速发展。时过境迁,移动优先的理念虽然没错,但如今部分企业表现的有些矫枉过正,盲目投入移动端而忽视了用户使用最频繁的大屏终端,实则割裂了原本流畅的体验流程。本文作者提出了“最重要的是屏幕,而不是设备”的观点,表达了对移动优先设计理念的看法及忧虑,或许能给大家带来不同的思路。

数年来,人们被“移动优先”和“只做移动”的理念安利了一次又一次。在iPhone颠覆行业之前,我们已经开始以“移动优先”而不是“web优先”的理念来研发软件了。与“移动优先”相关的书籍、课程和会议大行其道。既然说移动化是未来的趋势,那为何几乎所有移动端驱动的企业都在更大的屏幕上开发web应用?专门为大屏打造web应用的案例有:

1*j_lSZYo5otXmNSAKB2qWDQ

2

3

4

即使聊天类应用也有适合大屏的web版本,例如Facebook Messenger与WhatsApp。

屏幕而非设备

无论何种情境应该适合何种尺寸的屏幕,如今变化的节奏依旧很快。不久之前,人们还站在手机派和平板派那边,嘲笑大屏手机派。时至今日,新设备的最流行款变成了大屏手机(尽管如今我们不再这样称呼),而平板的销量则停滞不前。最佳屏幕尺寸为多少依然是一个变数,更何况手腕上的小屏幕尺寸可能会在12-24个月内再度发生变化。

该怎样看待它?我们一直都使用错误的参考框架来提及“移动”。多年来我始终主张移动的不是设备,而是消费与生成信息的渠道。对我来说,迷恋特定设备不是一个好办法,因为设备变化太频繁;迷恋iOS和Android操作系统也不是一个好办法,因为它们都非常重要(而不得不重视);迷恋手机和平板依旧不是一个好办法,因为它们已经融和成为一个具备更大屏幕的便携式移动设备分类,并且一直在发展。信息藉由屏幕展示,而与设备无关,这才是关键。

颇具讽刺意味的是产品研发时,我们却只能依赖尺寸最大的屏幕尺寸。多数人一天工作的大部分时候都面对着一块巨大的显示设备,或者说无论是笔记本电脑还是桌面显示器,一块大屏幕主导工作的习惯不大可能改变。

因此,如果你正好从事软件设计工作(这些软件包括企业软件到日历及时间管理应用,出售给雇员或者企业使用),最好大屏和小屏同时考虑,而不仅仅想到移动优先。

实际上,如果你负责设计的应用有任何超过140字符或者1张照片的内容创建,那么它在大屏上效果更佳。这篇文章我不是用手机或者平板写的,因为那会异常痛苦。我只需要一个大屏,而不是其它方式,因为大屏能更好的支持诸多类型的输入。

“只做移动”是一类新型的商机么?

对于许多消费者服务,能够明确的是,使用移动设备的频率远高于桌面设备,但无法确定这种状况有多么普及。对许多人来说,能够明确的是,移动设备的屏幕是他们大多情况下的主要屏幕,但无法确定这是他们唯一的屏幕。能够明确的是我们的生活被各类屏幕充满,但无法确定所有的屏幕都是手机屏幕。

因此,假如屏幕比设备更关键的话,“只做移动”的思路可能是消费者业务领域的一个小商机。随着这些颠覆性移动业务的成熟,企业认识到除了小屏幕之外,他们还需要为用户的大屏体验服务,这种需求远比设想的频繁。移动端屏幕依旧是他们最重要和最主要的渠道,但已经不是唯一的渠道了。

我们也能畅想其它诸如电视一样的大屏将会不断发展而变得成熟,从而更好的运行基于web的软件。

想对此更加熟悉的话,假想一下大多数人是如何度过一天的,他们的主要触及的屏幕有:

5

想通这一点的关键在于,我们大部分时间都花在一块大屏前完成工作任务:

6

移动化对商业软件是次要的吗?

许多被建议全盘移动化的企业应该仔细考虑下人们在工作中使用手机的频率。记得观察他们的工作电脑,对于新闻、运动、社交、聊天和私人邮件,大屏幕更靠谱。

现在,想象一下你为人们打造一款工作专用的软件。这可能是一款生产工具,例如Google Docs,Intercom,Slack,Basecamp,Trello等。对于它们来说,大屏很可能是最重要的场景,大屏上使用的应用比移动应用更重要。相对于大屏应用,移动应用扮演了不同的角色,而大多情况下是辅助型角色。

“移动”服务企业也许前景不妙

标榜“只做移动”甚至“移动优先”(比如移动营销服务,移动广告服务)的服务企业似乎偏好定位于短期成功(正如企业寻求移动专家帮助他们快速成长),而从长期来看则一片坎坷。为了提供完善的服务,他们需要追踪用户和屏幕之间的行为。 只打算在手机上做广告很罕见,它仅存在于那类“只做移动”的产品的临时状态里。认真想想,为何在Intercom会平等对待web、iOS和Android平台。我们追踪人们的行为,当他们在屏幕之间转移时,给他们数字行为一个完整的画面。只给出某人在移动设备上的行为是不完整的,这会导致信息传递和广告的目标偏差。

聚焦在任务,然后屏幕,而不是设备上

如果“移动优先”不再成为你的教条,那会如何?在Intercom我们信奉“把事情搞定”的框架。聚焦在你的用户需要搞定的任务上,然后通过在最合适场景下提供最好体验来提供最佳服务:或许只需瞥一眼手表即可,或许40寸显示仪表盘的屏幕才是最好。没人会把iMac搬到海滩,也没人会在甲板上用手机写文章,想想最适合输入的屏幕,最适合输出的屏幕,提供能充分利用情境上下文的服务方式吧。

原文地址:

https://medium.com/intercom-inside/why-mobile-first-is-outdated-f10a3dc357bd#.yaeayz9t6

作者Paul Adams,Intercom的产品副总裁,本文来自于Intercom内部博客。

Intercom是一个提供个性化和定制化服务的平台,旨在方便web或移动企业与客户更好的沟通。

译者:阿里巴巴1688事业部/无线交互/舒舟

由国际体验设计协会(IXDC)主办的“2015国际体验设计大会前瞻论坛-杭州站”,联合阿里巴巴于5月24日下午在杭州阿里巴巴举行。阿里巴巴、支付宝、腾讯、大众点评、快的打车、IXDC等企业的设计总监、专家、负责人前来分享他们在各自项目实践中的经验与成果。

1432508088177 14325087261650

首先,国际体验设计协会秘书长胡晓作了《交互体验设计协会发布》的主题演讲,向大会介绍了交互体验设计协会在交互设计和体验设计领域所做的探索和实践:IXDC自2010年成立,便逐年在本地化和国际化上不断进行,即邀请国际上的大师来到中国演讲,也搭建了国际交流平台让中国的设计走向世界,并在参会人数和覆盖领域上不断增长,在过去的六年中,IXDC不断完善在交互、研究、游戏、服务设计方面的不断深入,在全球(中国、美国、意大利、韩国等国)开展设计交流分享活动。 近期马上要开业的贝塔空间结合了“互联网+”理念,关注互联网创业,也将成为IXDC的重要关注点。

另外,胡晓还向大家发布了2014年《中国用户体验行业调查报告》,此次联合百度、华为,以从业者肖像、能力和满意度、职业发展与规划三个方向描绘中国用户体验行业发展。

14325096523930

14325095153042

阿里巴巴UED总监汪方进和Paul轮番为大家介绍行业现状和UED的战略发力点。

14325076658752

阿里巴巴1688设计专家何成龙以1688首页改版案例来分享其观点,“首先我们要明白为谁而设计”,一,设计的对象不是用户、市场或业务的唯一,而是设计目标。二,所谓特色,就是找到网站的独特性价值标准。并以1688首页设计案例,解析“五导家设计方法”,用数据量化统计来反观用户体验设计的价值。

14325076989288

网易高级交互设计经理曾智焱分享网易云课堂的案例,以《学习到学会》为题带来精彩分享。网易云课堂-对于学习者而言不是学习资料库,更不是及时买课,定时开课,正式以MOOC方式,交互方式时发生了很大的变化,改变了内容的学习方式。

1432507777425

阿里巴巴国际站UED设计专家刘宸寰带来《商家体验设计》,以千牛的案例,8个TIPS带来精彩分享。1、无法精准备描述产品的交互关键要素,请不要随便评价TA,2、不怕业务方不懂用户,就怕他们比你还懂用户,3、适度使用方法和技能,更有利于信任建立,4、你所遇到的人和事,都是设计的一部分,6、数据不在于数字多少,足以支持决策,降低风险即可,7、有时候徒劳无功,只因为我们少做了那么一步,8,重要不紧急的问题,找不到更多数据时,维持现状是最低风险解决方法。

14325078514701

快的打车设计经理吴启:设计在建立联系,设计师通过自身的想像力和洞察力去构建产品,去让商业,人,情怀,技术之间建立联系;我认为设计是整体并多元的,他不光视觉或交互设计,他包括公司定位,人群,核心产品,营销推广等。

14325078902389

ARK Design创意总监兼联合创始人滕磊以乐蛙案例,带来《从0到1到100》的分享,从基础体验为切入点,以品牌为识别性,在设计中思考怎么从众多产品脱颖而出——突出品牌及加强体验。

14325088319007

天猫资深视觉设计师白叡主要分享了淘宝电影从4.0到5.0的改版思路,首先从新定位了他们的淘宝电影的logo设计,主要定位方向时年轻的群体,在购物过程中有愉悦的感觉,在感官上要有一种沉浸感,营造出看电影的状态,于此同时还做了线下的产品的道具,电影取票,提供了完整购物体验。

14325088711294

天猫高级交互设计专家刘彦良分享《如何设计设计规范》,他分享了3个案例:windows、天猫商家端、天猫消费者端的设计比较。所有规范的目的都是一样的:体验一致,并使开发和设计效率提供。设计规范所有的流程都是一样的:收集需求、制定规范、推动设计。迭代。及他的5个迷思:1、规范越全越好,2、规范意识人人有,3、人多好办事,4、能自主永续运行的规范才是好规范,5、不守规矩的学生就是坏学生。

在演讲后,是提问环节:“如何通过交互上的创新提升用户体验?”“把设计理念先放到最先思考的底层,技术上的限制找到一个最佳途径,如果不发挥特色价值很容易被边缘化,在约束的环境下才能发挥自己的力量,创新是一个顺势而为的问题。”“对在接项目过程中,内部出现矛盾如何去解决的?”,接着,“产品的规划,产品的发展,首先要在大方向的地方达成共识,把所有的想法靠谱不靠谱的都说出来,然后去趋利避害,在中期过程,有不同想法的很正常,找最合适的设计。”

1432508913804

14325079501084

14325079545693

新的设备不断增加,旧的设备依然存在,这种快速增长且日趋加剧的可联网设备的多样化,使得网页设计已不再有标准的屏幕尺寸。基于一个固定尺寸对网站页面进行设计的模式,已无法满足用户设备多样化的通用需求。理想的情况是分别为每种设备单独创建一个版本,然而这对于大多数网站来说是不切实际的,于是越来越多的网站选择成为响应式,响应式设计已成为网页设计的一大主流模式。

除了设备多样化的现状与趋势之外,响应式设计能够带来多终端体验的一致性,因此作为全球企业间(B2B)电子商务平台的我们(1688网站)也在积极研究适用于本站的响应式设计方式。

本文将对目前主要的响应式设计方式进行梳理,把不同响应方式的响应规则与体验改善程度通过可视化的方式进行量化评估,并基于1688网站的设计现状及用户设备环境,反思网站的响应式设计模式,从而探索适用于本站的响应式栅格系统及普适规则。

一、什么是响应式设计

自2010年5月,伊桑.马科特(Ethan Marcotte)提出并实践了响应式网页设计,便引起了广泛关注,许多设计师、工程师们纷纷加入到响应式设计的研究和实践中来。响应式设计发展到目前的阶段,已不仅仅是一些技术工具(如①流动布局、②媒介查询、③弹性图片)的集合,更是一种设计技术、设计策略的能力体现。

响应式设计的本质目标是:通过识别用户设备屏幕的尺寸环境,选择最佳的内容展示方式,让页面有能力覆盖所有设备环境的良好用户体验。它应该有三个特质: 1)内容灵活性:内容可以像水一样,能够根据容器的不同,而展现出不同的形状。 2)设备多样性:页面能够适配多种类型终端设备,兼容已有或未来的设备。 3)体验一致性:网站在多种设备场景中均能保持统一的良好体验。

二、响应式设计的三种方式

许多网站为实现响应式设计,有各自的不同做法,主要可以归结为以下3种方式: 1)多个固定尺寸切换的响应方式 2)为移动端、桌面端分别打造两套区间尺寸的响应方式 3)跨终端无缝体验的响应方式

1、多个固定尺寸切换的响应方式 基于核心用户的主流设备,选择典型的分辨率,分别设计出几个尺寸版本,投射到相应的设备中去。严格意义来说,这不是真正意义上的响应式,或者可以称之为伪响应,它并没有从根本上解决让页面有能力去适应多种设备屏幕的问题,而是让一些屏幕尺寸相近的设备使用同一套尺寸页面。其主要案例有:1688.com、taobao.com、etao.com…

该响应方式的优缺点分别为: 1)优点:不用考虑同一断点内的拉伸规则,基于现有固定尺寸的页面设计流程和模式就可以完成网站的设计开发,主要可用于一些桌面端的设备环境。 2)缺点:它只能在几个特定分辨率设备下显示非常好的体验效果, 而除这几个值之外的设备上的体验效果将大打折扣;另外用户的设备无法穷举,随着用户主流设备屏幕尺寸的变更,网站仍需要不断增加或更换尺寸版本。

2、为移动端、桌面端分别打造两套区间尺寸的响应方式 通过综合评估网站用户设备的终端类型、屏幕尺寸、网站定位,以及不同终端环境的用户使用特性,分别为移动端和桌面端打造两套独立页面,它可以实现所有用户设备屏幕尺寸中的部分区间段的理想体验覆盖。有人说这是残疾版响应式,但基于移动端与桌面端完全不同的用户行为方式及体验环境,以及从小屏手机到大屏电脑的大尺寸跨度给设计带来的局限性,这种方式就现阶段而言,尤其是对一些内容较为丰富的综合型网站来说,是一个不错的选择。其主要案例有:alibaba.com、aliexpress.com、amazon.com…

该响应方式的优缺点分别为: 1)优点:能较好地基于不同终端设备的体验环境,考虑不同的用户行为习惯及操作方式,分别为移动端及桌面端打造不同的用户体验。 2)缺点:所有的页面都要单独开发两套,有较大的工作量,也不利于体验的一致性;另外不同类型终端间的尺寸界线已渐渐模糊(如大屏手机与小屏平板、大屏平板与小屏笔记本电脑),两套方案尺寸分割点的划分会变得越来越尴尬。

3、跨终端无缝体验的响应方式 从小屏手机到大屏电脑所有用户设备全尺寸区间覆盖的一套完整页面系统,能兼顾不同类型终端的交互行为差异,带来跨终端设备的用户体验一致性。其主要案例有:smashingmagazine.com、bootcss.com、indochino.com、…

该响应方式的优缺点分别为: 1)优点:所有用户全设备的良好体验覆盖,能兼容已有或未来的设备,包括新兴起来的穿戴设备、电视、甚至其他物联网设备界面等的全场景。 2)缺点:对网站设计师及工程师们的能力都提出了更高的要求和挑战,从视觉设计、跨端交互、页面性能等方面都存在很多难点需要去攻克。

总结以上这三种方式(如下图),在广义上来说,他们都可以称之为响应式设计,只是不同方式的响应式设计分别对网站的设计能力与技术水平提出了不同等级的要求: 1)多个固定尺寸切换的响应方式:需要考虑页面体验的一致性,设计多个尺寸版本的页面方案。 2)为移动端、桌面端分别打造两套区间尺寸的响应方式:需要基于内容的可读性,扩大页面的尺寸覆盖范围,制定区间尺寸的内容拉伸规则。 3)跨终端无缝体验的响应方式:需要兼顾跨终端不同操作方式的交互行为差异与区间尺寸的内容拉伸规则。

……

———————— 我是华丽的分割线 —————————

特别说明

因本文章发表在《U一点 ● 料——阿里巴巴1688UED体验设计践行之路》中,目前处于新书发行的内容保护期,所以更多内容请大家在实体书中查看。

购买请移步天猫>