如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

2 評論 4645 瀏覽 27 收藏 21 分鐘

編輯導(dǎo)語:隨著社會中老齡人口的增多,產(chǎn)品的適老化改造也逐步提上日程,而適老化改造并不只是放大字體,若想有效地實(shí)現(xiàn)適老化改造,產(chǎn)品需要了解老年人的生理特性,基于老年用戶的真實(shí)需求之上進(jìn)行規(guī)劃。那么如何做好B端產(chǎn)品的適老化設(shè)計(jì)呢?一起來看一下。

老齡化社會已經(jīng)到來,如何讓中老年群體更好地使用互聯(lián)網(wǎng)產(chǎn)品是當(dāng)今的熱門話題。

貓眼演出設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)的一個(gè)B端項(xiàng)目的使用人群需覆蓋到中老年用戶,也屬于適老化的涵蓋范疇。

在前期調(diào)研和設(shè)計(jì)環(huán)節(jié)中,我們收集了一些相關(guān)的文獻(xiàn)及案例,并且結(jié)合項(xiàng)目實(shí)踐有所思考和沉淀,在這里與大家分享。

一、普適的適老化設(shè)計(jì)理念

世界衛(wèi)生組織根據(jù)現(xiàn)代人生命狀況,提出了人生階段年齡的新劃分。

45~59 歲為中年人;60~74 歲為年輕老年人;75~89 歲為老年人;90 歲以上為長壽老人。[1]

隨著年齡的增長,人們的身體機(jī)能、心理狀態(tài)、認(rèn)知能力等都會出現(xiàn)衰退的情況。

適老化設(shè)計(jì)是無障礙設(shè)計(jì)中的一種。無障礙設(shè)計(jì)于1974年由聯(lián)合國組織提出,設(shè)計(jì)中需要充分考慮具有不同程度生理傷殘缺陷者和正?;顒幽芰λネ苏撸ㄈ鐨埣踩恕⒗夏耆耍┑氖褂眯枨?。[2]

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

目前互聯(lián)網(wǎng)產(chǎn)品中大多數(shù)的適老化設(shè)計(jì),主要是集中在C端。

針對不同障礙(視覺、肢體、聽覺、認(rèn)知障礙)[3],目前普適的適老化設(shè)計(jì)原則有:

(1)“強(qiáng)烈“好于“柔和”

針對視覺障礙,常見做法有增大字體大小,使用非襯線體字體,提高顏色對比度等。

相比原版的App,百度大字版App和支付寶長輩模式修改了UI界面,每個(gè)功能模塊都用了明亮的大色塊、加大字體的設(shè)計(jì)。

(2)善用“輔助”和“替代”

針對聽覺障礙,常見的做法有通過視覺輔助,將聲音轉(zhuǎn)化成文字、擴(kuò)大音量、降低語速等。

Google安卓系統(tǒng)推出了Live Caption功能,可自動將手機(jī)上播放的內(nèi)容轉(zhuǎn)換成字幕。Live Transcribe-「Sound Notification聲音通知」功能,可識別特定聲音(比如煙霧警報(bào)器、嬰兒啼哭、敲門聲等),并轉(zhuǎn)化成文字及視覺符號推送至手機(jī),方便聽障用戶辨別生活當(dāng)中一些重要的聲音信號。

(3)“點(diǎn)擊”好于“滑動”

針對肢體障礙,減少頁面信息的密度,避免使用過小的按鈕以及復(fù)雜的交互手勢。

有研究表明,老年群體在操作時(shí)難以瞄準(zhǔn)物體,在瀏覽圖片時(shí),由于視力衰退導(dǎo)致無法對焦,他們會不斷地用兩只手指放大/縮小并反復(fù)點(diǎn)擊屏幕。[4]

平安銀行App關(guān)懷模式采用卡片拼接的設(shè)計(jì)方式,將間距放大,保證每個(gè)信息有更大的展示空間,同時(shí)也放大按鈕點(diǎn)擊熱區(qū),提高操作的準(zhǔn)確率。

(4)“具象”好于“抽象”

針對認(rèn)知障礙,避免使用不易識別的圖標(biāo),盡可能配有圖標(biāo)或圖片,簡化信息內(nèi)容。

有研究表明,文字+圖標(biāo)為主的設(shè)計(jì)有助于提升老年新手用戶對新ATM使用的學(xué)習(xí)效率和記憶。[5]

滴滴App關(guān)懷模式針對老年人進(jìn)行功能精簡,滿足高優(yōu)先級核心訴求,首頁只放「一鍵打車」,操作簡單,大字、無廣告。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

二、B端產(chǎn)品引入適老化設(shè)計(jì)也值得深思

在很多行業(yè)中,中老年人因?yàn)閾碛胸S富的經(jīng)驗(yàn)在崗位上更具競爭優(yōu)勢,譬如教師、醫(yī)生、律師、會計(jì)等職業(yè),工作年限長、經(jīng)驗(yàn)足是優(yōu)勢,可以提供更好的服務(wù)。他們既會使用C端產(chǎn)品,也有使用B端產(chǎn)品的場景。

隨著時(shí)代變遷,2015年世界衛(wèi)生組織提出了“健康老齡化”理念[6],倡導(dǎo)改變過去“老了就要退出社會生活”的消極認(rèn)識。

從“老有所依”到“老有所為”,很多的B端場景都覆蓋了中老年用戶,如何提升中老年用戶的辦公用戶體驗(yàn)是重要課題。

另外我們看下C端與B端的主要差別:

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

C端App中時(shí)常將簡單作為適老設(shè)計(jì)宣傳點(diǎn)。追求簡單有一部分原因是,C端用戶是在自己的場域操作且?guī)缀鯚o時(shí)間壓力。

而B端產(chǎn)品卻相反,業(yè)務(wù)邏輯復(fù)雜,用戶要長時(shí)間使用而且要求效率。B端面向企業(yè)定制化,針對特定人群、情景,使得在適老化設(shè)計(jì)中要解決的問題更清晰。

三、適老化設(shè)計(jì)在POS中的應(yīng)用

留意生活中的零售行業(yè),如餐廳、商場、藥局、便利店的服務(wù)人員,往往能看到中老年人的身影。

POS系統(tǒng)是B端場景中使用率最高的產(chǎn)品之一,POS系統(tǒng)的英文全名為Point of Sale,中文名為銷售時(shí)點(diǎn)信息系統(tǒng)。[7]

它由硬件與軟件組成,根據(jù)產(chǎn)業(yè)和店面類型的不同,會有功能上的差異。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

最近團(tuán)隊(duì)參與了一個(gè)改造POS系統(tǒng)的項(xiàng)目,使用人群覆蓋到了中老年用戶,提升他們的辦公用戶體驗(yàn)是其中一個(gè)產(chǎn)品目標(biāo)。

本次項(xiàng)目主要是POS界面的更新,完整的POS體驗(yàn)不僅有軟件本身,有更大的部分在于實(shí)體環(huán)境與設(shè)備,例如:結(jié)賬區(qū)的控件、店面的擺設(shè)、掃描槍,讀卡器等,而POS界面是連結(jié)上述元素的節(jié)點(diǎn)。

在對POS系統(tǒng)進(jìn)行改造時(shí),我們是按照以下設(shè)計(jì)思路進(jìn)行的:

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(1)第1步:沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)

B端系統(tǒng)背后往往由成熟的業(yè)務(wù)場景和復(fù)雜的業(yè)務(wù)邏輯構(gòu)成。B端系統(tǒng)往往不是一個(gè)從0-1全新的系統(tǒng),而是存在一個(gè)被使用了很多年的系統(tǒng)。

在這種情況下,企業(yè)服務(wù)的每個(gè)用戶都是趨向于規(guī)避風(fēng)險(xiǎn)的。人們可能已經(jīng)習(xí)慣了原有的解決方案(盡管不好用,但是大家都會用了),但新的方案如果不好用,他們的生產(chǎn)力反而會因?yàn)椴恢廊绾问褂眯路桨付档汀?/p>

這就意味著在做B端設(shè)計(jì)時(shí),現(xiàn)行的方案會產(chǎn)生很大的習(xí)慣引力。

當(dāng)設(shè)計(jì)師要引入一個(gè)新方案時(shí),取消或改變某些功能及操作行為將有難度,不能霸道性更改,取代需要合理性。

設(shè)計(jì)思路:

  1. 梳理業(yè)務(wù)邏輯和功能模塊:沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)。
  2. 制定框架:定穩(wěn)定一致、拓展性強(qiáng)的信息框架與導(dǎo)航欄。
  3. 統(tǒng)一專業(yè)術(shù)語:信息表達(dá)(文案)與原有系統(tǒng)盡可能保持一致。
  4. 遵從使用者習(xí)慣:原系統(tǒng)中可能存在一些不夠美觀或不合常理但卻實(shí)用的快捷入口及交互方式,可以整合優(yōu)化后進(jìn)行復(fù)用。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(2)第2步:理清主要用戶與使用場景

想要了解使用者的真實(shí)痛點(diǎn),需從場景出發(fā)。

(3)第3步:用適老化設(shè)計(jì)原則去解決場景中的問題

POS使用場景有很多,這里列舉3個(gè)常見的使用情境:

可能存在的障礙:無法聚焦信息內(nèi)容,難做到邊看屏幕邊與顧客交流。

設(shè)計(jì)目標(biāo):確保信息在復(fù)雜的環(huán)境中,信息內(nèi)容清晰可讀。

設(shè)計(jì)思路:

(1)放大信息內(nèi)容

服務(wù)至上,POS使用者在工作時(shí)需保持端莊熱情的姿態(tài),不能只專注看POS屏幕信息而不顧顧客。

內(nèi)容大小的確立由設(shè)備分辨率、環(huán)境燈光、字體、視距等因素決定,在復(fù)雜的現(xiàn)場環(huán)境中,信息內(nèi)容要清晰易讀。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(2)色彩對比度符合WCAG標(biāo)準(zhǔn)

參照WCAG有AA和AAA的對比度標(biāo)準(zhǔn),界面中的信息與其背景間的關(guān)系對比度至少在4.5:1之上,保證信息易讀性。

WCAG全稱是Web Content Accessibility Guidlines(網(wǎng)頁內(nèi)容無障礙指南)。

這是一套由無障礙功能專家編輯的指南,有若干國家在其網(wǎng)絡(luò)無障礙功能法律要求中明令必須使用這些指南。[8]

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

一些設(shè)計(jì)插件可以幫助我們檢驗(yàn)色彩對比度是否符合WCAG標(biāo)準(zhǔn),給大家推薦2款:

  1. Sketch插件:Cluse
  2. Figma插件:A11y-Color Contast Checker

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(3)設(shè)計(jì)有意義的動畫

通過動效來表達(dá)靜態(tài)視覺效果無法準(zhǔn)確傳達(dá)的信息,如反饋、引導(dǎo)下一步、狀態(tài)表達(dá)等。

好的動效與視覺設(shè)計(jì)是互補(bǔ)而成系統(tǒng)的。

比如用動畫來展示商品被加進(jìn)購物車的狀態(tài),引導(dǎo)下一步操作。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(4)加大點(diǎn)擊熱區(qū)

提高使用者點(diǎn)擊操作的準(zhǔn)確率和速度。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(5)一屏策略

在這次的項(xiàng)目中存在一個(gè)場景,除了銷售端服務(wù)員看到的屏幕,顧客也會有一個(gè)客顯屏,即服務(wù)人員看到的界面,顧客也會看到。

對于頁面信息框架以及布局盡量“一屏”展示,確保雙方的視線和注意力一致,便于溝通交流。但這時(shí)會有挑戰(zhàn):字放大、按鈕放大,信息和功能在一屏上怎么放得下?

解決思路:

  • 進(jìn)行功能篩選,滿足場景中高優(yōu)先級核心訴求,提取核心功能展示。
  • 模塊化展示每個(gè)信息,根據(jù)格式塔的視覺感知理論,做到聚焦用戶視角。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

可能存在的障礙:在顧客的“催促”下,使用者也會著急,對事物表現(xiàn)出茫然的情緒,定位當(dāng)前位置困難。

設(shè)計(jì)目標(biāo):追求信息的有效表達(dá)和操作的直覺性與效率。

設(shè)計(jì)思路:

(1)避免使用不易識別的圖標(biāo)

B端系統(tǒng)中會有些功能很難用一個(gè)圖標(biāo)去表達(dá)其含義,此時(shí)文字+圖標(biāo)按鈕優(yōu)于純圖標(biāo)按鈕,能幫助POS使用者更好地理解語意并做出操作。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

(2)信息的呈現(xiàn)符合用戶眼動規(guī)律,操作軌跡越短越好

可運(yùn)用古騰堡圖表法Diagonal Balance,它由14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。他發(fā)現(xiàn)人們視覺閱讀規(guī)律,左上角是視覺第一落點(diǎn)區(qū),右下角是視覺最終落點(diǎn)區(qū),右上角和左下角都是一個(gè)視覺落盲點(diǎn),大多數(shù)情況容易被忽略。[9]

四、用超多案例,幫你掌握交互設(shè)計(jì)心理學(xué)的古騰堡原則

在平時(shí)的設(shè)計(jì)過程當(dāng)中,你是否有這樣的疑惑?

在進(jìn)行信息排布時(shí),可根據(jù)用戶習(xí)慣性的眼動規(guī)律,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個(gè)視覺落點(diǎn)可以展示重要操作。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

可能存在的障礙:百忙之中,應(yīng)變能力下降,容易發(fā)生誤操作的情況。

設(shè)計(jì)目標(biāo):預(yù)防不當(dāng)行為,提升容錯率,反饋要及時(shí)有效且清晰。

設(shè)計(jì)思路:

(1)通過二次確認(rèn)避免誤操作

在產(chǎn)品設(shè)計(jì)時(shí),要把各種可能性考慮進(jìn)去,通過模態(tài)對話框讓用戶二次確認(rèn)來避免誤操作行為。

當(dāng)有重要操作時(shí)需告知用戶處理結(jié)果,狀態(tài)反饋信息采用的顏色需要遵守用戶對色彩的基本認(rèn)知,如紅色代表警示,黃色代表警告、綠色代表成功等。

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

上述舉例的設(shè)計(jì)原則是啟發(fā)但不是限制,每個(gè)設(shè)計(jì)提案最后都要經(jīng)過用戶調(diào)研,看是否符合使用者的使用習(xí)慣,是否真能解決業(yè)務(wù)與工作中的痛點(diǎn)。

附上總結(jié)圖:

如何做好B端產(chǎn)品的適老化設(shè)計(jì)?來看貓眼演出的實(shí)戰(zhàn)案例!

其實(shí)設(shè)計(jì)到后面會發(fā)現(xiàn),起初為了方便中老年用戶使用POS運(yùn)用的設(shè)計(jì)原則,最終都能給多數(shù)人帶來很大便利。

這是因?yàn)槲覀兠總€(gè)人在某些時(shí)候都會遇到各種臨時(shí)的無障礙需求。

五、結(jié)語

適老化設(shè)計(jì),不僅僅只是為中老年群體做設(shè)計(jì),更是一種新的設(shè)計(jì)思維方式,去挖掘更多普適的場景痛點(diǎn),來指導(dǎo)我們做方案設(shè)計(jì)。

市面上很多適老化設(shè)計(jì)方法為B端產(chǎn)品提供了借鑒,但B端產(chǎn)品不能為了適老而適老,理清相關(guān)工作情境和要解決的問題很重要;不能霸道性更改,取代需要合理性,因?yàn)锽端產(chǎn)品現(xiàn)行的方案會產(chǎn)生很大的習(xí)慣引力。

以上是近期對B端引入適老化設(shè)計(jì)的一些思考和沉淀,是開始,也將繼續(xù),適老化設(shè)計(jì)還有很多值得深究和驗(yàn)證的內(nèi)容。

參考文獻(xiàn):

[1] Cherry K E, Hawley K S, Jackson E M, et al. Pictorial superiority effects in oldest-old people[J]. Memory, 2008, 16(7): 728-741.

[2] Persson H, ?hman H, Yngling A A, et al. Universal design, inclusive design, accessible design, design for all: different concepts—one goal? On the concept of accessibility—historical, methodological and philosophical aspects[J]. Universal Access in the Information Society, 2015, 14(4): 505-526.

[3] Vanderheiden G, Tobias J. Barriers, incentives and facilitators for adoption of universal design practices by consumer product manufacturers[C]//Proceedings of the Human Factors and Ergonomics Society Annual Meeting. Sage CA: Los Angeles, CA: SAGE Publications, 1998, 42(6): 584-588.

[4] Wang M H, Liu S F. Study on Innovative Gestures Applicable to the Elderly[C]//International Conference on Human-Computer Interaction. Springer, Cham, 2020: 200-211

[5] Huang H, Yang M, Yang C, et al. User performance effects with graphical icons and training for elderly novice users: A case study on automatic teller machines[J]. Applied ergonomics, 2019, 78: 62-69.

[6] 世界衛(wèi)生組織網(wǎng)站. 世界衛(wèi)生組織發(fā)布《關(guān)于老齡化與健康的全球報(bào)告》[J]. 中國衛(wèi)生政策研究, 2015, 8(11):1.

[7] Rahman M, Ripon S. Elicitation and modeling non-functional requirements-a POS case study[J]. arXiv preprint arXiv:1403.1936, 2014.

[8] Web Content Accessibility Guidelines (WCAG) Overview[EB/OL].

[9] Gutenberg Diagram — Why you should know it and use it[EB/OL].

 

作者:范特西,貓眼演出設(shè)計(jì)團(tuán)隊(duì)

原文鏈接:https://www.uisdc.com/b-end-elderly-design

本文由 @范特西 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

專欄作家

晌午,微信公眾號:晌午自習(xí)室,人人都是產(chǎn)品經(jīng)理專欄作家。4年產(chǎn)品經(jīng)驗(yàn),專注于數(shù)據(jù)方向,目前是電商客服領(lǐng)域的產(chǎn)品 。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 同B端設(shè)計(jì)師,之前沒有考慮過這些角度,不錯

    來自上海 回復(fù)
  2. 很不錯

    來自北京 回復(fù)