首页

想要引导用户行为转化,设计师必须深刻理解这 4 个认知心理学理论

ui设计分享达人

很多网站在短时间内就取得了巨大的进步 —— 那些过去十年里最知名的品牌网站,与第一次迭代相比发生了很大的变化,这令人感到无比惊讶。 


网站最初用于商业目的时,人们并没有过多地关注用户体验。过去的目的是将尽可能多的内容塞进一页里。现在,设计师们通过大量研究、数据挖掘和优化等方式来吸引用户的注意力,同时在正确的时间提供合适的内容、功能和选项。 


越来越多的公司正在采用先进的心理学研究,以推动用户参与更多的互动和付费项目,这一现象使得曾经被认为是一门艺术的东西转变成了一门科学。





1997 年的 Apple 网站




说服式设计


除了许多必要的元素之外,好的设计总是会考虑到用户的情感和心理需求。让我们来看看什么是「说服式设计」,并探索如何将影响人类行为的心理过程应用到设计中。


“说服” 这个词往往与操纵、欺骗相关联,尤其是对一个善于使用「互联网陷阱」的设计师来说。但是,我们要明确一点,说服式设计中的 “说服” 并不是这个意思。说服式设计可以使网站易于使用,从而改善用户体验。因为,说服式设计是源于对心理诱因、用户行为的理解和运用。


(互联网陷阱:兴于 2010 年,由当时英国用户体验咨询师 Harry·Brignull 首次提出,指的是网站或应用程序采用诱导性或胁迫性设计,迫使用户采取或不采取某种行动)


例如,亚马逊就很好的运用了说服式设计,它通过推荐其他产品和配件,以及展示 “查看过此商品的顾客也购买了某物品” 的选项,引导用户继续购买更多商品。为了快速完成销售,他们还为购物者提供了一键购买商品的功能。




亚马逊运用说服式设计的案例


我们都一直在花费大量时间上网,设计师可以利用从线下行为中学到的知识来创造更好的用户体验。无论你是想优化现有网站还是构建应用程序,说服式设计都将引导和支持用户的在线体验。


设计师要如何利用心理学的研究成果来增强其设计的影响力呢?


理解心理学原理可以让你对工作的基本原理有更透彻的理解。它可以:


  • 在缺乏用户研究的情况下,作为研究和论证的来源 
  • 帮助客户验证你的设计和推理

让我们来讨论一些心理学理论。




控制感


作为人类,我们天生就需要控制。这可以追溯到我们最本源的需求。在划分需求层次时,心理学家亚伯拉罕·马斯洛(Abraham Maslow)在提出需求层次时,将我们最基本的需求命名为:健康、食物和睡眠。所有这些都需要我们对环境进行一定程度的控制。




马斯洛需求层次


作为 UI 设计师,我们需要确保用户在我们为他们创建的环境中拥有积极的体验。这就意味着需要通过提供合适的工具来增强用户的能力,以帮助用户在产品的使用过程中获得控制感。


“今天,你可以调整屏幕的亮度,禁用通知,并可以决定手机是否应该同时连接蜂窝数据和 Wi-Fi …… 即使这些调整只会将手机的电池寿命延长几分钟,但这种可以掌控一切的成就感也会使用户感到温暖。” -- 用户体验顾问 Nadine Kintscher 


我们需要创建能够平衡功能和视觉吸引力的界面,并将掌控权提交给用户,以便他们有更满意的体验。


澳大利亚房地产搜索网站 Realestate 成功的做到了这一点,它让用户能够根据自己的偏好筛选所有房产,并让他们可以选择按不同的标准进行排序。





澳大利亚房地产搜索网站 https://www.realestate.com.au


动机、能力和诱因


我们该如何设计一种数字体验,才能使用户在适当的时候进行所需的行为?这需要了解一个简理论 -- 「福格行为模型」:一个人行为(Behavior)的发生需要满足至少三个条件,动机(Motivation),能力(ability)和诱因(trigger),用公式表示即 B = MAT,这三者必须同时具备,缺少任一条件都不会导致行为的发生。对于任何试图实践劝导心理学的人来说都是理想的选择。理论表明,一个行为得以发生,行为者首先需要有进行此行为的动机和操作此行为的能力,接着,如果他们有充足的动机和能力来实施既定行为,他们就会在被诱导时进行此行为,预期的行为就会发生。


(福格行为模型:由斯坦福大学「说服技术研究实验室」Persuasive Technology Lab 创始人 BJ Fogg 研究而来)


动机 -- 人们做出这一行为的原因是什么,做出这一行为的原始动因是什么; 


能力 -- 人们做出此行为需要满足什么能力,人们是否有条件来完成这个行动或者做这件事; 


触发 -- 是什么诱发用户会做出这个行为,什么因素会导致用户会完成这个。




福格行为模型(https://behaviormodel.org/)


尼尔·埃亚尔(Nir Eyal)和瑞安·胡佛(Ryan Hoover)合著的书籍《上瘾》中曾提到过 福格行为模型,揭示了很多让用户形成习惯,甚至“上瘾”的互联网产品服务背后的基本设计原理,告诉你怎样打造一款让用户欲罢不能的产品。作者根据自己多年的研究、咨询及实际经验,提出了新颖而实用的 「上瘾模型」(Hook Model),即通过四个方面来养成用户的使用习惯。通过连续的“上瘾循环”,让用户成为“回头客”,进而实现循环消费的终极目标,而不是依赖高昂的广告投入或泛滥粗暴的信息传播。




上瘾模型


一个很好的例子是 TurboTax,在《为心灵设计:劝导式设计的七个心理学原则》一书中讨论过。


即使交税不会使我们感到开心,我们仍有很强的动力来报税。然而,与其他所有国家一样,美国的税收制度过于复杂,难以理解。TurboTax 在书中提到,使用户能够通过询问基本问题更轻松地完成纳税,可以有效的提高用户的纳税能力。在 TurboTax 的设计中,他舍弃了冗长的文档,相反,创建了一个工作流,使用户可以进行简单的逐步操作。最终便捷的操作方式会成为诱因,使用户愿意尝试在线提交税款。




TurboTax 设计的报税系统


用户有充足的动机和能力,同时又具备诱因,三个要素完美结合的情况可能会让人感到过于理想或不自然。事实上,其中某一因素占比多也没关系。发微博就是一个很好的例子,没有什么重要事情的话,发微博的动机可能很低,大多都是浏览;但触发因素随时都可能出现,提醒你可以开始行动了,可能是一个转发抽奖的活动、可能是朋友正好生日;同时,发微博的操作非常便捷,用户具备能力随时都可以发布。


作为设计师,我们可以使用该理论来检查是否为用户建立了足够的动机和能力,并提供诱因来引发他们的行为。


  • 动机为某人提供了从事这项工作的理由 
  • 能力为某人提供了完成任务的机会 
  • 诱因存在于我们的环境或大脑中,并促使某人做某事

以上两种理论(控制感,以及 动机、能力和诱因)都需要进一步的研究,它们在设计界面时非常有用。


或者,有一些更简单的心理学理论,不需要较复杂的研究,即可用到你的设计中,比如 稀缺 和 害怕错过(FOMO -- Fear of Missing Out)的概念。




亚马逊在商品上增加 “只剩下 1 件存货” 强调库存不足,使用 FOMO 加强紧迫感






吸引注意力


几十年来,心理学家一直对人们保持注意力的能力不断下降而感到困扰。


眼动追踪已经存在一段时间了,它主要用于测量用户注视某一点的位置和持续时间。研究表明,互联网的平均注意力持续时间不到几秒钟,用户会立即做出有关网站的决定,如果不适合,就会离开。




数据驱动的设计(https://www.eyequant.com)


EyeQuant 将这一想法向前推进了一步,利用眼球追踪数据构建了一种预测算法。你无需自己进行眼动测试,而是将设计上传到他们的网站,他们会告诉你用户在使用你的网站时关注点在哪些地方。


他们找了德国的参与者,并利用这些参与者建立了一个庞大的数据库,该数据库包含了大量吸引用户注意力的内容和不吸引用户注意的内容。研究发现,高对比度色彩比较容易吸引用户,表情和粗体的文字也是如此。


眼动追踪软件可能很昂贵。取而代之的是,诸如 Sumo Heat Maps 的在线分析软件,可用于显示访问者单击的内容和位置,以及吸引最多注意力的内容。然而,请记住,虽然我们可能会抓住大脑的注意力,但我们也有可能会把用户从更重要的事情上拉走。


使用眼动追踪或热力图可以使设计人员立即获得有关其设计的客观反馈。作为设计师,它可以用作用户体验想法的验证,并为你的设计决策提供数据,允许你通过 A / B 测试来优化设计。




眼动追踪可获得用户行为的客观反馈




模仿欲


你是否曾经注意到人类天生会有模仿他人的欲望?一个人的欲望也会促成他人的欲望。这种理论是由勒内·吉拉德(Rene Girard)提出的,理论认为,如果某人表现出对某件物品的渴望,你也会渴望得到这件物品。广告商就是利用这一方式促成人们对某物的渴望,显然,广告成功的激发了人们更多的欲望。


你我都是模仿生物。Darren Bridger 的《神经设计》一书就探索了这一理论,研究发现我们有一个镜像神经元系统。换句话说,仅看到某人执行某项操作(例如捡起一件物品)就会使你的大脑反映出该活动。




模仿一词的英文解释


模仿欲理论意味着如果我们看到别人拥有某样东西,我们便也想拥有 —— 这一点可以用 「社会认同」(或从众心理)来解释。


一种社会认同是来自 “用户的认同”,就像是推荐。推荐之所以有效,是因为它们来自拥有共同愿望和价值观的人。例如,专门为企业家服务的媒体 Foundr 不仅使用用户的声音,而且还显示人脸,从而触发了镜像神经元系统。




Foundr 专门为企业家提供媒体服务


另一种社会认同是来自 “专家的认同”,即你的产品获得了专家的认可,例如你的产品被 Twitter 提及、新闻引用、甚至有大 V 专门为你的产品撰文。Google 在其最新的 Pixel 手机广告系列中使用了这种技巧,用 Google 自身的品牌影响力作为最强力的背书推荐这款手机。




仅仅强调这款手机是 Google 出品,无须多言




当今及未来的设计心理学


对于设计师来说,现在是一个令人激动的好时代 -- 有丰富的资源和研究可以支撑我们的工作。


设计趋势正在向体感,语音、虚拟现实(VR)、增强现实(AR)、混合现实(MR)和物联网(IoT)转变;随着这些交互技术的不断发展,人们需要以更直观的方式来使用界面。


我们将迎来许多新的设计机会,而心理学将在其中发挥着重要的作用。


下一个我们日常生活中与设备交互方式的重大转变,将从触屏变为使用脑电波交互。该技术已经可用,使人们能够通过思想直接控制其设备。


随着我们逐渐接近人们的真实想法,心理学在设计中的应用以及设计师的道德责任将发挥越来越重要的作用。


除了使用分析法、用户研究、用户体验地图和其他方法来帮助做出设计决策并迭代产品外,设计师还应考虑使用上述四种有说服力的设计方法来完善其 “技巧工具包”。


有说服力的设计并不邪恶。它是一种工具,并且像任何工具一样,它可能被滥用。然而,通过正确的研究和深思熟虑的应用,它可以成为任何设计师工具箱中的宝贵补充。

文章来源:站酷   作者:三分设

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

需求太碎?如何在小业务中提炼价值

ui设计分享达人

背景


在日常工作中,身为设计师的我们时常有这样的情形:身兼多个业务,但大部分的业务都是小业务,业务方给的需求也是七零八碎的小需求居多。面对该情况设计师有时会觉得没有一点挑战,限制自己对美好设计,给用户创造美好生活的想法,总想要去搞个大新闻。


不妨回头看看小业务,自己真的对它了解了么?这里提供一种视角,小业务也可以做大视野的事。通过一个小业务的案例改版,讲述如何从小项目中出发。


曾经负责过一个基础模块支持:设计详情。它是设计师用酷家乐设计工具设计方案产出的载体。该模块在之前有过改版迭代,迭代对业务目标(留存活跃)的提升并不理想。那从哪里入手呢?


方法流程
  1. 理清业务目标

  2. 挖掘用户需求场景

  3. 梳理产品功能

  4. 拆解设计目标

  5. 设计策略实施

  6. 验证迭代



一、理清小业务的业务目标


相对于大业务(例如网站改版),小业务因为简单,其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况,直接从梳理小业务具备哪些功能直接入手,分析下现状问题后开始制定设计策略,这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体,只是策略的表象。理清小业务所承担的业务目标是前提,那么如何理清呢?



理清业务目标

小业务目标来自大业务目标,对大业务的业务目标进行一级级向下拆解后,即可获得小业务对应的目标。目标拆解需要遵循MECE原则,拆解方法包含:二分法、过程法、要素法、公式法、矩阵法。(tips:目标的拆解有一定难度,)



Dapp设计详情为例,在酷家乐大增长业务背景下,用户活跃和用户留存为核心的目标,设计详情处于设计路径的一个节点,拆解得到设计详情的5个主要业务目标:

  • 设计详情-用户周活跃

  • 设计详情-新用户留存

  • 设计详情-老用户留存

  • 设计详情-内容投稿数

  • 设计详情-内容分享数



业务目标可分为2个类别:

  • 第一类别:符合用户意愿,如活跃、留存,在满足用户需求的情况下可以自然达成;

  • 第二类别:不符合用户意愿,如内容投稿、内容分享,用户不太会主动去完成,需要去创造动机,激励用户进行。



二、挖掘小业务关联的用户需求场景


有小业务的业务目标后,第二步就需要给用户提供价值满足用户需求,以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提,那如何获取用户需求场景呢?



1. 用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定,包含四个关键要素,其中需求本身最为核心,需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】,【某用户】做了【某事】来满足【某需求】”



用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组(1-3年、3-5年、5年以上),每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景



访谈信息整合如下





2. 规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的,碎片化场景对设计指导容易出现偏差,需要把场景结构化,为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整,按设计前、设计中、设计后三个阶段进行划分。



以上梳理了设计详情相关的用户需求场景,再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景,在设计师的整个设计流程中只占了一部分。从设计层面来看,该2个场景局限在方案设计大场景中,设计更多做的是对其方案设计操作的体验优化,在原有较好操作体验的现状下,其对给用户创造价值上没有很大增量。再从以上业务目标来看,2个单一场景很难去促使用户对内容进行分享和投稿。



三、梳理产品功能矩阵


在理清小业务的业务目标和需求场景后,下一步就是按照场景去梳理产品能力。


1. 小业务功能现状分析

老版app设计详情的功能进行初步的现状分析,设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看,多个场景无法实现,如营销、谈单;从业务目标来看,通过当前功能有较大的优化空间,如当前投稿很难让用户知道投稿有什么价值。




2. 产品能力梳理

分析现状发现功能不足以支撑用户需求场景,有获取功能2个方向:

  1. 挖掘现有能力:可以扩大梳理范围,从小业务所在的上一级业务到整个平台,一级级往上梳理场景对应的现有功能。

  2. 打造新能力:围绕场景,打造出新的功能



挖掘平台上现有能力,可对业务的能力价值最大化利用,与其他业务形成互通,实现1+1大于2的业务价值。亦可围绕场景打造新能力,可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵,从平台获取到了很多全新的能力,以及对原有的能力进行了能力拓展。




四、拆解每个场景的设计目标和策略


在梳理出产品能力后,需要通过设计策略把产品能力有效组织起来,让用户快速感知快速上手使用。设计策略推导自设计目标,那如何得到设计目标?


基于用户需求场景将行为事件拆分,提炼行为事件再推导出设计目标,再基于设计目标给出设计策略。



Dapp设计详情受制于移动端能力,只涉及设计详情中5个相关场景,其设计目标和设计策略的拆解结果如下



拆解出设计目标后,基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状?首先需要明确什么是问题,问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题,很多情况是默认假设了一个预设目标,但这目标得到不严谨、不全面,容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出,其最终都来自设计目标。



对老版Dapp设计详情现状进行了分析,得到了问题




五、设计策略的落地


在上一步得到设计策略后,围绕着设计策略是设计方案。本段将不全部展开说明,只选3个关键点讲述设计方案的思考


1. 设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多,设计三步思考:

第一步:简化功能认知,对功能结构化,以场景的维度重组织功能,并以场景打造功能集合的认知,建立场景能力区;

第二步:梳理场景共同涉及的内容,作为联系的载体承载场景的放置,设计详情中展示态的方案涉及到了5个场景中的4个场景

第三步:提取场景中即时性和高优先级功能,打造快捷功能区

框架如下



建立框架后,填充具体的能力和内容。如场景入口放置于底部,并根据场景优先级做了主次的区分。


设计详情框架建立后,打造细分场景中的设计


2. 营销获客场景设计

营销场景的设计,将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类,就可以清晰去梳理出现有的功能,以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后,再传达各渠道提供的价值激励用户去触发行为。




3. 谈单场景设计

谈单场景关键在方案详情上,谈单面对不同情况,存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容:图文方案、全屋漫游、渲染图册。在方案详情中,头部承载了全屋漫游、图册,如图文方案过于繁琐可直接点击全屋漫游图进行讲解,亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航,可快速切换到需要讲解的地方。




六、上线验证


上线后数据平稳后观测,设计详情的周活提升了89%,每个场景下的功能数据都得到显著的提升(tips:有部分数据因技术原因没有采集到)。除了改版了Dapp侧的设计详情,后续对PCweb侧的设计详情进行迭代,同样起到不错的结果。数据的结果验证了方法的可行,并起到了积极的效果。




最后的思考小结


以上是我应用这套设计方法去做了块小业务优化,反向推动进入产品迭代,上线后取得了不错的成绩。在本次赋能后,对小业务中多了一些感悟

  • 小业务是大业务的缩影,可以作为去赋能大业务前沿验证的实验田,大概率可以快速验证自己的想法,即使方向错了因为小业务改动影响面也小

  • 因知识广度和深度的限制,不是所有设计师都可以一开始就可以把控大业务,小业务可作为打磨设计深度专业度,一些小业务的复杂度并不低于大业务

  • 该设计方法同样适用于大业务,但方法是死的,不是所有情况都套用,得需要把握重点灵活应用

  • 不要总想着搞个大新闻,在能力未被业务方认可时,小业务的赋能可以成为一个很好的发声口

  • 不要轻视小业务,有可能是你根本还不了解

爱在字里行间:适老化设计标准研究

ui设计分享达人

近些年,得益于经济和社会的高速发展,越来越多的中老年人开始尝试享受移动互联网带来的便捷生活。50岁及以上网民在总网民中的占比已经由2015年的9.2%提升至2020年的26.3%,增长接近两倍。但中老年在融入移动互联网时仍面临诸多困难,是需要重点关注的弱势群体。



随着各类问题在社会舆论中持续发酵,国家政策也开始关注中老年的互联网使用体验,推动各类APP进行适老化改造。2020年12月,工信部发布《互联网应用适老化及无障碍改造专项行动方案》。2021年3月11日,全国人大发布《十四五规划纲要》,明确提及“加快信息无障碍建设,帮助老年人、残疾人共享数字生活”,更是将信息无障碍建设上升到了国家顶层规划的高度。

 

为了更好地服务中老年人,百度在2021年上线了百度大字版和百度关怀版APP。对于中老年人来讲,视力老化是难以避免的问题。随着年龄增长,中老年人晶状体硬化、睫状肌衰弱,物体不能很好地成像在视网膜上,带来视觉上分辨物体的敏感度、色彩感、明暗感、空间感的下降。

 

但是对于中老年人而言,手机APP的字号、行距真的是越大越好吗?我们首先试图从现有标准中寻找答案。然而通过梳理,发现行业内已有标准主要是针对各类残障人士的,并且是原则性的建议,推荐的字号、行距的理想值过于宽泛,对手机APP适老化设计升级的指导意义比较有限。比如W3C发布的《Web内容无障碍指南(WCAG2.1)》,关于行距的要求是“至少为字体大小的1.5倍”。所以我们通过科学、严谨的研究,制定了一套设计标准,来指导资讯类/内容类APP全场景文字排版适老化设计升级,为中老年用户带去字里行间的关爱和更好的阅读体验。


下面就将从研究方法和成果两个方面做具体介绍。希望能帮助大家掌握相应的研究思路,在后续制定设计标准时可以快速上手,同时也将此次适老化设计标准研究的成果与大家分享,为资讯类/内容类APP适老化设计升级提供参照。



///

研究流程与方法:如何通过用户研究制定一套设计标准?


| 明确标准的应用方向

为了让一套标准对设计工作具备实际的指引价值,我们在研究规划环节充分考虑了设计经验和迭代需求。用户研究和设计师一起对资讯类/内容类APP所有涉及文字排版的页面、模块进行了通盘梳理,确定了12类应用方向(即用户的使用场景)。对于这么多使用场景分别做研究费时费力,我们选择通过洞察背后的用户阅读模式,把12类应用方向收敛为4大类阅读场景:3类主场景(包括长文阅读、搜索、概览阅读)和1类辅助信息场景。针对主场景,研究中老年用户理想的字号、行距和粗细组合;针对辅助信息场景,研究中老年用户的最小可辨识字号。这样研究既能覆盖各类应用场景、不同的信息层级,又能更聚焦、更高效。



| 构建评估体系

在确定了标准的应用方向之后,评估体系的搭建也参考了过往的设计经验。我们一方面查找并梳理了学术界在字号、行距方面的研究成果,另一方面也结合了百度已有的设计经验。最终确定了字号、行距、粗细、颜色四个考察变量在不同研究场景的研究范围(即自变量选取水平),并综合主观体验指标和客观眼动数据指标搭建了中老年阅读体验的评估体系。其中,主观体验指标包括关键信息发现、清晰度、舒适度、满意度;客观眼动指标包括眨眼频率、瞳孔直径变异性和阅读速度。



| 实验流程

在实验中,我们邀请了60位50-70岁中老年用户参与调研,通过任务模拟他们在真实场景的长文阅读、搜索、概览阅读情况,综合眼动实验、问卷调研和访谈方法评估不同字号、行距、粗细对中老年阅读体验的影响,探寻不同场景下最适合的字号、行距、粗细方式。在实验过程中,通过SMI-ETG2w眼镜式眼动仪测量眼动数据。




///

研究成果:适老化设计标准介绍


通过对各类阅读场景、设计变量和体验影响因子的充分分析,本研究形成了一套完备、成体系的适老化设计标准,可用于指引资讯类/阅读类APP中不同页面和不同信息层级的适老化设计改造。



| 主场景理想字号、行距和粗细的组合

研究结果明确了资讯类/内容类APP对于中老年人在不同场景里任一信息层级的理想字号、行距和粗细组合。以概览阅读场景(Feed列表页)和长文阅读场景(图文落地页)为例,优化前与预计优化后的字号、行距、粗细组合如下:


概览阅读场景


长文阅读场景


| 辅助信息最小可辨识字号

此外,研究结果也明确了黑色(1F1F1F)字体的全局最小可辨识字号。以75%中老年用户可以看清的字号作为最小可辨识字号标准,黑色(1F1F1F)最小可辨识字号为36px。

 

此次研究填补了学术界和业界在手机APP适老化设计领域的空白。在百度,该套标准已落地百度关怀版,未来还会在百度大字版和更多为老年人提供服务的APP上线。面向行业,我们也积极共享研究成果。百度大字版、百度关怀版运营同学牵头和老龄产业协会合作,设计师结合本次研究成果编写了《移动互联网应用适老化设计要求》团体标准,已经于2021年11月10日发布。希望本次的研究成果能帮助更多资讯类/内容类APP完成文字排版的适老化升级,为中老年人带去更多的关怀和更好的阅读体验,为移动互联网行业的信息无障碍建设贡献一份绵薄之力。




文章来源:站酷   作者:百度MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

轮播设计总结-提高用户点击

纯纯

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播banner,不管在移动端还是网页上通常点击数据都是非常差的,本篇文章带你深入了解banner轮播。

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

本篇文章通过以下几点探索轮播的特性,预计阅读20分钟

目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结

一、用户真的使用轮播吗

用户是否对轮播有感知,这个则需要根据不同的场景进行判断,包括每个产品中的每个轮播对用户用户的定位也不相同,常见的应用场景品牌曝光、活动营销、产品展示,每个场景下相关的数据也不相同。

促销轮播banner

品牌推广轮播banner


产品介绍轮播banner

同时还有个关键因素,轮播的占比,这里以pc端为例若是产品是以品牌效应吸引用户的,大多轮播是以大的屏幕占比为主通常会占首屏的50%,如果是以营销、内容为主的产品,轮播通常以16:9、7:4的常规比例进行展示。


轮播的页数

用户在使用产品时会默认忽略轮播区域,一般轮播都会有自动轮换机制,一定时间后自动轮放下一张banner,那么每当页面上进行轮播时便会吸引用户进行关注,效果上会有一定的提升,所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。

还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。

如果banner是作为内容传播希望用户通过banner了解内容,那么则要避免放在最后一位置,对于用户而言最后一张轮播路径过于长,并且用户很少会手动滑动banner。

国外一家公司在针对轮播中进行了相关的研究测试,随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果,则需要根据不同的场景设定策略达到目的。

二、轮播的轮换形式

不管在移动端还是手机端,轮播都有各种交互形式和尺寸,以pc为例在交互上会多样化一些,常见的几种则是通过滚轮滑动、通过点击切换两种。

如下图某艺术网站,它则是通过鼠标滚轮进行切换轮播banner,并且banner的占比也是铺满首屏,这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点,同时也符合用户目标。

在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换,并且占比也是铺满首屏,在医美领域用户更关注美感,而轮播形态也是符合用户的心理预期更加沉浸美观。

而在移动端轮播的形式就比较统一,大多都是自动播放+手指滑动进行切换。

三、轮播的进度展示

在网页中轮播都会有当前的定位点,许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标,不用一张一张切换,但是在有些产品中会忽略这一点,设计中会做的非常小导致用户在点击上可用性不太友好,如下图中的banenr进度点设计上过于小导致点击上有些阻碍。

如以下网站去除进度定位的方式,通过缩略图预览来告知用户下一个banner的内容,空白区域也可以添加缩略图引导介绍等关键信息,帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计,能够帮助用户更加全局的了解banner内容


四、轮播的定位

定位主要是用来指示当前轮播的进度,像上图中讲的便于用户更加全局的观看banner的张数和当前进度。

以下网站的设计中则把定位与进度相结合,进度条展示该banner预计多久会切换下一张,对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站,不管是pc还是移动端都在轮播底部添加了水平条,告知用户当前位置

随着市场上产品同质化严重,产品的竞争力也更依赖体验,在下图中的数据可视化的网站上,在进度条上就利用了产品的特性以饼状图的形式进行展示。

五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性,但是需要注意一个点,在轮播中不只有自动播放,还需要考虑用户手动切换,因为在实际用户浏览中可能会对产品的播放时间达不到预期,此时则会使用手动切换,除去可点击的进度点,还需要上一张和下一张的入口切换。


在此基础上需要注意,在处于最后一张banner时,下一张切换还能不能点击,第一张时上一张切换还能不能切换,这个取决于产品特性和轮播张数,如果轮播张数过小的话则需要进行循环播放,如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小,如果轮播banner占比较大时则需要考虑用户的操作时长,距离越短时间越快,为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出,便于用户寻找。

如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大,保持视觉平衡,因为小区域banner用户能够更加全局的观看,在使用上不会犹豫。

反观移动端在轮播中除了展示banner进度外很少展示切换按钮,移动端更加依赖手势交互。

六、对轮播进行分类

当轮播banner过多时利用标签进行分类,用户通过点击标签进行查看相关的轮播组合。

此方式更适合一些电商平台、新闻网站这种内容过多的产品


如下图国外社交媒体网站则使用了标签进行分类,此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。

七、使用缩略图进行预知

在banner首屏中,显示的内容越多,越能激发用户进行点击,像上面讲过的农业产品网站就使用下一张预览图的形式进行展示,当然不仅局限于这种形式,如下图中的餐饮网站把所有的轮播banner展示给用户观看。

相对于缩放图,图标展示效果上也较好,空间占用更少,使用这种方式需要谨慎,对图标的识别性要求较高,我印象中能够使用的这种方法的网站是苹果官网,让产品抽象化展示。

在移动端也存在这种设计手法,但是基于分辨率原因移动端的缩略图展示过少,最常见的如下图中的马蜂窝和企鹅电竞。

八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告,对此可以使用个性化设计突破用户心理障碍,使轮播banner更具备亲和力。

如下图中的数码科技网站,利用产品与背景的结合营造出一种功能性的展示。

再例如下图中苹果官网入口,结合百度的定制化功能在大搜中进行个性化处理,把常规的banner轮播以功能卡片形式进行展示,同时卡片承载产品动画引导用户进行点击。

苹果官网进入后随意点击产品介绍页后会发现,苹果把轮播结合鼠标滚轮营造沉浸式观看,每个屏效内都展示产品一个功能特点,打破传统banner的展现形式。


九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级,如我们平常使用产品时会忽略banner广告,我们会更加关注移动中的东西,特别是在移动端上通常是banner进行轮播时才会关注。

谷歌设计团队曾对banner轮播的时间进行测试,测试结果得出5s-7s的轮播时间最佳,在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。

如下图谷歌商店的轮播时间设定在6s。

同时还需要注意,在自动播放的过程中如果用户鼠标hover上去后,则需要判定播放暂定,避免用户错过感兴趣的内容。


十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍,在实际产品中轮播有很多可用性上的问题存在,我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。

文章来源:UI中国   作者:爱吃猫的鱼____
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




7个基础的用户体验设计细节

seo达人


1、专注于20%

maggelato

你可曾听说过80/20法则?简而言之,80%的用户通常只会使用你网站内容和功能的20%,绝大多数的用户只是在扫视网站内容,并且只会挑选真正感兴趣的浏览。

同时这也意味着,剩余的20%就相当重要了。大多数的点击将源自于这一区域,它也是近乎完美的内容和互动区域。

你可以借助数据分析来决定哪个部分是整个网站最被关注的那20%。对于刚刚上线的网站,这个数据搜集的过程可能长达好几周,随后再进行调整。

当然,你也可以通过引导将用户引流到你希望用户去的那20%的区域。借助视觉引导和行动召唤设计来引流,用有趣和有意思的设计来营造令人有兴趣的区域,让他们乐于点击,从而达到目的。

2、架构式的思维

goldhill

设计一个网站和搭建一所房子其实差不多。首先,它需要一个坚实的基础,然后是能够承载所有内容的框架,做好后要好好装饰一下。同样的思维模式可以套用在网站的设计上。

更重要的是,你并不需要为此创造出过去从未在框架中出现过的东西,换言之,框架内的素材、组件和我们常见的并无二致。就像导航设计模式一样,现在的设计都趋于一致,因为这样的导航好用。

当网站的整体结构搭建起来之后,可以将相同的思路套用到内容体系的构建上来。主要的正文内容是整个网站内容的基础,辅以吸引人的标题、图片,配合上其他的次要元素,整个内容体系可以很快搭建起来。

3、不要要求太多

assos

现如今的世界可以说是由数据所驱动,越来越多的应用开始要求用户注册,要用户提供更多的权限,更多的信息,以期为用户提供更加个性化的体验。但是从体验的角度上来看,要尽量规避这一点。

站在用户的角度稍加思考你就明白了。找到一个令你感兴趣的炫酷网站,如果要深入了解更多内容,就需要内容,而如果要注册的话,网站却需要你提供下面10个类型的信息:姓名、邮件、国家、地区、城市、电话、Twitter权限、个人网站、工作职位、以及如何发现这个网站的。

那么接下来,你会怎么做?绝大多数的用户会直接转身离开,这个注册信息填写起来太费劲,体验太差了。

那么,如果你当你点击注册的时候,只需要一键从Facebook或者twitter授权即可,那么你会不会立刻点击呢?至少从目前已有的数据来看,绝大多数的用户会这么选择。

4、令人愉悦的微交互

evernote-1

可能很多时候你都没注意到,你和各种微交互进行的互动一直都存在。

·谷歌日历弹出框提示你每周例会要开始了
·短信提醒
·午睡的闹钟
·微博上的新粉丝和转发提醒

这样的例子我们可以连续不断地说上一个小时。这些带有微交互的提醒和动作会推动用户进行下一步操作,带来愉悦的体验,它们不能设计得非常醒目,但是又需要适当地吸引用户注意。

这些有趣的微交互的加入让用户从中获得好处。而你需要思考的是,有哪些东西是你的网站或者APP当中,用户想要立刻知道和获得、想被提醒的?

5、甚至幼儿都能轻松使用

statusshop

如果要给小孩子设计产品,那么它应该是什么样子?你可能会更专注于色彩的使用,让每一个区块都可以轻松点击,明显的标签,加上拼图式的连接方式。

所以,当我们在设计网站或者APP的时候,我们会说这个产品要足够易用,那么怎么才算得上“足够”呢?让小孩子都可以轻松使用,这就叫足够易用。换句话说,即使是不经常使用网站和APP的成人,也不会存在明显的使用障碍。

超大的设计元素和标签是设计的关键因素。这些视觉线索是帮助用户引导用户的核心,是整体体验设计中最重要的部分。大胆的色彩选择,会鼓励用户点击和探索。

如果它足够易用,用户会继续尝试使用和探索。而难于理解操作不便的导航自然会被用户所嫌弃。如果网站包含太过复杂的媒体和内容,那么不妨从一个设计简单的首页开始,几个简单的导航点击将用户引导到对应的位置。在深入到更复杂的页面之前,用梳理清晰、简单明了的分页让用户感到舒适,这是带来好的浏览体验的不错解决方案。

6、轻拍(Tap)还是点击(Click)?

espns

这一点要说的并不是设计问题,而是一个常见的开发代码的问题。虽然Tap和Click两者都能在点击的时候触发,但是在移动端网页上使用Click事件 的时候,会有200ms 到300ms 的延迟,所以在移动端上最好替换为Tap事件。在进行响应式网页设计的时候,一个事件从头用到尾的错误出现得很普遍,但是有太多的移动端网页在这样的设计下会有明显延迟,更恶劣的情况是无法识别,这样会直接损害到整个页面的易用性和功能本身。

此外,移动端上使用 Tap事件的时候,它所对应的按钮应当相对更大一些,便于小屏上进行交互。

7、像用户一样思考

justact

我们一直在说:“像用户一样思考”。但是实际的情况往往是,我们很难走出设计者和开发者的思维方式,因为我们的思维方式压根就和用户不同,面对每一个交互、每一个元素的下意识反应是不一样的。

所以,还是同设计圈、开发圈和产品圈以外的人去聊聊吧,看看他们对于网站和APP的真实反应到底是怎样的。你可能会在观察中发现,他们对于产品、对于交互、对于界面的反应和你的预期完全不同。将用户的真实反馈记录下来,反馈给项目组,这样可以帮你打造更好的用户体验,创造更优秀的产品。

原文地址:designshack

译文地址:优设

作者:Carrie Cousins

优设译者:@陈子木

转载请注明:学UI网》7个基础的用户体验设计细节

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



如何促使用户更快的决策

ui设计分享达人

设计师不仅仅只是个画图仔,而更应该懂得用户心理学,明白用户行为背后的动机。利用这几个用户心理学,我们将可以促使用户更快的做出决策。


一、损失规避

人们获得损失时产生的痛苦远大于获得收益时所带来的快乐!心理学家把这种对损失更加敏感的底层心里状态叫做损失规避。


其实简单来说就是,相比于得到,你更在意失去。


举个例子:你今天在上班的路上捡到100元钱,心里很高兴。可是一不小心把钱弄丢了,那么你就会很沮丧了,甚至一天的心情都会很不好,虽然说这钱本来就不属于你的。


我们可以用损失规避系数来描述人们对不同东西损失规避的程度。对于一般的消费品,损失规避系数大概是2,也就是说,人们需要得到2倍于原先的价格才肯放弃已经拥有的商品。


损失规避系数因不同的事物而不同,如果涉及到情感等方面的因素,损失规避系数就会大大上升,一旦涉及到健康和生命等问题,损失规避系数就成百上千地增长了。这就解释了在商场买衣服你会跟销售员讨价还价,但在医院你绝对不敢跟医生讨价还价。


我们习惯于自然地规避风险,因而更加辛苦地工作只为避免一些微不足道的损失,而不愿冒险去争取更大的回报。规避损失是人的本性。这也解释了为什么大多数人只能上班,而创业者始终只是极少数。


那么,有哪些利用了损失规避心理的案例?


a.强调“失去”,而非“得到”


因为人的心理对损失更在意,因此要告诉用户如果不买,会受到什么样的损失。


对比以下两个文案:

达芬奇画作世界巡展,邀请来感受世界传世名画的魅力。

达芬奇画作世界巡展,如果不来,你将失去一生中唯一一次和世界传世名画邂逅的机会。


你觉得哪种方式更吸引你?


b.天猫双11红包

每年的双11活动,天猫都会提前给你发一堆的红包,虽然数额不大。但规定只能在双11当天使用。这时你就会心甘情愿的在当天剁手,因为如果你不买,就会白白浪费掉这些红包。而人的心理对损失是很抗拒的。



c.以旧换新

京东家电类目有个以旧换新的服务,以前我一直搞不明白这样做的目的何在?现在才知道,原来这也是利用了人的损失规避心理。


消费者想买新电器,但是家里已经有一个,直接丢掉会感觉浪费。那商家搞以旧换新,用旧家电抵扣一部分钱,这比直接给打折优惠,对消费者来说更有诱惑力。因为你收购了客户的二手电器,让他感觉自己的旧家电没有白白浪费了。



二、锚定效应


所谓“锚定效应”是指人们在做决定或下判断前,容易受到之前的信息影响,该信息犹如一个沉重的锚,沉到了海底,让你的思维以该信息为基准,在它的一定范围内做判断。


简单来说,就是当你在作决策之前,需要一个参考,货比多家。比如:你去菜市场买菜,你第一次买这个菜,你根本就不知道这个价格是否合理,这时候你不好决定是否买,你就会去多问几家。从而内心会形成对这个菜的价格锚定。


生活中锚定效应无处不在:

在线下超市我们会经常看到商品建议零售价100元,而实际售价78元。各大电商平台也采用了这种价格的对比效果,加快用户的决策。


在线下的服装店商家非常喜欢开一个天价然后等你还价,开价150元,到最后居然能还到50元,这水分……


你去婚纱摄影店咨询,开始销售员会给一个比较高的价格,然后后面会自主动给你减掉一千,这样很容易让消费都产生购买的冲动。


你去电脑城买电脑,当你买完电脑后,这时销售员给你推荐电脑保护套,你很容易会购买,因为你会想这么贵的电脑都买了, 这几十块钱的保护套自然就不在话下了。但如果直接叫你买保护套的话,你就没那么容易产生购买行为。


还有奶茶店价格菜单也是经过设计的,通常会采用降序排列,这种排列方式更有利于顾客购买。因为用户看到的第一个贵的价格会形成锚,往下价格越便宜,消费者更容易决策。


三、羊群效应

在一群羊前面横放一根木棍,第一只羊跳了过去,第二只、第三只也会跟着跳过去,这时候,如果把那根木棍撤走,尽管拦路的棍子已经不在了,后面的羊,走到这里,仍然会像前面的羊一样,向上跳一下。这样的群体盲目跟从就是所谓的“羊群效应”,也称为“从众心理”


这些动物的行为看起来愚蠢搞笑,可是看看我们自己,又何尝不是如此呢?从众是一种普遍的社会心理和行为现象,在很多情况下,人们都会表现出人云亦云的特征。


“羊群效应”是由个人理性行为导致的集体的非理性行为。由于信息的不对称,人们并不能得到做出判断所需的全部信息,那么在无法作出准确的判断时,其他人的选择自然就是最合理的参照。这并非全无道理的,因为很多情况下,多数人的做法往往都是正确的,参考他们的做法可以最大限度的降低个人的决策风险。这也是群体盲目背后的根本原因。


但是,凡事有利就有弊。跟随大众的做法,有时候很容易被误导。比如谣言的传播就是个最大的反例。


我想以下场景你一定不会陌生,在一个广场上,有商家正在进行着某种商品的促销活动,人们随着广播的声音慢慢凑了过去,到后来简直到了里三层外三层的地步。但就在这个时候,经过的人反而有了更大的兴致,越是后来的人越是想挤到人群中去,甚至他并不知道里面究竟是在进行什么活动。这是典型的“羊群效应”。


经常网购用户都明白,我们很容易受到商品销量的影响,我们的潜意识里会认为销量越好,商品质量越好,因此会倾向于选择销量高的商品。

羊群效应还表现在对权威的顺从,人们决策时所盲从的对象由大多数平常人变成了某一个具有一定权威性的人。

人们在做出某种选择都是在追求安全感,降低风险,而跟随权威人士给出的意见和建议,会让人们安全感倍增。权威之所以称为权威,就是因为在某个领域他们是最专业的。因此人们更愿意相信权威人士的意见,甚至愿意改变自己的选择去迎合权威的意见。


在设计工作中,尝试借用权威的号召力,达到对用户消费决策的影响。经常逛淘宝的人就知道,很多商家在商品详情页为了证明产品质量合格,经常会提供某权威机构的检测认证,或借助某个明星的推荐。因而会对其观点或者意见表现得非常顺从。


四、稀缺效应

在消费心理学的研究中,研究者把人们由于商品稀缺而引起的购买行为现象,称之为“稀缺效应”。


“稀缺效应”在我们的日常生活中太常见了,比如在线下逛商场时,经常可以看到商家喜欢用“一次性大甩卖”、“限量100件”等广告语来引诱顾客,以吸引顾客进店购买。这些广告语会给顾客造成这各种假象:如果现在不买下次再也没有这样难得的机会了。


俗话说,物以稀为贵,人们对于稀缺物品会表现出强烈的占有欲望,这在人们的心理需求层次中,属于较高的层次。越是不容易得到的东西,人们越倾向于得到,以此实现在精神层面上的价值满足。


在这种心理因素的驱使下,人们对于供不应求的东西,总是会给予特别的关注,同时也愿意支付更高的代价。某种商品一旦限量供应,那么其本身也就具备了稀缺的属性。


限量供应的销售原则,也吊足了顾客的胃口,很多顾客完全落入稀缺效应的心理战术之中,即便当天买不到,第二天也必定会早早前来购买。


比如天猫惯用的抢红包伎俩,吸引了一波又一波的少女们去疯狂的抢,它会设定在某一个时间点,限量提供一些红包,如果没有抢到。那么用户第二天还会来抢的,这就提高了用户的粘性。


五、紧迫感

为了加快用户下单的决策时间,我们需要给给用户造成一种紧迫感的氛围,告诉客户剩余的时间不多了。如果不立即行动,将错过这次优惠活动。他们常使用一个很显眼的倒计时,时时刻刻在提醒用户所剩的时间已经不多了,再不剁手就没机会了!天猫双11活动就是利用了这样的用户心理成功让广大女同胞们不知不觉中剁手了。


稀缺性与紧迫感可以结合着使用,你要明明白白的告诉用户,如果错过了就会损失什么。如果立即行动,可以获得什么好处。两者之间强烈地对比可以吸引用户立即购买。


比如“今天下单可以立减500元!” “错过今天,你要多付出500元,而且没有赠品”等等。


如果没有制造稀缺性和紧迫感,用户就会拖延,犹豫甚至放弃购买。客户会认为再过一天来买也是可以的。这时你需要斩钉截铁地告诉用户,产品、赠品、特价是有限的。


比如:“产品仅限10件啦,再不买就错过了!”,“赠品只有30件,刚才张三又抢走了一件,马上就抢光了!”,“特价产品只剩25件啦,卖完这25件就恢复原价。”通过人为的制造稀缺性与客户哄抢的气势,促使客户做出立即购买的决定,从而提升转化率。

文章来源:站酷   作者:CdzhcHappy

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

App 信息架构:如何让用户始终有掌控感

ui设计分享达人

信息架构是产品的骨架。具体而言,就是一款产品有几个一级页面,以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面,微信的“发现”页就是一个一级页面;在“发现”页点“朋友圈”,进去的就是一个二级页面。所谓内容样式,Banner 是一种内容样式,九宫格是一种内容样式,设置页面那种列表也是一种内容样式。

 

这样的信息架构,有什么价值?

 

 

01 信息架构的价值:掌控感与健康迭代

 

对用户而言,信息架构的主要价值在于掌控感;对产品而言,信息架构的主要价值在于健康迭代。

 

1. 掌控感

 

如果房间里很乱,到处都堆满了东西,常穿的衣服也找不到了,我们就很容易变得烦躁不安。相反,如果混乱的房间被收拾得很整洁,我们的心情也会随之变得愉悦起来。

 

这中间的原因是什么?

 

个人觉得,从原始社会到 21 世纪,我们人类一直生活在竞争中,所以一直在追求一种对生活的掌控感。这种掌控感,会让我们找到一种存在感和价值感,从而给身处竞争中的我们一种安全感。一个收拾得井然有序的房间,会让我们觉得一切尽在掌握中;一个胡乱塞满东西的房间,则会让我们觉得这个房间处于失控状态,从而引发烦躁不安。

 

一款 App,如果主要的几个一级页面也都塞满了各式各样的内容,那么用户通常也会感到烦躁不安。这是因为用户不能马上理出头绪,不能马上获得那种掌控感。另外,如果大的改版经常让用户体会到这种烦躁不安,用户就会对这款 App 感到不满和失望,甚至失去信心和期待。

 

所以说,信息架构的第一个价值,就是让用户始终有掌控感。

 

2. 健康迭代

 

产品的更新迭代,有时会出现“发福”和“微整形”的情况。这都属于不健康的迭代。

 

所谓发福,就是变得臃肿了,比如一级页面突然增加了很多内容样式。所谓微整形,就是和之前比有点乱套了,比如有的一级页面突然消失了、有的一级页面突然出现了、有些常用的功能突然找不到了,诸如此类。

 

一款产品,如果大的改版总是通过发福、甚至微整形的方式实现,用户就很难获得掌控感。

 

反过来,一个优秀的信息架构,是接近“冻龄”的。也就是说,不管产品怎么更新、怎么加新功能,都能简单如初,都能让用户马上获得掌控感。典型的例子是微信:微信已经加了很多功能,但整体给人的感觉依然是简单的。

 

这样的信息架构,很少发福,也几乎不做微整形,所以能让用户永远有掌控感,从而确保产品能够健康迭代。

 

 

02 怎样实现信息架构的价值

 

什么样的信息架构,能够实现“掌控感”和“健康迭代”?

 

其实参考答案刚才已经出现了,那就是接近冻龄的信息架构。或者更确切地说,是一种“以不变应万变”的信息架构。

 

这里的不变,是指信息架构看起来永远没有明显变化,永远都很简单。万变,是指不断新增的功能,不断变化的功能。

 

如何做到以不变应万变?一级页面和二级页面都很关键,其中最核心的是一级页面。这里也顺便抛一个问题:一级页面,用来干啥?

 

一级页面主要用来干三件事,分别是:提供掌控感、提供常用功能、提供小入口。也就是说,一级页面尤其要把掌控感给到用户,要让用户快速找到常用功能,同时还要为不常用的功能提供一个小入口。需要说明的是,这个理念可能不太适合一些商店类产品,比如淘宝这样的电商产品,所以仅供参考。

 

那如何完成这三件事?主要有以下四个要点。

 

1. 不要超过 4 个一级页面

 

4 个和 5 个,它俩之间存在微妙的区别。比如我们给手机号或银行卡号分段时,更喜欢每段最多分 4 个数字,而不是 5 个,直观对比见下图。


4 个还是 5 个

 

很多 App 的底部导航栏,也是只有 4 个Tab,即 4 个一级页面。受生活经验等因素影响,当我们看到 App 有 4 个一级页面时,内心或潜意识里可能会觉得:哦,4 个,还算简单,基本能记住;而当看到有 5 个一级页面时,可能会感到一丝压力:5 个啊,有点多了。

 

总的来说,我们更偏爱只有 4 个一级页面的产品,因为 4 个仍在简洁的范畴内,5 个就已经开始走向复杂。在《微信背后的产品观》这场分享中,张小龙也提到过:“微信保证只有 4 个底部 Tab。”

 

2. 不要超过 3 种内容样式

 

Keep 6.0 系列的“探索”页面有 5 种内容样式,显得很复杂。微信的 4 个一级页面中,“发现”和“我”页面只有 1 种内容样式,“微信”和“通讯录”页面只有 2 种内容样式(加上顶部的搜索框),显得非常简单,和 Keep 的对比如下图所示。

 

Keep 6.0 系列与微信的内容样式数量

 

像微信这种内容样式数量上的极简,可能很多产品难以做到。那么,我们不妨退而求其次,早期先从 1 种、2 种内容样式开始。后期加功能了,可以考虑第 3 种,谨慎考虑第 4 种,尽量不要增加第 5 种,因为一定会变得复杂。

 

大家可能会说,产品的功能很多,3 种内容样式不够用。

 

针对这种情况,只要逻辑上不存在大的问题(比如把“支付”放到“通讯录”页面),就可以尝试把不同内容合并成一种样式。微信在这方面就做得很好,大家可以参考它的设计。比如下图的“通讯录”页面,联系人上方那些内容,和联系人不是同一类内容,但它们共用一种内容样式——一个简单的图文列表。

 

微信“通讯录”页面:不同内容合并成一种样式

 

3. 不为二成需求,去打扰八成用户

 

产品设计里存在一个比较常见的问题,就是往一级页面塞很多内容或功能,其中有相当一部分是用户日常用不到的,这种设计容易让人觉得臃肿。比如 Keep 6.0 系列的“运动”页面,就用了较大空间来推荐付费计划和运营活动,如下图所示。

 

用较大空间来推荐付费计划和运营活动的 Keep 页面

 

相信有相当一部分用户是不需要这些内容的,所以这其实也是一种打扰。这种打扰会影响到这些用户对这个界面的掌控感。

 

这种现象有两个可能的原因。一是企业担心用户不用这些功能,所以就在一级页面用很多空间来展示它们,Keep 的例子应该属于此类。二是有部分用户提建议,所以企业就加了这些功能。

 

关于第一个原因,个人观点,有些功能本身就属于二成需求,在一级页面占用太多空间不仅改变不了这个现实,还会对用户形成打扰。

 

关于第二个原因,个人看法,用户的建议通常只代表个人立场,而企业至少要代表大部分用户的立场。比如,网上就有人建议微信在朋友圈加一个屏蔽别人的功能,实际上微信有这个功能,只是一直隐藏,没有放出来——因为用的人少,它属于二成需求,放出来的话会对八成用户形成打扰。

 

总的来说,理想情况是接受现实、尊重规律:是八成需求就提供八成空间,是二成需求就提供二成空间。具体参考如下图所示。

 

是八成需求就提供八成空间,是二成需求就提供二成空间

 

4. 尽量不在标题栏使用 Tab 或下拉框,增加维度

 

这其实是张小龙分享过的一个观点,我个人很赞同,就直接引用一下。下面直接看两个例子。Keep 6.0 系列的前三个一级页面,标题栏都使用了 Tab,就显得内容很多,有点复杂,如下图所示(仅展示前两个)。

 

使用了 Tab 的标题栏

 

微信中拥有标题栏的前三个一级页面,其标题栏都没有使用 Tab 或下拉框,就显得简单、内容少,如下图所示(仅展示前两个)。这也是微信保持简单的一个重要原因。

 

没有使用 Tab 的标题栏

 

 

结语

 

一般情况下,产品都需要更新迭代:增加新功能,完善旧功能。

 

用户则是一个矛盾体:一方面对新功能和新事物怀有好奇心;另一方面又希望每次打开常用的产品时,都有一种回到家一样的熟悉感和一种家里井然有序的掌控感。

 

好的做法,就是类似微信那样:尽管加了新功能,但是看起来没有明显变化。也就是说,以“不变”的信息架构,来应对万变的功能。


文章来源:站酷  作者:Snow Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


App 信息架构:如何让用户始终有掌控感

周周

信息架构是产品的骨架。具体而言,就是一款产品有几个一级页面,以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面,微信的“发现”页就是一个一级页面;在“发现”页点“朋友圈”,进去的就是一个二级页面。所谓内容样式,Banner 是一种内容样式,九宫格是一种内容样式,设置页面那种列表也是一种内容样式。

互联网金融产品——适老化设计分析

ui设计分享达人

虽然,三类互联网老年人用户模型之间各有差异,但我们发现他们最大的共性的特点在于具有开放的心态积极地接受更多理财新可能,因此我们也应该尽可能从交互视觉的角度或从产品功能的角度为老年群体提供更多样化的互联网理财参与方式,并且降低参与的门槛。因此我们得到以下适老化改造的策略方向:

(1)产品内容功能上充分考虑老年人对理财产品的认知以及期待

(2)交互视觉上充分考虑老年人感官、心理、认知上的特性

(3)技术规范上充分考虑如何利用技术便利用户操作以及产品体验设计的最大化落地



改进分析


根据过往产品设计经验,我们提出线上金融服务设计的三大原则:

操控感:所见的是什么,刚刚干了什么,现在在干什么,接下来怎么做,可达成什么目标。

无障碍:适用于任何人群

安全感:资产保障安全感、使用体验安全感

基于以上设计原则,结合本次适老化改造的策略方向,我们得到以下具体改进方向。



1. 设计原则拆解


操控感


能懂会用,可以有效减少老年人在使用线上产品时焦虑感和挫败感。让老年人知道看到的是什么,正在做什么,接下来要这么做,可以达成什么目标,这是在使用线上产品进行一切操作的基础条件。


(1)简洁的界面

大字体、大图标、界面简洁;老年人因其生理结构特征,很难轻易识别一些较小的文字、图形;因此在界面设计的适老化改进上,需要简化信息布局、放大图形文字;


(2)清晰的导航

产品中的导航可以帮助用户快速定位当前所在位置,刚刚在哪里,未来会到哪里去。清晰的导航有以下三大特点:

连贯性:页面跳转前后需有继承关系,不光是文字,字体、颜色等视觉元素也可以加强关系

扁平化:尽量减少跳转避免出现多层级,除了操作复杂之外,客户使用时的记忆成本也较高

易记忆:无论导航的位置、描述、视觉元素,都应在用户心智中稳定固化,凭借记忆可以快速定位;

图11:支付宝(关怀版)


(3)明确的语义

所有描述、状态、操作尽量唯一且易于理解,符合老年人的基础认知;


(4)及时地反馈

任何用户操作行为都应有相应结果,对于极其敏感易焦虑的老年人群体来说更为重要,如加载、成功、失败、异常情况等,且反馈内容应明确可被理解,即在各项流程结束后应给出含有明确反馈的流程结果页面;对于学习和理解能力较弱的老年人而言,及时地反馈显得更为重要;


(5)顺畅的流程

复杂业务流程的任务对于老年人来说挑战最大,失败率也最高。除了与本身流程复杂,以及上述的语义不清、反馈不及时等可用性问题有关之外,流程体验的闭环对于老年人群体而言也是极其重要。


无障碍


(1)辅助性功能

由于老年人的视力与协调能力开始下降,很难进行很复杂的交互动作。在线下场景中,老年人办理业务时会有银行工作人员在身边进行辅助。同样,在老年人使用APP时,产品也应起到辅助作用。常见做法有,线上客服、语音输入辅助、使用说明和操作示范等;文本输入提示,语音输入等无障碍功能,用于提升方言识别能力,方便不会普通话的老年人使用智能设备;对智能客服入口的设置也不仅仅放在首页,应辐射到尽可能多的页面。

图12:工商银行(幸福生活版)、平安银行(大字版)、中信银行(幸福+版)人工客服页


(2)低密度信息

对于老年人而言,即便是页面内信息的层级非常清晰,高密度的信息仍会增加记忆负荷。因此在针对老年人的产品设计中,不应过度追求页面效率,适当去掉形容性、专业性、技术性、营销性、装饰性的信息,将有助于信息降噪。


(3)简化操作

降低老年人的输入成本,例如合理规划验证码出现机制,身份证信息、银行卡号的图像识别、自动保存常用联系人等。


(4)产品适用性

市场上某些头部的金融相关APP已经推出老年版本,如支付宝的关怀版,该版本不仅是字体、按钮更大,更重要的是通过不同的信息功能架构,将不同年龄层的用户客群做了产品注意力的重点区分,强调不同类型用户的使用的场景不同,有助于将用户的注意力锁定在与其相关的业务上,提升用户完成任务的效率。


安全感


(1)资产保障安全感

近些年有关老年人的金融诈骗层出不穷、人人自危,除了实际保障资产安全的措施之外,在服务设计层面上也需要保障和增强用户安全感受。如在某些特定场景中,转账、汇款时,及时告知用户可能存在的风险,大额时需要子女辅助验证等;


(2)使用体验安全感

在产品设计中需要考虑防错和容错机制,这有助于减少问题的发生,消除老年人使用产品时的恐惧感,让用户放心安全的使用产品。例如输入金额时明确显示单位,金融产品页面强化显示风险与收益,大额需要二次确认。

根据以上改进方向和原则,下面对目前产品的部分功能模块和非功能模块分别进行梳理和优化,产出初步优化方案和建议,并对其中部分具体功能的实现做技术分析和方案要求。




2. 具体功能优化分析


2.1 基金账户类

涉及开户流程、风险测评问卷、资料变更等板块。需要适配改进的地方包括以下几个方面:

(1)证件上传

开户证件OCR识别和上传,对二代身份证的支持较为完备,对一代身份证和其他证件类型的支持不到位。老年人群体存在持一代身份证的可能性;

(2)开户绑卡

开户绑定银行卡,基金公司支付渠道仅支持银联标志的银行借记卡,对存折等非借记卡不支持;

(3)预留信息

央行反洗钱、CRS等合规要求对开户资料预留信息字段作出了明确规定,其中部分字段不容易让人理解和获取,如账户实控人、电子邮箱等;

(4)风评问卷

关于风评问卷,目前题目数量较多,建议减少至5道题左右;

(5)密码找回

增加多种找回密码的途径,如手机号、电子邮箱、手机短信。


2.2 基金交易类


涉及申购、赎回、专户、分红方式、定投等功能,需要适配改进的地方包括以下几个方面:

(1)数字输入

交易密码金额等数字输入场景,建议尽量调起九宫格数字键盘,字号较大且清晰;


(2)风险提示

购买环节,按销售适当性要求,醒目提示基金风险;

(3)限额

基金申购支付方式,适当提高支付限额,或引导汇款转账的方式,满足大额申购场景。


2.3 查询类


(1)在线客服

建议增加语音输入和播报功能,同时醒目提示人工客服点击按钮;

(2)图表查看

基金列表和详情页等页面中包含图表的,建议增加竖屏和横屏切换按钮,增加图表易读性;

(3)版本更新

新版本发布时,建议增加新功能示意遮罩,指引客户如何使用新功能。



3. 非功能优化分析


(1)色彩

用色简洁干净、对比柔和。减少复杂颜色、渐变颜色、极端饱和度颜色的使用,尽量使用纯色、基础渐变、稍微明亮的颜色作为图标用色,关键互动界面避免使用蓝色。

图12:工商银行(幸福生活版)、平安银行(大字版)、中信银行(幸福+版)功能列表页


(2)文字

字体应使用黑体类型字体,且允许用户自行调节或匹配手机系统字号,但最小字号不宜低于16px,多行文字显示时行间距应为1.5倍字号大小,减少大量文字内容带来的压抑感;文字颜色使用不同透明度的黑色进行信息层级的区分,重要内容使用1~2种辅助性彩色作突出;


(3)图标

图标设计简洁清晰,且需要有文字说明,避免使用过于抽象表意不明确的复杂图标;


(4)布局

结合对老年人的认知及操作习惯,通过信息类型、展示频率、重要性等方式进行归类,形成合理的布局结构,通过这种行为塑造方式,让用户快速摸清产品形态;

如下图两家银行首页布局由资产查看、常用功能金刚区、轮播图、服务渠道、理财产品构成;在底部导航栏上只选择展示两个一级页面以及突出显示的语音助手入口。

图13:工商银行(幸福生活版)、中信银行(幸福+版)首页


(5)动效

有效的动画可以给页面带来生命感,但如果滥用动效不仅会分散用户注意力,严重的话对某些用户来说可能是致命的(光敏性癫痫的临床诱因之一就是闪光图像的刺激);

为了避免给特殊人群造成困扰,设计师考虑加入动效时应注意禁止使用高频闪动、运动夸张、视差较大的动效,并且在同一界面也应控制运动元素数量,避免对用户的阅览和判断产生困扰。


(6)无广告

由于老年人对事物的认知和理解能力较慢,过多的广告会严重分散用户注意力,甚至导致误操作造成经济损失,尤其一些具有强误导性的开屏广告、营销活动广告等;建议减少广告数量、杜绝恶意引导广告,并针对广告投放需设立专门的审查人员进行合规审查。



4. 技术规范要求


(1)按钮热区

对于文字按钮需要保留较大的间距作为按钮热区,避免老年人用户操作时误触;


(2)版本切换

新增版本切换功能,建议将按钮直接展示于首页右上角,且要有文字进行图形说明,便于老年人用户理解且能直接进行操作;

现有APP采用架构为hybird app,基本的开发模式为:原生壳子+H5(vue),因此针对版本切换功能需要对APP架构进行调整,解决方案为对各项版本进行独立开发或对原版本进行内置模块开发。

其中,独立版本开发优点为各版本独立、UI独立、历史包袱少;相应地,也提高了开发和维护成本;一些情况下多版本入口也会使用户在使用上产生困惑;

内置模块开发,以模块形式嵌入原生系统中。其优点为成本相对较低,使用入口统一,缺点为历史包袱过多、开发自由度较低、改造过程也受老系统所制约。


(3)语音识别

考虑到用户群体对于文字输入和阅读的能力欠佳,针对查询功能、键盘(数字)输入、智能助手等功能,嵌入语音识别、语音输入、语音播报等技术,优化老年人用户操作体验。




结论


在互联网日渐发达、金融逐步数字化的今天,越来越多的老年人群体尝试着加入我们的步伐,他们构成了快速增长且日益富裕的目标受众,但现实是,一些不恰当的设计让他们望而却步,无法享受科技能够带给人类的利益;为此,我们需要关注和反省,我们所创造的、服务于人类的产品,也应该有能力来适应人类衰老的过程,而创造这项能力,也已经成为了肩负在我们身上的责任。

文章来源:站酷   作者:陈皮红豆沙

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端引导设计指南

纯纯

B端产品中很常见但是很少提及以及忽略的一个领域——引导设计



文章来源:一九互七(站酷)
作者:一九互七

转载请注明:B端引导设计指南

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档