如何建立用户行为模型,通过数据验证设计效果?如何深度参与产品服务全流程?或许你可以尝试用一下「通感设计语言」
通感设计方法试图将产品质量与用户感知低损耗转移,增强体验的紧密的关联性与一致性。为数字产品创造有效设计语言的全新实用指南。本文章不是共享工具的介绍,也不是普通意义的通感设计手法,比如:Siri用波浪条纹设计让用户感受到声音。
文中的通感设计是指:通过对用户服务场景中全方位情感触点的设计,为用户传递一致的情感(传递的设计手段包括:视觉、听觉、触觉、信息引导、心理暗示等表达方式相互配合,达到一致心流频率)进而完成用户体验设计的相通,这将帮助团队输出始终如一的设计师理念。
通感设计的起源
进行产品设计时,有两个核心点。横向从定位产品再到数据回测的体系服务中。纵向分解出两个触点,即需求点与结束点。
心理学家 Daniel Kahneman经过深入研究,发现人们对体验的记忆由两个因素决定:高峰时(无论是正向的还是负向的)和结束时的感觉。所以,在进行服务设计升级中,峰终体验至关重要,将低噪音让用户的体验达到一种心流的状态。
峰终定律是一项描述我们如何认知和记忆体验的心理学定律。
例: 在宜家购物有很多不愉快的体验,比如只买一件家具也需要走完整个商场、店员很少、要自己找货物并且搬下來等等。但是,顾客的「峰—終体验」是好的。一位客戶关系管理顾问说:对我來说,峰就是物有所值的产品,实用高效随意体验的展区,美味便捷的食品。終呢,可能就是出口处那1元的冰淇淋!
然而,在现实的项目推进中,人与人的交流沟通存在认知损耗,在不同认知的交流中,存在信息丢失与噪音,如何精准快速的找到其中的峰终体验?
我们在收集用户反馈的时候,是否会收到类似:颜色丑、看不懂、不好用等主观非理性的描述。更多时候,用户所能表达的仅是体验结果所带来的感受,并不是用户诉求。
例:上图中我们的品牌升级项目,就有部分用户反馈颜色改的太丑了,他们很难接受,深入调研发现用户在说的「丑」并不是颜色本身的问题,在南方某些地区,进行投资前有讨彩头的民俗,只有黑白让用户觉得不吉利,寓意不好,所以我们进行了风格微调,将白色换成金色,增加了一些神奇小红点的指引,再次进行用户反馈调研,满意度达到90%以上。
通感设计方法的认知体系,就是为了减少干扰与损耗为核心,让我们设计出更符合用户预期的产品设计。
什么是通感设计语言?
通感是一种修辞方法。人有五感:视、听、嗅、味、触,在描述事物时,以一种感知代替另一种感知进而达到通感的状态。
例:朱自清的荷塘月色是这样描述的「微风过处送来缕缕清香,仿佛远处高楼上渺茫的歌声似的」。清香是嗅觉,歌声乃是听觉,作者将两种感觉互通,即为通感。
通感设计在流程上分为4个阶段:
- 通过一系列的设计方法梳理主线性格,搭建立体的沙漏模型。
- 聚焦分析,提取核心语言,形成沙漏流。
- 运用通感语言将意识释放于产品细节中,启动沙漏。
- 通过用户反馈与数据校验,用结论翻转沙漏,进行新一轮的模型矫正。
产品性格在design cycle 中不断完善,期间决策点也有自身design principle。
阶段:设计方法
对需求的洞察和解读是设计师必备的重要技能。我们都知道用户内心很难把握度量,用户洞察和解读一是靠天赋,比如有人天生敏感;二是靠经验和积累,在这个环节有一整套的方法给设计师提供工作中较快捷的选择。
从以上4个方面出发,将所有日常普遍的设计原则,高频出现的设计原则及较合适的组合方式进行了梳理,而且考虑到项目的不同特征,设计师也可以选择不同侧重的设计原则来搭配使用。
第二阶段:用户痛点聚焦提取
大家比较熟悉的服务价值构成中,价值是较终的核心,服务价值公式是:利益+体验+效率。
而经济学是研究人类经济活动规律的理论(即价值的创造、转化、实现规律)。用经济学的视角来看这个公式,就拆解为:特定需要、产品服务、购买意愿和能力。
1. 特定的需要——缺乏感
需要是有机体感到某种「缺乏」而力求获得满足的心理倾向,需要以一种「缺乏感」的形式体现。需求来自于一个缺乏感。
例:本来假期在家宅着睡觉或者追追剧看看综艺也不错,但有时候一刷朋友圈,朋友晒各种高大上景点,人少景美,一对比,发现自己也想去玩,这样缺乏感是不是就出来了?
2. 特定的产品和服务——目标对象
单有缺乏感构不成真正的需求,缺乏感加上目标对象,需求形成了大半。
例:有时候不想上班,觉得上班很累,钱少事多离家远,想休假放松一下。价值观不同,想要放松的方式会不同,可能是宅在家睡觉,可能是吃点好吃的,也可能去旅游散心。
3. 购买意愿和能力——行动能力
缺乏感只是一种感觉,不是需求。缺乏感加目标对象,在配合用户行动能力这一重要环节,就构成了需求。(这里的行动能力不仅包括用户的购买能力,还包括用户信任程度、用户学习成本等。)
例:欧洲十日游可能大部分人都喜欢,但是大部分人都不会付出行动,因为没有假期、没有办好签证、较主要的可能是没有钱。(说到这里想到个段子,所有的愤怒基本都是来自没钱,所有的励志基本都是来自于想要赚钱,所有的幸福基本状态都是来自于有钱。)而有了上面这些条件,才会付出行动。
所以,经济学需求构成要满足缺乏感、目标对象、用户行动能力这三个方面。
我们设计师熟知的需求分析方法:动机——场景——行为
- 动机:用户是谁,用户要做什么,他的目标是什么。
- 场景:他实现需求的场景,他在哪里。
- 行为:他实现需求的过程,他是如何被满足的。
定位用户需求
分析法与经济学定理两者结合,我们就可以更精准的定位用户需求为了避免陷入因各种噪音而产生的伪需求中不可自拔,缺乏感和目标对象,形成了用户行为的动机,缺乏感和用户行动能力形成了特定需求的应用场景。目标对象和行动能力决定了用户的行为路径。
第三阶段:通感语言环境
如何将需求低损耗的落地形成方案?也就是这个部分我想介绍的内容:通感语言环境。每个项目的设计流程不同,项目的类型、资源、环境、人力情况等也都不同,所以设计师要根据项目情况,考虑较合适的组合。
荀子他老人家常说:假舆马者, 非利足也, 而致千里; 假舟辑者, 非能水也, 而绝江河。越高频的协作就需要更多的积淀。
以网易贵金属为例,介绍一下通感语言在设计中的4个关键点:
1. 整体的工作流程
这个部分整理了设计师日常工作之间与产品、开发沟通中的高认知误差节点处理方法,从新人各种权限申请开通,到需求流程各类黑洞,为每一个设计师保驾护航。
2. 局部流程
给予不同岗位的设计师,一个基准设计思路,以及关键环节中协作沟通的标准方式和需要注意的事项。
3. 工具升级
项目来的需求方永远是快、快、快。如果想在有限的时间内更高效的解决用户痛点,我们工具就尤为重要,经过多次测试,我们抛弃了Axure、Photoshop,统一新输出工具Sketch。配合一些辅助软件hype、pagemaker 等直接输出一部分的线上页面,整体时间缩短了一倍以上。
4. 协作升级
交互视觉同时介入,交互的左脑逻辑思维➕视觉的右脑感性思维的配合协作更需要通感语言的标准化,在提高效率、降低沟通损耗,各取所长保证项目质量与用户体验。
较后《通用手册》让团队可以高效输出一致风格的设计,项目升级时,仅需更新《通用手册》即可与产品、运营、开发达到信息的一致性,同时组件化的开发也提高了开发阶段的效率。
第四阶段:数据的收集助力通感模型的矫正
数据收集的目的
数据收集的目的是分析,如何分析出有价值的内容才是核心,数据收集这个环节也是通感设计沙漏可以持续运转的核心动力,资深设计师口中经常提到产品思维,而产品思维的前提是对市场的了解深度、对环境的敏感度以及对商业价值的敏锐性等等,这些都是可以分析出有效数据结论的基础。
面对瞬息万变的市场环境,受众的喜好特征也会随着流行趋势的变化不断改变,评估自身核心竞争力、优势资源;竞品数量、竞争强度;上游渠道的趋势特征;下游市场变化、用户喜好变化等等这些内容要从何入手呢?
通感设计将这个部分拆分为5个要素:产品地图、产业分析、竞品分析、用户画像、用户行为分析。
1. 产品地图
每个季度持续更新的产品地图意义有两点:、可以让团队成员快速了解产品的全貌,同时,任何人员调整都不会对项目造成影响。第二、更清晰的全局视角,让每一个设计师理解手中工作;在整个项目中的定位;避免过于纠结细节而造成过度设计;保持产品设计整体的平衡。
2. 产业分析(行业分析)
是用研同学日常的核心部分,包括整个产业链全貌,上下游产业链的关系,较新的产业变化趋势,以及我们在整个产业链中的定位是整个分析中较为核心的部分,也是需要信息同步的关键内容。
例:上图为网易保险对保险产业的产业链分析框架图。
3. 竞品分析
与行业分析不同,竞品分析关注的更为细节,会针对具体某个竟品的具体功能、界面、视觉、结构等进行分析,这些是设计师们都会关注的重点,而对于竞品分析在通感设计理念中定位了三个层面:产品层面、运营层面、服务层面,就是将我们调研的竞品进行有序排列,让设计师们更清晰的了解到竞品设计的出发点与目的。
△ 图为网易保险对保险行业竞品的分类梳理
同时,为产业分析、竞品分析更是需要持续不断的维护定期更新的一件事情。分析报告来自交互、视觉、用研的协作产出,在分析中会增加团队的配合默契也是这个部分非常有价值的收获之一。
4. 用户画像
这一定是所有用研同学较核心的工作之一,相信各个公司都十分重视,我这里就不在重复展开了。
△ 网易贵金属的一类具体用户画像
5. 用户行为分析
详实的用户行为数据可以反映出用户很多行为习惯,比如用户喜欢什么时间来我们的产品;来了以后的操作路径、操作方式、操作频次、操作顺畅度等等,好的行为路径结构配合用研访谈可以更真实反应用户心理。
△ 上图是网易贵金属推送和圈子的一版用户路径结构图
通感知识结构
通感设计的体系介绍已经接近尾声,如何更好的适应这个认知体系?
这是我想和大家分享的较后一个部分,通感设计理念的知识结构,为了更清晰的让同学进入状态,我们将工作拆分为技能结构和思维结构,在技能结构部分,我和我们的同学一起定制她们各自差异化的知识结构成长计划,这也是我们这个体系可以快速应用的关键。
任何结构体系的搭建,都是从0到1,从1到N的过程,在技能结构搭建的过程中我们需要一起定义以下几个方面的内容:
- 专业知识——实现设计想法基础工具
- 洞察能力——设计能打动人心的关键
- 沟通表达——协调资源保证实现效果
- 思考学习——不断突破自我获得提升
- 总结沉淀——形成自己的设计方法论
而在思维结构上,我们应该努力去提升三种能力:感知力、判断力、创新力。
操千曲而后晓声,观千剑而后识器。新时代的设计师不仅要成为创新思维的驱动者,更是跨学科、跨文化的跨界「指挥家」,通感设计思维在每一个细节,去打造更近准的产品性格,保持目标用户与产品气质的一致性。
经过深入的研究探索,通感设计方法经过2年的不断发展完善,上百次的调研实践、总结思考,完善为一套帮助产品设计者们输出始终如一设计理念的认知体系。
一. 界面布局样式有哪些?
在做界面设计时,我们为了区分信息结构及层次,通常采用以下3种布局样式:卡片式设计、分割线、无框设计。
二. 卡片式设计
自从Android4.1上Google Now登台亮相之后,卡片式这种设计思路/风格慢慢就流行了起来,被大家所关注和使用。
Google将它称之为“Inside Out design(由内而外式)”,它的本质是更好的处理信息集合,那么卡片式设计适合运用在什么地方呢?
- 增加空间利用率。
- 区分不同维度内容。
- 提升可操作性。
1. 增加空间利用率
相比于传统列表式布局,卡片式设计能更好的打破原有的框架。
比如,在传统列表下,内容一般为纵向滚动操作,展示的内容有限。而采用卡片式的布局,在纵向的内容流里,还可以很好的增加横向滑动的内容区域,而且看起来很整体。
比如,知乎feed流里增加知乎live的横向滑动内容。
2. 区分不同维度内容
卡片,其实比较像一个容器,你可以把不同维度的内容放入不同的卡片中,使其在内容区分的同时,还能保持界面的统一性。
比如:淘宝采用卡片处理信息的层级。个卡片承载着:个人信息及偏好;第二个卡片:购买操作后的所有关键流程;第三个卡片:一些淘宝内使用率不高的功能聚合;第四个卡片,是对支付宝和理财产品的一种推广;等等。
每个卡片都是不同维度,相对独立的,但通过不同大小的卡片归纳后,比起传统列表项 + 分割线 + 标题的视觉效率要高很多,显得更有秩序。
再比如:荔枝FM、微信读书,也是采用卡片式设计,来归纳不同维度的信息内容。
还有,微信公众号和appstore,同样是采用这种处理方式,把繁杂的信息以时间维度,归纳到不同卡片中。
3. 提升可操作性
卡片是一种拟真元素,可以被覆盖、堆叠、移动、划去,这样能更好的拓展内容块的视觉深度和可操作性。
比如:iPhone自带的「提醒事项」APP,就是采用卡片堆叠的方式。用户可按照标题快速查找目标备忘录,同时进行点击操作,打开卡片内容。
探探,运用卡片式设计,实现左右滑动代表感不感兴趣的操作,从而增加产品的趣味性。
但是,卡片也有它的弊端。如果不在合适的场合下,盲目的使用卡片设计,也会使你的设计变得低效和空间浪费。
举个例子,下面这种效果图,设计师们应该都不陌生,因为是在各大设计网站上经常看到的。
但是,你认真分析下,好好的一个通讯录,明明只有简单的头像和名字的元素,非要包裹在卡片里,而且卡片与卡片之间还要留出间距。为了视觉效果,空间这么浪费,并且影响效率。
如果按照微信的策略,好友可以加到5000,那么找个人不得向上滑动很久么?
三. 分割线设计
在UI设计中,较传统也是较常见的分隔方式是「线」。它能起到分隔、组织、细化的作用,帮助用户了解页面层次,赋予内容组织性。
而「线」,可以分为以下两种:
- 全出血分隔线。
- 内嵌式分割线。
1. 全出血分隔线
「出血」是一种平面印刷中的概念,而「全出血」指的是分隔线横向贯穿整个页面,一般为了区分更加独立性的内容信息。
比如:知乎的「想法」feed流里,就是采用全出血分隔线的形式,让信息分隔的更明显,更加独立性。
比如:google photo,用全出血分隔线,来区分上面的默认分类和下面相册的模块内容。
2. 内嵌式分割线
内嵌式分割线,不同于前者,它一般会在「线」的前面留有缺口,来区分统一模块下的相关内容,目的是为了让用户浏览大量相关内容时,更加高效。
比如:知乎的「更多」页面,卡片内采用内嵌式分割线,来区分同一维度下有关联的内容。
比如第二个模块里,我的创作、我的收藏、我的关注、我的邀请回答,都是「我」操作后的内容信息。而第三个模块,已购内容、我的私家课、我的Live等等,都是跟「钱」或「付费」相关的。
所以,采用内嵌式分割线,比较适合这种划分有关联性的内容,同时能提升浏览效率。
其实,采用「线」的分割方式,相对其它两种(卡片式设计、无框设计)是比较保守的解决方案,但是,前提是要处理好「线」的间距、粗细、颜色等问题。
四. 无框设计
无框设计是近两年流行起来的一种新的趋势,是去除界面中的边框,分割线,用间距来区分内容。
它适合运用于:
- 大图为主。
- 内容有规律。
- 小众且垂直产品。
1. 大图为主
大图为主指的是以图片为主的产品,每张图片本身就可以起到分割的作用,因此,不需要采用多余的线或边框进行分割。
比如:instagram,发布图片前,用户被强制对图片进行正方形截取,才能保证图片在feed流里的宽度,撑满全屏,从而看起来很整体。
可能有的同学会问,为什么国外的产品就这么高大上,微博怎么就不能去分割线,做减法,搞得洋气一些呢?
那么大牙来带你分析一下。instagram只支持发送固定尺寸的图片和视频,而微博支持发送图片、文章、视频、纯文字、签到、点评等等的内容。
同时微博feed流里的图片,支持1张-9张不同情况的排版。而且1张图片时,为了更好的呈现出用户的原图比例,还要处理成4:3,16:9,正方形,以及特殊尺寸的缩略样式,同时还有gif图的情况,还支持你在自己状态下添加不同话题。那么你想只用间距留白来区分?场面会像刚地震完的样子……
所以现在想,微博用卡片形式来承载这些内容信息,还是有一定的原因的。
2. 内容有规律
内容有规律指的是,留白间距上下的内容,较好是相对一致的、重复的、亲密的,这样用户会下意识的将其分为一组。
比如,Airbnb采用的无框设计,原因是它们的信息元素很统一、重复,才给人营造出比较整体的感觉。同时,合理的运用大标题也起到关键性作用。
而同样采用无框设计的「下厨房」APP,首屏由于每个模块信息元素不一致,而且模块内元素的左右间距也不一样,字号种类过多,导致界面看起来相对有些杂乱。
3. 小众且垂直产品
小众且垂直的产品,一般情况下目标用户聚焦,功能简洁。因此,能够比较好的运用无框设计,跳出传统的规范做出创新的设计。
比如:轻芒杂志,采用无框设计的同时打破传统的移动端浏览体验,更符合它们自己的产品调性。
下面是FOOTAGE,一款小众且文艺的产品,由VUE的团队设计的。他们采用无框设计的前提是,每个界面元素有限,功能内容简洁。
但如果你是像微博,淘宝,微信等体量的产品,用户群体广,内容繁杂且层级较深。那么,你需要找到一个效率更高的信息呈现和交互的基础隐喻,无框设计可能就不太适合了。
五. 总结
总的来说,任何表现形式都应该是为了更好的呈现功能及内容,而不是盲目的追随趋势。
自成一派的优秀设计师并不需要受到任何风格的局限,因为他知道风格并无好坏之分,而是探索更适合自己产品的处理方式。