• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • 15000字深度解析!银行金融APP的适老化设计指南

  • 落霞与孤鹜 2023-02-07 12:43:20 收藏
  • 文章标签: 用户 操作 功能
  • 引言

    任月月:据调查,中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出:“积极应对人口老龄化,优化城乡养老服务供给,推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。

    其实早在 2020 年 11 月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。2021 年 4 月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。

    目前很多头部大厂都已经按照要求完成了应用的适老化改造,并且分享了很多改造经验。可以说,适老化是今后应用发展的一个大趋势。笔者最近的工作也涉及到了相关改造设计,所以针对这个主题,做了一些学习探索。看了各类文章,结合 N 家银行 APP 的适老化设计场景体验和自己项目实践的思考,在这里与大家分享。希望可以给到大家一些启发。

    最新的银发族研究报告:

    如何做好适老化设计?来看阿里出品的研究报告!

    阿里云、零点有数与上海交通大学设计学院三方联合在 U Design Week 中发布了《银发族数字化产品适老化研究蓝皮书》(以下简称“蓝皮书”)。

    阅读文章 >

    15000字深度解析!银行金融APP的适老化设计指南

    一、什么是适老化设计

    1. 适老化设计的定义

    百度百科上是这么定义的,适老化设计是指在住宅中,或在商场、医院、学校等公共建筑中充分考虑到老年人的身体机能及行动特点做出相应的设计,包括实现无障碍设计,引入急救系统等,以满足已经进入老年生活或以后将进入老年生活的人群的生活及出行需求。

    15000字深度解析!银行金融APP的适老化设计指南

    互联网时代,我们的应用在设计的过程中,同样也需要考虑老年用户的特征与需求。移动互联网的发展给我们带来了巨大的便利,特别是在疫情时期,很多事情实现了线上办理。但与此同时,也暴露出了很多问题,很多老年人被丰富的互联网世界拒之门外,比如不会使用健康码出行受阻、不会线上转账仍需跑银行办理业务、不会线上挂号只能线下排队等等。大家可以想想,自己身边的长辈是不是经常会出现上述类似的问题。我们在“嘲笑”他们落伍的时候,更应当反思,这个社会有没有为他们考虑。作为设计师,能够为他们做些什么?

    15000字深度解析!银行金融APP的适老化设计指南

    2. 无障碍设计

    无障碍设计常与适老化设计一起出现,无障碍设计不止适老化设计,是针对所有人的设计,要包容所有人。可以说是一种通用性、包容性设计。

    15000字深度解析!银行金融APP的适老化设计指南

    通用性设计:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。
    包容性设计:好的设计应该满足尽可能多的使用者的需求。

    例如:苹果系统的设计,他贴心的考虑到了行动、视力、听力和认知障碍人士的各类需求,并为其设计,让他们也能轻松的使用苹果的产品。

    15000字深度解析!银行金融APP的适老化设计指南

    在研究适老化设计的过程中,我发现一些适老化设计的规则和无障碍设计有着互通点。可以说适老化其实是信息无障碍的一部分,而信息无障碍的一些设计手法可以解决适老化中的部分问题。所以在此简单的聊一聊两者的关系,以更好的辅助大家对后文的理解。

    二、为什么要进行适老化设计

    1. 用户群体

    人口老龄化已成为全球普遍现象,但中国人口老龄化规模大、程度深、速度快。

    据局部抽查统计概算,全国 45 岁人口比例已达到 38%,如果按此比例计算,全国 45 岁以上人口数量已达 5.09 亿。另外,根据中国互联网络信息中心(cnnic)在京发布第 49 次《中国互联网络发展状况统计报告》显示,截至 2021 年 12 月,我国 60 岁及以上老年网民规模达 1.19 亿,互联网普及率达 43.2%。

    15000字深度解析!银行金融APP的适老化设计指南

    个人认为,互联网的适老化设计除了对 60 岁及以上老年网民友好,对于 50 岁左右的银发人群也同样有益。所以在这里,我将用户群体拓宽到了 50 岁及以上的银发人群。

    小说明:根据观察身边的年长用户,50 出头其实就已经存在看不清、搞不懂、不敢用、不会用等问题了,而且他们非常喜欢适老版本,也会主动要求帮忙把各类 app 调整成适老版本。所以在这里将用户群体进行了拓宽。

    根据 QuestMobile 数据显示,2022 年 8 月,银发用户月活跃用户规模达 2.97 亿,同比增长 12.5%,月人均使用时长 121.6 小时,同比增长 8.6%,增速明显高于全网平均水平。

    15000字深度解析!银行金融APP的适老化设计指南

    而且,国家在不断地向老年群体普及互联网,对于金融产品,银发人群具有很大的消费潜力,具有“有钱有闲”的市场优势。

    15000字深度解析!银行金融APP的适老化设计指南

    那么面对如此庞大且不断增长的用户群体,我们的设计势必要为其考虑,才能更通用。

    2. 人文关怀

    老年人等弱势群体,从生活到日常娱乐,他们对于产品的体验会和我们存在一定的差异。随着年龄的增长,老年用户会出现视力、听力、触觉、认知理解等能力的下降。且在心理上会对新鲜事物有一定的恐惧和抗拒,容易出现情绪挫败。一旦使用受阻,便会感到无助和沮丧,不愿意继续使用。

    另外,互联网信息的繁杂、经常出现的网络诈骗案例,也给老年用户带来了不安全感。他们会因为担心,不小心点了不该点击的链接,造成自己的资金损失。在工业和信息化部办公厅发布的适老化标准中也指出在适老化界面中需要保证产品的安全性,限制广告插件及诱导类按键。

    15000字深度解析!银行金融APP的适老化设计指南

    为了给老年用户带去更好、更安全的产品体验,让他们跟上时代的步伐,我们的设计应当为其考虑。为他们,也是为未来的我们。

    3. 不止为老年人

    虽说适老化设计,只是无障碍设计的一部分,但是我们的设计,最终有可能所有人都会受益。

    在某些特定的情况下,所有人都可能是“老年人”或“残疾人”

    提到“老年人”或“残疾人”,我们会想到以下几种场景:

    1. 视觉障碍:看不清、失明
    2. 听觉障碍:听不清、耳聋
    3. 行动障碍:坐着轮椅
    4. 认知障碍:不理解内容的含义

    对于以上几种场景,是只有“老年人”或“残疾人”才会碰到吗?当然不是。在某些情况下,我们也会碰到。这里就要提到一个概念:“情境性障碍(Situational Limitation)”,是指我们任何一个人,都会在某个场景下出现临时性的障碍。

    比如在一些银行服务中,情境性障碍的场景案例有:

    1. 视觉障碍:在户外场景,我们使用手机银行,可能会出现文字看不清的情况;
    2. 听觉障碍:在嘈杂环境中,我们会听不清一些语音播报;
    3. 行动障碍:手上提着东西,想使用手机银行进行线下付款,可能会误点到别的功能上去;
    4. 认知障碍:银行新上线了一个功能,我们之前从来没有碰到过,会出现短暂的认知障碍。

    也许我们设计的初衷是为老年人进行无障碍设计,但其实在很多时候,因为外部环境,我们也会出现短暂的情境性障碍,所以为他们设计,也是为我们自己设计。

    4. 银行用户需求

    网上银行 app 行业近年来收获了大量的用户增长,于此同时,也出现了各类声音,这些声音反应了用户的各类需求。据统计网上银行 APP,41 岁及以上用户仅占比 12.8%。对于年长网银 APP 用户对保险服务的需求更高,同时也更为偏好风险较高的股票交易。虽然现阶段他们在银行金融业的渗透率较低,但是随着更多的老年用户接触互联网金融,预计活跃渗透率将会进一步提升。

    15000字深度解析!银行金融APP的适老化设计指南

    15000字深度解析!银行金融APP的适老化设计指南

    对于这群如此有消费潜力的用户,现实中,有很大一部分老年用户对网上银行服务存在不了解、不敢用、不会用等痛点。

    场景小故事:以下案例来自身边长辈

    ① 银行卡办理与认证

    场景:银行很多业务已实现半自动化,需要手机配合操作完成业务。

    问题:辛辛苦苦跑一趟银行,但因手机使用不熟练,不知道怎么操作,银行员工又忙没能详细指导(代劳),导致业务无法顺利办理,只能第二天再跑一趟。

    ② 线上转账

    场景:从柜面转账到 ATM 机转账,再到现在的手机转账,完全不同的转账方式,接受起来很慢,操作不熟练,不敢放心使用。

    问题:年长用户,对于网络陌生,内心保持不信任。宁愿跑银行也不敢、不会在手机银行进行转账操作,或者就让子女代劳,完全没有享受到互联网带来的便捷。

    根据网易 UEDC 调研,老年群体手机银行操作体验痛点和对手机银行的期望如下:

    15000字深度解析!银行金融APP的适老化设计指南

    如何将这群用户服务好,是当下很多网上银行 app 需要思考的问题。

    另外,在很多行业中,中老年人因为拥有丰富的经验在岗位上会更具优势,对于企业银行用户来讲,处于关键角色的用户例如财务,工作年限长、经验足是优势。那么企业银行面向企业的设计,如何提升中老年用户的使用体验也同样值得考虑。

    三、老年用户的特征与需求

    想要更好地为老年用户做设计,我们就需要详细了解老年用户的特征与需求。从前文的使用现状中,我们可以将老年用户的需求分为生理需求和服务需求。

    生理需求:看不清、难操作、怕出错(容易挫败)、不理解、听不清

    服务需求:不了解、找不到、不会用、不敢用

    这两类需求的来源还要从老年用户的特征入手去解析。

    15000字深度解析!银行金融APP的适老化设计指南

    1. 老年用户之困——视觉障碍

    随着年龄的增长,老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。而且老年用户患有眼部疾病的概率会有所增加。60 岁以上的老年人中,视觉器官老化导致视力减退者为 47.9%,其中绝大多数是远视。

    常见的问题有:字小看不清、感觉字的颜色淡看不清、难以识别蓝紫色为代表的冷色调颜色、动态视觉感知弱等。

    2. 老年用户之困——听觉障碍

    根据听力学的研究,男性约从 45 岁以后开始出现听力衰退,女性稍晚,随着人类寿命的延长,老龄人口的增多,老年人耳聋的发病率也有所增加。

    常见的问题有:听不到、听不清、觉得语速过快等。

    3. 老年用户之困——行动障碍

    老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。而且老年人的手指会偏大,细胞水分减少,皮肤皱纹加深,会使得触屏灵敏度大大降低。动作精准度的下降使得老年人无法准确的完成手势操作。

    常见的问题有:不会复杂的手势操作、容易误触、点击困难、无法长时间连续操作等。

    4. 老年用户之困——认知障碍

    人的认知能力也会随着年龄的增长而下降。老年人会出现反应慢、判断力下降、学习能力退化的情况。在这种情况下,老年用户接触互联网的心理障碍就更加剧了。

    常见的问题有:难接受新应用、难分辨信息真伪、不理解图标/图片的意思、容易挫败更容易接受熟悉的东西等。

    15000字深度解析!银行金融APP的适老化设计指南

    四、银行金融产品适老化设计应当如何入手

    针对以上老年用户的需求,银行金融产品的适老化设计应当如何入手。接下来我们结合《移动互联网应用(APP)适老化通用设计规范》中的内容(以下简称《规范》)和现有的各类产品适老化设计现状一起学习下如何进行适老化设计。

    《规范》适用范围为:各企业在提供适老化服务时的内嵌适老版界面、单独的适老版 APP。

    主要包括 5 大点技术要求:可感知性、可操作性、可理解性、兼容性以及安全性。

    1. 适老版入口设计

    ① 内嵌适老版界面

    企业将适老版界面内嵌在原先的 APP 中,提供入口供用户切换。这种方案目前市面上使用较多,入口通常放置在设置中。对于银行金融产品,经调研,不少都遵循 all in mobile 的设计理念,要求根据不同的场景可以快速随时切换,所以除了设置中,还会在其他位置放置切换入口,方便用户切换。

    常见切换入口名称

    工商银行:幸福生活版;中国银行:岁月长情版;光大银行:简爱版;甘肃银行:颐年版;支付宝:长辈模式;招商银行/网商银行:长辈版;中国农业银行/平安口袋银行:大字版;宁波银行/云闪付:关爱版等等

    15000字深度解析!银行金融APP的适老化设计指南

    对于切换入口的名称,每款应用都有自己的特色,整体来看,大字、长辈版是使用频次最高的,通俗易懂,其他类型的名称虽然有特色,但是与其他应用不同,不符合用户通用认知,在一定程度上会给年长用户造成理解障碍。

    常见切换入口位置

    对于内嵌版本的切换入口通常有以下三种:

    1. 一级页面顶部的“版本切换”按钮
    2. 一级页面下拉加号内的“版本切换”
    3. 我的页面-设置-“版本切换”

    15000字深度解析!银行金融APP的适老化设计指南

    这三种形式根据应用的功能层级,开启适老模式需要进行 1~3 次点击,常见点击路径如下:

    1. 「首页」—版本切换图标—「适老版」
    2. 「首页」—版本切换图标—「版本选择」—点击选中—「适老版」
    3. 「首页」—加下拉—版本切换图标—「适老版」
    4. 「首页」—加下拉—版本切换图标—「版本选择」—点击选中—「适老版」
    5. 「个人中心」—设置按钮—「设置」—版本切换—「适老版」
    6. 「个人中心」—设置按钮—「设置」—版本切换—「介绍页」—开启确认—「适老版」
    7. 「个人中心」—设置按钮—「设置」—版本切换—「版本选择」—点击选中—「适老版」

    特色切换过渡页面设计

    中国农业银行:设置页面直接外置各种版本,直观且丰富了设置页面

    工商银行:在版本切换页面详细介绍了各个版本的特色

    支付宝:独立页面介绍适老版

    15000字深度解析!银行金融APP的适老化设计指南

    对于开启适老模式,是否需要设置过渡页面,个人认为需要,因为具有图文介绍的过渡页面,虽然在一定程度增长了用户切换路径,但是给了用户切换的心里预期。而且对于模式的切换一般是低频操作,适当给用户一些“阻力”可以避免误操作。

    ② 单独的适老版 APP

    企业也可以根据自身情况选择开发单独的适老版 APP,目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版 APP。用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。(目前暂无银行金融产品上线单独适老版的 APP)

    15000字深度解析!银行金融APP的适老化设计指南

    经体验,一般开发了单独的适老版 APP,在普通版本 APP 中便不会设置大字版切换模式,仅提供字号设置功能和下载适老版 APP 引导页。

    15000字深度解析!银行金融APP的适老化设计指南

    2. 可感知性

    该技术要求主要解决老年用户的视觉障碍、听觉障碍及认知障碍。规范如下:

    ① 字型大小调整

    文字的类型

    根据调研,同样文字大小的情况下,非衬线体比衬线体结构更加清晰。所以《规范》中建议使用非衬线体,以减少不必要的视觉干扰,保证易读性。另外采用可以提高字重方法,使文本轮廓更加清晰。

    中文字体例如思源黑体、微软雅黑等都是比较厚重的,不建议使用宋体、楷体等衬线体。

    英文字体,特别是对于数据的展示,为了让数据更醒目直观,可以选择非衬线类厚重的字体。例如:我们部门为了在设计中更好的展示数据信息,提取常用字符设计了非衬线类的“兆日金融体”。

    15000字深度解析!银行金融APP的适老化设计指南

    文字的大小

    《规范》中建议适老版界面及单独的适老版 APP 中的主要文字信息不小于 18 dp/pt。Ant Design 设计语言中讲到关于计算最小字体的方法,基于年长用户阅读距离(43 cm)以及最佳阅读角度(0.75)计算并换算得到建议最小字号为 16dp/pt。那么我们到底按照哪个规范来呢?

    笔者觉得,这两个规范没有对错,大家根据自己页面设计或适配的情况来确定就可以了。对于年长用户来讲,不同的人视觉感官度也不一样,我们在设计允许、布局整洁的限度下,字体肯定是越大越好。例如下图是我在做适老版过程中制定的缩放系数规范,为了保证部分复杂页面布局不错乱,将主要文字最小字号定义为 16dp/pt。

    15000字深度解析!银行金融APP的适老化设计指南

    当然以上的规范不一定可以适合所有人,毕竟随着用户的年龄增长,视觉障碍会加深。我们还可以更加人性化一点,比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。例如:iOS 系统中在辅助功能里可以设置更大字体、粗体文本(《规范》建议应用字型大小可随系统设置调整,或内部具备字体大小设置选项);微信可以开启听文字消息。

    文字的适配规则

    针对文字放大后,极值情况下的适配,主要有省略和换行两种方式,需避免文本、元素被剪裁。

    15000字深度解析!银行金融APP的适老化设计指南

    界面元素及容器需要跟随文字放大而等比例系数放大

    15000字深度解析!银行金融APP的适老化设计指南

    同一容器内的元素横向间距保持固定,纵向间距可按照比例系数适配

    15000字深度解析!银行金融APP的适老化设计指南

    ② 行间距

    《规范》建议段落内文字的行距至少为 1.3 倍,且段落间距至少比行距大 1.3 倍,同时兼顾移动应用适用场景和显示效果。

    根据调研测试:标题行间距为 1.3 倍,文字行间距为 1.5-1.8 倍,视觉效果最舒适。数值仅供参考,具体大家还要融合自己的设计去确定。

    15000字深度解析!银行金融APP的适老化设计指南

    ③ 对比度

    为了解决年长用户因为文字、图像颜色淡而看不清的问题,在设计的过程中我们需要使用强对比度的颜色。《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为 4.5:1(字号大于 18 dp/pt 时文本及文本图像对比度至少为 3:1)。

    这一标准源自 WCAG 标准,其中的颜色对比度的无障碍标准包括比度最低标准(AA 级)和对比度增强标准(AAA 级)。

    1. 对比度(AA 级):文本的视觉呈现以及文本图像至少 7:1 的对比度;大号文本(字重为 Bold 时大于 18px,字重为 Regular 时大于 24px)以及大文本图像至少有 4.5:1 的对比度。
    2. 对比度(AAA 级):文本的视觉呈现以及文本图像至少要有 4.5:1 的对比度;大号文本(字重为 Bold 时大于 18px,字重为 Regular 时大于 24px)以及大文本图像至少有 3:1 的对比度。

    15000字深度解析!银行金融APP的适老化设计指南

    小贴士:

    Web Content Accessibility Guideline(Web 内容无障碍指南)是业界公认的指导标准,简称 WCAG 标准。其目标是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。2018 年 6 月发布了 2.1 版本,并成为 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。

    简单来说,就是要求我们在设计适老化界面的过程中,文本颜色需要按照标准加深,与背景色拉开差距以保证年长用户可以清晰识别。为了保证达到这一标准,我们可以使用色彩对比工具去进行测试:

    工具一: https://webaim.org/resources/contrastchecker/

    工具二: https://www.wenjiangs.com/wp-content/uploads/2017/06/contrast-ratio/

    工具三: https://m2.material.io/resources/color/

    工具四: https://contrast-grid.eightshapes.com

    15000字深度解析!银行金融APP的适老化设计指南

    ④ 颜色用途

    颜色是界面设计最重要的元素之一,设计师经常通过不同颜色表达去传达一些信息,例如成功、失败等等。但是在无障碍设计中,颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。因为随着年龄的增长,我们对颜色识别感知会变弱,所以使用颜色代表特定意义的时候,需要有另外一种区分方案。例如:

    1. 使用下划线表示链接,或使用粗体突出显示文本
    2. 图标和文本结合使用传达成功或失败的信息
    3. 使用线条粗细、纹理或图案区分图标样式
    4. 使用不同的图案传达信息等等

    15000字深度解析!银行金融APP的适老化设计指南

    对于颜色的使用,我们还需要注意以下几点:

    颜色多样:页面中应使用区别较大的丰富色彩,可借鉴真实存在的物体,保持认知一致。

    15000字深度解析!银行金融APP的适老化设计指南

    可适当加深颜色以提高颜色的对比度

    15000字深度解析!银行金融APP的适老化设计指南

    重要元素避免使用蓝色和紫色:由于老年人的晶状体变黄、变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。对于这一点,还是要看各个品牌的主题调性,如果无法避免使用蓝色和紫色,那么就提高饱和度以加强识别性。

    15000字深度解析!银行金融APP的适老化设计指南

    ⑤ 验证码

    对于移动应用中的非文本验证码(例如拼图类、选图类、旋转类等验证方式),年长用户容易产生认知障碍,不理解验证的方式;也可能会产生行动障碍,无法准确对齐验证码。所以对于验证码我们应当做如下处理:

    1. 图片文本类验证码应当清晰易懂,并提供放大查看的操作;
    2. 非文本类验证码应当简单易操作,或者提供可被不同类型感官(视觉、听觉等)接受的替代或引导表现形式。

    15000字深度解析!银行金融APP的适老化设计指南

    ⑥ 图标设计

    对于页面中的图标,在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。除了单纯的放大,在项目允许定制化设计的时候,我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。另外建议搭配文字描述,方便用户更清晰更快速理解。

    例如平安口袋银行的大字版,图标都一定程度上进行了拟物化处理,并且都配有通俗易懂的文字解释“电话”“去这里”,能够让年长用户轻松领会含义。

    15000字深度解析!银行金融APP的适老化设计指南

    3. 可操作性

    ① 组件焦点(热区)大小

    由于年长用户细胞水分减少,手指偏大,在使用触屏的过程中灵敏度较低。所以对于常规组件的焦点,他们操作起来可能会很难完成操作目标。所以我们在放大文字、图标等控件的同时,对于可点击的组件焦点(热区)也需要同步放大。

    《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于 60 × 60dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt;单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48 × 48dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt。对于规范中的内容,具体我们可以这样做:

    1. 在需要点击操作的元素(<44pt)周围添加 12pt 的反馈热区;
    2. 大于等于 44pt 的元素,且有清晰边界的元素,热区保持与元素大小一致即可;
    3. 如果多个元素指向同一个操作结果,可使用组合连接在一起的热区;
    4. 当元素处于某个组件容器内,最大热区不要超过容器本身;
    5. 如果整个容器指向同一个结果,应当以整个容器作为按压区域,而不是某个图标或文字;
    6. 元素较多的情况下,操作热区应平分元素间的间距。「有明显边框元素」和「没有明显边界元」素拥挤时,优先保证「没有明显边界元素」的热区;
    7. 特殊的小尺寸元素,可以考虑拓展热区,甚至覆盖其他元素,以保证最少 44*44pt 热区;

    15000字深度解析!银行金融APP的适老化设计指南

    小贴士: 菲兹定律:任意一点移动到目标中心位置所需要的时间,与目标距离正相关、与目标大小负相关。 所以根据菲兹定律,为了提高年长用户的操作效率,界面中放大需要用户操作的元素,可便于用户快速精准触达。

    用一篇超全面的文章,帮你读懂经典的费茨定律

    费茨定律由心理学家 Paul Fitts 提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

    阅读文章 >

    ② 手势操作

    触摸屏时代,有着各种各样创新的手势操作和交互;但是对于年长用户由于行动和认知障碍,这些创新比较难学习理解并流畅操作。所以在移动应用中,应对用户进行手势导航或者操作的结果提供反馈提示;避免需 3 个或以上手指才能完成的复杂手势操作。对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。

    15000字深度解析!银行金融APP的适老化设计指南

    这四种交互,操作比较简单;且对应到界面上的屏幕空间,用户更容易理解。

    15000字深度解析!银行金融APP的适老化设计指南

    现在很多应用中创新,有长按侧滑进入左侧空间、长按下拉进入二楼等交互;这类交互对于年长用户来讲其实非常不容易理解且不便操作。笔者之前教过家里长辈这类操作,想告诉他们这类“便捷创新”的功能,但是发现他们重复三四次才能完成操作,且过一段时间就会忘掉,依旧会选择一步一步点击到达目标页面。

    综上,对于适老化版本的手势操作我们需要注意以下几点:

    1. 使用简单的手势操作:单指优于多指、单击优于双击(多次点击)、单一的手势优于组合手势;
    2. 不要加入需要力道触发的手势,例如长按下拉,年长用户把控不好力度很容易把这个手势变成了单击;
    3. 有一定学习成本的手势,应当给出引导教学;
    4. 给手势操作及时反馈,避免用户觉得没有触发到而多次点击。

    ③ 充足操作/反馈时间

    在移动应用中,如果限时不是活动的必要部分或关键要素,且不会导致用户发生法律承诺或财务交易,则应为用户的操作留下充足时间,在用户操作完毕前界面不发生变化。

    年长用户对于一些动态信息的感知度比较低,所以如果页面中出现一些提示信息,我们可以采用以下方案让提示更友好:

    1. 适当延长时间,避免用户还没读清内容就消失了,例如 toast 显示持续时间可以由 3s 延长到 5s;
    2. 采用其他类型的提示给用户足够的阅读时间,将短暂停留的内容,调整为常显内容,由用户自行操作确认关闭,例如将 toast 改成弹窗;
    3. 利用震动等其他感官提醒优化提示,例如消息推送的震动及消息提示音、警告场景下的长震动;

    15000字深度解析!银行金融APP的适老化设计指南

    我们在拉长交互时间的同时,还需要注意避免跨屏任务,因为年长用户在进行多个输入或操作的任务上会表现出明显的障碍。在任务的过程中,我们需要给出足够的解释说明,引导帮助年长用户完成多任务操作。

    ④ 浮窗

    在移动应用中,若内容产生新窗口(包含但不限于弹窗),应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部,且最小点击响应区域不能小于 44×44dp/pt。

    对于这条《规范》,我们可以拆分成以下几点来理解落地:

    1. 超出 7 秒长时间停留的页面(弹窗),需要提供关闭机制;
    2. 关闭机制可以是关闭按钮、返回按钮、跳过按钮或者功能文字操作按钮等一切可以立即退出当前页面的操作;
    3. 对于这些关闭机制的点击热区不能小于 44×44dp/pt。

    15000字深度解析!银行金融APP的适老化设计指南

    ⑤ 提供更便捷的录入方式

    年长用户对于表单录入类的操作,总是有很大的心理/操作负担,碰到这类页面常常是不愿意操作,让别人代劳。例如银行的转账页面,大部分都需要录入付款信息、收款信息、转账金额等一系列内容。如果让用户每一项都手动输入,不但效率低而且很容易出错。我们可以做些什么,去减轻用户录入负担呢?

    提供有限的选项和默认项 

    1. 在页面中我们需要适当精简页面以减轻用户心理负担,只提供需要的选项,或者在需要的时候出现对应选项。
    2. 另外在有限的选项中,还可以提供高频选项作为默认选项,减少用户操作

    15000字深度解析!银行金融APP的适老化设计指南

    简单理解,提供的选项越少,用户越容易选择,提供默认选项>提供有限选项>提供多种选项。

    选择代替输入

    选择类的交互方式比输入类更便捷,可以避免繁琐的打字过程,很多年长用户打字都不是很顺畅,甚至是使用手写录入文字。所以对于一些固定项的内容,使用选择类的交互可以很大程度提升操作效率。

    15000字深度解析!银行金融APP的适老化设计指南

    识别录入代替输入

    对于一些比较大段,需要仔细核对的内容,使用拍照扫描、复制粘贴识别、二维码识别录入等方式更不易出错;例如付方账号的录入。

    15000字深度解析!银行金融APP的适老化设计指南

    自动数据带入

    具有前后逻辑关联的表单数据,可以提供填写某个数据自动带入其他内容的联动交互,减少用户输入/选择操作;例如录入收款卡号后、自动识别带入收款银行;

    15000字深度解析!银行金融APP的适老化设计指南

    常用项历史记录

    提供历史记录功能,记录近期操作过的选项,方便用户快速复用再次操作;例如常用收款人的记录,点击后自动带入收款人信息,无需重复操作录入。

    15000字深度解析!银行金融APP的适老化设计指南

    ⑥ 缩短操作路径

    年长用户经常会出现“我在哪”“我要怎么做”“接下来我要做什么”等困扰;面对这样的困扰,我们可以做如下交互优化:

    精简功能,缩短重点功能操作路径,避免信息层级过深,要让用户快速触达;

    15000字深度解析!银行金融APP的适老化设计指南

    拆分任务步骤,防止信息过载,减少每屏信息密度;对于跨屏的长任务,提供操作进度引导,告知用户所处位置进度,做到流程明确。

    15000字深度解析!银行金融APP的适老化设计指南

    减少非必要操作,或允许跳过不必要的步骤;

    15000字深度解析!银行金融APP的适老化设计指南

    4. 可理解性

    ① 提示引导机制

    《规范》建议在用户安装移动应用时,应为适老化设置、老年人常用功能提供显著的引导提示。也就是我们常说的功能引导机制。

    对于内嵌的适老版界面,前文中也有提到常见入口位置,市面上大多数的适老版切换位置都比较隐蔽,且未按照规范给予显著切换提示,还有很大的优化空间。

    经调研分析多个 app 产品,适老化设置我们可以从以下几点着手优化设计:

    初次下载 app 或适老版上线的时候,提供功能开启引导或功能上新提示,告知用户有该功能、功能的入口、如何操作开启;

    15000字深度解析!银行金融APP的适老化设计指南

    开启前提前告知用户,适老版是什么,开启后界面会有怎样的变化,给用户心理预期;

    15000字深度解析!银行金融APP的适老化设计指南

    进入适老版本后引导提示用户如何回到标准版本,避免用户不想使用适老版而找不到出口;

    15000字深度解析!银行金融APP的适老化设计指南

    退出适老版需要二次确认关闭,防止长着用户误触。例如云闪付为简单的弹窗提示,招商银行使用了半弹窗,还告诉用户如何重新开启长辈版,既起到了二次确认的作用也做了提示引导;

    15000字深度解析!银行金融APP的适老化设计指南

    在“设置”中提供“适老版”入口,且用户可以通过搜索“长辈版”、“亲情版”、“关爱版”、“关怀版”等关键词直达功能;

    15000字深度解析!银行金融APP的适老化设计指南

    常用功能的提示引导我们可以从以下几点着手优化设计:

    1. 提供功能指示引导或说明
    2. 设置帮助中心,提供纯文字教程、图文教程或视频教程,方便用户查找。还可以将教程以浮窗的形式展示在具体功能页面中,让用户可以边看边操作。
    3. 设置客服中心(智能客服、电话客服),运营/客服人员专项跟进,随时为年长用户提供帮助。
    4. 界面设计中,对于需要点击操作的设置行为指引,引导用户完成点击。例如在按钮文案中加入行为动作,结果导向的内容;还可以对于一些卡片式的点击区域加上按钮引导。

    15000字深度解析!银行金融APP的适老化设计指南

    ② 语音功能

    在适老版中融入语音功能可以很好的辅助年长用户进行一些录入操作和信息获取,因为很多年长用户文化程度不高,不会使用输入法,大多选择手写输入的方式。但是手写输入效率比较低,而且如果写的字不清晰会识别错误。我们可以从以下几个角度融入语音功能:

    使用 AI 技术,提供语音输入功能,目前市面上不少银行应用都设置了语音操作的功能,而且将这个作为重点易触达的功能展示在了关键位置。例如工商银行的语音操作;

    15000字深度解析!银行金融APP的适老化设计指南

    功能操作过程中,提供实时智能语音助手或人工客服;也可以结合语音导读功能进行同屏解说引导用户操作;

    15000字深度解析!银行金融APP的适老化设计指南

    提供结果状态下语音播报或声音反馈提示,在操作正确或错误时给予对应的正向、警示提示音;

    15000字深度解析!银行金融APP的适老化设计指南

    融入智能读屏功能。

    15000字深度解析!银行金融APP的适老化设计指南

    融入语音功能的时候,考虑到年长用户的听觉障碍,我们还需要注意以下几点

    1. 适当增大音量:老年人听觉平均感知音量在 67.5~75.3 分贝之间;
    2. 降低语速,提供慢速、正常、快速等语速供用户自己选择,更清晰有效的获取语音信息;
    3. 优化收音机制,去除杂音,提升录入识别成功率;
    4. 支持方言,可智能识别方言或有一定纠错机制。

    ③ 通俗易懂的文字

    由于年长用户触网时间短,受教育程度不同,可能对互联网常用的一些词汇存在认知障碍。所以我们在设计的时候需要对一些互联网词汇进行口语化表达,采用用户易理解的文案。

    15000字深度解析!银行金融APP的适老化设计指南

    同时对于一些提示性的文案,需要表达清晰,在文案上要具有一定的引导性,例如,用户输入账号缺少 1 位的时候,应当提示:请输入 xx 位账号,而不是仅仅提示,输入错误,让用户自己去找哪里错了。

    ④ I 模型-精简的布局

    目前市面上大多数首页都承载了很多内容,但是这种布局对于年长用户来讲不利于集中视线聚焦功能。所以在适老版建议采用 I 模型的布局模式,聚焦内容,减少用户视线主焦点的转化,这样更便于年长用户阅读与理解。一般来讲,我们需要控制用户的视觉主焦点转化不超过 2 次。

    15000字深度解析!银行金融APP的适老化设计指南

    ⑤ 使用具体的内容、真实形象

    在制作活动 banner 场景中,采用具象的图片会比插画类型的图形更容易向年长用户传达信息,而且会给年长用户传递出真实感从而提升对产品的信任度。例如中国银行在适老版的设计中采用了大量的真人场景配图,非常的直观易理解。

    15000字深度解析!银行金融APP的适老化设计指南

    5. 兼容性

    辅助技术

    移动应用程序不应禁止或限制终端厂商已适配好的辅助设备(如读屏软件等)的接入与使用。在辅助工具开启时,移动应用内容中所有功能性组件均能正常工作:按钮可正常访问;输入框能正常进行输入;多媒体能正常播放;在页面局部更新后,移动应用内容中新增的功能性组件也应能正常工作。

    这一点更多的是从开发技术角度制定的规范,要求软件开发的过程中做好适配,保证适老版使用各类辅助技术的时候能够正常运行。我们设计师能做的就是在设计验收的过程中,考虑到这个层面,并将一些辅助功能的接入与使用纳入设计验收。

    6. 安全性

    ① 拒绝引导性内容

    现在很多应用有着各种各样的广告、推销、诱导下载链接等,而年长用户容易受骗,所以在适老版中严禁出现推销广告等内容。《规范》中限制如下:

    1. 广告插件及诱导类按键限制
    2. 禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件,也不能随机出现广告或临时性的广告弹窗。
    3. 禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。

    对于银行金融产品来讲,涉及到资金安全,筛选重要功能、安全的产品提供给年长用户就显得尤为重要。例如工行适老版的投资理财和专属存款,仅放了适合年长用户的产品。

    15000字深度解析!银行金融APP的适老化设计指南

    ② 给用户信任感,保障老年用户个人信息安全

    移动应用程序进行个人信息处理时应遵循最小必要原则,即处理个人信息应当有明确、合理的目的,并应当限于实现处理目的的最小范围,不得进行与处理目的无关的个人信息处理,以保障老年用户个人信息安全。

    同时我们在设计呈现的时候,可以加入一些安全、保障类的表达来提升产品整体的可信度,增强年长用户对产品的信任感,从而敢用。例如:

    1. 加入安全中心、安全保障、信任背书等元素,打消年长用户疑虑;
    2. 对关键信息进行脱敏展示,降低年长用户对数据泄露的担心;
    3. 在各个环节增加安全信息提示,加强安全认证,多重保障让年长用户安心;
    4. 增加防骗、反欺诈模块,增强年长用户防骗意识

    15000字深度解析!银行金融APP的适老化设计指南

    章节小结

    以上,我们结合《规范》里逐条规则和实际案例拆分讲解了如何去实际落地适老化设计。在这里借用阿里对适老化设计建议的关键词提炼,总结本章重点内容:

    1. 字号≥18dp/pt——清晰的字型、足够大的文字、舒适的行间距
    2. 强烈好于柔和——符合无障碍标准的对比度、可识别的颜色
    3. 具象好于抽象——优先使用写实图片
    4. 行动好于描述——使用表示行为的“动词短语”会更容易理解
    5. 熟悉好于新鲜——使用符合认知的设计和流程、易理解的图标、通俗易懂的文案
    6. 色彩好于图形——使用丰富的色彩,加强年长用户记忆与理解
    7. 点击好于滑动——简单的手势操作、容易点击的热区
    8. 点击好于输入——提供更便捷的录入方式
    9. 多模态好于单模态——语音功能的融入

    接下来我们一起看一下目前市面上的一些银行金融产品适老化版本的体验测评分析。

    五、银行金融产品适老化案例分析

    1. 工商银行

    名称:幸福生活版

    slogan:超大字体,设计极简;语音助手,交互升级;专属理财,乐享收益;亲情账户,传递关爱。

    入口:五个一级页面下拉加号内的版本切换;我的页面-设置-切换长辈版(幸福生活版)

    出口:一级页面拉加号内的版本切换;我的页面-设置-切换标准版。

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析:

    1. 入口和出口位置及交互一致,贴合用户心智,符合操作习惯;
    2. 一级页面布局精简,层级清晰,重点功能突出。语音操作放在了最重要的位置,方便年长用户操作
    3. 页面内的功能都经过了筛选,只放出了年长用户常用功能。对于网点服务还有专门的适老网点推荐
    4. 功能子页面也做了适老化的定制,从视觉到交互,都适配了年长用户需求。
    5. 除了个别不是很重要的标签文字比较小,工行整体的适老化都做的不错

    推荐指数:☆☆☆☆☆

    2. 招商银行

    名称:长辈版

    入口:我的页面-设置-长辈版

    出口:首页-下拉到底部-回标准版

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析:

    1. 入口较隐蔽,开启无提示直接开启
    2. 首页是常用功能、点击客服直接进入“小招客服”,页面精简,重点突出;
    3. 功能子页面仅做了简单的文字、控件放大;
    4. 点击“回标准版”出现的半弹窗提示,防止误操作,起到二次确认的作用,同时告知用户重新开启的入口

    推荐指数:☆☆☆

    3. 中国银行

    名称:岁悦长情版

    slogan:风格简约,大字展示,为年长客户甄选产品和服务

    入口:首页-版本;我的-设置-版本切换

    出口:我的-切换标准版

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析:

    1. 入口的设计视觉效果很好,非常直观。
    2. 出口太过明显,且没有二次确认,对于年长用户如果误触了回到标准版,可能找不到入口
    3. 首次切换至岁悦长情版,有功能引导
    4. 一级页面功能和布局做了精简,但是二三级子页面未做适配。
    5. 整体设计风格符合年长用户审美,给用户温馨的感觉。

    推荐指数:☆☆☆

    4. 中国农业银行

    名称:大字版

    slogan:超大字体,功能精简;语音助手,一键客服

    入口:首页-版本;乡村振兴-版本;我的-更多下拉-版本;设置-版本切换

    出口:首页-版本;我的-更多下拉-版本;设置-版本切换

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析:

    1. 多个入口,且入口的设计样式很有特色;出口与入口的路径相同。
    2. 布局清晰,功能做了筛选精简,一级页面仅保留常用功能。
    3. 重点功能子页面进行了布局和交互的适老化适配。
    4. 整体的视觉还原和谐度很好,大字版的用色也针对年长用户的生理特征进行了加深处理。

    推荐指数:☆☆☆☆☆

    5. 宁波银行

    名称:关爱版

    slogan:超大字体,精简功能;贴心服务,便捷易用

    入口:首页-加号下拉-版本切换;我的-版本切换;

    出口:首页-加号下拉-版本切换;

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析:

    1. 页面极简,取消了底部的 tab 栏,首页视觉表达符合年长用户需求;
    2. 语音功能使用了悬浮的按钮,且伴随收起交互,这点对年长用户不是很友好,不容易点击使用;
    3. 重点功能子页面仅做了少量适配,大部分控件与普通版一样;

    推荐指数:☆☆☆

    6. 平安口袋银行

    名称:大字版

    slogan:平安在手,儿女无忧;字体更大,简洁易懂

    入口:首页-加号下拉-版本切换;我的-版本切换;

    出口:首页-版本切换;我的-版本切换;我的-设置-版本切换

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析:

    1. 页面结构清晰,重点功能突出,精选的功能都是与年长用户相关的,比如防骗宝典、平安老人意外险等等;
    2. 图标设计更具象,更易读懂理解;
    3. 二三级子页面均做了视觉适配,适配呈现效果体验感很好;
    4. 各类业务场景都做到了告知、引导和反馈。

    推荐指数:☆☆☆☆☆

    7. 云闪付

    名称:关爱版

    slogan:字体大,图标大,使用更简单

    入口:首页-版本切换;我的-设置-切换至关爱版

    出口:首页-版本切换

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析

    1. 布局和功能都做了精简;
    2. 退出关爱版有二次确认,避免了误操作;
    3. 各功能的子页面未做大字适配。

    推荐指数:☆☆☆

    8. 江苏银行

    名称:融享幸福版

    slogan:字体更大 简洁清晰 一键帮助 安全无忧

    入口:首页-版本切换;

    出口:首页-版本切换;

    15000字深度解析!银行金融APP的适老化设计指南

    体验分析

    1. 入口与出口一致,标识明显;
    2. 页面布局精简,功能内容贴合年长用户的需求,特别是一键帮模块里的内容都是实际解决年长用户需求的功能;
    3. 语音介绍功能,是其他产品没有的,开启后可以点击进行语音播报讲解,很大程度解决了年长用户看不懂、不会用的痛点;
    4. “反欺诈指南”、“日历模式”都贴合年长用户需求,暖心且有特色;

    推荐指数:☆☆☆☆☆

    总结

    这篇文章很长,感谢大家耐心读到了最后。其实刚开始准备这篇文章的时候,只是想基于自己的工作内容做一个复盘。但是在书写总结的过程中,我查找阅读了大量的资料,感受到了无障碍、适老化设计的暖心人文关怀,就觉得很有必要仔细的写一写。特别是这句话“手机字体越来越大,音量越来越大,子女的陪伴却越来越少。子女知识想用一部手机联系到老人,却没有想过,他们也想用手机,去联系今天的世界。”狠狠的触动了我。

    所以如果能让更多的设计师关注到这个群体、能够向更多的设计师传达适老化设计的一些知识点,这篇文章就发挥了它的价值。

    其实整体来看,目前整个互联网的产品适老化才刚刚开始并不是很完善,企业也可能因为成本、资源等问题无法实际落地推动适老化设计。但是随着时间的推移,一定会有更多的产品关注并落地实施适老化(在我写这篇文章的过程中,有好几家银行产品对适老化的版本做了多次迭代优化,最终编辑排版的时候,又更新了一些案例。所以说适老化是大趋势,头部产品都已经开始注重这部分人群的体验了)希望通过这篇文章给设计师们一点启发。就算大家目前所做的产品,没有适老化设计的需求,里面的一些知识点融入基础产品的设计,也是适用的,能给用户带去更好的用户体验。

    再次感谢大家的阅读,希望通过设计的力量,帮助年长用户更好的融入并享受数字化生活。

    参考文章:

    为了帮助大家更好的理解本文,以下为书写过程中阅读参考的一些文章和报告,可供进一步深入学习。

    1. 《QuestMobile2022 银发经济洞察报告》
    2. 《中国互联网络发展状况统计报告》 
    3. 《QuestMobile 银发人群洞察报告》 
    4. 《QuestMobile 金融支付报告》 
    5. 《工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》
    6. 《腾讯出品!手机银行适老化设计探索(附超多干货)》
    7. 《如何做好产品的适老化和无障碍设计?来看腾讯的实战案例!》 
    8. 《小程序适老化设计指南》 
    9. 《超全面!「无障碍设计」指南》 
    10. 《适老化设计——让产品充满温度》 
    11. 《百度大字版精细系统的适老化设计研究实践》 
    12. 《一篇就够!实际场景落地适老化设计》 
    13. 《色彩无障碍指南: 如何让色盲用户获取色彩信息》 
    14. 《银发族数字化产品适老化研究蓝皮书》 
    15. 《优设 9 图-如何做好适老化设计》 

    本篇来源:优设网

    原文地址:https://www.uisdc.com/bank-app-said-aging-design

    评论
    Artlist模板 广告