可達性設計(Design for Accessibility) — 基於介面之上

Wei-Hsun Chen
UXeastmeetswest
Published in
12 min readFeb 21, 2019

【此篇為小編在可達性設計的工作心得】

近年來,使用者體驗設計師愈來愈注重於Accessible Design,小編在想精準的翻譯想了很久,因為翻「無障礙性」基本上Accesiblity的定義是讓體驗開放給所有人,也可以翻為可接近性、可訪問性,抱歉小編找不到更精準的字眼😅

寫這篇的來源為小編工作這幾年來有感健康大不如前,看了太久的螢幕開始有些許的炫光症,對於對比度太高,或是太白亮的螢幕會看得不太清楚,對於各種高彩白色對比、文字甚小的各種app真的看得很累,所以這篇一半也是寫來希望自己年紀大的時候可以繼續使用科技產品,成為傳Line給大家說早安您好的科技人士。

根據定義,可達性設計為將失能者(Disability)納入設計考量的設計流程

Design process in which the needs of people with disabilities are specifically considered

幫助大家釐清一些類似名詞差異:

Universal Design (通用設計):為North Carolina State University 的The Center of Universal Design 所定義: 產品的設計以及環境以最大使用者的面相,無須改良或特別設計就能為所有人使用的產品。

The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design

Inclusive Design(包含性設計): 為一種設計方法論去了解、包含各種不同人的多樣性

A design methodology that enables and draws on the full range of human diversity.

Microsoft也有自己的Inclusive Design Toolkit,為一個很適合為無障礙性出發設計的工具書,非常推薦大家看:

Microsoft在此定義:失能(Disability)不僅止於個人健康問題(Personal Helth Issues)而更指的是不相稱的人因交互(Mismatched Human Interaction)。意即為,在不同的情境下(Context)使用者也會有暫時性,或者是環境下的失能性問題。舉例來說,在做設計時從為永久性失能(Permanent)像是有聽覺障礙問題的人為出發點做設計,而設計可以在不同情境下讓更多使用者受益,像是暫時性失能(Temporary)耳膜受傷的使用者,或是環境下失能(Situational)像是在演唱會的使用者。

而這個範圍區間可以稱為人物誌光譜(Persona Spectrum)

University of Cambridge 也有自己的工具書

可以說根據下表,上端是最極端的失能問題的族群,Inclusive Design(包含性設計)為上到下的流程,從最極端出發,而讓設計向下擴展至更多群體,而Universal Design (通用設計)為從下到上的設計過程,以關注主流用戶為原則。

http://www.inclusivedesigntoolkit.com/whatis/whatis.html#nogo

案例

最近比較有趣的例子包括Microsoft發表為失能者所設計的遊戲手把

最酷的是它的包裝,完全不用費任何力拆開

或是Lyft(Uber最大的競爭對手)為失聰者所設計的功能,讓使用者可以學習基本的手語去跟司機做溝通:

https://www.engadget.com/2017/09/29/uber-basic-sign-language-deaf-drivers/

今天小編想要分享,使用者經驗設計師在做設計時,不只是介面本身,而更要注重產品整體體驗的可達性。

在工作時,最常遇到情況不是不想要考慮可達性設計,而是在做設計時常常會因為太專注目標的功能,而忽略這些因素。記住,從自己的角度出發做設計往往會帶有許多的偏見,而產品最終會設計成只限於特定性別、年齡或社交圈的使用者。

而如何讓無障礙性被考慮進去?小編整理了自己在工作時基本考慮的可達性因素:

單手使用

根據統計,49%的人用單手使用手機,36%的人用另一手當輔助,而15%的人用雙手使用手機。而在一隻手使用當中,有67%的人使用右手,33的人使用左手。

https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

小編認為很好的設計出發方式為 — 讓你的主要產品體驗都可以單手達成。

小編認為這是個很好的原則以及限制來當作出發點,讓使用者可以單手輕易使用產品,在長期下可以加速他們完成主要任務的速率,以此會讓在其他使用情況下的人都可以享受到設計的利益,像是一手拿其他東西的使用者,或是在公車上拉手環的使用者等等。

然而在現今手機尺寸愈做愈大的情況下,以往的menu header的設計可能在新的尺寸下會更加難以單手使用,這時候使用更多的手勢,像是iOS支援的滑邊緣回上一頁(Edge Swipe),是可以讓使用者在單手達成的。

顏色對比

內容與背景的顏色對比在對使用者的內容認知上有非常大的影響,當顏色愈接近時,內容會愈來愈難讓使用者區分,另外,在某個尺寸顏色對比在另一種尺寸可能無法適用。

現在比較推薦的是遵循Web Content Accessibility Guideline(WCAG 2.0)的原則:顏色對比至少在4.5:1以上

小編推薦使用Sketch的大家非常實用的插件Color Contrast Analyser:

插件遵循WCAG,只要選擇物件和對比物跑插件就可以得知是不是通過WCAG的原則。

另外一點為對於色盲的考量,千萬不要只使用不同顏色來區分系統不同的狀態,例如只使用紅色和綠色來區分產品狀態,考量到色盲可能無法區分顏色的差異,或是需要許多時間、以及認知處理了解顏色的區別,在大部分的情況下小編還是認為最好的方式就是永遠要有清楚的文字敘述來表示產品狀態。

以下的工具也很推薦大家來使用,此軟體可以模擬不同色盲所看到的顏色差異,是個非常好去確認自己的設計是不是可以符合色盲無障礙性的需求。

這主題不僅止於介面,像是硬體產品的LED等等也都適用。

文字大小

文字加大對於年紀較大、或是視力較差的使用者是非常重要的功能。小編同意在做設計時許多人會考慮愈多留白、或是文字小對於整體美感的影響,但是在使用上許多使用者其實並不會依照設計師預想最完美的比例去使用產品。

iOS 11推出了動態文字(Dynamic Text),讓使用者可以根據需求去更改文字的大小是設計師可以利用的功能

或是Android的Display Size & Font Size

在做設計時更要考量設計如何在不同文字大小下去延伸,如何去設計可擴展性的設計。另外,在選擇非系統字體時也需要考慮如何去讓這些無障礙功能可以發揮使用,像是許多字體並不支援Dynamic Text,或是在不同大小下變的難以判讀。

旁白Voice Over

Voice Over是iOS推出的功能,讓視力有障礙的人可以去聽每個頁面、功能是什麼,而進而去使用產品。

Android也有相似的Talk Back

比較重要的是:確認每個物件都有正確的Voice Over. 確認產品在使用Voice Over的順序是遵循設計的。

複雜性

WWDC的Accessibility Talk曾提及:在美國每六位小孩當中就有一位有成長上的失能障礙,包括自閉症亦或是認知功能障礙,而對於這些使用者在使用產品時所需要花的精力以及時間都比一般人要多上許多。

而要如何去確保產品容易符合他們使用?清楚的資訊架構,合理的Navigation和明確的因果關係,簡單的開始使用體驗以及一致性都是會影響到這些複雜性的使用體驗。

這不僅適用於軟體產品,硬體產品,或是硬體嵌入式介面都是一樣的道理。

最後,小編想要分享在實際工作時,上述可達性常常不一定是團隊注重的方向,而這些因素累積起來卻是更廣泛的影響到產品使用性,使用者體驗設計師必須負責擔起這方面的責任,不只是去推廣這些可達設計的重要性,也要在一開始做設計時就確保這些都是納入考慮之中。

目前小編可以分享幾個小心得:

建立可達性設計委員會

身為使用者體驗設計師,有時候可能會過於專注於設計產品的功能,而未能確保或者是忽略整體產品的可達性。可以在設計團隊內建立一個“可達性委員會”,推派幾位負責確保每個產品設計是否符合規範,或者是否考量到失能者的使用,或是在建立設計系統時將這些可達性因素納入考量之中。

利用作業系統的可達性功能

在當團隊資源不足時,許多客製化的字體會造成Dynamic Text無法使用,或是客製化的UI也會讓Voice Over並不如預期使用,小編認為可以遵循作業系統的設計準則為出發點,利用作業系統本來就有的可達性支援(Voice Over, Dyanmic Text …etc),而再去迭代的更新產品設計。

隨時跟開發者溝通

像Voice Over、Talk back這些東西在做設計時不太能夠去預想如何使用,而這時候開發者就是您最好的朋友,因為他們是最了解這些功能是如何運行的,在早期階段就開啟這方面的話題,對於開發者也可以在早期將可達性支援納入開發考量之中。

做無障礙性調研

在做使用者調研、可行性調研、或是訪談時不妨納入不同層面失能的受訪者,在做值化調研時可以更加了解如何讓產品的體驗更開放給所有人。

最後,小編認為可達性設計是個非常好的設計趨勢,當現今科技不斷有形無形的在我們生活周遭出現,科技不再是特定族群的人去學習使用,如何讓產品設計造福更多不同的人,都是我們必須注重的課題。

謝謝大家的收看!

也請喜歡的朋友麻煩不吝嗇給我們拍手👏👏🏻👏🏽和幫忙分享呦😁

-Wei

--

--

Wei-Hsun Chen
UXeastmeetswest

Product Designer @DocuSign. ex-Meta/Shure. Taiwan originate. Passionate about music, innovation and social issues.