騰訊出品！手機銀行適老化設(shè)計探索（附超多干貨）
國務(wù)院辦公廳在去年 11 月份印發(fā)了《關(guān)于切實解決老年人運用智能技術(shù)困難的實施方案》，發(fā)改委、衛(wèi)健委、工業(yè)信息化部、交通運輸部、中國人民銀行部委聯(lián)合出動，在國內(nèi)數(shù)字化服務(wù)行業(yè)掀起了一陣波瀾，這也讓我們對正在探索的手機銀行方案進行重新的審視。
“老年版”之困
我們相信未來產(chǎn)品的設(shè)計，一定是更加跨梯度、跨年齡兼容的，產(chǎn)品能為更多的用戶帶來便捷友好的使用體驗。我們正是以這樣的思路去理解和探索適老化設(shè)計，持續(xù)為用戶創(chuàng)造更加有溫度的手機銀行產(chǎn)品。
作為金融領(lǐng)域的“小學(xué)生”，在設(shè)計之初，我們仔細閱讀了工信部牽頭響應(yīng)國務(wù)院號召的第一封細則《互聯(lián)網(wǎng)應(yīng)用適老化及無障礙改造專項行動方案》(以下簡稱 “行動方案”)，文中提到產(chǎn)品設(shè)計中需要為老年人單獨定制一個“老年版”，通過例如：更大的字號、更高的對比度、語音讀屏、簡化交互操作等設(shè)計兼顧老人的使用習(xí)慣。于是我們馬上遇到了第一個問題，一旦我們在系統(tǒng)層面提供了“老年版”的切換入口，就等于給老年人群貼上了“因為你行動不便、視力不好，所以我們提供了一個不同的版本”的標簽，這真的是老人想要的嗎?
針對該問題，我們的解法不難–在入口的文案上下功夫，例如避開“老年版”而采用“關(guān)懷版”“簡潔版”“大字版”這樣的文案。
但很快，我們遇到了第二個問題。當再次仔細翻閱《行動方案》時，發(fā)現(xiàn)里面明確提出了老年版零廣告插件的要求。從老年人對信息的辨別能力較弱，容易上當受騙的角度出發(fā)的，其出發(fā)點是好的，可這帶來了商業(yè)上的矛盾，如果所有用戶都切換到這個版本，如何兼顧產(chǎn)品的商業(yè)價值呢?
如果我們把入口的層級適當藏深，提高一些門檻，保證不是所有用戶都切過去，又會導(dǎo)致對老年人來說，操作入口層級深，切換門檻高的問題。
到底要怎么解決這個問題呢?
我們認為，目前相對合適的設(shè)計策略是，將適老的概念通用化。
每個人都有“老齡化時刻”
我們認為適老設(shè)計，是針對具有老齡化行為的所有人的設(shè)計。馬里蘭大學(xué)的 Gregg Vanderheiden 是信息學(xué)院的交互設(shè)計教授，他在論文《產(chǎn)品制造商在阻礙、激勵消費所采用的通用設(shè)計實踐》(Barriers, Incentives and Facilitators for Universal Design Practices by Consumer Product Manufacturers)里提到了一個概念-“情境性障礙(Situational Limitation)”，是指我們?nèi)魏我粋€人，都會在某個場景下出現(xiàn)臨時性的行動障礙。比如，你有沒有在開車時，想要使用手機找某首歌卻非常困難?在陽光刺眼的路上走著，卻需要用手機預(yù)約一個銀行網(wǎng)點?或疫情期間，帶著口罩費力地解鎖你的屏幕?
以上這些情況不僅是老人會遇到，是我們所有人都會遇到的問題，在開車找歌的 5 分鐘里，我們的眼睛會產(chǎn)生短暫的類似白內(nèi)障的視力效果，但這個障礙是短暫的，當我們脫離當前情境下，障礙會自然消失，我們遇到的問題是情境性短暫障礙。
與情境性障礙對應(yīng)的，是永久性障礙，這兩者的差異就如 One Arm 到 New Parent，同樣都是一條胳膊無法行動，但 New Parent 的狀態(tài)很快就會結(jié)束。
在銀行服務(wù)場景中，以下場景都屬于情境性障礙：
- 在強光下預(yù)約手機銀行時，我們會出現(xiàn)短暫的視覺障礙;
- 抱著小孩子去ATM取錢，我們會出現(xiàn)短暫的肢體障礙;
- 對銀行部分業(yè)務(wù)流程不熟悉，我們會出現(xiàn)短暫的認知障礙;
其實我們在生活中很多時刻，都會因為外部環(huán)境的限制導(dǎo)致我們產(chǎn)生短暫性地“老齡化時刻”，那這對我們設(shè)計方案有什么啟發(fā)?
讓所有人受益的設(shè)計
我們相信：起初為行動障礙的老人或殘障人士的設(shè)計，最終有可能所有人都受益。
如谷歌無障礙設(shè)計專家夏冰瑩在她的《5 lessons I learned by designing for accessibility》中提到的經(jīng)典案例-Curb Cut Effect(人行道斜坡效應(yīng))，斜坡起初是為了給行動不便的老人或依賴輪椅的殘障人士設(shè)計的，但我們有拖行李箱經(jīng)驗的同學(xué)應(yīng)該都能感受到這項設(shè)計帶來的便利。
這種設(shè)計思路也被稱為“通用性設(shè)計”，類似的案例還有很多，例如：閉合字幕，閉合字幕的發(fā)明是為了讓聽力障礙的人，不用通過音效和背景音，也能夠更好地理解電影里的情節(jié)，但最終，我們很多人都能從中獲益，如果我們希望在嘈雜的環(huán)境下仍然可以觀看視頻，開啟閉合字幕可以幫我們更清楚地理解內(nèi)容。
從這個案例我們得到的啟發(fā)是，優(yōu)秀的適老化設(shè)計并不一定要強調(diào)“老年”這個詞，而是通過滿足更加普適的場景痛點，來指導(dǎo)我們的方案設(shè)計。
情境性障礙下的設(shè)計考量
銀行服務(wù)作為日常生活中的必備服務(wù)，覆蓋的人群從大學(xué)生到老年人，跨度很大，所以在產(chǎn)品框架規(guī)劃初期，就應(yīng)當充分考慮到所有具有暫時性障礙的場景，設(shè)計并不按照年齡劃分，而是一種按照行為區(qū)分的設(shè)計思路。
情境性障礙主要分為以下幾類：視覺障礙、肢體障礙、聽覺障礙以及認知障礙。
A 視覺情境性障礙
老年黃斑病變是一種常見的慢性疾病，會導(dǎo)致患者視力受損，患者的中央視野會出現(xiàn)模糊或者形成視覺盲點。雖然對周邊視覺影響不大，但中央視力受損會影響患者閱讀、駕車以及辨認臉孔的能力。下圖是我模擬視覺障礙的效果。
在情境性視覺障礙的實際案例
在前往銀行的路上，陽光明媚，小張想要打開手機來查看一下賬戶余額，讓辦理業(yè)務(wù)時心理有數(shù)，但卻因為強光的照射導(dǎo)致小張需要很費力地在屏幕上找到某個功能項。
這對我們有什么啟發(fā)
仔細分析情境，用戶打開手機銀行經(jīng)常是臨時起意去查看賬戶余額，這使得打開手機銀行的外部環(huán)境豐富多樣，用戶可能是在走在去銀行的路上，也可能是在駕駛的途中，打開快，離開也快，這對信息架構(gòu)的清晰性有極高的要求。
然而，目前多數(shù)手機銀行的首頁架構(gòu)是寬而淺的，基本是 Banner+金剛區(qū)的搭配，這是一種非常成熟的信息架構(gòu)，它能在短時間內(nèi)營造出功能豐富強大的感覺。
但這樣的架構(gòu)也有一個問題，那就是金剛區(qū)的結(jié)構(gòu)只能采用 icon+banner 的方式，這種結(jié)構(gòu)限制了我們能夠傳遞給用戶的信息量，用戶在進入應(yīng)用后，功能入口密度較大，需要一段時間的探索學(xué)習(xí)。
以用戶資產(chǎn)為中心組織首頁的設(shè)計
解決這個問題要回到如何保證信息架構(gòu)清晰性的問題上。我們面臨的問題是，銀行的業(yè)務(wù)復(fù)雜專業(yè)且全面，應(yīng)當如何去組織信息結(jié)構(gòu)?
如果將首頁的信息架構(gòu)進行抽象，有兩種主流的框架，寬而淺的散裝首頁是目前采用比較多的設(shè)計方式，我們認為這種方式的優(yōu)勢在于能在首頁承載更多業(yè)務(wù)，但對用戶來說，信息明確度上會有些模糊;另一種就是窄而深的線性架構(gòu)，首頁的功能的曝光量上會有所縮減，但能保證每一個功能的信息量足夠多。
在元素層面，我們采用原子拼接的設(shè)計方式，將矩陣放大，保證每個原子能夠有更大的信息展示空間。原先的賬戶管理以 icon 形式承載的入口，我們替換為 343×256 的賬戶信息卡，這樣放大的好處主要在于我們可以將藏在 2、3 甚至更深層級的信息淺層化，更加直觀地給到用戶，并且首頁框架我們按照優(yōu)先級排序，保證用戶想要的一定能最快看到。
這種架構(gòu)也可以靈活地根據(jù)客戶業(yè)務(wù)的不同階段、不同需求進行快速調(diào)整。靈活的組合方式可以使整個團隊更有節(jié)奏地提升產(chǎn)品質(zhì)量。
B 肢體情境性障礙
肢體障礙的情況差別會比較大，老年群體中比較普遍的頸椎病、長期服用藥物導(dǎo)致的周圍神經(jīng)壓迫疾病等，在產(chǎn)品使用過程中，會存在以下障礙：
- 手指顫抖導(dǎo)致靈活度受限：點擊一個按鈕所花費的時間較長，對同一個操作控件的可點擊區(qū)的面積要求更高;
- 手掌力度下降導(dǎo)致握持不穩(wěn)：老人傾向于大屏手機，但大屏手機的重量使得老人需要使用更大的力度持握，無法長時間連續(xù)使用手機。
體現(xiàn)在情境性肢體障礙的實際案例
在顛簸的大巴車，接到一個日歷通知，告知用戶需要向某銀行卡轉(zhuǎn)賬，于是需要在顛簸的環(huán)境下打開手機銀行進行轉(zhuǎn)賬操作。此時，劇烈晃動的屏幕會讓我們的手指靈活度短暫受限，無法精準快速地點擊按鈕，甚至?xí)霈F(xiàn)手機掉落的情況。
這對我們有什么啟發(fā)
肢體障礙的情境下，需盡量保證按鈕簡單聚焦，對內(nèi)容進行一再精簡合并，讓出更多的面積保證操作。這里的精簡是用最簡單的語言精準地傳達內(nèi)容，而不是直接刪除內(nèi)容。
不跳出的高效轉(zhuǎn)賬流程設(shè)計
轉(zhuǎn)賬作為目前手機銀行使用頻率最高的操作，平均每個人用戶的常用轉(zhuǎn)賬人在 2-3 個，基于此，我們在流程上采用了輕量的設(shè)計方式，給用戶營造一種輕量快速的體驗。在元素上，我們設(shè)計了 上卡片+下信息的布局，將頁面內(nèi)容切割為兩部分，充分利用卡片元素承載更多轉(zhuǎn)賬對象的信息，從而讓用戶可以聚焦在輸入金額的操作上。
同時，在新建銀行卡的流程，繼承了滑動操作，只需要滑動即可激活流程。同時在用戶輸入基本信息的同時，實時更新所輸入的信息，輔助用戶完成新建操作。
后續(xù)我們將會增加信息穿梭，語音喚起的功能，期望在整個流程上能做到最簡化。
C 認知情境性障礙
老年人是阿茲海默癥、海馬區(qū)受損的高發(fā)人群，這類疾病會導(dǎo)致人對外界事物產(chǎn)生認知障礙，主要表現(xiàn)為記憶力下降、學(xué)習(xí)障礙等。
認知障礙主要分為 2 個階段：
- 輕度記憶力減退期，這個階段主要是應(yīng)變能力下降，對新事物表現(xiàn)出茫然的情緒，對所處位置定向困難;
- 中度視空間能力下降，在這個階段，人處理問題，辨別事物的相似點和差異點方面有困難;
體現(xiàn)在情境性認知障礙的實際案例
小張開了一上午會，頭腦昏昏沉沉，但昨天預(yù)約了今天中午的大額取現(xiàn)，臨出門時總覺得似乎少帶了什么東西。這種短暫的認知障礙，是因為大腦長時間工作后，出現(xiàn)了暫時的記憶力減退的情況。
這對我們有什么啟發(fā)
認知障礙對我們來說，更多的是當用戶辦理線上業(yè)務(wù)時，我們應(yīng)當將信息以更易懂的方式傳遞給用戶。銀行的業(yè)務(wù)相對比較復(fù)雜，比如購買理財產(chǎn)品時，”開放式基金”、”結(jié)息”、”R2 風(fēng)險”等專業(yè)名詞的理解門檻較高，使得很多用戶在購買時難以辨別產(chǎn)品差異，從而把關(guān)注度只放在收益、投資期限這些參數(shù)上。
并且，很多政策性的波動其實最終體現(xiàn)在頁面上的只是某個名詞的變化，這讓很多用戶更加一頭霧水。例如，2018 年國家發(fā)布了大資產(chǎn)新規(guī)，以央行為首的所有銀行，要求理財產(chǎn)品必須是凈值型，不再出售保本理財產(chǎn)品。也就是說，投資者購買理財產(chǎn)品不再高枕無憂，需要自負盈虧。這在很多理財產(chǎn)品介紹頁中，唯一明顯變化的就是加了“凈值型”三個字，至今仍有很多用戶還會有理財=穩(wěn)贏的認知。
同屏解說的設(shè)計
因為理財產(chǎn)品構(gòu)成的復(fù)雜性，需要很多專業(yè)名詞來解釋產(chǎn)品構(gòu)成、風(fēng)險說明等。所以我們在詳情頁保持了理財產(chǎn)品的通用結(jié)構(gòu)，增加了同屏解說的入口，開啟該功能后，產(chǎn)品介紹中的主要價值將會被提煉出來置頂，同時復(fù)雜的詞匯會高亮展示，并對這些詞匯進行解釋，通過這種方式，降低用戶的理解門檻。
網(wǎng)點流程指引的設(shè)計
目前，各大銀行都在進行業(yè)務(wù)的線上遷移，但多數(shù)用戶仍然有去網(wǎng)點辦理業(yè)務(wù)的習(xí)慣。
在線下網(wǎng)點預(yù)約業(yè)務(wù)時，首先呈現(xiàn)給用戶的的是“您要選擇哪一項業(yè)務(wù)”，用戶選擇完自己所要辦理的業(yè)務(wù)后，如果該業(yè)務(wù)可以線上辦理，我們會推薦用戶線上辦理，如果只能線下辦理，我們再展示網(wǎng)點預(yù)約，在用戶完成預(yù)約后，提供詳細的操作指引，避免用戶去銀行時忘帶東西或因為流程不熟悉而手忙腳亂。
① 年齡歧視帶來的情緒挫敗(環(huán)境層面)
以年齡對人進行分類和劃分，會帶來傷害、困境和不公正待遇。WHO 的數(shù)據(jù)表明，世界上有二分之一的人都存在年齡歧視的問題。
老年人在工作場所中普遍處于不利的地位，而且隨著年齡的增長，針對老年人的專門培訓(xùn)和教育的機會也在顯著減少，這導(dǎo)致老年人在社會上普遍存在社會孤立、孤獨感加劇問題。2020 年康奈爾大學(xué)的一項研究顯示，在中國、美國、日本等國家，每年因年齡歧視導(dǎo)致的額外八項健康問題的支出超過 630 億美元，對于 60 歲以上的老人，每年用于處理這些健康問題的支出占其醫(yī)療支出的 1/7。
歧視問題像蝴蝶效應(yīng)，帶來了很多問題需要通過設(shè)計解決。通過一些專業(yè)人士了解到，在去銀行網(wǎng)點辦理業(yè)務(wù)的老年人因為受到的社會歧視，導(dǎo)致鈍感力較差，情緒敏感，很容易出現(xiàn)情緒挫敗的狀況。
② 生理變化導(dǎo)致負面情緒修復(fù)能力差
進入 60 歲后，大腦皮層和皮下多種神經(jīng)細胞發(fā)生退行性變化，神經(jīng)纖維的再生能力下降，腦血流量和氧氣的攝取量減少，導(dǎo)致身體對負面情緒的修復(fù)能力較弱。這導(dǎo)致了情緒差的惡性循環(huán)，所以我們在設(shè)計時應(yīng)該更加關(guān)注和關(guān)懷用戶的挫敗心理。
③ 設(shè)計時避開“老年”“特殊”等詞
在方案中，我們提供了同屏解說功能，希望通過這種設(shè)計能夠降低理財門檻。該功能的入口設(shè)計，我們修改了好幾版，從最初的加一個老年人的 icon，到最終的講解文案，希望在產(chǎn)品設(shè)計中，減少一些特殊文案產(chǎn)生的貼標簽感知，讓方案能更加通用、平等。
參照已有標準找到平衡點
這里就重點介紹如何利用這些基礎(chǔ)，找到一個平衡點來指導(dǎo)設(shè)計，滿足普通用戶情境性障礙的問題。
① 對比度-使用一些輔助工具檢查對比度是否合理
WCAG 有 AA 和 AAA《色彩無障礙設(shè)計》的對比度標準，我們認為通用的頁面上，例如一級 tab，滿足 AA 的要求(4.5:1)即可
一些在線工具可以幫助我們測試對比度是否滿足 WCAG 的標準，給大家推薦四個：WebAIM`s Color Contrast Checker、Contrast-ratio、EightShapes Contrast Grid、Color Tool。
② 字高-5.62mm左右
有一個叫“Visual Angle Calculator”的網(wǎng)站中有個程序可以直接通過視線與屏幕間的距離得出最小字高。老人視覺能力下降，有研究表明，老人的最小可接受視角是 0.75 度，視距是 43cm，換算之后相當于字高 5.62mm。
③ 觸摸目標尺寸間距
在界面設(shè)計中，需要放大觸摸目標以提高老人點擊的準確率和速度。44*44 point 是 Apple HIG 建議的最小點觸面積，44point 換算成物理尺寸為 0.27 英寸(6.86mm)。有文章建議老齡化產(chǎn)品的點觸最小目標為 10.5mm，同時減少相鄰互動元素之間的距離，至少相距 2mm。
結(jié)語
目前已很多設(shè)計團隊都在嘗試以情境性障礙的思維做設(shè)計，像 Google 的 Next Billion User 計劃，就是在為來自不同地區(qū)的用戶做更多本地化設(shè)計，用戶可能因為網(wǎng)絡(luò)較差、或因為騎摩托車而導(dǎo)致行為情景障礙，Google 也分別為以上兩種情況給出了自己的解決方案。
另外還有 Microsoft，他們提出了 Inclusive Design(包容性設(shè)計)，是與官方設(shè)計語言 Fluent Design 占同等比重的設(shè)計語言。并且提供了詳細的設(shè)計工具、Sketch 插件供設(shè)計師使用。
本篇聚焦在框架場景層面與大家交流我們在手機銀行產(chǎn)品設(shè)計中對于適老化領(lǐng)域的探索。適老化這條路任重而道遠，希望能有更多同學(xué)留言討論，和我們一同探索前行。
