國務院辦公廳在去年11月份印發了 《關于切實解決老年人運用智能技術困難的實施方案》,發改委、衛健委、工業資訊化部、交通運輸部、中國人民銀行部委聯合出動,在國内數字化服務行業掀起了一陣波瀾,這也讓我們對正在探索的手機銀行方案進行重新的審視。
“老年版”之困
我們相信未來産品的設計,一定是更加跨梯度、跨年齡相容的,産品能為更多的使用者帶來便捷友好的使用體驗。我們正是以這樣的思路去了解和探索适老化設計,持續為使用者創造更加有溫度的手機銀行産品。
作為金融領域的“國小生”,在設計之初,我們仔細閱讀了工信部牽頭響應國務院号召的第一封細則**《網際網路應用适老化及無障礙改造專項行動方案》(以下簡稱 “行動方案”),文中提到産品設計中需要為老年人單獨定制一個“老年版”,通過例如:更大的字号、更高的對比度、語音讀屏、簡化互動操作等設計兼顧老人的使用習慣。
于是我們馬上遇到了第一個問題,一旦我們在系統層面提供了“老年版”的切換入口,就等于給老年人群貼上了“因為你行動不便、視力不好,是以我們提供了一個不同的版本”的标簽;這真的是老人想要的嗎?
針對該問題,我們的解法不難--在入口的文案上下功夫,例如避開“老年版”而采用“關懷版”“簡潔版”“大字版”這樣的文案。
但很快,我們遇到了第二個問題。當再次仔細翻閱《行動方案》時,發現裡面明确提出了老年版零廣告插件的要求。從老年人對資訊的辨識能力較弱,容易上當受騙的角度出發的,其出發點是好的,可這帶來了商業上的沖突,如果所有使用者都切換到這個版本,如何兼顧産品的商業價值呢?
如果我們把入口的層級适當藏深,提高一些門檻,保證不是所有使用者都切過去,又會導緻對老年人來說,操作入口層級深,切換門檻高的問題。
到底要怎麼解決這個問題呢?
我們認為,目前相對合适的設計政策是,将适老的概念通用化。
每個人都有“老齡化時刻”
我們認為 适老設計,是針對具有老齡化行為的所有人的設計。馬裡蘭大學的Gregg Vanderheiden是資訊學院的互動設計教授,他在論文《産品制造商在阻礙、激勵消費所采用的通用設計實踐》(Barriers, Incentives and Facilitators for Universal Design Practices by Consumer Product Manufacturers)裡提到了一個概念-“情境性障礙(Situational Limitation)",是指 我們任何一個人,都會在某個場景下出現臨時性的行動障礙。比如,你有沒有在開車時,想要使用手機找某首歌卻非常困難?在陽光刺眼的路上走着,卻需要用手機預約一個銀行網點?或疫情期間,帶着口罩費力地解鎖你的螢幕?
以上這些情況不僅是老人會遇到,是我們所有人都會遇到的問題,在開車找歌的5分鐘裡,我們的眼睛會産生短暫的類似白内障的視力效果,但這個障礙是短暫的,當我們脫離目前情境下,障礙會自然消失,我們遇到的問題是情境性短暫障礙。
與情境性障礙對應的,是永久性障礙,這兩者的差異就如One Arm到New Parent,同樣都是一條胳膊無法行動,但New Parent的狀态很快就會結束。
使用者障礙狀态,來自Microsoft Inclusive Design
在銀行服務場景中,以下幾個場景都屬于情境性障礙:
- 在強光下預約手機銀行時,我們會出現短暫的視覺障礙;
- 抱着小孩子去ATM取錢,我們會出現短暫的肢體障礙;
- 對銀行部分業務流程不熟悉,我們會出現短暫的認知障礙;
其實我們在生活中很多時刻,都會因為外部環境的限制導緻我們産生短暫性地“老齡化時刻”,那這對我們設計方案有什麼啟發?
讓所有人受益的設計
我們相信:起初為行動障礙的老人或殘障人士的設計,最終有可能所有人都受益。
就如谷歌無障礙的設計專家夏冰瑩在她的《5 lessons I learned by designing for accessibility》中提到的經典案例-Curb Cut Effect(人行道斜坡效應),斜坡起初是為了給行動不便的老人或依賴輪椅的殘障人士設計的,但我們有拖行李箱經驗的同學應該都能感受到這項設計帶來的便利。
人行道斜坡實景圖
這種設計思路也被稱為“通用性設計”,類似的案例還有很多,例如:閉合字幕,閉合字幕的發明是為了讓聽力障礙的人,不用通過音效和背景音,也能夠更好地了解電影裡的情節,但最終,我們很多人都能從中獲益,如果我們希望在嘈雜的環境下仍然可以觀看視訊,開啟閉合字幕可以幫我們更清楚地了解内容。
閉合字幕頁面,來自Youtube
從這個案例我們得到的啟發是,優秀的适老化設計并不一定要強調“老年”這個詞,而是通過滿足更加普适的場景痛點,來指導我們的方案設計。
情境性障礙下的設計考量
銀行服務作為日常生活中的必備服務,覆寫的人群從大學生到老年人,跨度很大,是以在産品架構規劃初期,就應當充分考慮到所有具有暫時性障礙的場景,設計并不按照年齡劃分,而是一種按照行為區分的設計思路。
情境性障礙主要分為以下幾類:視覺障礙、肢體障礙、聽覺障礙以及認知障礙。
A. 視覺情境性障礙
老年黃斑病變是一種常見的慢性疾病,會導緻患者視力受損,患者的中央視野會出現模糊或者形成視覺盲點。雖然對周邊視覺影響不大,但中央視力受損會影響患者閱讀、駕車以及辨認臉孔的能力。下圖是我模拟視覺障礙的效果。
不同情境、身體狀态下所看到的頁面
在情境性視覺障礙的實際案例
在前往銀行的路上,陽光明媚,小張想要打開手機來檢視一下賬戶餘額,讓辦理業務時心理有數,但卻因為強光的照射導緻小張需要很費力地在螢幕上找到某個功能項。
這對我們有什麼啟發
仔細分析情境,使用者打開手機銀行經常是臨時起意去檢視賬戶餘額,這使得打開手機銀行的外部環境豐富多樣,使用者可能是在走在去銀行的路上,也可能是在駕駛的途中,打開快,離開也快,這對資訊架構的清晰性有極高的要求。
然而,目前多數手機銀行的首頁架構是寬而淺的,基本是Banner+金剛區的搭配,這是一種非常成熟的資訊架構,它能在短時間内營造出功能豐富強大的感覺。
但這樣的架構也有一個問題,那就是金剛區的結構隻能采用icon+banner的方式,這種結構限制了我們能夠傳遞給使用者的資訊量,使用者在進入應用後,功能入口密度較大,需要一段時間的探索學習。
以使用者資産為中心組織首頁的設計
解決這個問題要回到如何保證資訊架構清晰性的問題上。我們面臨的問題是,銀行的業務複雜專業且全面,應當如何去組織資訊結構?
業務現狀
如果将首頁的資訊架構進行抽象,有兩種主流的架構,寬而淺的散裝首頁是目前采用比較多的設計方式,我們認為這種方式的優勢在于能在首頁承載更多業務,但對使用者來說,資訊明确度上會有些模糊;另一種就是窄而深的線性架構,首頁的功能的曝光量上會有所縮減,但能保證每一個功能的資訊量足夠多。
首頁資訊架構差異
在元素層面,我們采用原子拼接的設計方式,将矩陣放大,保證每個原子能夠有更大的資訊展示空間。原先的賬戶管理以icon形式承載的入口,我們替換為343x256的賬戶資訊卡,這樣放大的好處主要在于我們可以将藏在2、3甚至更深層級的資訊淺層化,更加直覺地給到使用者,并且首頁架構我們按照優先級排序,保證使用者想要的一定能最快看到。
一級頁面示意
這種架構也可以靈活地根據客戶業務的不同階段、不同需求進行快速調整。靈活的組合方式可以使整個團隊更有節奏地提升産品品質。
擴充性示意
B. 肢體情境性障礙
肢體障礙的情況差别會比較大,老年群體中比較普遍的頸椎病、長期服用藥物導緻的周圍神經壓迫疾病等,在産品使用過程中,會存在以下障礙:
- 手指顫抖導緻靈活度受限:點選一個按鈕所花費的時間較長,對同一個操作控件的可點選區的面積要求更高;
- 手掌力度下降導緻握持不穩:老人傾向于大屏手機,但大屏手機的重量使得老人需要使用更大的力度持握,無法長時間連續使用手機。
展現在情境性肢體障礙的實際案例
在颠簸的大巴車,接到一個月曆通知,告知使用者需要向某銀行卡轉賬,于是需要在颠簸的環境下打開手機銀行進行轉賬操作。此時,劇烈晃動的螢幕會讓我們的手指靈活度短暫受限,無法精準快速地點選按鈕,甚至會出現手機掉落的情況。
這對我們有什麼啟發
肢體障礙的情境下,需盡量保證按鈕簡單聚焦,對内容進行一再精簡合并,讓出更多的面積保證操作。這裡的精簡是用最簡單的語言精準地傳達内容,而不是直接删除内容。
不跳出的高效轉賬流程設計
轉賬作為目前手機銀行使用頻率最高的操作,平均每個人使用者的常用轉賬人在2-3個,基于此,我們在流程上采用了輕量的設計方式,給使用者營造一種輕量快速的體驗。在元素上,我們設計了 上卡片+下資訊的布局,将頁面内容切割為兩部分,充分利用卡片元素承載更多轉賬對象的資訊,進而讓使用者可以聚焦在輸入金額的操作上。
轉賬流程示意
同時,在建立銀行卡的流程,繼承了滑動操作,隻需要滑動即可激活流程。同時在使用者輸入基本資訊的同時,實時更新所輸入的資訊,輔助使用者完成建立操作。
添加銀行卡操作示意
後續我們将會增加資訊穿梭,語音喚起的功能,期望在整個流程上能做到最簡化。
資訊穿梭示意
C.認知情境性障礙
老年人是阿茲海默症、海馬區受損的高發人群,這類疾病會導緻人對外界事物産生認知障礙,主要表現為記憶力下降、學習障礙等。
認知障礙主要分為2個階段:
- 輕度記憶力減退期,這個階段主要是應變能力下降,對新事物表現出茫然的情緒,對所處位置定向困難;
- 中度視空間能力下降,在這個階段,人處理問題,辨識事物的相似點和差異點方面有困難;
展現在情境性認知障礙的實際案例:
小張開了一上午會,頭腦昏昏沉沉,但昨天預約了今天中午的大額取現,臨出門時總覺得似乎少帶了什麼東西。這種短暫的認知障礙,是因為大腦長時間工作後,出現了暫時的記憶力減退的情況。
這對我們有什麼啟發
認知障礙對我們來說,更多的是當使用者辦理線上業務時,我們應當将資訊以更易懂的方式傳遞給使用者。銀行的業務相對比較複雜,比如購買理财産品時,"開放式基金"、"結息"、"R2風險"等專業名詞的了解門檻較高,使得很多使用者在購買時難以辨識産品差異,進而把關注度隻放在收益、投資期限這些參數上。
并且,很多政策性的波動其實最終展現在頁面上的隻是某個名詞的變化,這讓很多使用者更加一頭霧水。例如,2018年國家釋出了大資産新規,以央行為首的所有銀行,要求理财産品必須是淨值型,不再出售保本理财産品。也就是說,投資者購買理财産品不再高枕無憂,需要自負盈虧。這在很多理财産品介紹頁中,唯一明顯變化的就是加了“淨值型”三個字,至今仍有很多使用者還會有理财=穩赢的認知。
同屏解說的設計
因為理财産品構成的複雜性,需要很多專業名詞來解釋産品構成、風險說明等。是以我們在詳情頁保持了理财産品的通用結構,增加了同屏解說的入口,開啟該功能後,産品介紹中的主要價值将會被提煉出來置頂,同時複雜的詞彙會高亮展示,并對這些詞彙進行解釋,通過這種方式,降低使用者的了解門檻。
同屏解說方案示意
網點流程指引的設計
目前,各大銀行都在進行業務的線上遷移,但多數使用者仍然有去網點辦理業務的習慣。
使用者辦理管道示意
線上下網點預約業務時,首先呈現給使用者的的是“您要選擇哪一項業務”,使用者選擇完自己所要辦理的業務後,如果該業務可以線上辦理,我們會推薦使用者線上辦理,如果隻能線下辦理,我們再展示網點預約,在使用者完成預約後,提供詳細的操作指引,避免使用者去銀行時忘帶東西或因為流程不熟悉而手忙腳亂。
流程指引設計示意
抛開有色眼鏡的設計
年齡歧視帶來的情緒挫敗(環境層面)
以年齡對人進行分類和劃分,會帶來傷害、困境和不公正待遇。WHO的資料表明,世界上有二分之一的人都存在年齡歧視的問題。
老年人在工作場所中普遍處于不利的地位,而且随着年齡的增長,針對老年人的專門教育訓練和教育的機會也在顯著減少,這導緻老年人在社會上普遍存在社會孤立、孤獨感加劇問題。2020年康奈爾大學的一項研究顯示,在中國、美國、日本等國家,每年因年齡歧視導緻的額外八項健康問題的支出超過630億美元,對于60歲以上的老人,每年用于處理這些健康問題的支出占其醫療支出的1/7。
歧視問題像蝴蝶效應,帶來了很多問題需要通過設計解決。通過一些專業人士了解到,在去銀行網點辦理業務的老年人因為 老年人受到的社會歧視,導緻鈍感力較差,情緒敏感,很容易出現情緒挫敗的狀況。
生理變化導緻負面情緒修複能力差
進入60歲後,大腦皮層和皮下多種神經細胞發生退行性變化,神經纖維的再生能力下降,腦血流量和氧氣的攝取量減少,導緻身體對負面情緒的修複能力較弱。這導緻了情緒差的惡性循環,是以我們在設計時應該更加關注和關懷使用者的挫敗心理。
設計時避開“老年”“特殊”等詞
在方案中,我們提供了同屏解說功能,希望通過這種設計能夠降低理财門檻。該功能的入口設計,我們修改了好幾版,從最初的加一個老年人的icon,到最終的講解文案,希望在産品設計中,減少一些特殊文案産生的貼标簽感覺,讓方案能更加通用、平等。
參照已有标準找到平衡點
之前我們發表過的另一篇文章《智慧政務行業的适老化設計--健康碼的适老化改造》介紹了對比度的WCAG 2.0,以及襯線體更适合閱讀的參照,非常詳細,也推薦大家前往閱讀。
這裡就重點介紹如何利用這些基礎,找到一個平衡點來指導設計,滿足普通使用者情境性障礙的問題。
1.對比度-使用一些輔助工具檢查對比度是否合理
WCAG有AA和AAA《色彩無障礙設計》的對比度标準,我們認為通用的頁面上,例如一級tab,滿足AA的要求(4.5:1)即可
一些線上工具可以幫助我們測試對比度是否滿足 WCAG的标準,給大家推薦四個:WebAIM`s Color Contrast Checker、Contrast-ratio、EightShapes Contrast Grid、Color Tool。
幾種常用校對工具
2.字高-5.62mm左右
有一個叫“Visual Angle Calculator”的網站有個程式可以直接視線與螢幕間的距離得出最小字高。老人視覺能力下降,有研究表明,老人的最小可接受視角是0.75度,視距是43cm,換算之後相當于字高5.62mm。
3.觸摸目标尺寸間距
在界面設計中,需要放大觸摸目标以提高老人點選的準确率和速度。44*44 point是Apple HIG建議的最小點觸面積,44point換算成實體尺寸為0.27英寸(6.86mm)。有文章建議老齡化産品的點觸最小目标為10.5mm,同時減少相鄰互動元素之間的距離,至少相距2mm。
結語
目前已很多設計團隊都在嘗試以情境性障礙的思維做設計,像Google的Next Billion User計劃,就是在為來自不同地區的使用者做更多本地化設計,使用者可能因為網絡較差、或因為騎機車而導緻行為情景障礙,Google也分别為以上兩種情況給出了自己的解決方案。
Google在情境性障礙的設計嘗試
另外還有Microsoft,他們提出了Inclusive Design(包容性設計),是與官方設計語言Fluent Design占同等比重的設計語言。并且提供了詳細的設計工具、Sketch插件供設計師使用。
本篇聚焦在架構場景層面與大家交流我們在手機銀行産品設計中對于适老化領域的探索。下篇我們将會在視覺設計,包括結構系統、色彩系統、文字、材質等幾個角度,進行更多的讨論交流。适老化這條路任重而道遠,希望能有更多同學加入進來,和我們一同探索前行。
Reference
- Leanne Dobson “Solve for one – extend to many”: inclusive design and why it matters, Available at: https://www.oxfordcc.co.uk/insights/solve-for-one-extend-to-many-inclusive-design-and-why-it-matters/ (Accessed: 25 OCT 2018)
- 世界衛生組織 (n.d.) 關于老齡化與健康的全球報告
- Buffel T, editor. Researching age-friendly communities: stories from older people as co-investigators. Manchester: University of Manchester Library; 2015. (http://www.socialsciences.manchester.ac.uk/medialibrary/brochures/Age-Friendly-Booklet.pdf, accessed 27 July 2015).
- Stephanie Kuo (矽谷時下流行詞彙-包容性設計-inclusive-design, Available at: https://medium.com/as-a-product-designer (Accessed: Jun 28, 2019).
- Sara J. Czaja, Walter R. Boot, Neil Charness, Wendy A. Rogers (2019) Designing for Older Adults, Principles and Creative Human Factors Approaches, Third Edition edn.
- Google Next Billion User(https://nextbillionusers.google/)
- 德勤 (n.d.) 中國銀行業網點管道變革的五大趨勢, 2019: Brett King.
- Gregg Vanderheiden (1998) 'Barriers, Incentives and Facilitators for Adoption of Universal Design Practices by Consumer Product Manufacturers', Proceedings of the Human Factors and Ergonomics Society Annual Meeting.
- Microsoft Inclusive Design https://www.microsoft.com/design/inclusive/
- The Curb Cut Effect: How Making Public Spaces Accessible to People With Disabilities Helps Everyonehttps://medium.com/@mosaicofminds/the-curb-cut-effect-how-making-public-spaces-accessible-to-people-with-disabilities-helps-everyone-d69f24c58785
- Bingying Xia, ‘5 lessons I learned by designing for accessibility’