巧用O2O用户体验设计方法之五线谱
文章来源于 aliued，感谢作者 李恬 给我们带来经精彩的文章！O2O席卷各大城市的时候，设计师该如何与时俱进，打造线上和线下无割裂感的用户体验，今天阿里的李恬同学用一个特别有趣的例子(如何追到喜欢日系风格的女生)，分享用户体验设计中一个超实用的方法：五线谱。想知道如何进行一场「好感倍增」的约会?这篇绝对让你恍然大悟。
如果说我们做的业务最终输出的是一首歌，那我们设计师就是歌曲的编曲者。产品和运营进行歌曲本身的创作，我们设计师在了解了歌曲主题、听众是谁之后，选择乐器进行编配，最终输出一个编曲DEMO，由工程师进行录音、均衡和输出。我们的设计过程应该如音乐创作一般美好。
一、背景：
见网友、见笔友已经成了一种见光死的另一种说法，在线上聊天时浪漫深情忧郁的才子，见面时成了这样：满脸胡渣的黑脸大叔，在一条垃圾随处见的小巷子里请你吃烤串：
这是因为触点发生了变化。 在线上聊天时用户触点是聊天工具，网友设计的是语言艺术，他的设计目标是把自己打造成深情忧郁男子，你们之间的交互也仅限于聊天工具提供的功能如文字、表情等;但见面时，触点不是数字设备，而是真实的人、真实的饭堂，触点发生变化，但设计方案却没有因为触点的变化去结合设计目标「忧郁深情男子」对触点界面进行调整，这就是一种一致性体验上的断裂。
除此之外，还有体验流程的断裂或不可用、不易用，很多都是由于对用户的连续行为、行为地点、触点考虑不全导致的，随着O2O业务的发展这些问题随处可见。
左：比如这个支付成功页，单独看是没有一点问题的。但是当餐厅服务员告诉我要把这个页面展示给他，并且他咪着眼睛抄写订单编号的时候，我和服务员的体验都不好。一来没有引导我需要打开这个页面，二来服务员弯下腰来靠近我的手机同时拿纸笔记录很麻烦。解决方案有很多，就不说了。
右：这个天花板上的旗帜，里面的二维码非常小，根本无法扫码成功。这也是典型的没有考虑到用户行为场景和触点导致的体验断裂。
用户行为就像音乐一样，是连续的，以往互联网设计只针对一类触点比如PC端的某套系统、无线端的某个APP，而通过制定DPL，也可以将跨实体触点的数字触点保持在体验上的连续和一致性。但O2O中随着用户行为在不同场景的切换，单独对一类触点进行分析去设计是不完整甚至是割裂的。
二、《O2O用户体验五线谱》方法：
1. 方法论概念
早在20世纪九十年代初，Richard Buchanan教授就把交互设计的对象定义为行为 —— 「Creating and supporting human activities through the mediating influence of products」(通过产品的媒介作用来创造和支持人的行为)。在这里的媒介(本文称为触点)，可以是软硬件，也可能是身体的某个部位，甚至可能是外在的环境媒介。产品界面仅是媒介的一种，O2O场景下的触点会有更多真实实体、人物等。
所以在这里介绍O2O用户体验五线谱，我们使用线的形式，表现出用户在我们设定的业务场景中连续的行为，像音乐一样连续不间断，并且线谱的形式扩展性较好，增加一条线即可增加一个维度。
在这个方法里我们使用5条线，包括用户行为、地点、触点、设计策略、设计方案，其中用户行为、地点、触点是即定的，也就是在进行设计前已确定好内容的维度，属于产品与运营层面，同时随着行为的变化，地点与触点发生变化，设计策略与设计方案需要结合地点与触点特性进行推导。而在整个过程中常量维度为用户、设计目标，就像一首曲子事先的定调与定速度一样，设计策略与方案需要遵循整体目标为特定用户打造。
所以五线谱的方法核心是，在多触点任务过程中，以用户连续行为为主线，随着行为与地点、触点的变化，围绕设计目标，结合地点、触点特性进行设计，保证用户获得符合场景的体验。
纵向在针对单个用户行为进行设计时首先需要有以下几点考虑：
-考虑用户行为，是否为主动行为，主动行为是指用户主动选择的，是经过思考，选项很多，需要我们进行激励才会转化到的行为。业务层面并没有在用户的主动行为上做强激励，就需要我们用设计的力量引导用户的主动行为，我称之为转化关键点(标红星)，也就是要唤起用户何种感受时会转化。被动行为是指不需激励自然会产生的一步，比如我在餐厅点完菜了，下一步自然是吃饭。再考虑主动行为前是否有合力行为，就是连续的用户行为共同唤起用户的转化关键点，在这部分行为中要反复关注到唤起用户转化的感受。
- 分析地点特性，用户行为的环境有什么特点，会对用户行为有什么影响，如何辅助设计
- 分析触点特性，O2O业务中，触点会以实体、数字两种形式出现，要清楚这些触点都有怎样的特性，如何辅助设计。
然后进行设计的推导时，可以用以下的方式去辅助自己思考：
- 用户在(什么特性)的地方
- 利用有(什么特性)的触点
- 做(什么动作、交互)的用户行为
- 为让用户体验达到(怎样)的设计目标
- 考虑到(什么用户感受、激励)的转化关键点
- 在这1步或多步，有(怎样)的设计策略。设计策略是围绕整体目标针对这这1步或多步行为的设计方向，到这一步为止我们在这个场景的设计思考已经比较周全了。
- 最后是设计方案的推导，就是针对具体设计的对象产生具体方案，可以思考，为实现(怎样)的设计策略，利用(哪个/些具体的)地点或场景的特性，利用(哪个/些具体的)的触点特性。
2. 方法论具体应用
我们下面就以一个通俗的例子来诠释这种方法。
有个男孩为了追求自己心仪的女孩，希望通过做亲自为她做饭的形式提升女孩对她的好感度，在这里业务方就是男孩，用户就是女孩。
根据业务诉求，为了让我心仪的女生感觉我重视她，为她亲自做一顿晚餐，使我们有更多时间相处并且她对我产生好感;根据用户诉求，一位文艺、日系的单纯女生，对浪漫恋情还有向往，希望身边的人与出入场所都有文艺气质，内心的声音是成为苍井优一般的文艺女神。
我们推导出了这次的设计目标是「让她感觉我重视她、相处时感到舒适，将自己打造成日系无公害暖男，晚餐整体(菜品、环境)的文艺浪漫气息」。
然后我们梳理出在「邀请女孩到家就餐」的过程中，她的行为是「收到邀请 — 接受邀请 — 到访家中 — 等待晚餐 — 共享晚餐…」，在接受邀请的一步属于主动行为，我们先将其标红星，很遗憾在业务层面男孩子没有能力将女孩的偶像请来共进晚餐，我们只能通过设计的力量去加强主动行为的转化。
各个行为对应的地点与触点，也就是前期在产品运营层面(即男孩)已确定的用户行为触点分别为「微信 — 家的玄关 — 客厅及相关配套 — 晚餐及相关配套 — 微信」，过程中触点有四种变化，这样的情况我们就可以用「五线谱」的方法对各个触点进行设计推导。地点的维度帮助我们了解用户触点所在场景，辅助我们进行设计方案的发散。这里我们把两个在过程中的常量，用户与设计目标作为指导，不同触点的设计关键点的考虑，都围绕着用户与设计目标展开，以保证整体设计方向。
下一步我们就可以针对每一步用户行为，结合地点与触点特性进行设计策略与方案的发散。
以「收到邀请 — 接受邀请」这两个行为为例，地点与触点均一样，我们使用同一套设计策略(在地点与触点类型相同或性质类似的连续行为下可使用同一套设计策略)。
首先分析行为，接受邀请是主动行为，由于男孩在业务层面没有进行强化，我们需要用设计唤起女孩「男生无害，晚餐有趣」的感受，能激励她接受邀请;然后分析行为地点，使用微信接受邀请可以在任何地点，为显得「男生无害」，我们可以进行地点的假设，是在一个「在有安全感的、舒适的地方」女孩更容易接受邀请;再进行触点的分析，「微信自带各种沟通辅助工具如表情包、照片、视频、位置、分享等」。
所以辅助设计推导的思考过程为:
- 女孩在(有安全感、舒适)的地方
- 利用(微信以及其自带沟通辅助工具如表情包、照片、视频、位置、分享等)的触点
- 做(收到邀请与接受邀请)的用户行为
- 为让用户体验达到(让她感觉我重视她、我是日系无公害暖男、相处感到舒适)的目标
- 考虑到(让她感到我无害、约会有趣)的转化关键点
推导出的设计策略为: 选择用户有安全感与舒适的地点与时间，利用微信中可体现无害、温暖的视觉元素，使用日系风格照片、分享等工具体现对约会重视程度以及展示个人魅力。
设计方案是针对具体对象进行具体设计，即为：
- 在晚上8点至10点间发起聊天(即假设女孩在家);
- 聊天语气温柔，使用兔斯基表情;
- 向对方展示自己曾经的厨艺作品使用日系风格滤镜;
- 发送用MAKA制作的精美邀请函;
- 对方接受邀请后表示开心;
- 用位置发送家庭地址，给女孩出行建议;
- 提示她早点休息，给她分享一首安静的轻音乐;
女孩到访男孩家后的有连续行为「到达家中 — 等待晚餐 — 共享晚餐 — 离开」，触点都是实体，地点都是在男孩家中，因此我们可使用一套设计策略，这些连续行为下女孩的感受，会合力影响到下一个用户行为「女孩再次收到邀请与接受」，转化的关键点在于女孩在整个合力行为的过程中感到「放松、感动」。
因此在这个过程的设计中需要反复关注到女孩这种感受，所以结合设计目标、地点、触点特性，在这几步用户行为，推导的设计策略就是，「在女孩的触点，视觉、听觉、触觉、嗅觉等多方面针对女孩日系的喜好进行设计，让女孩感受到放松与舒适，同时在女孩触点表现出家庭型文艺暖男气息」，再进一步推导的设计方案，例如在「等待晚餐」时，地点在客厅，触点是「沙发、茶具、水果、糖果等招待相关」，设计方案则是「沙发与茶几整洁干净，准备亚麻质感靠垫;准备日系茶具、果盘，水果摆放精美;为她泡一杯日式抹茶;茶几错落放几本文艺书，其中一本为正读状态;播放小野丽莎音乐;提示女孩可使用的服务比如电视、iPad 等」
三、回顾几个重要的点：
1. 五线谱设计方法，适用于多触点任务的业务。
2. 五线谱是以用户连续行为为主线，随着行为与地点、触点的变化，围绕设计目标，结合地点、触点特性进行设计，保证用户获得符合场景的体验。
3. 在做多触点设计时多思考：用户在做(什么动作、交互)的行为时，在(什么特性)的地方，可利用(哪个/些具体的)地点或场景的特性;使用有(什么特性)的触点，可利用(哪个/些具体的)的触点特性;为让用户体验达到(怎样)的设计目标;考虑到(什么用户感受、激励…)的转化关键点。
情非得已
-
3个平面设计技巧学会动态字体海报2020-07-09
-
如何设计出优秀的文字类海报排版2020-04-02
-
7个有效提升传达率折页设计技巧2020-03-19
-
设计师如何解决作品视觉缺少层次感2020-03-14
-
详细解析平面设计中元素的使用技巧2020-03-13
-
设计师必须要学习的平面设计配色技巧2020-03-11
-
解析设计师常用的6大构图方法2020-03-11
-
3个帮你快速掌握字体搭配思路2020-03-10
-
设计师如何设计出中国风主题LOGO2019-10-21
-
详解如何让板式海报设计变得简单2019-10-21
-
4个配色技巧帮助您解决色彩问题2021-03-10
-
设计师需要掌握的平面设计技巧2021-03-10
-
详细解析插画类海报的绘制思路和方法2021-03-09
-
详细解析设计师必须掌握的色彩知识2021-03-09
-
设计师必须要学习的高级配色技法2021-03-10
-
设计师必须要学习的几个排版小技巧2021-03-10
-
详细解析UI设计中终极配色宝典2021-03-11
-
详解如何把产品和背景融合到一起2021-03-11
-
详细解析UI设计中终极配色宝典
相关文章1162021-03-11
-
详解如何把产品和背景融合到一起
相关文章1072021-03-11
-
设计师必须要学习的几个排版小技巧
相关文章1682021-03-10
-
4个配色技巧帮助您解决色彩问题
相关文章2022021-03-10
-
设计师需要掌握的平面设计技巧
相关文章1882021-03-10
-
设计师必须要学习的高级配色技法
相关文章1762021-03-10
-
详细解析设计师必须掌握的色彩知识
相关文章1792021-03-09
-
详细解析插画类海报的绘制思路和方法
相关文章1842021-03-09
