大廠案例 | 你可能忽略的產(chǎn)品設(shè)計(jì)細(xì)節(jié)——初探適老化與無障礙改造
▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)
作者：騰訊 CDC 體驗(yàn)設(shè)計(jì)
編輯：張夢(mèng)如
共 3491 字 13 圖 預(yù)計(jì)閱讀 9 分鐘
兔小巢 （txc.qq.com） 是一款由騰訊 CDC 開發(fā)的用戶反饋互動(dòng)社區(qū)，讓騰訊內(nèi)外各產(chǎn)品團(tuán)隊(duì)無需開發(fā)即可快速生成專屬社區(qū)，高效收集用戶反饋，并與用戶進(jìn)行深入交流。目前已有超過 10000 款產(chǎn)品接入兔小巢，其中騰訊系產(chǎn)品超過 2600 款，包括微信支付、 QQ 、騰訊文檔等頭部產(chǎn)品。
兔小巢作為用戶反饋互動(dòng)社區(qū)，每天能收到來自多個(gè)產(chǎn)品的成千上萬條產(chǎn)品反饋，但是我們聽到的是全部的聲音嗎？會(huì)不會(huì)有一些人因?yàn)楫a(chǎn)品設(shè)計(jì)上的某些細(xì)節(jié)問題，而無法順利向產(chǎn)品團(tuán)隊(duì)提出反饋和想法呢？
本文是兔小巢團(tuán)隊(duì)在適老化與無障礙改造探索方面的一次階段總結(jié)，希望能為社區(qū)類產(chǎn)品，甚至是其他類型的產(chǎn)品提供一些思路。
（聽見弱勢(shì)人群的反饋聲音：騰訊兔小巢適老化和無障礙改造）
1. 關(guān)于適老化與無障礙的重要性
老年人和殘障人士等弱勢(shì)群體，無論是生活方式，還是日常娛樂，他們的體驗(yàn)行為或多或少會(huì)存在差異。
通過一系列的用戶調(diào)研，我們才近距離地了解到，在使用手機(jī)過程中，有一些我們習(xí)以為常的提示，可能超出了他們的理解范圍，成為了無效的信息；有一些內(nèi)容，我們可能掃一眼就能理解，但對(duì)于他們來說可能需要多幾步操作，才能獲取具體的信息。
我國(guó) 60 歲及以上的人口已經(jīng)有 26402 萬，占全國(guó)人口的 18.7 %，同時(shí)殘障人士的數(shù)量也不容小覷，僅視障人士的數(shù)量已經(jīng)超過 1700 萬。但他們?cè)谑褂檬謾C(jī)軟件過程中遇到的困難，卻很難出現(xiàn)在常見的手機(jī)軟件意見反饋渠道，更別說引起產(chǎn)品團(tuán)隊(duì)的關(guān)注。
恰好今年國(guó)家發(fā)文要求微信、 QQ 等騰訊系 9 款產(chǎn)品，在 2021 年 9 月 30 日之前完成適老化和無障礙改造。兔小巢作為嵌入在這些產(chǎn)品的反饋社區(qū)，有責(zé)任全力配合，幫助老年人及殘障人士有效地發(fā)出他們的聲音。因此，兔小巢適老化與無障礙改造提上了日程。
2. 整體改造成果
圍繞適老化與無障礙，兔小巢進(jìn)行了一系列使用體驗(yàn)優(yōu)化工作，主要通過前端改造來實(shí)現(xiàn)：
1.適老化
1.1 字能看清楚了——文本展示效果自適應(yīng)
在微信、 App 等條件下打開兔小巢，頁面都可以配合應(yīng)用設(shè)置的字體大小，調(diào)整內(nèi)容展示的效果，包括文本字體大小、段落行距等，讓老年用戶無需尋找調(diào)整字體的設(shè)置，也能把字看清楚。
（相比普通版兔小巢首頁，適老版的字體、按鈕等元素整體放大，方便老年用戶閱讀。另外頁面底部的按鈕文案從 “說兩句” 改為 “我要發(fā)言”，更易于老年用戶理解按鈕的用途）
1.2 頁面更 “好看” 了 —— 頁面顏色對(duì)比度優(yōu)化
隨著年齡增長(zhǎng)，老年用戶視覺逐步衰退，具體表現(xiàn)包括視力下降、對(duì)藍(lán)/綠色不再敏感、視覺范圍變窄、較難適應(yīng)明暗變化等。
為了讓老年用戶在訪問兔小巢時(shí)，也能獲得舒服的閱讀體驗(yàn)，兔小巢整體調(diào)整了頁面顏色的對(duì)比度。
（相比舊版兔小巢首頁，新版的顏色對(duì)比度更高，方便老年用戶清晰辨認(rèn)，獲得更舒服的閱讀體驗(yàn)）
2.無障礙
讀屏重點(diǎn)更突出了 —— 讀屏適配改造
正常人使用手機(jī)靠 “視覺”，而視障人士則靠 “聽覺”。大多數(shù)視障人士都是通過讀屏功能來了解屏幕上的內(nèi)容，但兔小巢此前還未實(shí)現(xiàn)讀屏軟件的相關(guān)適配，導(dǎo)致讀屏表現(xiàn)欠佳，影響實(shí)際使用。
因此，為了讓視障人士也能順暢地進(jìn)行產(chǎn)品反饋，兔小巢對(duì)讀屏功能進(jìn)行了適配改造。如聚合相關(guān)性強(qiáng)的內(nèi)容，使讀屏軟件可連續(xù)讀出，方便用戶減少操作；屏蔽無意義圖標(biāo)，讓讀屏軟件減少讀出強(qiáng)干擾性的內(nèi)容等。
以上的改造成果已經(jīng)支持公司內(nèi)外超過 7500 款接入產(chǎn)品，并且有近 4700 位老年用戶體驗(yàn)，累計(jì)反饋了 1342 條信息。
3. 具體改造方案
1.文本展示效果自適應(yīng)
在適老化改造過程中，為了實(shí)現(xiàn)客戶端字體自適應(yīng)調(diào)整，我們?cè)O(shè)計(jì)了 “元素尺寸控制系統(tǒng)”。在這個(gè)系統(tǒng)下：
元素實(shí)際尺寸 = 元素的默認(rèn)尺寸 × 倍率 （倍率通過讀取客戶端的設(shè)置獲?。?/span>
在此基礎(chǔ)上，我們還提供白名單設(shè)置，白名單內(nèi)的元素在頁面字體調(diào)整時(shí)大小保持固定不變。例如在帖子回復(fù)列表頁上，用戶頭像并不是主要信息，通過將 “用戶頭像元素” 加入白名單，可以實(shí)現(xiàn)在頁面整體適配字體變化時(shí)，頭像區(qū)不會(huì)跟隨字體放大而放大，保證了右側(cè)帖子詳情的可讀性。
（兔小巢頁面的字體自適應(yīng)后，部分不影響理解的元素，如頭像區(qū)域，會(huì)保持大小不變，保障頁面整體的閱讀體驗(yàn)）
2.讀屏適配改造
在前期測(cè)試中，我們發(fā)現(xiàn)主流讀屏軟件在兔小巢的讀屏體驗(yàn)不太理想。因此，通過以下 4 個(gè)方面進(jìn)行整體的改造：
2.1 讀出圖標(biāo)的操作含義
【原有問題】
有一些圖標(biāo)，普通用戶能夠輕松地感知到這是可點(diǎn)擊的按鈕，比如下圖的 “點(diǎn)贊”。
但由于代碼未能規(guī)范地將圖標(biāo)聲明為 “按鈕”，讀屏軟件無法識(shí)別，會(huì)直接略過圖標(biāo)，只朗讀出數(shù)字 ，因此視障人士很難了解到這里可以進(jìn)行點(diǎn)擊來實(shí)現(xiàn)點(diǎn)贊效果。
（兔小巢反饋帖子中的 “點(diǎn)贊” 模塊）
【解決方案】
我們通過將 “點(diǎn)贊圖標(biāo)” 定義為按鈕，并添加替代描述 “已/未點(diǎn)贊，XX 個(gè)贊”，讓視障人士明白這是一個(gè)可點(diǎn)擊的交互，理解點(diǎn)贊的狀態(tài)、有幾個(gè)贊等信息。
2.2 控制焦點(diǎn)，感知交互
【原有問題】
常見的彈窗 （如下圖的提醒內(nèi)容），能夠快速引起普通用戶的注意，有著提醒、引導(dǎo)的作用。
但由于前期兔小巢不兼容讀屏軟件，提醒內(nèi)容無法讓讀屏軟件識(shí)別，視障人士無法及時(shí)感知。并且當(dāng)彈窗關(guān)閉時(shí)，讀屏焦點(diǎn)會(huì)停留在彈窗原有的位置，因此會(huì)影響讀屏軟件無法讀取應(yīng)讀的內(nèi)容。
（兔小巢反饋環(huán)節(jié)中，提醒輸入內(nèi)容 ”不能少于5個(gè)字“ 的彈窗）
【解決方案】
我們通過記錄觸發(fā)焦點(diǎn)、切換焦點(diǎn)的方式，讓讀屏軟件有效讀取彈窗內(nèi)容，幫助視障人士快速感知彈窗；并且在關(guān)閉彈窗后，讓讀屏焦點(diǎn)回到原來的觸發(fā)焦點(diǎn)，可以正常讀取內(nèi)容。
2.3 聚合內(nèi)容，減少操作
【原有問題】
普通用戶閱讀頁面的內(nèi)容，如昵稱、發(fā)帖時(shí)間、帖子內(nèi)容等，是自上而下連貫的。而讀屏軟件是按照實(shí)際 DOM 節(jié)點(diǎn)的順序依次朗讀的，導(dǎo)致讀屏用戶需要依次點(diǎn)擊昵稱、發(fā)帖時(shí)間、帖子內(nèi)容等區(qū)域，才能完整了解頁面上的信息。
【解決方案】
針對(duì)這部分相關(guān)性強(qiáng)的內(nèi)容，我們使用 WAI-ARIA 技術(shù)將多個(gè) DOM 節(jié)點(diǎn)聚合成一條信息，幫助視障人士點(diǎn)擊 1 次即可獲取全部信息，減少頻繁操作，提升效率。
（讀屏改造前，用戶需要依次點(diǎn)擊用戶名字、發(fā)表日期、帖子內(nèi)容，才能完整了解內(nèi)容；改造后，僅需點(diǎn)擊用戶名字、帖子內(nèi)容，操作步驟減少）
2.4 減少干擾
【原有問題】
對(duì)于普通用戶來說，“>”能夠幫助他們理解點(diǎn)擊相應(yīng)的位置會(huì)有下一步操作。但部分讀屏軟件會(huì)將 “>”朗讀出來，因?yàn)椤?gt;”在代碼中是通過一張圖片實(shí)現(xiàn)的，而讀屏軟件會(huì)將圖片名稱朗讀出來，所以這十分不利于視障人士理解。
（常見問題頁面中的點(diǎn)擊提示元素）
【解決方案】
我們梳理出頁面上所有純裝飾性元素，或?qū)τ脩衾斫鈨?nèi)容沒有幫助的非文本內(nèi)容，使用 aria-hidden=true 來屏蔽，避免讀屏軟件讀取這部分的信息。
最后的話
為了保證功能對(duì)于老年用戶、視障人士真正可用，我們還組織了 7 位老人、8 位視障人士對(duì)優(yōu)化后的兔小巢進(jìn)行可用性測(cè)試。
針對(duì)老年用戶與視障人士在體驗(yàn)過程中進(jìn)一步暴露出來的認(rèn)知障礙問題，我們?cè)俅蝺?yōu)化調(diào)整了 20 多處細(xì)微流程和文案表意，讓弱勢(shì)人群能夠把兔小巢輕松用起來。
（一位視障用戶在可用性測(cè)試現(xiàn)場(chǎng)使用手機(jī)）
以上的改造，只是我們的第一步。
隨著，我們對(duì)弱勢(shì)群體的了解更多一分，便意識(shí)到改造工作更任重道遠(yuǎn)、且無法一蹴而就。如何讓他們更容易理解每一步操作、讓他們更輕松地完成每一次點(diǎn)擊，甚至讓他們更多參與到交流互動(dòng)中來，都值得我們進(jìn)一步研究與優(yōu)化。
接下來，我們還會(huì)繼續(xù)進(jìn)行適老化與無障礙探索，希望在未來，弱勢(shì)群體不僅是發(fā)出他們的聲音，讓大家聽見，還能放大他們的聲音，讓他們也能在互聯(lián)網(wǎng)世界中找到自己的價(jià)值與共鳴。
?? 我們一起聊設(shè)計(jì) ???♂?
高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群
期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)
PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）