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