劝导式设计在App中的可视化方法研究

本文在理论研究和案例解读的基础上,提出了劝导式设计在App中的四个可视化方法,即状态可视化、行为可视化、目标可视化以及成果可视化。

关键词:劝导式设计;用户行为;App;可视化方法

 随着大容量信息时代的到来,我们对数字界面的要求也越来越高。界面作为信息的集结地,是建立在人类认知规律基础上的对信息的组织、呈现和反馈,它需要符合用户的心理模型,才能最终形成流畅的交互行为和良好的使用体验。可视化技术在减少认知负荷与提升行为效率的宗旨下,通过组织化的信息,在不减少信息总量的前提下,通过平衡使用者的认知能力来实现目标[1]。对于劝导式设计来说,利用可视化技术能够以更直观的方式从海量的信息中简化、抽象并凸显出有效信息,提升用户行为的流畅度,从而提高劝导可行性。

早在上世纪90年代初,Richard Buchman教授便提出,交互设计的对象是用户的行为[2]。用户与产品的交互不仅仅停留于产品的物理属性,更是由一连串的行为构成的一个过程,是以产品为媒介的一个系统服务平台[3]。

故而,对于劝导设计来说,将用户的行为过程加入设计的考虑范畴也尤为重要。在此过程中,可视化的支持起到了不容小觑的作用。


1  劝导式设计与可视化的关系

劝导式设计作为一门旨在“通过劝导技术改变人的行为或态度”的理论,自上世纪80年代由B.J.Fogg教授提出以来,经过30多年的发展,日趋完善,越来越多地被应用于设计中[4]。Fogg教授提出的FBM行为模型(FoggBehavior Model)表明,一个行为能够达成必须同时具备三个要素:足够的动机,足够的能力和恰当的触发因素[5](见图1)。

图1 FBM行为模型(图片来源:笔者自绘)

1.1 用户动机与可视化的关系

动机可以分为内在需要和外在诱因,设计主要通过外在诱因去影响用户行为,外在诱因由低到高可分为「喜悦与痛苦(Pleasure/Pain)」、「希望与恐惧(Hope/Fear)」、「社会接受与拒绝(Social Acceptance/Rejection)」。人们的反应具有即时性,总是针对当下发生的事情做出行为反馈。喜悦与痛苦作为人最原始的反应,是驱使人们产生行为的有力动机。而希望与恐惧作为比喜悦与痛苦更深层次的情感状态,对用户行为过程的保持更为有力,故而凸显用户当前状态、行为流程以及行为目标有利于加强用户行为改变和保持的动力。例如,人们在使用运动类App进行跑步时,适时地对当前跑步进程、状态进行可视化反馈(包括视觉、听觉等反馈),对鼓励用户完成跑步任务具有促进作用。Jonah Berger认为“任何事情,只要能激活我们,形成生理唤醒状态,我们的行为就会被触动”[6],以上两类动机要素,无论积极正面或消极负面,皆属于高生理唤醒的情绪范畴,都能对人们的行为产生影响。第三个主要动机是社会接受与拒绝,人们大部分的社会行为都受此因素影响。人们通过展现出表现良好的自己来获得社会接受和肯定,并借由相关符号的可视性,显示个体差异性和独特性,增强内心优越感和成就感,从而提高内在动机[7]。例如,苹果公司在设计笔记本时,对笔记本的徽标朝向都有严格的要求。当使用者打开电脑工作时,在他人面前呈现的徽标形象是正的,这是由于人们在使用笔记本时,也需要顾及到周围人的眼光。

1.2 用户能力与可视化的关系

能力包括两方面,一方面为用户既定能力,例如一些健身App通过健身教学视频来增加用户健身知识和技能,从而帮助用户完成健身行为;另一方面为产品的可用性和易用性,通过对目标人群和使用场景进行详尽分析,呈现简洁的界面、简化产品操作步骤或给予明确的行为路径指示,并在行为过程中用可视化的方法给予明确清晰的操作指示和反馈,从而降低用户的认知负担和行为壁垒,提升用户行为能力。

1.3 触发因素与可视化的关系

触发因素作为行动信号,可通过多种形式展现,比如纯粹的意图告知(文字提示、图形、语音等),产品语义的隐喻和暗示,奖励机制,社会影响(社会认同、社会权威等)以及潜意识的劝导等等。在这些形式之下,欲使目标行为有效发生,触发因素必须具备以下三点特征:第一,可察觉性;第二,与目标行为相关联;第三,同时具备动机和能力,即合适的时机。可以说,人们几乎所有的行为都通过外在的一些因素触发产生,大到人生方向选择,小到日常生活习惯。触发因素的可视性越强、出现频率越高,用户行为越容易触发。例如,培养人们健康的饮食习惯一直是件十分困难的事,虽然大部分人都知道多吃水果蔬菜的重要性,也尝试每天多吃水果蔬菜,但经常在购物或者买饭时忘记加入水果蔬菜。如果我们借助一定的可视化方法,在餐盘或者购物篮上提醒人们“每天要吃五种水果蔬菜”,则可以大大影响人们的饮食习惯。


2  可视化设计在提升产品劝导效率方面的策略与方法

移动互联网产品本身具有应用情景复杂多变、携带方便、数字界面有限等特性,面对此类产品,用户有一个从产生认识、发生行为、维持行为到达成目标的过程。通过上文对FBM行为模型三要素与可视化设计及用户行为改变的关系和应用分析,结合用户的行为步骤,笔者对其重新整理归纳,分别从状态可视化、路径可视化、目标可视化以及成果可视化四个角度对劝导设计中的可视化方法进行阐述。

2.1 状态可视化 

 从用户体验层级上来看,状态可视化属于框架层级和表现层级[8],主要包括对产品的界面设计、导航设计、信息设计以及视觉设计。对于这两个层级的设计,可从用户认知角度的可视化方法入手(即用户对产品的认知和对自我的认知)。界面信息的可视化可从三个角度来进行讨论,分别为有用信息的筛选、信息内容的组织呈现和信息模块的合理排布。介于移动设备不同于PC端的使用特性,移动产品具有更为多样的使用情境,使用产品时的情境特征、用户状态、网络特征、使用时间等,都会对设计产生较大影响[9]。故而,应当精简界面信息,删除与用户需求、用户目标、用户行为无关的信息,并重新组织信息内容。信息内容可通过文字或者图形化的方式以用户熟悉的语言表达出来,一般来说,图形化的信息更具表达性和直观性,可借助图形隐喻的方式减轻用户学习负担,提高认知效率。在信息模块的排布中,需保持设计的一致性(整体色调、视觉元素等),同时,借助设计的对比(颜色、大小、粗细等)突出重点信息,吸引用户注意力[10]。其次,在用户操作过程中,保持用户行为状态的实时更新和保存,利用视觉或声音反馈,对状态进行呈现和提醒,有利于提高用户对行为过程的理解力和判断力,从而提升用户的自我认知能力,提高劝导效果。例如,运动记录类应用“动动”,在用户跑步过程中,每隔5分钟,都会通过声音播报用户跑步用时和跑步距离,使用户获取当前状态的同时,对用户行为也给予了鼓励,有利于用户继续跑步行为。

2.2  行为可视化

用户行为路径的可视化方法主要针对移动产品的结构层,包括产品的交互设计和信息架构。交互设计主要关注用户行为以及对行为给予的反馈,信息架构则着重于设计组织分类和导航的结构。结合Fogg教授所提及的,“由于用户动机本身会受到场景、个体、社会等多种因素影响,所以减少行为阻碍是更为稳定有效的方式”,在移动产品的劝导设计中,可以通过简化用户操作步骤,使之符合用户心理模型,并通过界面元素的视觉强化、隐喻等方式对行为路径作出引导,减轻用户学习成本和负荷,从而增强操作的流畅性及效率。例如,地铁出入站通道会特意做出一定坡度,使人们不知不觉就加快步伐,实现劝导者欲保证出入站通道畅通的目的。另一方面,在用户操作过程中,对用户的行为作出清晰的反馈可以帮助用户确认自己的行为,并继续接下去的操作。反馈可通过视觉、听觉、触觉等方式传达。例如,通过下拉的方式刷新新浪微博主页,刷新过程中会出现等待的小圈,提示用户动作指令正在进行中,刷新完毕则发出音效反馈,使用户得以确认动作完成。

2.3 目标可视化

辛向阳教授提出,交互设计包含五个要素,分别为人、动作、工具或媒介、目的和场景[3]。每个行为背后都存在一定目标,或有意识或无意识。目标的可视化设计可从以下两个角度进行,一方面是对目标本身的可视化描述。从行为心理学的角度来看,一个事物出现的越频繁越显眼,就越可能影响用户行为。通过利用拟物化、大小对比、颜色对比、动效等可视化方法突出用户目标,可以提高对用户行为的引导激励作用[10]。例如,给一家红酒商店播放法国的音乐作为背景音乐,会大大增加消费者购买法国产红酒的比例。另一方面,通过加强目标与用户行为的联系性,提升劝导触发因素的有效性。例如,运动记录类应用“乐动力”的首页,用一个整圆表示今日步数目标,在圆环上用彩色色带表示已完成步数,当圆环被彩色色带填满时,即表示今日目标完成,以此鼓励用户完成目标步数。

2.4 成果可视化

人作为社会性群体,社会影响对人们的行为有很大的作用,人们不仅关心他们如何完成任务,更关心其行为对他人的影响以及共享对自我形象的提升作用。Jonah Berger认为,“让某些事情更具观察性,就可以让它们更好地被模仿。如果想要让产品、思想和行为变得流行,我们需要让它们具有公共可视性”[6]。因而,如果对用户的行为改变以更具公共可视性的方式表达出来,会加强用户的行为动机,提高行为改变的可能性。使用户知道并记录自己所达到的成绩。例如,处理用户地理信息的手机服务网站Foursquare,它鼓励用户同他人分享自己当前所在的地理位置等信息。它会通过记载用户的分享记录,并根据用户的分享记录量来授予不同的徽章,用户还可以将徽章分享至社交平台,以显示自己所获成就,获得满足。其次,Berger还提出,“如果有明显的证据能够证明我们的每一次进步,就会让我们感到无比欣慰与喜悦”。从用户自身行为劝导角度来看,对用户成就的可视化,可以增强行为触发因素的可察觉性,激活用户兴奋情绪,提高用户内在动机的强度和持续性。例如,跟踪手机使用时间的应用“OFFTIME”,它会根据用户的手机使用情况整理出一系列简洁的图形数据,还可以设定不玩手机的时间。应用的主页面结构清晰简洁,突出对比使用手机时间和关闭手机时间,强化了对用户行为的劝导效果。


3   可视化方法在实际产品中的应用

“动动计步”(见图2)和“Pacer”(见图3),是动动品牌针对市场和用户群体差异,推出的针对中国应用市场的移动健康管理软件及其国际版。“动动”的主要目标人群是希望通过轻运动方式改善自身健康状况的人群,涵盖人群范围较广。它基于LBS,能够全天候记录用户运动行为,支持步行、跑步、骑行等有氧运动的手动输入,同时还能自动呈现给用户可视化的健康指标和图表分析,更直观地呈现一段时间内用户的运动情况,从而帮助用户更好地自我分析和行为保持。在群组模块中,用户可添加自己的微信好友等,通过与自己熟悉信赖的人分享交流运动状况和经验心得,获得社交认同、联结和鼓励。

图2为“动动记步”的主要界面,以明黄色为主色,与产品主要目标人群特性相呼应,显得温暖且充满活力。界面结构清晰简洁,主页为当前各项运动状态呈现,突出显示当前步行数,并配合圆环对目标完成程度给予标记,在提供充分状态可视化和目标可视化反馈的同时,给予用户适当激励,触发用户保持或加强运动的情绪和行为。主页的左侧和右侧分别设有拍照/截图分享键和快速开始GPS运动键,前者通过运动成果个性化的可视化呈现,增强成果可察觉性,激活用户兴奋情绪。同时,通过社交分享,提高了用户的社交联结和社会认同,有利于提高用户内在动机。后者的设置方便用户快速开始GPS运动记录,通过行为可视化方式,缩短操作路径简化用户行为,提高了用户能力。并且在运动过程中以语音的形式给予用户适时的行为反馈,触发用户继续保持运动行为。


图2  “动动记步”软件界面(图片来源:笔者自绘)

        图3为国际版本“Pacer”的主要界面,以蓝色为主色。“Pacer“在国内版的基础上增加了血压数据记录和“我的教练”模块,着力打造一个全方位的健康数据管理平台,故而选用比黄色更为稳重且放松的蓝色作为主色。在“我的教练”模块中,通过用户给定的个人数据和健康目标,为用户量身定制个性化方案,并配以智能AI教练适时给予指导和建议,给予用户状态可视化、目标可视化及成果可视化反馈,以更有效和多元的触发方式提高对用户健康行为的劝导效果。


图3 “Pacer”软件界面(图片来源:笔者自绘)


4  结语

        劝导式设计涵盖范围较广,本文仅从App界面的可视化方法角度对劝导式设计给予阐述,借此展现劝导式设计在实际应用中的设计原则和方法。结合用户行为过程,本文提出状态可视化、行为可视化、目标可视化以及成果可视化,对劝导设计中的可视化方法进行分析和归纳,希望在未来的设计实践和研究中加以不断深入和完善。


参考文献

[1] 章洁.面向大容量信息移动界面的设计方法比较研究[J].装饰,2016.01

[2] Richard Buchaman.Design as Inquiry:TheCommon,Future and Current Ground of Design[C]. In Future Ground:Proceedings ofthe International Conference of the Design Research Socirty,November 2004.

[3] 辛向阳.交互设计:从物理逻辑到行为逻辑[J].装饰,2015(1):58-62.

[4] Fogg,B.J. .Persuasive Technology: Using Computers to Change What We Think and Do[J].        Ubiquity,December1-30,2002.

[5] Fogg, B.J. .A Behavior Model For Persuasive Design[C].Proceedings of the4th International Conference on Persuasive Technology,2009.

[6]乔纳·伯杰.疯传-让你的产品、思想、行为像病毒一样入侵[M].北京:电子工业出版社,2014.

[7]彭华民.人类行为与社会环境[M].北京:高等教育出版社,2014.

[8]加瑞特. 用户体验的要素[M].北京:机械工业出版社, 2008.

[9]傅小贞,胡甲超,郑元拢.移动设计[M].北京:电子工业出版社,2013.

[10] 李德维尔,霍顿,巴特勒.设计的法则[M],辽宁:辽宁科学技术出版社,2010.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • 每天进步一点点点点点点点点点点点点点点点点点点点点点点点点点点点点点点~~从开始只能写几句话、模仿别人的观点,到现...
    一个帅气的名字呀阅读 17,990评论 4 31
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,650评论 2 59
  • 这个周,刚好过了自己30岁的生日。以前不觉得,时间和岁月的流逝,现在突然一夜之间都老了。 自己老了,身体一不留神就...
    王发秀阅读 179评论 0 1