Systematize Design 包容性設(shè)計(jì)指南

0 評(píng)論 2753 瀏覽 0 收藏 15 分鐘

在龐大的互聯(lián)網(wǎng)世界里,有許多用戶的存在,其中有一小部分人,可能理解能力不強(qiáng),或者視聽(tīng)能力受限,我們?cè)谠O(shè)計(jì)產(chǎn)品時(shí)應(yīng)當(dāng)盡量去給他們提供更好的體驗(yàn)。本文作者融合行業(yè)經(jīng)驗(yàn)和實(shí)際反饋,完成了這份「Systematize Design 包容性設(shè)計(jì)指南」,一起來(lái)看一下吧。

在龐大的互聯(lián)網(wǎng)世界里,我們有許多用戶的存在,在這其中,有許多微小的團(tuán)體,他們或許理解能力不強(qiáng),視聽(tīng)能力受限。我們有理由,也有使命去給他們提供更好的體驗(yàn)。

我們正在逐步鉆研,融合各行各業(yè)提供的經(jīng)驗(yàn)和實(shí)際生活中行動(dòng)受限人士的反饋,完成一份「Systematize Design 包容性設(shè)計(jì)指南」,這份指南能讓你設(shè)計(jì)出可使更多人流暢使用的互聯(lián)網(wǎng)產(chǎn)品。

讓我們從現(xiàn)在開(kāi)始,凝聚力量和經(jīng)驗(yàn),構(gòu)建一個(gè)更美好的未來(lái)。

一、為何包容?

在這個(gè)多樣化的世界上,并不是所有人都能毫無(wú)障礙地使用各種產(chǎn)品。

優(yōu)秀的包容性設(shè)計(jì),不僅讓殘疾人用戶正常地與產(chǎn)品交互,還會(huì)為普通人提供更好的使用體驗(yàn)。

讓我們?cè)O(shè)想一個(gè)場(chǎng)景:假設(shè)有一天,你的雙眼暫時(shí)無(wú)法正常使用。這個(gè)時(shí)候,你如何保證和外界的交流?依靠手機(jī)?在你未學(xué)習(xí)如何使用無(wú)障礙功能前,你甚至不知道如何啟動(dòng)他們。就算你早有準(zhǔn)備,或者你的親友幫助你開(kāi)啟了這些功能,還是有許多應(yīng)用的無(wú)障礙功能完全不可用,這些應(yīng)用甚至可能是所謂的「國(guó)民級(jí)應(yīng)用」,他們讓你的互聯(lián)網(wǎng)生活極大的受阻。

的確,你有恢復(fù)的時(shí)間,但盲人沒(méi)有。

讓我們?cè)O(shè)想另一個(gè)場(chǎng)景:也許又有一天,你的雙耳突然失聰。看著視頻里張口閉口的人,看見(jiàn)現(xiàn)實(shí)里張口閉口的人,而你什么也聽(tīng)不見(jiàn)。你又如何去“聽(tīng)”他們?cè)谡f(shuō)什么呢?

聽(tīng)障人士的世界與普通人同樣是截然不同的。他們只能看,而不能聽(tīng)。當(dāng)有人隨音樂(lè)而舞蹈時(shí),他沒(méi)法理解他們?cè)诟墒裁?;?dāng)他在看視頻的時(shí)候,他也無(wú)法理解視頻里的人在說(shuō)什么。

在這種情況下,能夠讓盲人和聽(tīng)障人士甚至于部分感受器官無(wú)法使用的「正常人」與現(xiàn)代社會(huì)接軌的設(shè)計(jì),就是包容性設(shè)計(jì)。

二、怎樣包容?

讓我們先從視障人士的部分使用路徑開(kāi)始,了解他們是如何接觸互聯(lián)網(wǎng)的。

文本描述:

1)普通人是怎么完成操作的?

輸入信息:依靠視覺(jué)感知得來(lái)的信息做出操作。

可以直接輸入文本,觀察到文案,顏色等反饋信息的變化,依照視覺(jué)做出操作:

  1. 利用視覺(jué)查找到所要進(jìn)行的操作
  2. 直接根據(jù)視覺(jué)指示做出操作

做出操作:依靠視覺(jué)感知得來(lái)的信息做出操作。

可以直接輸入文本,觀察到文案,顏色等反饋信息的變化,依照視覺(jué)做出操作:

  1. 利用視覺(jué)查找到所要進(jìn)行的操作
  2. 直接根據(jù)視覺(jué)指示做出操作

2)視障人士是怎么完成操作的?

輸入信息:依靠聽(tīng)覺(jué)感知得來(lái)的信息做出操作。

需要使用屏幕閱讀器與語(yǔ)音輸入軟件(通常伴隨極大誤差),且無(wú)法感知能被朗讀出來(lái)的文本除讀音外的變化。

  1. 利用屏幕閱讀器查找到所要進(jìn)行的操作
  2. 根據(jù)屏幕閱讀器所提供的信息利用其它工具做出操作

做出操作:依照聽(tīng)覺(jué)感知得來(lái)的信息做出操作。

需要使用屏幕閱讀器與語(yǔ)音輸入軟件(通常伴隨極大誤差),且無(wú)法感知能被朗讀出來(lái)的文本除讀音外的變化。

  1. 利用屏幕閱讀器查找到所要進(jìn)行的操作
  2. 根據(jù)屏幕閱讀器所提供的信息做出操作

依此,我們可以得出一個(gè)結(jié)論: 在視障人士的操作過(guò)程中,可聽(tīng)的文本信息是十分重要的。向他們所提供的信息需要做到「簡(jiǎn)單」、「關(guān)鍵」、「清晰」。

現(xiàn)在,讓我們對(duì)比聽(tīng)障人士與普通人獲取信息的方法,了解他們是如何接觸互聯(lián)網(wǎng)的。

依此,我們可以得出一個(gè)結(jié)論: 在聽(tīng)障人士的操作過(guò)程中,可視的文本信息是十分重要的。向他們所提供的信息同樣需要做到「簡(jiǎn)單」、「關(guān)鍵」、「清晰」。

在逐步的總結(jié)中,我們可以得出下面的結(jié)論:

最好不要做:

  1. 將信息過(guò)度精煉,使其難以發(fā)現(xiàn)
  2. 癡迷于「懸浮」之類的交互方式
  3. 癡迷于用顏色和圖標(biāo)表達(dá)一切信息
  4. 讓過(guò)多無(wú)用文本充斥于頁(yè)面

你可以做到:

  1. 將圖標(biāo)中的信息提煉為文本
  2. 將信息不僅僅用顏色表達(dá)出來(lái)
  3. 提供將多媒體內(nèi)容轉(zhuǎn)換為文本的工具

這是最基礎(chǔ)的對(duì)于包容性設(shè)計(jì)的原則,接下來(lái),讓我們了解對(duì)于更多人也有效的包容性設(shè)計(jì)措施。

三、深入了解

1. 不僅僅是一部分

讓我們進(jìn)入一個(gè)場(chǎng)景:

如今許多深受視障者喜愛(ài)的應(yīng)用軟件,也曾制造過(guò)麻煩。鄭銳清楚地記得,“微信紅包”正式推出的那年春節(jié),引起了搶紅包的熱潮,他能聽(tīng)到紅包提示音此起彼伏地響起,但是打開(kāi)拆紅包的頁(yè)面后,按鈕沒(méi)有被讀出,紅包無(wú)法被點(diǎn)開(kāi),“每一次打開(kāi)紅包都有一種失落感,就覺(jué)得被微信拋棄了,只能看著紅包干著急?!彼杏X(jué)自己被關(guān)進(jìn)了小黑屋,屋子外面是別人的鞭炮聲。

——引用自 鋅財(cái)經(jīng)《科技平權(quán):殘障者在互聯(lián)網(wǎng)世界里,換了種活法》

以及另一個(gè)場(chǎng)景:

你面對(duì)著一個(gè)「極為精簡(jiǎn)」的界面,卻完全無(wú)法理解其中高度抽象的圖標(biāo)的含義,這使得你無(wú)法做出操作,更可怕的是,這些圖標(biāo)完全沒(méi)有任何提示,你試圖用做出各種操作:懸浮,滑動(dòng),尋找展開(kāi)描述的按鈕,然而都沒(méi)有效果,你依舊無(wú)法了解這些圖標(biāo)的含義?,F(xiàn)在,你就被困在一個(gè)頁(yè)面上了,迷茫無(wú)助。

當(dāng)然,你可能沒(méi)辦法體驗(yàn)這種感受,但我們仔細(xì)一想,這種情況同樣會(huì)影響到我們。

在第一個(gè)場(chǎng)景里,我們會(huì)發(fā)現(xiàn)自己有時(shí)會(huì)因?yàn)椴僮鞑槐悖ūе鴭雰夯蛘呤帜玫毒撸┒鵁o(wú)法打開(kāi)紅包,這同樣是一種障礙。

在第二個(gè)場(chǎng)景里,我們會(huì)發(fā)現(xiàn)即使自己「智力正?!?,也會(huì)遇上對(duì)圖標(biāo)等操作元素的理解不完全的情況,同樣會(huì)讓你陷入困難的境地。

從這,我們便可以發(fā)現(xiàn):所有人都在某些時(shí)候是殘疾人,無(wú)障礙的產(chǎn)品對(duì)所有用戶都是更好用的產(chǎn)品。

讓我們看看谷歌安卓無(wú)障礙團(tuán)隊(duì)與他們的 Design Lead 做出了什么優(yōu)秀的包容性設(shè)計(jì):

之前也提到了,每個(gè)人在某些時(shí)候都有殘疾。在做無(wú)障礙工作的同時(shí),我了解到了很多能夠幫助到所有人的無(wú)障礙工具。

  • Live Transcribe (我負(fù)責(zé)的產(chǎn)品,用語(yǔ)音識(shí)別幫助聾人聽(tīng)寫對(duì)話):我在開(kāi)會(huì)時(shí)會(huì)用它來(lái)記筆記,也會(huì)用來(lái)和英語(yǔ)不是那么流利的同事交流。
  • Sound Amplifier(另一個(gè)我負(fù)責(zé)的產(chǎn)品,幫助聽(tīng)障人士的語(yǔ)音擴(kuò)大器):我會(huì)配合藍(lán)牙耳機(jī)使用,這樣在另一個(gè)房間里也能聽(tīng)清電視的聲音。
  • 我?guī)椭^(guò)視力下降的人(比如同事的老年家屬)找到相關(guān)的視力設(shè)定,像是大號(hào)字體、大號(hào)圖標(biāo),還有放大鏡功能。
  • 很多人喜歡黑暗模式,但是很多app還沒(méi)有支持黑暗模式。其實(shí)在安卓的進(jìn)階無(wú)障礙設(shè)定里,可以強(qiáng)制所有app使用自動(dòng)黑暗模式(這是幫助畏光癥的功能),我?guī)椭^(guò)很多人找到它。

沒(méi)錯(cuò),這些都算是包含性設(shè)計(jì),或者說(shuō)無(wú)障礙設(shè)計(jì)。它不僅對(duì)部分人群有幫助,對(duì)我們大多人也有幫助。

四、做出改變

首先,讓我們通過(guò)幾個(gè)簡(jiǎn)單的要求讓你的產(chǎn)品擁有更多的包容性:

1)保證對(duì)比度

這里的對(duì)比度不僅指的是「顏色對(duì)比度」,也指的是擁有不同含義的組件間的「對(duì)比度」,例如:代表含義一致的圖標(biāo)采用的設(shè)計(jì)方案不同,會(huì)讓用戶感到迷茫;又比如:表達(dá)不同含義的圖標(biāo)設(shè)計(jì)方案趨同,也會(huì)讓用戶感到迷茫。

2)順序即秩序

文字和段落以不改變內(nèi)容含義的次序呈現(xiàn)?!Z(yǔ)出 WC3 WCAG(Web 內(nèi)容無(wú)障礙指南)2.1

在完成設(shè)計(jì)時(shí),一般會(huì)按照自上到下的順序排列操作順序,在需要時(shí),可以按照內(nèi)容重要性排列操作順序,不過(guò)請(qǐng)務(wù)必記住:這是建立在人們能理解的順序之上的。

讓我們尋找一些能幫助人們運(yùn)用順序的方法:

讓用戶有能力跳過(guò)沒(méi)有必要的內(nèi)容。

如果你希望利用鍵盤和屏幕閱讀器來(lái)瀏覽網(wǎng)頁(yè),卻發(fā)現(xiàn)你需要一個(gè)個(gè)手動(dòng)跳過(guò)網(wǎng)頁(yè)頂欄的按鈕才能查看內(nèi)容,這絕對(duì)不是一個(gè)好體驗(yàn),試著為用戶使用 Tab 導(dǎo)航時(shí)提供一個(gè)「跳轉(zhuǎn)到主內(nèi)容」的按鈕。

五、文字是表述的最佳方案

圖片,圖標(biāo),視頻內(nèi)容都是視障人士無(wú)法觸及的內(nèi)容,抽象且需要一定時(shí)間了解。如果有能力的話,做到以下幾點(diǎn)不僅可以幫助到視障人士,還可以讓更多人輕松的使用你的產(chǎn)品:

①狀態(tài)與許多其他的反饋不應(yīng)止步于顏色和圖標(biāo)。

顏色并不是作為傳達(dá)信息、表明動(dòng)作、提示響應(yīng)或區(qū)分視覺(jué)元素的唯一視覺(jué)手段?!Z(yǔ)出 WC3 WCAG(Web 內(nèi)容無(wú)障礙指南)2.1

②為圖標(biāo),圖片,視頻等內(nèi)容提供文字描述,清晰易懂還包含重要信息是重要的關(guān)注點(diǎn)。

千萬(wàn)注意!可不要癡迷于提供過(guò)多的信息,你肯定不希望讓屏幕閱讀器播報(bào)一個(gè)圖標(biāo)的含義后,再閱讀一遍這個(gè)圖標(biāo)旁邊的描述文字吧?

六、即時(shí)反饋

反饋用戶的操作是十分重要的,現(xiàn)在試試看使用Tab鍵來(lái)選擇組件,這些組件大多會(huì)有相應(yīng)的反饋,無(wú)論是顏色變化還是邊框加粗,都有助于你注意重點(diǎn),你可以試試看注意以下幾點(diǎn):

  1. 提供一些細(xì)微的反饋,聲音,震動(dòng)都是好辦法,但不要把他們當(dāng)作主要反饋方法。
  2. 不要讓顏色成為唯一的提示。的確,顏色是一種很好的提示方式,但如果只有顏色能提供反饋提示就太單一了。這對(duì)某些注意力渙散的人群和色盲人群并不友好,可以適當(dāng)輔以其他的手段來(lái)做出反饋

七、易于接觸與理解

  1. 避免過(guò)小的字體,圖標(biāo),組件,與沒(méi)必要的裝飾,他們會(huì)讓理解和接觸內(nèi)容變得困難;
  2. 如果有需要特定手勢(shì)才能觸發(fā)的操作,請(qǐng)確保有其他常見(jiàn)的交互方式來(lái)觸發(fā)它;
  3. 組件的可點(diǎn)擊區(qū)域足夠大、間距足夠遠(yuǎn),不要讓它們變成「小巧玲瓏」而無(wú)用的東西。

更多

本文來(lái)自 Cladonia Design Studios 和 Systematize Design 社區(qū)成員的貢獻(xiàn),遵循 CC0 協(xié)議,這代表您可以復(fù)制、修改、發(fā)行和表演本作品,甚至可用于商業(yè)性目的,都無(wú)需要求同意。

本文由@Systematize Design 社區(qū) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!