关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第181篇文章分享
Halo,这里是设计夹,今天分享的是「认知偏差」。什么是“好设计”?如果对于一名不懂设计的人来回答,第一答案一定会说是看上去是好看的(因为每个人的审美及知识层面不同,对于好看的定义,一定会受主观判定而千差万别),亦或更“贴心”的人会说字要大,颜色要鲜艳等。但作为一名专业的设计师而言,对于“好设计”的界定,一定是要以专业的理论基础为支撑以及结合实际用户需求出发为目的的理性定义“好设计”标准;首先,看上去好看,这是属于视觉美感的协调部分,其中包括内容信息层级是否突出(也就是重要的信息要突出,不重要的就弱化),色彩情绪及颜色搭配是否合理(不同的颜色会传递出不同的色彩情绪),这些都是视觉表现的最基础层面,做到此只能算是离及格还差一分;但“好设计”更是需要站在助力业务拿到某种结果为目的出发,实现为业务赋能,这才会有设计价值体现,也是“好设计”的衡量标准。其中,设计为业务赋能的表现中,专业设计师通过巧妙的应用心理学上的“认知偏差”知识点,将界面中的信息展示,以一种更能引导用户完成某项操作的设计,就是“好设计”的价值所在。
接下来,就以一个日常练习的手机海报案例,解析如何通过心理学中的“认知偏差”手段,将其融入到设计方案中的应用。
认知偏差:是指人们根据一定表现的现象或虚假的信息而对他人作出判断,从而出现判断失误或判断本身与判断对象的真实情况不相符合。认知偏差可导致感知失真、判断不精准、解释不合逻辑、或各种统称「不理性」的结果。众所周知,设计师的设计图产出是较难为公司或产品带来直接的经济效益价值的(设计方案就是服务的除外),所以设计师的最大价值就是通过设计方案,助力业务达成某种价值的利益转换,而设计方案如何能够让受众实现价值转换操作就变得尤为重要,这就所谓的设计为业务赋能;这在运营设计中,体现尤其直观。心理学中的认知偏差,简单理解就是通过人们对于某种现象的认知判断出错,而产生决策上的偏移结果。而设计表现中通过融入这一知识点,引导受众快速达成某项价值转换的目的,并非设计欺骗,只是巧妙应用受众心理作用,更快速的推动受众完成某项操作,为业务方达成收益目标。
2.实际应用案例解析
针对信息层级及色彩搭配板块的案例对比解析。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
整体概况分析:
这两稿方案,从内容信息上可以看得出都是同一种讲师介绍类的营销宣传海报。而营销宣传海报的信息展示基本结构就是:建立认知——增加信任——促进下单。建立认知:受众对讲师的基本信息进行初步了解,也就是要让受众快速了解到这个讲师是做什么的,以及做过什么成就等基本信息,从而建立基本印象;增加信任:讲师能够为我解决什么问题,可以给我带来什么价值,或者是对我有什么用处;促进下单:讲师的服务对我有用,那我如何购买,以及购买后有什么权益及服务等;
方案细节对比分析:
这两稿设计方案,不能简单粗暴的评论孰优孰劣,各有侧重点。单从第一眼的视觉感受上来看,方案A的设计风格更偏向与理性、低调的感觉,因为蓝色传递出的就是偏冷静、理性的色彩情绪;对于不能直接量化价值的咨询服务类产品,客群对于价格会更敏感,也会较谨慎与理性,而且冷色调传递给人的一种安全且服务专业的价值导向,给受众一种信任、可靠的心理感受;另外在细节精细度上也处理的相对较精细。
方案B给人的第一感觉就是视觉冲击力较强,其表现有两个原因:第一是在于色彩搭配上,橙色属于暖色,传递给的就是一种热情、刺激、冲动的情绪范围;第二,在信息层级处理上也对比强烈,重点突出服务内容以及价格,相应的弱化讲师的个人介绍以及价格相关的详细说明;因为服务定价较高,所以相应的更突出服务内容,彰显服务价值,对应的讲师 Title 以及价格都进行弱化处理,最终呈现出一种核心内容突出,内容对比强烈的高视觉冲击力效果。另外,对于讲师形象照的布局位置,是左Title右照片,还是左照片右Title,这个结构也与服务内容的定位有较大关系。首先,对于方案A中的“左Title右照片”布局方式,因为其更注重为受众提供一种服务专业感的心理预期打造,所以对于讲师的信息介绍需要更正式且专业,而文字内容传递出的信息会更精准。方案B中的“左照片右Title”布局方式,因为服务定价较高,所以相应的更突出服务内容,彰显服务价值,对应的讲师Title进行弱化处理,而照片传递给人的感觉会更直观,所以采用左照片右Title会更合适。设计没有绝对的好坏,只有与需求是否合适的判定。
两稿方案设计的优缺点:
整体来看,因为两稿方案的侧重点各有不相同,不能感性的评价好坏,但也各有改进机会点。
方案A,内容的排版属于打造“物美价廉”的可靠感的定位类型;具体表现为通过传递专业感觉的色彩搭配(蓝色也不会给人一种廉价感),以及整体设计细节处理上,都相对的叫精致;改进机会点:在主次信息的层级划分相对较小,导致整体视觉冲击感较平,给人的视觉冲击感是有种差一点意思的感觉。一句话总结:信息层级对比小,重点不够突出。方案B,内容的排版属于“重点突出”强营销的类型;具体表现在对主次信息的层级划分对比很大,让重点信息突出明显,以及暖色色调带给人的整体视觉冲击感很强,给阅读者一种一眼就看到了重点的感觉;改进机会点:在设计细节精细度上还有改进空间,另外,尽管暖色带给受众一种刺激的感觉,但相应也有一种营销廉价感,对于服务的专业性产生一些削减(而不能直接量化价值的咨询服务类产品,相比价格受众可能会更看重服务是否专业,是否值得)。
方案A-3.0优化版,将认知偏差理论融合应用的解析。' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
整体概况分析:
方案A对标于方案B的客单价提档至中客单价定位后,其整体设计风格方向也有趋向于往方案B的方向靠近,其中内容层级表现为突出服务内容,以及多套餐的服务价格对比(对于多套餐的定价方案,受众更希望选出价格划算的一项套餐),相应的就弱化讲师的个人信息介绍部分内容;色彩风格上依然采用相对冷静的浅蓝色,希望传递出受众一种专业可靠的心理感受。但对于需要刺激受众视觉的地方,如:核心内容区,以及价格都采用刺激强烈的暖色突出,直观清晰的快速透传给受众要点信息。' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
具体细节拆解说明:
对于讲师个人信息介绍部分,从内容信息上划分是属于两部分内容,分别是讲师Title和个人成就;即:位置①的内容是属于讲师Title,位置②的内容属于个人成就内容。对于受众而言,会关注讲师是做什么的信息(Title),但相比之下会更在意讲师做成功过什么成就(依然是为受众建立可靠感的心理预期),所以在信息层级划分上,个人成就部分采用浅色卡片衬底,黑色文字展现,引导用户第一眼就可以看到比较关注的信息;(对于左Title右照片的布局结构,同方案A的解释)' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
感知价值偏差(Perceived Value Bias)
我们根据产品的外观或服务方式来感知其价值。正如人们所说:全部在包装中!' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
🔺 示例
设计对于产品的成功比你想象的更为重要,多余的空间,错误的边框颜色和未对齐的文字,都会影响转化率,确保UI设计的优先程度。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
服务内容作为升级方案后信息层级最高的板块,相应的位置放置的页面中的黄金视觉焦点中心,位置③的服务内容采用主内容与说明文字间的视觉信息层级对比,通过字重、字号、颜色强对比,突出核心信息。位置④的内容作为服务中的亮点,也采用亮色突出,在视觉上引导用户最先关注到服务亮点,进一步强化受众的信任感。
获得性启发(Availability Heuristic)
我们认为那些迅速跃入脑海的事情比那些不容易想起的事情更为常见和重要。因此,最近发生的、频繁发生的、极端的、被记住的事情比大多数信息更有影响力。' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
🔺 示例
通过创建一些与众不同的东西(在不影响一致性和熟悉度的情况下)让你的设计被记住。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
对于多套餐的价格方案板块,1280元的套餐是首推的价格套餐,所以通过凸显尊贵感的金黄颜色衬底,再加突出的特色服务内容,以及优惠力度更大的价格优势,创造一种与前两个套餐价格差异化的板块,在设计表现上为受众直观的做出价值筛选项来,而非因为不同套餐的价值对比困惑影响到付费决策。位置⑥的价格部分,采用了经典的“锚定效应”的心理认知偏差理论,这里的原价并不一定是真实的原价,仅仅是为用户对当前价值判定的一个价值锚定参考而已,其根本目的是助力用户快速做出决策,而且也为后期考虑相应的价格上涨预留一定的浮动空间。
锚定效应(Anchoring Effect)
人类在进行决策时,会过度偏重先前取得的资讯(这称为锚点),即使这个资讯与这项决定无关。在进行决策时,人类倾向于利用此片段资讯(锚点),快速做出决定。🔺 示例
通常被利用在消费场景中的认知偏差,通过前后对比来放大优惠感知,进而促进用户做出有利于我们的决策。
诱饵效应 (Decoy Effect)
🔺 示例
假设有产品 A 和 B,以下是顾客可以选择的选项:
(1) ¥100 - A
(2) ¥300 - B
(3) ¥300 - A + B
在这个情景,(2)是“诱饵”,用来引导顾客选择“目标选项”(3)。' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
在最后的促进下单环节,除了通过在设计表现上对多套餐价格对比,帮助用户快速筛选出最实惠的套餐进行付费成交;但对于一些潜在用户的线索获取,需要通过引导潜在意向客群填写免费咨询单的方式,快速建立起潜在的意向客群池。如何让暂时付费意愿不是那么强,但又有相关需求的潜在用户建立连接?那就需要为这些潜在意向用户建立稀缺、服务值得的心理价值感受。在此引用了经典的“从众效应”、“稀缺效应”、“当下偏差”等相关的心理认知偏差,促使用户做出扫码填写信息的决定。
从众效应(Bandwagon Effect)
我们经常会因为大多数人以同一种方式思考,而改变我们自己的想法。
🔺 示例
我们在设计中可以营造出一种群体选择的效果来吸引更多的用户,通过展示购买人数和滚动播放购买信息来体现出该商品的热门,让正在犹豫的用户「随大流」下单购买。
最底部显示“有多少人已经获得了免费咨询”,就是为用户建立一种从众心理效应。
当下偏差(Current Moment Bias)
又称现时偏差,人们更倾向于获取即时收益,而非未来的更大收益。
🔺 示例
为用户的立即购买提供小折扣(或免费送货),而非承诺他们在将来购买时提供更大的折扣。
“扫码免费享30分钟免费咨询”,为用户建立一种当下偏差的心理认知。
稀缺效应(Scarcity Effect)
我们将稀缺物品的价值提高,将高可用性物品的价值降低。
害怕错过(FOMO: fear of missing out )使我们更容易受到诱惑和冲动,并促使我们做出轻率的决定。
🔺 示例
使用“限时优惠”,“有限数量” 等修辞来形容你的产品或服务。给人的印象是许多人正观看此项目,并随时可以抢走最后的几件物品。
“限时0元”、“仅限前30名”等文字描述,都是为用户建立一种稀缺的心理认知,促进用户进行决定填写表单' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
二维码底部文字描述,为“专属优势发掘方案”用下划线标注及主色突出的方式,为用户建立一种视觉强调,帮助用户快速关注到吸引人的内容。最下面添加了一行关于表单用途的说明,引用了经典的“不明确性效应”的心理认知偏差,为用户建立一种安全、信任、无风险的心理认知。
不明确性效应(Ambiguity Effect)
我们倾向于避免未知,决策时避开资讯不足的选项,通过添加明确的细节来最大程度地减少歧义,从而提高转化率
🔺 示例
CTA 按钮应在其旁边包含信息性标签,以清除不确定性。
备注清楚表单信息收集后的用途,表明填写的表单信息是一种安全、无风险的操作,为用户建立起一种信任感。
信息越来越容易获取的互联网时代,人与人之间的信任感显得更为重要。
最后
设计并没有绝对的好坏之分,但会有是否与需求合适的理性判定。专业的设计师需要以专业的理论基础为支撑,以及结合实际用户需求出发为目的的理性为“好设计”定义标准;尽管设计师的设计稿不能为公司或客户带来最直接的经济收益,但可以通过一些巧妙的设计手段斟酌,引导用户快速地完成某种价值转换的操作,间接的助力业务价值的利益转换,这叫设计为业务赋能,也是设计价值的体现。设计师将心理学上的“认知偏差”理论融入到设计方案中,并非是用设计欺骗用户,只是推动受众快速完成某项操作,为业务助力的一种设计手段。而普通用户了解认知偏差知识,也可以让自己在繁杂的信息洪流中保持一份冷静与理性,购买东西按需购买,而非盲目冲动。另外推荐去「艾克先生」主页查看更多内容: zcool.com.cn/u/14952828
🔥为了帮大家更快掌握AI绘画,设计夹推出一本150页的《AI绘画关键词教程》,包含12类AI绘画方向,图词一体方便快速预览/复制,内容持续更新中…
慢慢来比较快,如觉得有帮助,
请点个赞&在看,谢谢!
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)