编者按:本文来源于微信公众号“设宴”(ID:sheyandesign),作者 poppy,原文标题为:《交互设计师必须get的场景化设计大解密,附详细案例》,36氪经授权发布。
一、什么是场景化设计
「场景」在百度百科里的定义是:戏剧、电影中的场面,泛指情景。情景又指(1) 感情与景色。(2) 情形;景象。(3) 环境:假设是在这个情景。在戏剧或影视剧里,场景由人物,时空,事件(行为),环境(社会环境和自然环境)等要素构成。
互联网中的「场景」我把它分为两类:
一类是为了实现用户目标而产生的场景,这种类型的场景需要明确用户目标,可能并不需要涵盖用户是怎么实现目标的,这类场景指按照每个用户的精准需求,为其提供精准服务,用明确的差异化服务给用户更好的提供一个使用产品的动机。比如微博和微信,微信定位是熟人社交,微博则是陌生人社交;
另一类是更加精细化的场景,这类场景需要明确用户操作流程。本文主要针对第二类场景展开。
场景化设计指基于对场景的分析,得出用户痛点与需求,结合前后场景预判用户目标,通过设计提高用户效率,给予用户惊喜与感动。
场景要素包括:4W+1H,即Who人、When时间、Where地点、What事件 、How环境,什么人,在何时,在什么地方,做了什么事情,所处的环境如何。其中Where又包括线上地点和线下地点,线下指现实中的定位,能够最终靠手机信号塔数据(GPS),Wifi连接等获取;线上指用户所处的具体页面。
如:用户(who)早上上班(when)在地铁上(where)看电子书(what),地铁上人多嘈杂且操作不方便(how)。再比如用户(who)中午(when)在办公室里(where)点外卖(what),肚子很饿还不知道吃什么(how)。五要素就像口诀,帮助我们全面快速的描述场景。
二、有哪些场景化设计的例子
为帮助大家更好的理解场景化设计,这里基于上面提到的场景五要素举一些例子:
人是变量
用户不同,看到的信息不同。
随着大数据和智能推荐技术的普及,慢慢的变多的产品通过挖掘不同用户的喜好,生成用户画像,为每位用户更好的提供“千人千面”的个性化内容。这样的产品大家都很熟悉,比如抖音,淘宝,微博,今日头条。
时间是变量
时间不同,看到的信息不同。
比如小米MIUI11的效率革新功能「智能出行」,当在出行类app上定好行程后,MIUI11就会自动将该行程记录在负一屏显示并同步日历,同时会根据出行的时间点,在通知栏实时更新提示:
再比如在Google Maps的app里开启导航时,如果目的地在预计到达时间还没有开门,或者快要/已经关门了的话,会有个弹窗提醒。
还有蚂蚁森林的页面会按照每个用户打开的时间进行变化(白天与夜晚模式)等等,这些都是充分考虑了场景中时间这一变量,才有如此高效暖心的设计。
地点是变量
同一个用户,在不同地点看到的信息不同。
比如,大众点评APP当用户从常住地北京(where)定位成非常住地杭州(where)时,按照每个用户的上个场景与当前场景预测用户可能处于旅游状态,从而预测用户下一步的目标是在杭州「吃喝玩乐」,所以首页和攻略页的内容都发生了变化,为用户推荐旅行地的「吃喝玩乐」。
环境是变量
不同环境看到的信息不同,比如设备环境发生明显的变化时:Ios13中的备忘录页面,将「添加」按钮移到了右下角,为什么?因为手机屏幕慢慢的变大,把按钮从右上角移到右下角,更有利于用户单手操作。
再比如:我们在驾驶环境下,要保持注意力集中,避免或减少分心驾驶导致的交通事故,所以基于驾驶环境ios11上线了驾驶模式功能,当iphone与车内的USB或蓝牙连接,或iphone感知到人的移动速度时,iphone就会自动进入驾驶模式;
在该模式下,任何人发短信,我们都不会收到提示,对方会收到“我正在驾驶,稍后回复您”的自动回复,同时,iphone会追加一条短信,提示对方只要回复“紧急”关键词,我们就能立刻接收到他们的消息提示。
三、为何需要基于场景做设计?
通过上面的举例想必大家已经了解到了基于场景做设计的好处。由于与用户的空间相隔,设计师无法感知用户在真实场景中使用产品的详细情况。
通过场景化设计的方法,对用户使用场景进行分析与预期,能够在一定程度上帮助设计师找到用户与场景的内在联系,探索新的功能及交互方式。
四、怎么进行场景化设计
可以概括为以下四步:
1. 按照每个用户使用流程和行为路径穷尽场景
按照每个用户的使用流程和行为路径列举场景,这里以乘坐飞机(手机购票)为例,列举乘坐飞机涉及到的关键场景:
①乘客(who)在航旅纵横页面(where)购票(what),航班多查找起来麻烦(how)。
②乘客(who)起大早拖着疲惫的身体(how)在去往机场的路上(where),又遇到早高峰堵车,内心焦躁烦闷(how)。
③起飞前(when)乘客(who)在机场(where)过安检(what),安检流程复杂,又检测出不符合登机规定的物品,让人心烦,手忙脚乱(how)。
④起飞前(when),乘客(who)在候机口(where)候机(what),人多嘈杂,没有座位,还背着繁重的行李,还要时刻关注航班信息(how)。
⑤起飞前40分钟(when),乘客(who)背着行李排着队(how),将登机牌(纸质/电子)和身份证出示给工作人员(what),工作人员(who)站在入口处(where)开始检查每位乘客的登机牌和身份证(what)。
⑥检完票后(when),乘客(who)拿着身份证和登机牌,背着行李(how)乘坐摆渡车(what),摆渡车上嘈杂、拥挤(how)。
⑦下摆渡车后(when),乘客拿出登机牌,背着行李(how)排队检票登机(what),工作人员(who)站在飞机前(where)开始检查每位乘客的登机牌(what)。
⑧在起飞前30分钟(when),乘客(who)登机(what),背着行李在狭窄拥挤的通道里(how)寻找自己的座位(what)。找到座位后,将沉重的行李艰难的(how)放到上方的置物架上(what)。放好行李后,坐到自己的座位上(what),系好安全带(what),调节座椅靠背(what),等待飞机起飞(what)。
⑨飞行过程中(when),气流导致飞机颠簸,乘客感到恐慌不适(how)。飞行过程中,乘客通过看电影,看书,睡觉打发时间(what)。
⑩到达目的地(when),乘客(who)从高处置物架上(how)取下行李(what),拿着沉重的行李(how)排队下飞机(what)。此时乘客对目的地的天气等其他情况都不清楚。
⑪乘客走出飞机到达航站楼后,在陌生的机场(where),跟着标牌指示艰难的找到自己的行李(what)。拿着行李跟着指示牌(how)困难的找出口(what)。
通过对关键场景的详细描述,我们将摸不着的用户场景像过电影一样在眼前一一呈现,有利于我们发现很多想不到或者通过调研得不到的细节,帮助我们发现用户真正的痛点与需求,洞察设计机会点。
2. 根据场景挖掘机会点
完成了第一步的场景列举,我们对流程中涉及的场景有了深刻的了解,下一步就是对场景的判断与分析,挖掘机会点。
机会点挖掘有两个方向,一是通过分析当前场景存在的痛点和需求挖掘机会点,二是通过对用户下一步目标的预判寻找机会点。
①通过分析当前场景存在的痛点和需求挖掘机会点
举例说明1:支付宝「朋友」界面,当用户输入某数值时,输入框上方会自动显示「给对方转账***元」按钮,用户可点击该按钮完成转账。
这是因为经常有用户误以为输入数值发送即完成了转账,导致很多尴尬出现。基于该场景下的痛点与需求,支付宝做了这个改进,贴心又好用。
举例说明2:ios系统在切换APP操作时,会将一些金融类APP虚化,以此来保证用户个人信息安全。
这一设计细节也是充分考虑了用户在切换APP时的场景,解除了用户在公告场合担心被窥屏而泄露个人财富信息的担忧。
还有,当我们用耳机听音乐或播放视频时,拔下耳机,声音就会自动停掉,这样就算在安静的场合听音乐或者看视频,耳机不小心掉下来也不会发出尴尬的声音,这些都是充分考虑了用户当前使用时的场景,才做出如何贴心的设计。
②通过对用户下一步目标的预判寻找机会点
第二个方法是通过对用户当前场景的分析,预判用户下一步的行为与目标,从而寻找当前场景的机会点。
如何预期用户下一步目标?有三个方法:
通过成组动作进行预期,如复制—粘贴,编辑—保存。
通过用户认知流程预判,如,浏览时反向滑动→结束浏览/回到顶部;再比如谷歌翻译在发音时,第一遍是正常语速,第二遍语速变慢,第三遍又恢复到常速,是不是很贴心,很符合用户期望?
通过产品使用流程进行预期,如订外卖—取外卖—评价。
举例说明1:在谷歌浏览器,当我们打开多个浏览窗口时,通常需要手动一个个地关闭标签页。
chrome充分考虑到了用户的该使用场景,当用户关闭一个标签页时,预期用户会关闭下一个标签页,所以当关闭一个标签时,相邻标签会自动靠近,保证关闭的按钮始终位于鼠标的当前位置,这样用户就不用移动鼠标关闭下一个标签页,提高了用户的使用效率。
3. 机会点转化为落地的设计的具体方案
在将机会点转化为具体的设计时,有两个可作为依据的设计原则,分别为高效,情感化。
实现高效有以下几个方法:
①行动点前置,通过对用户下一目标的预测,将用户目标在当前场景展示,缩短操作流程,达到高效的目标。如淘宝首页的tab栏会根据每个用户的浏览记录预测用户目标,千人千面个性化展现,缩短了用户查找商品的路径,提高商品购买效率。
②行动点置换,还是拿淘宝举例,淘宝底部的第一个导航,当用户滑动首页下方的商品流时,该按钮由首页变成置顶。
③行动点相关提示,意思是按照每个用户当前目标或下一步目标进行相关的提示。如支付宝朋友页面,当上滑时,会出现「找人转账」的提示,点击进入朋友列表的纯净模式(去掉了服务通知等跟转账无用的列表),提高了用户寻找的效率。
再比如,网易邮箱,当邮件中提到附件,但是没有上传附件时,点击发送后,系统弹出下方的提示,解决了用户常常忘记添加附件的困扰。
④突出行动点,按照每个用户当前目标或下一步目标突出关键按钮,帮助用户快速找到关键操作,吸引用户点击,降低了用户思考成本,提升效率。运用这个办法来进行设计的例子太多了,比如淘宝的商品详情页用红色突出购买按钮等。
⑤直接执行,按照每个用户当前目标或下一步目标直接执行。比如滴滴的扫一扫界面,当检测到光线较暗时,手电筒会自动打开,提高了扫一扫的效率。
⑥情感化
唐纳德·诺曼在《情感化设计》中提到设计的三个层次,分别为:本能的设计,行为的设计,反思的设计,情感化设计是能打动人的,它能传递感情,勾起回忆,给人惊喜,情感化设计帮助产品与用户之间建立情感的纽带,能强化用户对品牌的认知,培养对品牌的忠诚度。
情感化设计的步骤依次为:提炼影响产品的的情感指标→聚焦用户对产品的情感诉求→产出设计的具体方案→验证设计价值(来源于周姮—知乎蚂蚁金服体验技术部的一次分享)。
举例说明1:在谷歌表格每列的开头依次输入「Pride」五个字母后,表格会变成彩虹样式
举例说明2:网易云音乐在用户生日时会变成「生日快乐」的蛋糕样式,点击进去的音乐列表,第一首歌是生日歌,让人心里暖暖的。
4. 设计检验
最后一步就是设计的具体方案的验证,设计的具体方案能否帮助用户缩短操作流程?降低用户思考成本?帮助用户高效的完成任务?是否能打动用户给他们带来惊喜与温暖?通过可用性测试及上线后的数据反馈,帮助我们更好的优化设计的具体方案。
最后
文章较长,我们再回顾一下:
一、什么是场景化设计?
场景五要素:4W+1H,即Who人、When时间、Where地点、What事件 、How环境,什么人,在何时,在什么地方,做了什么事情,所处的环境如何。
二、有哪些场景化设计的例子?
三、为何需要进行场景化设计?
四、怎么进行场景化设计?
根据使用流程和行为路径穷尽场景
根据场景挖掘设计机会点
将机会点转化为落地的设计的具体方案
设计检验
好了,今天就说到这,文章较长,希望我们大家能耐心消化,希望此文对你有一点帮助。
说明:文章部分内容引用了阿里中国站UED团队博客里的分享。