伴随短视频平台的崛起,移动互联网的主流内容消费形态向短视频视听语言转变,视频信息流广告的时代已经来临。如何通过设计提升转化,是视频信息流广告所面临的挑战。
为了提升广告转化效果,我们结合实际项目,通过大量的实验与思考,梳理并总结了一套适用于视频信息流广告的转化组件呈现原则,我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。
///
延迟增强是什么?
视频信息流广告有三要素:内容、框架、转化组件。其中广告内容来源于广告主投放的物料,基础框架需对齐宿主保持一致性,所以仅有承载转化信息和行为的转化组件,是可设计部分。
而“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线,结合广告行为推导得出,并经过实验验证了其对于转化提升的有效性。
“延迟增强”包括两个阶段:1.广告展现初始阶段,延迟展现广告意图,通过内容吸引潜在用户;2.广告内容逐步呈现阶段,转化组件渐进式增强,辅以增益信息,不断强化,引导转化行为。
它指导了转化组件从“呈现”到“增强”的全流程,从时机(出现&增强时机)/引导(动效&互动引导)/前置(信息&转化前置)三个部分,帮助提升广告转化效果。
///
时机-延迟增强如何呈现?
转化组件的呈现时机包含“何时展现”与“何时增强”两个部分,前者帮助增加广告接收率,后者提升广告转化率。
01/ 出现时机:
延迟展现广告意图,可以提升广告卖点的展现机率
互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中,广告借助这一媒介迅速发展,但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质,不可避免的使受众产生了心理上的逆反与抵触情绪,从源头拒绝了广告信息。
所以对广告来说,在广告展现初始,延迟展现广告意图,融入内容,可以缓解受众的抵触情绪,提升广告卖点的展现机率。
02/ 增强时机:
通过用户行为和视频特征动态决定增强时机,可以有效提升转化
对广告来说,搭配广告内容进行增强,通过内容积累购买欲/信任感,然后通过阶段性的增强来提示操作,对比一成不变能起到更好的转化效果。
我们首先尝试了程序化的增强时机,在不增加技术成本的前提下,根据历史经验,面向不同的广告均采用固定时段的阶段性增强。
但不同的广告物料内容不同,不同的用户偏好也不同,固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候,我们采用了动态时机策略,通过用户行为和视频特征动态决定增强时机,在程序化增强时机之后,再次实现了转化提升。
///
引导-延迟增强如何引导转化行为?
转化组件如何引导转化,则可分为基础的视觉引导与进阶的互动引导,前者帮助抢夺视觉注意力,后者则能够在互动体验中植入部分帮助决策的“小心思”。
01/ 视觉引导:
适当增加视觉吸引点,可以有效引导点击
延迟增强需要通过阶段性的增强来提示操作,而如何增强能有效吸引注意则需要琢磨,已有实验表明转化按钮增加扫光动效与智能取色,能有效吸引注意,引导点击,对转化提升有良好效果。
02/ 互动引导:
让用户主动选择,可以增加广告曝光,辅助转化决策
互联网产品设计对于用户交互体验的追求越发极致,如影视行业走向可交互网剧,本质上是从用户接收转变为用户主动参与,用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”,将广告变为互动体验或具备使用价值的信息,让用户从被动浏览到主动参与,掌握对广告的选择权。
以互动投票为例,我们通过用户与用户之间的观点表达,以投票选择的形式诱发群体性选择,引起好奇心与同侪压力。
若用户选择符合群体选择,则带来群体性背书,增强信任感;若用户选择不符合群体选择,基于从众心理,用户极有可能对群体选择产生好奇,从而浏览两种选项的内容,有效的增加了品牌曝光。
///
前置-延迟增强如何帮助转化达成?
转化组件的前置主要包含信息前置与转化前置,前者辅助转化决策,后者帮助便捷操作,更好更快的完成转化。
01/ 信息前置:
增加增益信息或前置落地页信息,可以辅助转化决策
购买/转化一定是需要足够的信息积累信任感才能达成的,在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级,二电类广告可以增加价格信息,甚至可以前置优惠劵、图片banner等信息,均能实现转化的正向提升。
02/ 转化前置:
缩短转化路径,可以帮助转化行为更便捷的达成
在信任感积累与阶段性的增强都达成的时候,在当前转化对比跳转落地页再进行转化,链路更短,用户流失概率更小。比起实验尝试,更像是延迟增强的基础能力配置。
首先,我们针对表单/咨询/电话/安卓下载都进行了转化前置,具有用户明确意向的按钮点击会直接在当前进行反馈。
除了直接将操作前置外,针对不同细分场景的需求,还可以通过交互形态的优化在感官上缩短路径。
这里以百度的视频MAX广告为例,我们针对重落地页的商家,将MAX首屏(视频页)与H5落地页的关系变拼接结构为双层结构,通过浮层面板承载落地页,延时自动弹出,强引导下方内容,激发用户上滑浏览兴趣,解决了落地页隐藏较深,转化链路过长的问题,同时增加了落地页曝光从而提升转化。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系
作者:百度MEUX 来源:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
设计师在接触一个新的业务领域时,会习惯性地通过竞品研究快速地了解行业,通过对比竞品快速地找到体验优化机会点。但B端产品具有专业性强、功能复杂度高和操作链路长的特点,即便有竞品可以对照,B端设计师也很难在短时间内深刻理解业务逻辑,做出超越性的设计。
应该如何去打破这个困局呢?除了深耕业务和修炼基本功外,本文尝试从预判设计、表达清晰、操作可控 三个方面提供了一些助力B端产品体验提升的小妙招。
在团队活动时,从搭档的一个眼神我们就能预判他接下来的动作,相互的默契配合能让我们顺利地完成任务,在产品设计中的预判设计也可以得到事半功倍的效果。
我们可以从历史记录、效果预知、智能辅助和行为惯性4个方面进行设计,辅助用户决策,提升操作效率。
1.历史记录
a.用户操作行为记录
广告优化师通常会管理几十至上百个账号,需要在多个账号之间频繁切换去盯盘和新建广告,频繁的操作难免会造成信息遗忘和决策卡顿,从而会影响操作效率。在管理后台的设计中可以通过记录用户最近操作行为,恰合时宜地为用户提供帮助。
案例:在新建计划环节,标识出本账号上次的选择记录(最近一次的投放目标),辅助优化师快速做决策。
b.基于操作习惯的系统预测
平台系统可基于个体操作习惯和大数据分析来预测用户需求,提供高概率的操作建议,给予用户贴心指导。
案例:针对广告平台表格信息密集,不易快速获取关键指标的问题,Google提供了用户自定义栏,而Facebook的表格栏会根据用户列操作习惯和自定义栏行为进行大数据分析,预置一些高频意图的组合栏,一键切换即可查看关键指标,操作更便捷。
2.效果预知
a.效果预览
表单页对填写的物料内容进行映射,展示真实效果预览,降低用户心理的不确定性。
案例:在进行广告创意创建的过程中,优化师填写完标题和上传完物料后很难知道广告投放到手机端用户看的真实效果。而所见即所得的可视化编辑方法支持创意样式实时预览,可以辅助优化师更好地进行创意优化。
b.效益预估
针对一些需要效力评估的页面,平台通过预置好的算法对用户内容的表达及时给出估算值,给出建议,从而提高内容填写质量,降低填写的盲目性。
案例:Google广告平台在新建创意环节,对广告素材资源的组合方式和数量进行估算,呈现当前广告与高质量广告设置的差距,辅助用户进行高质量的广告制作。
3.智能辅助
用户在进行输入等操作时可以提供智能辅助,例如表单填写时对需要录入信息的区域提供辅助提示,通过自动补全或联想词来帮助用户快速录入信息,在保持用户的操作自由度的情况下提效。
4.行为惯性
在一些场景里,用户的行为具有很强的关联惯性,例如上班时间进到办公区域打开办公APP首要目的一般是打卡签到。通过梳理主线任务或整理用户体验地图可以挖掘出很多基于行为预判的设计机会点。
案例:预判用户在工作台内截屏后大概率是去反馈遇到的问题,适时将反馈入口透出,可以提高反馈的效率和用户体验。
现实生活中,在与他人交往时,清晰的表达尤为重要。同样是演讲,有的演讲者“词不达意”没有重点,或者内容晦涩难懂让听众感觉索然无味;而好的演讲者则会用场景化的方式将逻辑复杂的事情讲给听众,让听众有身临其境的画面感。
好的设计也应该是清晰好用的,能让用户沉浸其中轻松高效地完成自己的任务。
如何让用户通俗易懂地了解产品功能,并能快速上手?我们可以从功能易理解、内容强吸引和选择无负担三个方面来降低用户的操作门槛。
1.功能易理解
a.术语转换
将一些晦涩难懂的词汇转化表达方式,转化为更贴近用户视角的文案描述,传递细节感受;
b.信息有效展示
透过需求背后的真实意图分析和高效率的信息展示可以让用户更方便地获取更多信息,提升产品的服务效益。
案例:服务器预警平台从传统的表格形式优化成拓扑图。将所有的云服务器都抽象成一个个矩形,矩形的颜色代表服务器监控指标的状况。当方块颜色显示为黄色,则表示该云服务器内有监控指标出现了异常,这个时候目标用户就需要重点关注。
2.内容强吸引
对于老用户来说,从之前习惯的平台迁移到新的平台一般会有很大的抵触心理。迁移前用户考虑的关键点包括:不迁移是否有影响?新平台有什么优势吗?迁移起来麻烦吗?
以百度营销客户中心迁移引导页方案为例,初期方案首屏只告诉用户平台升级了,但是不能快速了解到升级后的核心优势有哪些,同时迁移按钮设计得很弱,传达的信息是迁移可能会很麻烦,很容易让用户止步于此。
所以在进入迁移导流页面时,首屏首先要讲清楚新版平台的能力和迁移方式。对于当下想迁移的用户,明确迁移方式和入口;对于徘徊不定的用户,告知迁移后的好处并做好最后下线时间的提示。这些信息不仅能够消除用户迁移前关于成本的顾虑,也能吸引用户立即开始迁移行动。
3.选择无负担
B端产品操作链路通常比较长,用户很容易迷失其中。对于逻辑复杂的功能在做页面设计时需要突出主次和流程引导,尽可能提供一个主要触发的主按钮,让客户不用过多思考就知道模块和操作的隶属关系,降低认知的负担。
我们在执行任务时总是希望有过往经验可借鉴,如果事情按照自己的预期发展了会觉得很踏实有可控感。同理,用户在操作一个系统界面时也会有类似的心理变化,对于自己熟悉的功能希望主动权在自己手里,能复用之前的经验无需额外的学习成本;对自己不熟悉的功能希望有及时的引导,能很快地上手并能掌握主动权。
不可控的操作体验会让用户在使用过程中产生很强的挫败感,一旦有了这样的心理感受就很难被扭转。那如何保障体验的基线确保用户正向的感受呢?下面就结合操作一致性和明确指引性两方面进行说明。
1.操作一致性
针对同类型的功能,在交互设计上要尽可能地保持逻辑对齐,保证平台的一致性同时降低用户的学习成本。一致性设计对产研提效也有很大的益处。
案例:下例中的批量操作项的逻辑,都是通过选中复选框之后在模块上方展示批量操作栏且支持一键关闭。这样该平台的用户无论在任何场景下只要注意到复选框就对批量操作功能有了预期,没有额外的学习成本。
2.明确指引性
对于复杂的使⽤流程,最好能够在客户使⽤的过程中建立统一的指引,引导客户⼀步步完成操作,从而提高任务的完成率,促成业务目标达成。
案例:当一个平台需要用户完成的任务繁多且流程性强时,需要把所有的核心任务按照层级进行呈现,并作为一个固定模块展示在醒目位置。这样用户既可全局视角理解业务又能作为功能入口快速触达。
B端业务中,交互设计的核心在于为特定场景设计择优的行为路径;通过分析用户当前所处的阶段和场景来判断此刻遇到的关键问题。针对不同的问题去选择对应的解决策略,例如对于新手来说降门槛会是首要任务,对于熟手来说操作的效率会显得更为重要。结合预判设计、表达清晰、操作可控三个维度的案例可以让我们在对业务理解有限的情况下,产品设计能有更多思考角度,也能有更明确的设计主张。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系
作者:百度MEUX 来源:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
你是否每天都在使用QQ音乐收听歌曲,但是你有没有观察到QQ音乐的播放页其实藏着很多功能。一个小小的播放页,虽然看上去那么的不起眼,仿佛它的功能只是用来切歌、看歌词和单曲循环,但随着QQ音乐社交化、娱乐化的发展,如今这个播放页已经成为了一个重要的聚合页入口。本期「设计大侦探」的「细节猎人」,为你解剖QQ音乐播放页的37个功能,11种分享方式以及17种歌曲海报。
一、歌曲
「歌曲」是播放页的默认分类,这个分类的功能比较多,所以我把它拆分为「个性化设置」、「听歌场景」、「音乐工具」和「分享方式」四种类型。「个性化设置」和「音乐工具」为用户提供多种音乐偏好的设置,满足各类用户需求,特别是音乐发烧友;「听歌场景」则是根据场景划分听歌需求,用户可以K歌、发起跟听,甚至邀请好友一起听,把听歌的行为社交娱乐化;「分享方式」则是利用腾讯强大的社交生态优势,为用户设计了丰富多样化的分享方式和个性化海报,吸引用户分享,传播,从而拉新引流。
1.1 个性化设置
1.1.1 银河音效
「银河音效」是为了满足各种耳机发烧友对音质的追求。「银河音效」按照重低音、环绕、曲风等类型进行分类,多达数十种,完美解决各类用户人群的需求。平台还推出独家定制音效,支持适配各类品牌耳机、音响和汽车,吸引用户购买VIP会员,激活变现。另外QQ音乐还推出一个「声音实验室」的栏目,包含了智能煲机(帮助耳机快速达到最佳状态)、4D震动和动感闪光,黑科技赋能,让音乐更有趣。
1.1.2 播放设置
「播放设置」是一个为用户提供对音乐播放进行个性化设置的功能,包括无缝播放、淡入/淡出、音量平衡、智能音质增强等功能,可以满足某部分有特定音乐需求的用户。
1.1.3 播放器样式
平台为用户提供了多种播放器样式,包含了黑胶唱机(深、浅)、静态方形、旋转圆形、静态圆形、歌手写真等样式,还支持智能光效和音乐影片的播放背景,满足各类用户对播放器样式个性化设置的需求。
1.1.4 个性主题
「个性主题」为用户提供了丰富多样的主题装扮和头像挂件,包含明星、星座、影视、文艺等各种主题,当用户使用以后,整个QQ音乐的界面风格都会随之改变,这就像以前的QQ空间装扮,一键换肤,个性又时尚,深受年轻用户喜欢。「个性主题」作为为QQ会员独家专享打造的板块,是实现商业变现的重要手段。
1.1.5 收藏和屏蔽
当你喜欢某首歌曲的时候,你可以点击收藏,自动添加到你的默认歌单,这样对用户建立自己的歌单非常有帮助,从而提高用户留存率。而如果你不喜欢它的曲风,或者特别讨厌,你只需要点击屏蔽,平台在播放时会自动跳过,非常方便。
1.2 听歌场景
1.2.1 唱歌
「唱歌」是直接跳转到腾讯的另外一款音乐产品全民K歌,当用户听歌的时候突然想唱歌,那么可以直接进入全民K歌,有效降低用户的流失率,满足用户多场景的需求。
1.2.2 跟听
「跟听」是一个非常有趣的功能,用户进入跟听模式以后,可以邀请朋友加入自己的播放列表,也可以跟听其他用户的歌单。「跟听」为听歌增加了社交互动的属性,目前功能还比较简单,但让听歌的场景变得有趣、好玩。
1.2.3 一起听
「一起听」是一个社交互动式的听歌功能,用户可以邀请好友一起听歌。当朋友进入后,还支持发表情,就像一个聊天室。这就像是专门为一些年轻小情侣量身定制的听歌场景一样,平台还会为用户生成听歌记录,比如一起听歌的时间,听过的歌曲等,甚至还会生成一个心动等级,激发用户为了更高等级使用这个功能。
1.2.4 驾驶模式
「驾驶模式」非常简洁,系统会自动检测用户听歌的环境自动切换。这个功能的设计充分考虑了用户驾车时候需要换歌的场景,提供了语音找歌、个性电台、我喜欢的歌单、最近播放和电台,省去了用户开车时候不方便换歌的痛点,用户体验非常友好。
1.2.5 评论
一边听歌一边看评论已经成为现在年轻用户非常喜欢的听歌方式,在评论里,可以找到这首歌很多感人的故事,引发共鸣,勾起回忆。用户进入评论后,除了可以看见其他用户的精彩评论,还可以进入歌手的扑通小组(类似贴吧),和其他歌迷一起交流,从而增加用户时间,提升用户留存率。
1.3 音乐工具
1.3.1 片段播放
「片段播放」提供按歌词选和按音轨选两种形式,用户可以自由裁取需要循环的片段反复收听。这有点像过去我们使用MP3或复读机收听歌曲那样,功能虽然简单,但可以满足某些特定场景使用。
1.3.2 倍速播放
用户可设置歌曲播放的倍速,支持0.5x到2.0x播放,这个功能在听书的时候特别实用,非常方便。
1.3.3 定时关闭
用户在音乐播放中可开启定时关闭功能,比如15分钟、60分钟等,这个功能在助眠的时候非常方便,当你慢慢睡着的时候,音乐也随之关闭。
1.3.4 设备投放
「设备投放」就是支持音乐投放到电视等其他电子设备,当一群朋友在家里为你过生日的时候,你可以把你的歌单直接投屏到电视,让大家一起陶醉在美好的音乐夜晚。
1.3.5 设置铃声
当你觉得某首歌曲特别好听,想把它设置为铃声的时候,你不用去应用市场搜寻其它工具,你只需要进入「设置铃声」,你可以自己截取喜欢的音乐片段,系统也会自动智能截选一段精彩的铃声。在右上角提供了详细的铃声设置流程,教程非常简单。其次QQ音乐还有一个铃声专区,里面提供了海量的铃声选择。
1.3.6 查看曲谱
查看曲谱是一个非常实用的功能,对于很多音乐爱好者来说,当在某个夜晚抱着吉他想弹奏某一首歌曲,你只需要打开「查看曲谱」,里面包含了智能吉他曲谱、智能尤克里里曲谱以及五线谱/六线谱/简谱。进入曲谱后,你还可进行自由编辑,比如编辑和弦、更改时值等。这种实用不起眼的小功能,对提升用户的满意度非常有帮助,可以抢夺用户时间,降低用户流失率。
1.4 分享方式
1.4.1 分享给好友
用户可以把歌曲分享给微信好友、QQ好友,还可以通过私信方式分享给QQ音乐好友。
1.4.2 设置听歌状态
利用腾讯强大的产品生态,用户还可以把听歌状态同步到微信和QQ,这不仅可以满足年轻用户个性化的追求,还能通过外部触发拉新引流。
1.4.3 分享到社区
用户可以把歌曲分享到朋友圈、QQ空间、扑通动态和新浪微博,吸引用户分享传播,拉新引流。
1.5 歌曲海报
1.5.1 音乐卡片
「音乐卡片」为用户提供了8种精美的风格,有复古怀旧的磁带、CD风格,有黑白胶唱机风格,还有专属的VIP会员专享风格。卡片内容包含歌曲的封面、歌名、歌手、音乐指数和过去24小时收听人数等信息,目的是为了吸引更多的用户扫码听歌,其次VIP会员卡片还加入了QQ音乐豪华绿钻音乐卡片标识,彰显VIP会员地位。
1.5.2 歌词海报
在以前磁带、CD时代,抄歌词是广大音乐爱好者最美丽的回忆之一,「歌词海报」就是利用这样的分享场景,支持用户选择任意歌词,然后生成个性化的海报。「歌词海报」不仅提供了海量的背景图片,还支持用户自己上传,甚至还提供歌词字体选择,吸引用户主动分享。
1.5.3 高光视频
「高光视频」就是一段30秒的音频,提供了6个精美的模版,用户保存到手机后,可以短视频的形式分享到视频号、朋友圈等平台,和静态的海报不同,这样的传播形式更能引起其他用户的关注,从而拉新引流。
1.5.4 微信状态卡片
「微信状态卡片」为QQ音乐绿钻会员专享,为会员提供了多种精美的状态卡片,用户需要选择两行歌词,然后才能生成。这样个性化的设置同步到微信状态后,更能引起追求个性的年轻用户关注。
1.5.5 歌词视频
「歌词视频」相比高光视频,功能更丰富,首先不限制用户选择歌词数量,其次提供了风景、科幻、自然等不同主题的视频模版,而且还支持用户自己拍摄。用户还可以选择音乐播放的起点,添加视频动效和滤镜。通过这样短视频的方式吸引用户分享到视频号以及更多的短视频平台,传播拉新。
二、歌词
3.2.1 弹幕
听歌弹幕就像视频弹幕,用户可以边听歌边发弹幕聊天,这是一个年轻用户非常喜欢的功能,用巴甫洛夫效应来解释,这就是用户对源源不断弹出的弹幕充满了期待,从而增加了听歌乐趣,提升用户使用时间。
3.2.2 歌词动效
「歌词动效」为用户提供了多种个性化模版,满足年轻用户的各种个性化需求,其次也是实现商业变现的方式之一,用户需要开通SVIP才能享受更多精美的动效模版。
3.2.3 歌词设置
用户可以调整歌词的字体大小、简繁转换、调整进度,还可以制作歌词海报进行分享。其中歌词海报支持静态图海报和视频海报制作,还提供了多种精美模版,吸引用户分享传播。
三、推荐
3.3.1 歌曲信息
用户可以查看歌曲详细信息,包括歌手、专辑、发布时间以及详细的制作详情。
3.3.2 音乐指数
「音乐指数」是一个非常创新的功能,QQ音乐根据用户听歌的次数、搜索的次数制定了一个官方的指数评级。用户可以从这个页面看到歌曲的实时数据,包括今日、昨日音乐指数、全站排名、上升趋势和歌曲成就等。
3.3.3 相关推荐
根据歌曲的曲风,平台会推荐相关歌曲,这有点像私人电台;其次平台还收录了歌曲的各种演绎版本,这真的非常方便,你可以轻松切换自己喜欢的版本;最后为用户推荐包含此歌曲的歌单、节目和视频,彻底抢占用户的时间。
四、总结
QQ音乐的播放页设计,可以说把腾讯系产品设计的风格发挥得淋漓尽致。为用户提供各种丰富多样的个性化设置和音乐工具,播放器样式、银河音效、个性主题、歌词动效、曲谱、铃声,只有你想不到的,没有QQ音乐无法提供的。然后当你想要享受更多特权,你就需要付费开通VIP,这简直就是腾讯系产品的杀手锏,准备了一千种方式和场景让你很自然的掏腰包。
其次把社交基因发挥到极致。跟听、一起听、弹幕这些都是为了活跃度最高、消费意愿最强的小情侣、小年轻用户准备的。也许有部分用户会质疑,我从来不使用这些功能,但作为一个月活超过2亿的平台型产品,QQ音乐拥有众多各年龄阶段的用户,这就像上期我们分享的《顺丰速运为用户准备了18种寄件方式》一样,看似多余复杂,但其实是为了满足各类用户人群的特定需求。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系
作者:廖尔摩斯 来源:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
其实很简单,心理学目的是了解用户真实的想法,希望设计师在注重页面美感的同时也要注重用户的使用,做产品设计最终目的是为了给公司带来价值,给公司带来价值的前提是要给用户带来价值,这就需要我们去了解心理学当然不需要精通,每个心理学如果要去吃透他,需要耗费非常大的精力,对于设计带来的帮助不成正比,所以只需要了解各个心理学法则在产品中如何应用就OK了。
本次继续分享10个心理学的知识,将从心理学的背景定义、重点解析、设计运用、详细案例4个维度进行深度解析
简述定义:保证用户在使用流程中的高峰处和结尾处保持较高的愉悦体验
简述定义:用户对未完成的事情、被中断的事情记忆更加深刻
简述定义:基础的信息组织原则,主要提升用户获取信息的效率
简述定义:用户会更加珍惜已经获得的服务、物品等
用户同时思考两件事情以上时,思考效率和准确性会下降,做事情难以专注。
用户在使用一个产品流程时的高峰体验和结尾体验。
用峰终法则提升用户在整个产品上或某个功能上的体验,需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析,并绘制出用户的情绪曲线,根据情绪的峰值节点和使用流程的结尾,这两个“关键时刻”,进行体验上的重点打造。
2002年的诺贝尔经济学奖得主、美国心理学家丹尼尔•卡尼曼经过深入研究,发现人们对体验的记忆由两个因素决定,即高峰(无论是正向的还是负向 的)时与结束时的感觉,这就是“峰终定律”。关于峰终定律有这样一个实验:让两组人员听相同时间的强噪音,然后一组停下来,另一组接着再听一段时间的弱噪音,就实际遭遇来讲,后一组比前一组受了更多的折磨,但是听到更长时间噪音的后一组的痛苦指数却要比前一组低很多,原因就是对于两组人员来讲,结束时刻的噪音给他们留下的感受最为深刻,因而他们的痛苦指数主要是由噪音结束时的刺激程度所决定的。在另 外一种情况下,令两组人员听相同时间的噪音,其中一组的噪音强度较高,另 外一组的噪音强度较低,但是其中某一时刻听到了极其刺耳的超强度的噪音, 结果就是,后一组的痛苦指数要高于前一组,尽管就总体而言,后一组所听到 的噪音强度要低许多。
这体现的就是感受过程中的“高峰”一刻的决定作用。依照峰终定律,高峰和结束时的体验主宰了人们这段感受的性质和强弱的 程度,而跟感受的总的比重以及体验时间的长短无关。也就是说,如果在一段 体验的高峰和结尾,体验是愉悦的,那么对整个体验的感受就是愉悦的,即使 这次体验更多的是痛苦或不愉快的感受。
用户根据体验的高峰和结束来判断产品体验是否好坏,并不是根据用户使用产品的每一个节点感受的平均值来判定,我们可以理解为结果比过程重要。
就像我们看电影时,一个电影2小时前1小时都枯燥无味,突然中间有5分钟让你的情绪上升,此时你可能觉得这个电影还行,至少让你达到了情绪高潮,当你继续观看时电影片段又变得枯燥无味,突然最后10分钟和结束时出现了电影彩蛋,并且这10分钟的内容特别符合你的胃口,这时候你就会出现一种“嗯,这个电影不错,结局挺好”这样的心理暗示,此时会发现接近100多分钟的枯燥内容都被你忽略掉了,或者你也记得但是你默认了电影90%的枯燥。
一些app里在用户购买成功后,将已购商品以一种具有仪式感的收藏卡形式展示给用户,给用户惊喜的体验,在盲盒星球内购买盲盒成功后会弹出卡片,把用户获得感拉满,在网易云音乐直播间内如果是新手用户就会弹出新人见面礼,通过视觉的表现形式把氛围拉拉满,当然还有一种反向峰值,当有一些产品进行抽奖时,如果用户未中奖会弹出情感化弹窗,对用户进行安慰降低用户的挫败感。
上面讲的偏向于业务弹窗,还有一种是功能性弹窗, 当用户使用某个产品流程时,这个流程可能通过多个维度才能到达最终的节点,在最后用户完成操作时通过情感化弹窗进行提示,又或者在版本升级时需要引导用户进行更新,使用情感化的表现,能够将产品与用户产生情绪共鸣,增加趣味性,提升体验。
当用户使用产品去完成目标时,突然中间步骤出现网络波动、网络断开等不可抗拒的因素,此时在页面中添加一些情感化设计,会缓解用户焦虑情绪,甚至可以在空状态中添加动效来提升趣味性。
近期在工作中做了一个直播项目,其中的一个功能就涉及到直播抽奖,因为产品奖品比例较多且轮数也多,用户的中奖几率也比较高,所以导致用户在中奖后基本就退出直播间,因此在做设计的过程中为了避免这个问题,我在中间弹窗上做了优化。
通过情感的中奖弹窗形式来强化用户的感知度,在直播过程中提升兴奋感,提升用户观看的直播的欲望。
在讲一个案例,去年我们做一个刷题功能的体验优化,用户在刷题场景下会面对几十道甚至上百道题目,整个过程非常漫长,并且旧版的功能交互上并没有展示总共还有多少题的这个提示,用户在刷题过程中会非常焦虑,为了解决这个问题,通过这三个手段改进,1)我在刷题过程中以进度条的形式去实时告知用户刷题进度,减少用户焦虑,2)用户在最后几题的场景中会添加鼓励话语,强化用户峰值,3)在结果页面为用户展示直观的数据变化,强化用户的满足感,同时激励用户进行持续性刷题。
用户只记得使用过程中体验高的场景和结束时的场景。
无论是在交互还是视觉上我们都可以利用峰终定律帮助用户达到好的使用体验。
蔡格尼克记忆效应(Zeigarnik effect;又称蔡加尼克效应、“契可尼效应”) 是一种记忆效应,指用户在完成一件事的过程中被打断,他会持续关注这件事,记忆更加深刻。
简单理解就是用户对没有完成的事更关注。
该效应由苏联心理学家蔡加尼克在20世纪20年代提出,有一次她在酒馆用餐,遇到了一位记忆力过人的服务生,她不用笔记就能记住所有客人下单的菜肴,奇怪的是当菜肴上齐之后,蔡加尼克再次询问服务生,她竟然完全不记得菜单了,这就是由于她的工作完成之后,紧张状态消失,记忆水平随之下降了。
我们生活中也会遇到相似的场景,考试我们都经历过,在过程中某一道题没答上来,在答后后面的时候脑子里一直会想那道未填的题,而前面填过那么多题,我们却不容易记住。
看综艺大家经常都知道,看到关键节点的时刻总会有广告插入,但是我们又舍不得换台生怕广告结束,错过了什么关键内容,广告商其实就是摸透观众心理,让你又爱又恨的看广告。
生活中还有很多场景,像晚上刷抖音一直想着刷两条就赶紧睡觉,一抬头发现凌晨了...打游戏赢一把就不玩了,但当到了赢一把时一看时间过了好几个小时...小时候买方便面集里面的卡片....
为什么我们会对未完成的工作事项记忆深刻?
假如我们把事项分为三类:1)我们允许其正常完成,2)我们再完成的过程中打断,过一段时间在接着进行,3)在完成的过程中打断,并且不允许完成。
稍加思考其实会发现,正常完成任务后是没有任何心理负担,完成事项的过程中被打断,这时候人的心理的会时刻记忆这件未完成的事项,就像我现在写这篇文章,如果某个段落我没写完去做一些其他事情,我就会时刻想着我文章的小段还没有完成,那么假如我在写文章的过程中,被打断并且不允许我写后续的文章,我的注意力可能就会完全在写文章这件事,我要去想怎么才能继续写,或者怎么才能让我继续写,这恰恰验证了人们对于未完成且无法继续的事项心理负担是最重的。
在一些教育产品或者签到产品中都会有一些进度型的提示,像下面“开言英语”的课程报名页面,在侧面添加了进度条,时刻告知用户当前进度,并且在进度末端提示未到达节点,对用户进行心理暗示,引导完成未来事项。
在新用户注册页面时很多产品会收集用户基本信息,通常会使用分段形式把信息分开,减轻用户心理负担,并且在完成任务时会给用户明确当前进度,同样在一些其他场景例如认证信息场景中,哪怕用户中途因为其他时间被打断,回来后也能够很快的定位到未完成事项。
很多日历产品中会添加代办事项的功能,这个功能就很好的利用了《蔡加尼克效应》有些用户会通过在日历下面添加每天的计划以此来督促自己完成,如果某一天的事项发现没有完成就会有很重心理负担,哪怕到了第二天也会回过头来把错过的事项给完成,像我经常就会使用《滴答清单》来督促自己完成什么事情,如果有哪一天的事项没有在清单上打上勾,我可能好几天都在关注这件事。
前几个月的时候我在公司做了一个新用户注册登录的流程,在过程中我主要是负责UI和UX的工作,在这个过程中就使用到了蔡加尼克效应,当时接到的需求是公司战略目标扩张,需要在移动端更针对性的收集新用户信息以此进行内容推荐,提升用户留存。
在得知业务目标是提升用户留存时,我就思考设计的发力点,通过倒推的方式去一步一步拆解,在这个需求场景内,用户留存取决于内容推荐是否准确,内容推荐准确度取决收集的用户信息是否准确和用户信息填写率,用户填写的准度度需要产品侧通过内容的方式进行发力,而如何让用户信息填写率增长则是设计目标。
设计目标已经很明确了,那么如果去优化呢,当时我是先把旧版的问题给拆解出来。
1、交互上旧版把用户信息都堆积在一个页面上,并且对于业务目标上很多信息是无效的并且还在视觉核心位置,如用户头像、用户昵称等这些信息对于内容推荐没有任何作用。
2、视觉上没有核心聚焦区域,用户进来后会措手不及不知道从哪开始下手填写,并且按钮的样式也不够直观对用户造成不可点击的假象。
首先从交互上开始优化,因为会新增很多信息填写内容,所以为了避免用户在同一个页面看到很多的表单,把交互流程拆解,按照业务维度把表单拆分成多个页面,在每个流程内给用户传达出这个填写是个简单的事情,从而避免用户从第一步就抗拒。
这里面还涉及到【沉没成本效应】当用户在填写第三步四步的时候会因为前面已经填写了那么多信息花费了时间并不想放弃,沉没成本前面几篇文章讲过设计心理学-5种用户体验法则,这里不详细讲了,其次就是【蔡加尼克效应】用户在每个页面看到当前进度的时候就会产生必须完成的暗示,然后这个心理暗示就会持续推动用户完成剩下的内容填写。
后期我们针对旧版和新版的优化做了可用性测试,结果上也非常正向,新版的步骤虽然被拉长了,但是每一个步骤都比较简单用户填写起来没有门槛,所以填写效率上大于旧版,详细过程之前有复盘过一篇文章感兴趣的可以了解一下注册登录可用性流程最后用户的信息填写率也是非常有效的提升。
上线之后数据也是正向增长,当然不止这一个场景才能用到蔡加尼克效应,比如像一些用户成本要求比较高的健身打卡、学习打卡等任务可以使用一些阶段奖励来激励用户持续完成。
五架帽理论简称为LATCH原则,它定义了在好的组织性信息才能提升用户体验,使设计更易于理解、灵活和可维护。
LATCH的概念最初由Richard Saul Wurman在他的设计原则和设计模式中提到,后来在他的《信息架构》的书中重新定义了五架帽概念。
LATCH即是Location位置,Alphabet字母,Time时间,Category类别和Hierarchy视觉层级组成,这五种方式目标都是通过高效的信息呈现来提升用户体验。
理论上讲的是通过位置来组织信息,其实比较好理解,我们可以理解为你本人所在位置是一个坐标点,所有的信息形成都是围绕你的坐标点来组成的。
例如地图软件中你的当前位置不断变换,手机屏幕中不断加载出新的地标建筑,在一些游戏场景,例如绝地求生,随着你的位置变换,不同的建筑环境、人、道具等都会随着在你周围出现,当一些信息组成对用户非常重视时则会优先出现,比如驾驶过程中当前位置不变,地图会优先加载道路信息,其次是建筑信息(网络波动的时候比较明显)。
并且随着VR/元宇宙等技术,基于位置变换组织信息已经是非常重要的一环。
总结:通过位置结合时间能够给用户展示高效率的信息
与字面意思一样,按字母顺序排列信息,当数据量很大时,它是组织信息的最佳方法之一,在产品应用中常见的就是像通讯录、目录等能够快速的定位到信息,通过这种方式延伸出其他场景的排序方式,例如电商产品中的侧边分类,就是利用英文字母的逻辑把商品类别进行分类,在一种就是按照时间的维度进行信息分类。
当信息具有相同性需要排序的时候,使用分类的方式能够最快的提升用户筛选效率,在我们生活我们每个人都有分类的习惯,如电脑桌上会放置一些小物件或电子设备相关的,衣柜里统一都放衣服每一层放不同季节的衣服,每当我们想使用到某件物品时第一时间就能定位到它的位置。
在产品中使用最多的是分类和导航,例如同样的鞋子可以用品牌分类,也可以按照季节分类或者性别分类......音乐可以用流行、摇滚、民谣等等分类......
类别是该理论中比较关键的一环,它定义事物按照分类的方式能够让用户快速的查找信息组织。
上面位置、字母、类别都是提高信息查找效率,视觉层级与字面意思相同,当我们满足基本的查找效率后可以使用不同的视觉层级来凸显重要性。
例如在产品设计中可以从颜色、大小等方式来满足我们想要的层级梯度,让产品/用户的核心价值快速的让用户察觉到。
上面只是对每条规则单独拆出来解析,实际中它们是可以共存的,如位置结合时间能够让用户第一时间看到重要信息,类别结合字母就出现了我们看到的通讯录,类别结合视觉层级能够让分类更加重要等。
五架帽理论最终目的都是为了提升用户使用产品时的信息效率,它的五条设计规则也是在产品设计中的必须要遵守的,为什么说要遵守,因为设计中我们可以仔细回想下,基本上每一个页面的诞生都与这五条规则相关,一但违背,这个页面的可用性或者美观就会有所缺失。
当一个物品用户没有拥有时,对他的价值感相对较低,当用户拥有时会高估和珍惜物品的价值。
心理学家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 对禀赋效应进行了实验,并在他们 1990 年的论文“禀赋效应和粗略定理的实验检验”中展示了这一概念,这一现象可以用行为金融学中的“损失厌恶”理论来解释,该理论认为一定量的损失给人们带来的效用降低要多过相同的收益给人们带来的效用增加。因此人们在决策过程中对利害的权衡是不均衡的,对“避害”的考虑远大于对“趋利”的考虑。出于对损失的畏惧,人们在出卖商品时往往索要过高的价格。
比如我们过生日收到的礼物,在没有得到这件礼物之前,我们对他的价值或者吸引力往往没那么高,但是当这件礼物通过生日的形式送给你的时候,他就具有一定的意义并且这件礼物是属于你的,假如此时有人花市场价购买你的礼物,内心更多的想法是不舍得卖,因为这件礼物已经属于你了。
讲个自己真实的故事,我自己是对一些财富手串、事业手串等等相关的东西不感兴趣的,哪怕他很便宜我也不会去买,但是有一天女朋友从雍和宫帮我求来一个财富手串并且还是开过光的,以后我就每天带着这个手串形影不离,有一次放在某个地方找不到了,当时我就很焦虑,感觉自己损失了很大一笔钱,这个其实就是禀赋效应作祟,因为这件东西通过很特别的方式才到我手里,我已经认定这就是我的东西了,所以他对我的价值是极其高,哪怕我之前对这种手串不感兴趣。
最常见的产品设计场景中就是分享的场景,例如我们常见的一些分享都是底部弹出一些第三方链接方式,那么想一下这样的方式分享率极低,我们可以利用禀赋效应去强化产品的价值感,在学习产品中把学习数据融入分享页面中提升让用户感受到学习的价值增加分享欲望,在旅游产品中一般都会记录用户的旅游足迹,此时把用户经过的城市以地图的形式融入在分享页面中,激发用户的旅游价值,禀赋效应在分享产品中不止这些玩法,商品收货时、贵重物品分享时等等。
诱导即是向用户赠送免费的东西,通过这种方式提供免费试用服务或者是一些优惠礼包等,当得到免费服务或者优惠时由于禀赋效应用户可能会去进行付费或者深度使用,让用户感受到这是它自己的东西,对产品的价值感加倍。(但是我感觉这种方式效果提升不是很明显,但是确实可以利用这种心理去尝试可能会有意外收获。)
诱发禀赋效应的另一个重要因素是用户的主人翁意识,在一些产品中会有一些个性化的设置,用户可以根据自己的喜好去进行设置,这样可以让用户与产品产生价值联动,比如谷歌浏览器的背景和同步功能就是我一直使用的原因,虽然其他浏览器也有同样的功能,但是在互联网初期谷歌可是用这个功能吸引了不少用户,在比如app中常见的换肤、换色等功能。
有正向的也就有反向的,反向指的就是厌恶效应,人们对自己所拥有的东西更加珍视,所以对于损失所表现出来的厌恶要比获取收益表现出的愉悦强烈得多,我们往往会对所损失的东西更为敏感,有心理学家实验过,股票下跌的损失要用双倍的涨幅才能挽回心理痛苦,在产品中常见的就是会员试用服务,当我们给用户7天或者30天的试用期后,时间一到大部分用户都会选择付费,因为他们默认这些服务已经拥有不愿损失。
情绪和社会会影响一个人的决策,因此根据行为经济学,当我们了解这些因素时,我们可以构建设计来帮助用户做出可能的最佳决策,产品设计师可以通过使用价值赋能、个性化、免费试用等简单方法,利用这种效果来提高产品的留存率和渗透率。
指的是用户同时思考两件事情以上时,思考效率和准确性会下降,做事情难以专注。
我们日常工作的时候,如果好几件待办事情同时需要处理,我们自己也是很难去说专注某一件事完成,做设计师的都知道,在设计时如果被别人打扰很容易打断设计思路,我们应该都经历过好不容易沉浸下来去做某个需求,忽然中间有个紧急的需求插过来让我们完成,当我们把紧急需求完成后,再去做被打断的需求发现思路被打断了,这就是《干扰效应》的影响。
人们在处理事情时大脑会给传递出目标信号,根据人的本能认知进行操作,处理收到的反馈信息,最后在反馈给大脑,当多个事情需要处理时,大脑需要同时传送不同的目标信号,身体的各项部位进行执行,这时候我们往往跟不上大脑信号,因为《想》和《做》是跟人能能力反应相关。
人们处理事情就像电脑运行软件一样,同时运行多个软件时,电脑的效率就会出现发烫、卡顿等问题,人处理多项事情时效率就会变慢,无法专注某一个事情。
看下图中这两组金刚区图标,首先第一组的问题是虽然颜色很丰富,但是没有进行很好的分类,增加用户的思考时间,干扰性太大。
再看第二组金刚区图标,虽然很精致且有食欲,很符合外卖平台的调性,当然有好也会有坏,这么多复杂的图标同时出现,当用户目标很明确的时候,这么多的图标就形成了信息干扰,用户需要配合文字才能减少筛选效率。
下面这组某生鲜的金刚区也是同样的问题,虽然把商品实物图作为信息传达的元素,但商品过于复杂,在移动端屏幕上很难看到细节,这需要用户对商品的认知非常明确,例如一用户来卖水果,如果是第一次使用这个产品可能很难通过图标来找到入口。
我们看下面的美团首页,他的金刚区入口有15个,他们的处理方法在结构上是进行了层级区分,把重要切频率高的5个入口重点突出,使用频率较低的入口弱化,通过层级和减少复杂度避免用户出现迷惑行为。
个人中心是承载功能入口较多的页面,很多功能用户一般很少用到,每个用户的功能使用频率都根据用户习惯而定,在设计上个人中心常见的就是把功能按照维度分类,如设置类、功能类等便于用户查找。
还有一种像站酷这种列表布局也是比较效率的布局方式,这种布局方式按照用户的习惯,由上到下的顺序进行浏览,干净简洁的页面,某种程度是减少了干扰。
先看一张对比图,简单讲下我是如何运用干扰效应进行设计。
这是去年我对我们产品的个人中心页进行改版,左边是旧版页面,旧版页面无论是视觉上还是交互上都不符合用户认知,在功能层面也是紊乱不够简洁,整个改版流程呢分为分析用户目标、问题梳理、针对优化、结果验证。
这里主要讲下如何针对用户目标进行优化,用户目标分两个维度,一是个人中心作为管理内容进行使用,二是通过个人中心查看投递简历的进度,其中投递简历对于产品价值是相对较高。
提一嘴当时的用户是技术类居多,大多是求职、学习目的。
无论是视觉上还是交互上问题都是比较多,并且结构比较混乱,把一些用户不常用且对产品没有价值的功能点放置层级较高,过多的就不写了,总之都是问题。
作者:爱吃猫的鱼___ 来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
筛选可以说是我使用比较频繁的一种交互形式,比如我点外卖,会选择满减优惠力度大,同时我也可以选择在哪一个价格区间内的产品,这就会用到筛选,而到了B端产品上来,一个CRM系统当中,筛选的逻辑也会比移动端的复杂,伴随着:且关系、或关系、大于、小于等等这样复杂的逻辑,也为设计本身增加了很多难度。因此,今天我们就来讨论讨论筛选控件
筛选存在的对于整个表单来说是非常重要的,它可以帮助用户,在表单茫茫多的数据当中进行快速的定位;可以对表单进行快速划分,缩短用户对于数据的寻找时间;能够满足用户在工作中,实际业务场景的筛选。
对于实际B端场景来说,筛选是日常数据分类的一个重要途径,我们先来看看实际场景到底有哪些?
比如今天作为一个电话销售人员,想要联系最近注册的用户时,通常会通过筛选来选出最近几天注册过,同时又没有销售更进的客户,进行一个优先级的排布;
再比如说,在销售周报当中,销售主管可以通过筛选得到每个人这周完成的状态,也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等,这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用
筛选可以通过多个筛选条件进行多维度的寻找,而导航、搜索只能通过单一条件进行指定筛选。
虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索,但本质上区别不大
所以在B端项目当中,如果你有表单,那你就需要筛选
我们将筛选分为基础筛选和高级筛选两种,两种筛选会根据业务场景不同,在不同的页面去使用
基础筛选一般为系统预设好的筛选字段,具有很强的业务和场景的需求。基础筛选一般分为四个部分:
筛选条件:是指用户可以筛选的范围
筛选项:是指用户可以选择的筛选项目
已选项:是指用户已经选中的筛选项
备选项:是指用户还没有选择的筛选选项
基础筛选更多作为用户快捷筛选的一种方式,因为一般使用场景当中用户几个筛选逻辑为“且”
同时筛选的逻辑也为简单筛选,所以在使用场景上只适合在对筛选要求不高的场景下使用。
高级筛选一般为筛选中含有运算符,同时筛选当中包含条件关系,比如且关系或者否关系。一般高级筛选包含以下几类关键词
筛选关系:是指几个筛选条件之间的关系,一般为 且、或关系,即 且 关系为几个条件之间的交集;或 关系为几个条件之间的联集(并集)
筛选字段:是指在筛选当中,所要的筛选项,一般为表单当中的所有可筛选的字段
筛选操作:是指筛选字段和筛选值之间的关系,常见的筛选操作有:大于、小于、是、否、包含、不包含、为空、不为空等等。
筛选值:你所需要筛选的数值
高级筛选一般满足更多的用户场景,为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。
当在筛选器条件少于5个的情况下,最常使用的就是上下布局,这样筛选能与网站保持统一的情况下,上下布局也更方便用户进行阅读
当筛选器过多的情况下(一般在5-15个之间),筛选器过多,需要滚屏才能看到筛选结果,用户使用起来会很别扭。所以在5-15个的情况下,一般会将筛选项进行收折,这样保证筛选整体面积不会太大,同时将用户常用的筛选放在前面,可以满足用户基本的业务需求和使用场景
左右布局在PC端一般是以字段选择进行筛选,通俗来讲就是将用户可以筛选的所有字段全部罗列出来,然后通过勾选选,择出你需要筛选的字段,进行筛选器的使用
左右布局的好处是能够将筛选的所有条件都直接的展示出来,可以适应很多场景,在筛选器用15个以上时。通过左右布局的方式,能够让筛选条件进行滚动,在最大限度保持用户使用体验
在日常的B端产品中,筛选的形式有哪些?筛选到底应该怎么设计?接下来为大家总结梳理一些在 B端产品 中的筛选玩法,希望为你开启新大陆。
平铺型一般为用户搜索结果数据量过大,使用户搜索出来的结果与其预期差距过大,用户然后可以通过筛选对数据的再一次分类,使用户能够精准寻找其想要的结果。
平铺型一般为筛选条件少于6个,这样能够通过1行或者2行去展示筛选项的结果
多用于信息量大的产品,比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式,将所有的筛选条件列出来。
平铺型的好处是将筛选项的结果全部或者部分放出,能够帮助用户快速理解筛选项以及快读找到自己想要的结果。
缺点也是很明显,平铺型的控件占比大,需要占据大量面积展示平铺出的筛选结果。
比如淘宝PC端,搜索一个产品后花去40%的面积去展示所有的筛选条件,其实就是想引导用户,淘宝搜索过后spu的数量仍然过大,想通过进一步的筛选,让用户明确自己对想要东西。同时因为面积占比大,通常平铺型都是以收折的状态,只有在搜索触发后才会完全展开
收折型筛选是一种简单直接的筛选形式,将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框,这种形式看上去很简单,但是在B端场景中,下拉框对于用户来说认知成本低,操作性也较强,同时在用户重度使用时,又能给用户很好的使用体验的一种方式
用户可以直接对其常用的字段筛选进行一步操作,并且没有复杂的筛选关系,全部都是“且”的筛选逻辑,能够保证用户进行快速的筛选选择
将所有信息全部平铺展开,信息量过于冗杂繁多,同时在做通用性产品时,这种方式很难做到通用性
单侧筛选是一种更通用的筛选形式,通过对于你想筛选的字段进行勾选,勾选完成后就会出现筛选条件,然后选择筛选字段、筛选操作、筛选值,一般选择完成所有筛选后,还需要点击查询,筛选操作才算完成。
整个单侧筛选,大量的筛选条件可以放置在表单的左侧或者右侧,通过表单纵向空间,去承载大量筛选条件。
节省空间、通用性强。因为在很多Saas系统、Paas系统当中,无法针对每一个客户进行设计,就要考虑到系统通用型高,做一些大而全的功能。在每个表单也所需要定制化修改的地方很少,同时能容纳的信息量可以很大。
就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中,要通过不断寻找,来满足我的筛选需求,操作麻烦。
我们产品在某一次改版就将筛选由收折式修改为单侧式,因为我们用户使用筛选的场景非常的多,用户每次筛选都要多进行2、3步操作,导致用户进行了大量的吐槽,后来进行修改,将筛选顺序支持手动调整顺序,用户吐槽的次数才慢慢减少。
表头筛选是一种复杂筛选的形式,其最开始是来源于Excel的筛选形式。点击表单的筛选按钮,可以将表头的筛选字段直接带入,方便用户。之后在后台产品的发展中,得以借鉴过来。
可以通过表头的点击,使用户更快捷进入到自己的筛选条件,在通常情况下,在表单越左的数据显然是越重要的,也是使用筛选去筛频率最高的,因此高频的筛选场景基本还是得到满足。
用户第一次进入系统很难理解这种交互形式,且在每个表头都会有一个icon,影响用户对于表头的识别。
通过点击筛选按钮,展现出筛选弹窗,进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd,在其中筛选不是很强的一个功能,同时也是系统中十分有必要的。
是能够在节省面积的情况下,可以进行很复杂的筛选,同时可以支持复杂情况下的筛选
弹窗会遮挡一部分表单数据,会影响筛选人的判断,其次筛选条件的添加也相对更加繁琐。
在我们一系列筛选的调整过后,我们团队也总结了对于我们来说更重要的条件和形式,来和大家分享探讨一下。
我们认为影响筛选控件最重要的是用户的使用频率,因为用户的使用频率和使用方式,直接影响到我们筛选是用普通筛选or高级筛选,也会影响到筛选的形式。
筛选功能的做法,取决于我们产品未来是想往哪一个方向发展,如果想把功能做的强大,就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。
在B端系统当中,最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点,但是用户对于这个点的认知成本实在过低,也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后,要适当引导用户,解释这个功能的使用场景才不会让你设计的功能被淹没。
作者:CE青年 来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
最近看到很多美妆博主都在出什么红黑榜,其实就是在说哪些产品是有问题,不推荐大家使用,有哪些东西是可以安利的好物。
想着B端设计当中,也会存在这一情况。然后我在打开 Ant Design ,浏览完所有的组件,你会发现:“组件当中也会存在红黑榜~”
今天就趁着 618 刚过的这个时间节点,我也来“带带货”,说说B端组件当中的红黑榜
首先我先说一下关于红黑榜的定义
1.使用频率高:也就是这个组件我们平时会频繁的使用
2.黑榜:在使用过程中,会遇到诸多问题,导致无法正常使用
3.红榜:往往会更满足B端产品的实际需求,对于组件有更深的认识
通过我的分享能够给大家有一个初步的认识,当然整个组件都是基于我平时的设计观察与使用,目的也是想和大家分享、避避坑,如果有什么疑惑,欢迎在评论区我们一起讨论~
树形选择在B端系统当中的出现频率非常高,比如我们常见的:表格、表单、各类详情页,只要涉及到 层级结构的选择,都会有它的身影(注意,这里主要说的是树状的选择类组件)但是作为设计师,树形选择在使用的过程当中,会出现很多意想不到问题
尺寸无法确定
因为树形选择本身这个组件的特殊性,它的大小需要通过内容当中的高度与宽度共同决定,而在设计过程当中,高度与宽度究竟为多少就要仔细的考虑
因为在使用树形选择时,需要思考每一个内容的具体尺寸,太高太低都不行
如果太低,展开树形选择就会非常的麻烦;如果太高,则在数据量较少的时候,会给人数据很空
横向空间也是同理,也就造成了在设计时,需要深入思考
树形选择,作为基础组件,在应付复杂的选择需求时,很明显的会感到“力不从心”,无论是从它显示选中时的内容,还是大量的数据时的选择难度,树形在适用性上,都会大大降低,当遇到这类情况时,建议采取更多 “业务组件” 的方式来对选择进行优化
分类表单(也可以叫Tab表单,不过只是代称而已~)在B端产品当中也非常常见,它出现在复杂的表单当中,但是作为设计师,在真正去使用分类表单时,你就会发现会有非常多的问题需要我们去处理
对于用户而言,分类表单不能够完整的查看表单信息,每一个都需要来回切换。也就意味着填写表单的时候,我们不能通过滚动查看所有数据,而是要去点击每一个单独的分类里面,通过分类了解具体的表单内容
同时必填项的提示,在分类表单也非常难以处理,因为其每一个独立,而作为用户,其实是不清楚具体哪一个分类里面有必填项,也会导致填写的效率过于低下(其实会有处理的办法,只是大家对于这类提醒都不太满意)
分类表单在编辑状态时,同样难以处理。当提交完分类表单后,我们还需要考虑数据在详情页里的展示形式,因为表单与详情页的映射关系,这时候在设计时,应该提供某一分类下的数据编辑,还是整个分类表单的数据编辑?
其实这种情况,特别是初级B端设计师,处理起来也是非常棘手
顶部导航非常特殊,虽然在我之前 导航菜单 的文章当中提到过,但在使用顶部导航的过程当中,还是会面临很多问题
顶部导航最大的局限性便是展示数量太低,毕竟在空间布局当中,横向空间与纵向空间的差异其实是非常大的,顶部导航的高度设定不能过高,同时 二级、三级菜单 只能够使用下拉菜单,也就导致在导航菜单的设计当中局限性过大,并且项目一旦发展过后,不容易解决问题
当然,顶部导航并不是一无是处,在许多工具型产品、官网 当中,顶部导航都有着它的一席之地,其实这类形式,更多是以内容为主的网站结构,才会采取顶部导航,也就是上下结构会更加合理
栅格严格意义上来讲不算是组建,但是由于很多设计师 误用、乱用,导致设计师为了栅格而栅格
因为在常见的移动端设计当中,是不存在栅格(主要是移动端横向空间小,使用不频繁)
在桌面端的设计当中,并不是说栅格不好,而是很多时候设计师使用栅格往往会非常盲目,举一个简单的例子,在表格当中是否需要使用栅格?
答案是:“不用使用栅格”,其实这类问题就是目前很多设计师的问题,因为会盲目使用,也就导致了我在做设计的过程当中,出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方,希望大家别盲目使用
至于栅格应该如何使用,在我之前的文章当中都有提到,可以自行点击历史记录查看
滑动输入条在很多概念设计当中都会经常出现,特别是在 Dribbble 上的桌面端设计当中,是每一个设计师的标配,但是在实际的B端项目中,特别是桌面端的B端系统当中,滑动输入条是非常不合理的一个组件
因为B端产品当中,大多数的产品都是需要精准录入,并且数据的区间非常大,因此也就造成了滑动输入条,使用起来给用户的感受是非常糟糕的,并且由于大多数用户的预期还是以直接输入为主,这也就造成了现如今B端产品很见到滑动输入条的原因
面包屑导航在实际工作当中经常使用,因为在常见的B端系统当中,导航菜单以及信息结构,一定是非常复杂的(除非你的系统里面就只有一级导航菜单,并且没有其他的页面层级逻辑)
因此通过面包屑导航,能够让我们清晰知道整个页面的信息结构,通过面包屑又因为其 小巧、灵活,无论你是在一个完整大页面当中,又或者是一个小的气泡卡片当中,面包屑都能进行承载,并且它还能够起到 返回 的作用,又能够清晰的展示页面的路径信息,是一个可以一举多得的组件
穿梭框相比大家的不会陌生,在设计B端产品的时候,或多或少都会有所涉及,与此同时,由于穿梭框本身复杂,再加上很多设计师会觉得它占比过大,因此不会去使用
今天安利穿梭框,其实是想安利这一类的穿梭类的组件,你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变,比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置,这些都是传统的数据选择过后一步一步演变而来,因此这类穿梭框型的数据选择
其实更加体现的是设计师基于目前的组件所进行的优化,而分析它为何这样做,这样做的原因,成为了穿梭框上榜的理由
折叠面板就像一个大的“盒子”,当产品经理在你的身后说着:“这个信息我要放,那个信息也不能落下的时候”,拖出一个折叠面板来解决这个问题
其实在折叠面板的使用过程中,主要是在详情页以及表格当中,因为折叠面板本身可以容纳很多信息,并且能够交代具体的层级关系,因此使用折叠面板能够有更多展示数据的可能性,即插即用,非常方便
在页面当中的任何地方,蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中,经常使用的一个组件,因为它能够容纳下任意的内容,小到一串文字、大到一个视频,都能够在气泡卡片当中进行使用
并且在信息当中,气泡卡片作为一个信息补充的组件,因此在系统当中,需要展示但是又不是那么重要的信息,使用气泡卡片,就会更加的方便
最后一个,自然逃不掉我们的锚点导航。感觉在我的疯狂安利下,越来越多的产品都开始使用锚点导航。因为B端产品必定是复杂且多的信息,自然而然我们在使用的过程当中要更多考虑信息的承载
作者:CE青年 来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
今天这篇国外大佬写的文章,算是从为什么这样做的角度来分析卡片设计,一起来学习吧。
从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台,卡片设计似乎是无处不在的,这些大厂广泛应用使得卡片设计很快流行了起来。
作为一个信息容器,卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容,卡片设计可以根据不同的设备和屏幕调整其大小,平衡界面视觉和用户体验。
卡片是一个UI组件,包含了某一个内容的信息和操作。卡片可以包含各种元素,但它们都应该属于同一个主题。
这样做的目的是为了避免冗长的文字,并呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们马上就知道如何使用它们,因为它们与实体卡片是一样的。(彩云注:这个就是用户心理学中隐喻的运用)
卡片之所以流行,是因为它们能更好的把控内容。卡片是模块化的,所以不同的内容可以堆叠在一起,而不需要注意它们的差异。
卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容,而无需担心设计会变得杂乱无章。
卡片可以将内容分解成易于理解的小块,以便用户与之互动。通过给内容一个容器,卡片向用户表明内容是真实和感性的。
卡片 UI 设计流行的原因还有很多:
直观:卡片在界面中看起来与现实世界中的卡片相同,它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前,它们在现实生活中无处不在:名片、棒球卡、便签。卡片代表了一种有益的视觉类比,它允许我们的大脑直观地将卡片与其所代表的内容联系起来,就像在现实生活中一样。
易于阅读:卡片不占用太多空间,并敦促设计师优先考虑其内容。不同的是,每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。
有吸引力且对用户更友好:基于卡片的设计通常非常依赖视觉效果(尤其是图片);就信息架构而言,视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。
有利于响应式设计:卡片是矩形的,可以平滑地调整大小,以适应不同屏幕的水平和垂直正面,这意味着用户可以在所有设备上获得统一的体验。
便于分享:卡片可以鼓励用户在社交媒体上分享内容,因为它允许用户只分享特定的内容,而不是整个页面。
什么时候应用卡片设计?
这通常是当你有:
基于搜索的界面: 卡片能通过模块的内容快速显示合适的内容,这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。
信息浏览:当用户浏览信息时,卡片的兼容性更好。
任务管理:当可以将流程中的单个任务作为卡片进行说明时, 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好,其中每张卡片代表一个单独的任务。
类似项目:卡片最适合于异构项目的集合(当并非所有内容都是相同的基本类型时)。
可视化分析: 仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片类比可以帮助在不同物品之间创造出更明显的差异,其中每张卡片可以适应不同的角色。
卡片的布局可以不同,以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。
(1)富媒体: 卡片可以包含缩略图,以显示图片,插图,头像,Logo,图标或图形。
(2) 标题: 标题文本可以包含相册或文章的名称或标题。
(3) 描述: 支持文本,如文章摘要或简短的描述。
(4) 行动按钮: 卡片可以包含用于操作的按钮。
(5) 副标题: 副标题文本可以包含详细介绍,如文章的署名或标记的位置。
(6) 图标: 卡片可以包含操作图标。
有一些小的技巧可以快速提高卡片设计细节。
1. 使用相关主题的图片
图片是卡片设计的主角,你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像,卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体,但需要与内容主题相关。
2. 增加视觉层次
卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部,并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。(彩云注:视觉层级对于信息表达至关重要!)
3. 限制内容长度
一张卡片应该只包含重要的信息,并提出一个相关的观点,以获取额外的细节,而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时,卡片可能会变得很冗长,并失去与卡片类比的实际联系,因为它不再像一张卡片了。
4. 避免嵌入链接
不要包含内联链接,卡片应该自己链接。嵌入文字链接会让用户误操作。
5. 区分操作主次
包含不同操作的卡片应该在视觉上形成对比。在下面的例子中,我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。
6. 去掉分割线
对于新手设计师来说,用分割线来区分内容是一种常见的方式,以此定义不同的组。这些边框会造成不必要的视觉干扰,从而影响内容。
APP中的卡片并不是纯粹的拟物概念,但通常情况下,使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下,你可以做几件事:
1. 使用圆角
在形态上与真实世界的卡片进行视觉对比。圆角更有效,因为它们让我们的眼睛容易跟随视觉动线,“因为它更适合头部和眼睛的自然运动”。
2. 增加一个轻微的外边框或者投影
增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次,这有助于我们区分UI元素。
然而,在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果,让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。
3.注意字体和留白
重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白,让用户有时间处理并进行视觉重置,有精力看完一张卡再到下一张。
选择简单和基本的字体,因为基本的排版最大限度地提高了可读性,并有助于浏览。
让我们看看一些真实项目中的卡片设计案例:
信息流中的卡片设计
保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构,但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素,以使读卡片的人更容易理解它们。
由Diseno Constructivo和Webpixels设计
他们突出特色图片和标题作为最突出的元素,这能帮助用户决定文章或发布的内容是否适合他们。
电商卡片设计
产品卡片是一个很重要的东西,它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意,激发人们获得产品的欲望,激励人们购买,并在搜索结果中得到高效推广。
由Webpixels设计
产品的名称应该放在最显眼的地方,这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语,所以你需要一个高质量的产品配图来设计完美的产品卡片。
如果产品有特价,不仅要在价格栏中注明促销价格,还要注明常规价格,以及客户可以节省多少钱。
个人中心卡片设计
简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要,卡片设计在这里也能发挥重要作用。
由Neelesh Chaudhary设计
就像每一张卡片一样,配置文件卡片也是一个UI组件,它包含了对它所代表的内容至关重要的信息。为了达到你的目标,你要向其他人推销你自己。
确保只包括必要的信息(例如,照片,名字,职业),让你的“关于”页面有剩余的细节来完善你的个人资料。
仪表盘卡片设计
仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型,每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。
由Simmmple设计
仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI,允许用户精确地控制哪些数据需要在仪表板的前端做好。
只包括最相关的信息,为用户使用方便。当你的数据集在一起看更容易理解时,找到在一张卡片上显示它们的方法。但是要小心,不要让用户感到困惑。
日常计划卡片设计
看板任务卡似乎是一件非常简单的事情——拿一张便签,写下你需要做什么,然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息,清楚地传达了必须做什么。
由Neelesh Chaudhary设计
卡片上包含的信息包括任务的名称和重要的细节,如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”,但是状态可能因项目而异。
卡片结构最适用于添加或删除任务这样的小改变,而不是改变像你的总体目标这样的大想法。
有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片,我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效,而不是简单地作为内容列表的现代替代品。
作者:彩云Sky 来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
决策疲劳在现今互联网深度发展的时代似乎非常常见,面对眼花缭乱的APP页面,我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象,给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述,推荐对此感兴趣的伙伴阅读。
决策疲劳是用户体验圈一个路人皆知的词汇,用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明,它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题,是一件非公众都能做好的少数事件。
在产品设计中,我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务,能够越顺利、越直接。个人在特定时期内被要求做出的决定越多,即使这些决定是微不足道的(比如选择播放那个节目),他们的决策质量也会越低。
当你感到疲倦时,这会显著地影响你的决策能力,而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣,因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。
本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。
作为用户,每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝,降低我们的满意度,并可能导致我们对体验感到沮丧而不是变得更好。
当给用户太多选择时,他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能,但是当界面因为选择过多而过于复杂时,它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明,当我们有太多选择时,往往会导致决策失误和情绪沮丧。
来自哈佛商业评论的模型
在追求最大化满足商业化可能的产品设计中,老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型,横轴为功能数量,三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化,公司能够根据他们想要的结果找到适合他们的功能数量最佳点。
研究表明,人们更有可能购买提供了有限数量的商品。在这种情况下,他们也会对自己的选择更满意,而不是从购买前的犹豫到购买后的忐忑,从而产生更大的满足感。
关键是很多产品为用户创造了太多的选择,这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品,而不是按照预期进行实际购买。
在用户体验世界中,关于使用多少次点击以及人脑一次可以接收多少信息,存在许多相关的说法。但最重要的是,产品设计师需要在简单性和功能性之间取得平衡,这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。
最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。
这是个谬误,虽然我在某种程度上同意这种观点,因为坚持这样的限制似乎更自然,但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据,而不是早年的4.0英寸的小屏手机,用户可以轻松地一次看到他们的所有选项,并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。
同时现在也有一些研究表明,人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好,因为用户不必花时间深入查找相关信息。
比如主页上最多包含 几十个类别链接的淘宝列表)比仅提供有限选项(如没有子类别的类别)的网站更有用。但这里要强调的是需要考虑实际的用户场景,电商平台的属性导致了要为消费者提供更多的选择,而类似工具产品,尤其是垂直工具产品,在设计选项数量时一定要谨慎。
还有另一个站不住脚的理论:从业者普遍接受但完全不靠谱的“三击规则”,或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响,比方说付费流程,缺少必要的流程硬按点击次数把流程缩短,导致用户错误付费而产生的用户体验变差几乎是不可逆的。
比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论,信息线索的持续感知对你的用户体验很重要。
人们在日常生活中要做出很多选择,而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时,重要的是信息组织方式。
你可以去尝试减少选择的数量,但最重要的是你的信息结构。如果你的信息没有组织好,或者给到用户的决策过程中涉及的步骤过多,用户就不会费心去寻找他们想要的东西,因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。
为了在产品上让用户的决策中有更好的转化,我建议去掉任何不必要的东西,例如无关的标签和链接,这些标签和链接会分散用户的注意力,使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项,平衡简单性和功能性的关系。
现实中我们都会犯错。它可能发生在我们所有人身上!但是,如果用户犯了错误,优秀的产品设计师应该怎么做?
答案是:让用户轻松回到起点。
通过让用户走上正轨,你更有可能留住他们作为用户,而不是导致他们离开你的网站或应用程序。
下面是我在设计用户流程时的一些最佳实践:
导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统,对用户体验至关重要。
导航的设计应该直观且易于使用。用户应该始终知道它在哪里,它的意义,以及点击它会去哪。
一个好方法是通过颜色为用户对操作区域进行导航:比如当进行切换、更改等动作时配备不同的颜色,并用文案清楚地说明每个菜单项下是什么功能。
这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。
一个例子是 Instapage 登陆页面。如果标题没有箭头,很难看出下方有更多内容:
在设计新界面时,必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么?
下面是三个常见的 设计惯例,这些惯例可以让你的用户在与产品内交互时感觉更熟悉,这有助于减少他们的学习成本,并让他们更快地开始学习你试图传达给他们的任何内容。
简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引,因此如果你在整个界面中使用简洁的配色方案,人们会更容易找到自己想要的信息而不是被颜色乱神。
不仅要遵循常见的用户体验规则,而且要在一个产品里不停的重复,不要轻易作新颖的尝试,前辈们大多已经帮你尝试过了。
这样的意义在于:
人们使用你的产品感觉更轻松,因为这个产品没什么复杂的新东西(降低了学习成本)。
一个例子是,目前无论你在那个浏览器查看哪个页面,你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知,因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。
图标是在你在表示操作对象是什么的好方法,它们易于理解且具有普遍可识别性,因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。
图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。
我们都知道应该以用户为中心进行设计,而不是你自己,但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时,其实往往会按照自己的喜好走偏。
一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。
或者某些设计师会讲角色分类,然后全情单线程的专注一个项目,以牺牲时间和效率为代价确保航道的正向。
以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时,请确保在进行原型设计之前先和你的用户聊聊。
可以尝试提出以下问题:
往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。
你可以使用多种用户体验研究方法来确保你在设计时考虑到用户:
不要提供太多的选项或功能让用户不知所措。
每个产品都有自己为用户解决的核心问题,用户希望在产品中获得帮助并快速做出决定。问题是,很多产品经常沉迷于他们产品功能以及他可以为用户实现什么,忘记了如果有太多选项和功能,新用户可能会感到不知所措。
如果你负责一个产品,可以考虑你的用户在面临过多选择或功能时的感受,并尽量优先突出他们最需要的选项或功能。
例如,在电子商务网站中,用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质,如果预先只有三四个选择,可能会带来更好的体验。也可以考虑隐藏一些选项,方法是使用视觉提示,例如类似“探索更多”文字的按钮。
确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状,首先呈现基本信息,不太重要的信息尽量放在不显眼的地方或者想办法隐藏。
这里提供了六种方法,帮助你减少产品中的决策疲劳,从而使用户更有可能走上正轨,解决他们的问题,并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考,才能更好的服务于用户
文章来源:人人都是产品经理 作者:公众号:真的不一定
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
整个报告分两个部分,
一部分是调研概述,主要描述调研是如何进行的,包含:用户方法阐述,调研对象说明,用户画像等,简单清晰的告诉别人你数据是如何获取的,增加后期问题及数据阐述的科学性。(还有一部分,就是关于调研涉及人员,可以在合适的时机带一下是UED全员协作完成的整个过程的。)
另一部分是调研结论,我的描述思路是:总-分-总,先描述总结论,让观看报告的人对整体结论有个初步了解,然后详细描述各模块分结论,最后提出各模块共性问题。
结论部分是整个报告的重点,所以前面的概述就简单介绍清楚就好了,不需要占太多篇幅。
调研流程,确定标准,是汇报,也是邀功,调研本身就是个繁琐的过程,我们把过程直观的呈现出来,让老板知道我们整个调研过程,前前后后做了哪些准备。付出了哪些努力,体现工作量的同时,也能体现我们的专业性,但是不是记流水账,得有总结。
我把整个路程大体分了3个部分,第一个部分是调研前的准备,第二个部分是调研,第三个部分结果阐述。结果汇报,后期工作计划,汇报很重要,调研做得再好,你的结果无法呈现,问题就没办法结论,那就只会停留在发现结论。
评估纬度是为了阐述我们从哪些纬度去收集答案的,想要验证什么问题。
由于大部分人对调研都只是停留在问卷调查的层面,所以对样本量的选择有不理解,可用性测试主要是为了观察用户操作路径及反馈,所以样本量不需要太大,这个可以简单的解释下是如何挑选用户的。
数据整理也是汇报的一部分,一方面,材料佐证我们做过的努力和准备,另一方面,数据存档。
我们整个调研采用了录音与录音相结合,录音是为了便于后期多人协作帮忙整理问题,录屏是记录用户操作路径,收集用户使用过程中的卡顿,去挖掘卡顿原因,这是是我们做可用性测试的主要目的,这也是跟问卷调研最主要的差异。
在写报告的过程中,我一直在想关于整体满意度的结论,是放在第一部分还是第二部分,但是鉴于第二部分主要描述问题,所以思虑再三,还是把他放到了第一部分。
我们拿到各模块的数据后,要怎么用着很关键,单个零散的数据是体现不出问题的,只有对比着看才能看出问题。
通过数据对比我们明显能发现,付费用户对产品的整体要求要比增值服务的要求高得多,毕竟不要钱的,好不好用无所谓,好用我就用,不要用我就不用。但是如果是用户花钱了的,那他就需要考虑,我获取到的服务和花的钱是否成正比,这也就间接确定了我们后面问题处理的优先级。
这里建议做个中场页。
前面说过,问题描述采用的总-分-总的节奏,所以最开始描述了一下我们收集到的所有问题的概述,包含,总共多少个问题,已经分类类型的分类占比。
这里分享一个问题整理的表格,表格跟PPT的作用不一样,PPT是为了汇报成果,获取支持,表格是为了后续跟进落地,解决问题。
当然,先把问题整理出来也是为了更好的输出PPT。
共享文档可以让更多人清晰的看到问题,因为汇报的效果比较好,老板给了明确支持,所以汇报后我们将表格发给了各个产品,与设计师配合,认领问题,给出优先级和排期计划,整个过程推进的很顺利。
分结论部分,主要通过用户体验地图去描述用户路径,直观阐述用户使用过程中的情绪和痛点,右边整理出来了需要重点关注的一些点。
用户体验地图主要描述的是用户发现,不一定是问题,属于启发类,可以为后期优化方案的输出提供方向引导。
问题整理则是明确的已知问题描述。
各模块可以根据实际情况去描述各自的问题,这里就挑了几个典型的模块举例了一下,就不一一阐述了。
再来说一下,分结论讲完之后,整理的共性问题。先说问题,再说涉及的模块,体现问题的严重性。
到此,整个PPT就结束了,汇报完成后,老板就开始给各业务线下达任务了,就又回到了表格上,我们把之前的问题以界面纬度进行整理,跟产品确认优先级和排期计划,并与老板就排期计划进行了确认,然后责任到人,目前第一轮优化方案已经在陆续落地中,整个发现问题到推进落地的过程,还是比较顺利的,
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
客户与公司的商务售前进行沟通,客户的痛点和建议会传达给产品经理,产品需求明确后,做出原型图给到设计师。等设计师拿到需求的时候,基本已成定局,合不合理、如何优化的空间都会比较小了。造成这个现象的根本原因是设计师能看到的视角范围有限,B端业务场景本身比较专业,难以直接带入使用者的角色,就比较难取得大的突破了。
如何打破这一僵局呢?答案只有一个,那就是设计师要主动更前置的加入到产品方案设计中,深刻理解业务,为产品升级提供助力。这就涉及到用户研究了,本文将和大家分享用研的相关理论基础和方法。
双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题和发现正确的解决方案。
双钻模型是一个结构化的设计方法,被很多设计师喜爱和使用。
探索/调研——透析问题(发散)
定义/合成——聚焦领域(集中)
发展/构思——潜在问题(发散)
传达/实现——实施方案(集中)
实际工作中用到双钻模型会有一些变体,举个例子:
下图是对阿里内部款移动运维产品的分析,分析其从0-1的方向探索和从1-1.5的发展历程:
下图是曾经在一个设计讲座中,滴滴CDX 一位设计师的分享,她把双钻模型利用到设计的研究和输出阶段,个人感觉此模型的使用场景也很贴切。
不仅仅是在完整的一个项目中,在单一的某个阶段双钻模型也是理念很好的承载容器。在每一个“确定”前后,都有用研的身影。
用研旨在通过实验和观察结合的研究方法来提高产品的可用性,指导产品的设计、开发和改进。重点是通过观察技术、任务分析和其他反馈方法来了解用户的行为、需求和动机。
在获取后台数据之后,我们会分析为什么留存、为什么流失、为什么买这个不买那个,
设计师认为很棒的新功能,真的是用户想要的吗?用户真的会用吗?
观察数据只是一种手段,而非结果。当一个页面中出现值很低的功能时,我们不能直接判断他就是不重要的,也可能是因为视觉上太弱或者交互操作不方便引起的。只有做用户研究才可以真正了解用户的行为背后的原因,真正的动机。
如上图,是一个红包发放页面的设计前后对比,从数据中了解到使用优惠券的用户不到30%,埋点发现大多都点击了返回,用户没有按照期望的路径走,调研发现操作路径不清晰,没有形成闭环。由此可见,发现问题时,先埋点细化问题——再分析问题——结合用户研究,提出优化方案,才能真正发现问题解决问题。
产品的发展周期分为产品概念期、设计开发期、宣传推广期、平稳发展期和产品衰退期五个阶段,在每个阶段都有相对应的用户研究测试可以做。
对应上文的产品发展周期可以做的用户测试,我们要找到相对应的人群:
最后就是将用户研究进行落地了,如何让用户研究达到预期的目的和效果呢?可以在开始前的准备阶段问问自己如下的问题:
接下来我们看看到实际落地环节,有哪些用户研究的类型可以做以及怎么去做。
桌面研究又叫“文案研究”,指不进行一手资料的实地研究和收集,而是通过电脑,杂志,书籍,文档,互联网搜索等现有二手资料进行分析和研究的方法。
完整的桌面研究分为以下五个步骤:
在需求细分阶段,可以用到SWOT 分析、波特五力模型、PEST分析、波士顿矩阵等模型
收集数据通常可以从内部数据和外部数据来源广泛获取然后结合分析。
内部数据来源:市场营销数据、产品后台数据、其他相关报告等。
外部数据来源:政府部门、国际组织、行业协会、专门调研机构、联合服务公司、其他大众传播媒介、商会、银行等金融机构、官方和民间信息机构等。
定性研究是指通过收集、分析和解释那些不能被数量化的信息,来挖掘问题、理解事件现象、分析人类行为与观点的方法,主要作用是探索“可能性”。
定性研究专注于更小但更集中的样本,通过非结构询问和观察来获得不能量化的信息。
流程如下:
常用的定性研究方法:
我们需要明白访谈适合哪一种项目研究,比如要针对新功能进行一次面访。
接下来我们需要进行用户的招募,因为面访比较耗费时间和精力,所以最好准备一些礼品,否则很难招募到用户。招募用户的渠道可以是产品中投放问卷、社群招募等方式来邀约难度用户。
用户访谈环境,准备一个安静的房间,准备好水、纸、笔、录像、录音笔等工具。
整理访谈内容,每访谈完一位用户进行一次小结。
接下来模拟一次用户访谈的整个流程:
开场:首先介绍一下自己的情况,并且让用户了解这次访谈的目的,建立一个轻松的谈话氛围。
探索:针对研究目的进行探索,比如目的是做用户体验地图,了解用户在使用过程中遇到的问题。
注意:如果直接问平时怎么使用我们的产品,用户会比较懵。这个时候最好给他一个确定的环境,比如你能不能演示一下你平时是怎么管理货源的,这个时候他就明白原来需要我进行这样一个任务。
观察:在用户回答提问和操作演示中,查看用户碰到了什么难题。比如有超过一半的用户多次点击一个按钮,说明这个按钮设计的大小不太合理。
思考:深层次挖掘。比如用户反馈字太小,但实际操作中并没有眯着眼或更靠近屏幕,可能原因一是他们本身就把手机屏幕文字调为最大,二是信息排布过于密集,效率低,并非因为字小。
定量研究是指确定事物某方面量的科学研究,将问题与现象用数量来表示,进而分析和解释,从而获得意义的研究方法。定量研究的数据分析,主要作用是回答“多少”的问题。
定量研究的意义:
用一个数值来表示你产品的可用性。数值有时比质量检测的结果和视频更有说服力(特别是当你试图说服像高管或客户这样的人)时。
比较不同的设计(比如,你的产品的新旧版本,或者是你的产品与竞争对手的产品相比),并且确定你观察到的差异是否具有统计学意义,而不是随机的。
改进用户体验权衡决策。比如,如果预期的设计改进成本很高,那么它值得做吗?定量研究方法可以帮助你验证重新设计是否值得。
常用的定量研究方法包括:可用性研究、A/B Test、问卷调查和满意度调查。
测试的重点是收集数据指标,比如任务时间或者成功率,一旦你收集了相对较大的样本量(大约35个或者更多),你就可以使用它们来跟踪产品的可用性,或者将其与竞争对手产品的可用性进行比较。
在A/B测试中,团队需要创建同一界面的两个不同的最新版本,然后将每个版本展示给不同的用户,用来确定哪个版本的性能更好。基于分析的实验,对于决定同一个设计的不同变体非常有用,并且可以结束团队关于哪个版本最好的争论。
问卷调查是一种灵活的用户研究工具,调研时可以同时获得定量和定性的数据,比如评分、多项选择题中的答案的比例,再加上开放式问题的答案。你甚至可以把对调查的定性回答转化为数字数据。
问卷的一个优点是:可以经常将你的调研结果与行业或竞争者的分数进行比较,看看你做得怎么样。即使你创建了自己的自定义问卷,也可以随时间的推移对自己产品平均分数进行追踪,来监控产品的改进情况。
可以根据你的研究问题进行定制,这些方法通常会首先让参与者接触到产品(通过向他们展示静态图片或者要求他们使用现场产品或原型)。然后,要求用户通过从描述性的词语列表中选择一个来描述当前设计。
如果你获取自身目标用户的样本量足够大,那么整体趋势就会显示出来。例如,你可能会有84%的受访者将此设计描述为"最新"。
比如这次改版用户对新版本的满意度怎么样。只有确定了目标,你的问卷才是有价值的。
因子分析法要求调查数量是调查问卷问题数量的5-10倍,因此,如果调查问卷中共有20个问题,那么调查样本数量可以大概确定为100~200个,有效回收样本30份即可。
问题顺序的基本原则
往前放:
熟悉的问题
简单的问题
引起兴趣的问题
往后放:
开放式的问题
个人背景资料
简洁明确:
•你用了多久的Google map?(❌)
•你第一次使用Google map是什么时候?(✅)
这两个问题看似类似,但是当用户在思考的时候,第一个问题显然会思考更多的时间,用户很可能在想,是想知道我第一次用的时间,还是我用了多久的时间。
中立、无诱导性:
•你喜欢这个功能的设计吗?(❌)
•请您对这个功能的满意程度进行一个打分,最低1分最高5分?(✅)
避免使用带有引导性的问题,问用户是否喜欢、是否满意,这样通常用户都会偏向于回答喜欢。
设置选项时,要做到:
定量分析的结果多以数据、模式、图形等来表达。
•眼动追踪,英文Eye Tracking,是指通过测量眼睛的注视点的位置或者眼球相对头部的运动而实现对眼球运动的追踪。
眼动仪是一种能够跟踪测量眼球位置及眼球运动信息的一种设备,在视觉系统、心理学、认知语言学的研究中有广泛的应用。
注视分析——分析注视轨迹、先后顺序与流畅度
注视热点图——分析最关注区域和忽视区域
兴趣区分析——分析平均注视时间与各兴趣区注视顺序
通常需要辅助测试(如定性访谈)来收集更多实验数据
•脑电研究,大脑活动时,脑内亿万神经元活动引起头皮表面的电位变化,含有大量心里信息,测量脑电信号可绘制脑电图,以不同波形反映出来。
利用生理探测技术,研究用户对产品的情绪反应
相比传统调研,更加能够排除从众行为、事后回忆偏差、社会赞许效应等的干扰
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com