A11y新手村村民與旅人:對話Accessibility實踐夥伴系列🕵️‍♀️

無障礙設計讓產品思維更全面:金融產品設計師的實戰心得和學習

金融產品設計師 Oly 如何在產品開發過程中實踐無障礙設計

A11y新手村🏕
a11yvillage

--

文字為文章標題和副標題,背景圖片為一群工作者正在討論草稿設計的情景。
背景圖片來源: UX Indonesia on Unsplash

想像一下,如果每天你使用的手機 app 上面都模糊不清,按鈕位置不明確,你該怎麼操作,才能完成你想做的事情?

對於障礙者來說,這可能就是他們每天面對到的日常。雖然身心障礙者權益保障法在2012年就已經修法規定政府和學校所建置的網站都必須符合無障礙A等級的標準,但民間企業數位產品,並沒有強制要求,而且許多研發團隊因為受限有限的資源和投資效益,通常將無障礙設計排在較低的優先級。

但隨著數位環境的不斷進步,身心障礙民眾對於上網和數位工具的需求不斷增加,根據資料,約有11.5%的障礙者有使用無障礙網頁或 app 的需求,尤其在線上購物和線上掛號比例最高。同時,線上金融也相當盛行,這促使近年來政府積極提倡金融數位平權,致力實現普惠金融,由於民間銀行在數位金融中扮演關鍵角色,自然成為首先需要落實無障礙設計的對象。

這次我們邀請到 Oly,她目前是國泰世華銀行 CUBE App 的產品設計師,這篇訪談中,她分享了她的團隊整合無障礙設計到 CUBE App 的過程,如何從建構同理心,深入理解無障礙設計,以及實務操作應用的經歷和心得。

引用 Oly 在訪談中提到從這次無障礙專案中,讓在設計時會想的更深入,顧及和考量的事情也更多了,並附上 Oly 本人提供的照片,和簡短介紹她在國泰世華 CUBE App擔任產品設計師的經歷。
Oly 在訪談中聊到在這個無障礙專案中的學習和體會。(照片由 Oly 本人提供)

「公平待客」促成團隊在無障礙設計上的重視

CUBE App 為國泰世華銀行所打造的一站式數位金融服務平台,讓使用者可以在手機內操作各式金融服務,像是日常轉帳繳費、換匯、投資理財等。

她提到今年,團隊除了開發新功能,更將重心放在支援無障礙設計上,目標將 app 內的五大基礎功能(登入 / 登入後的首頁 / 台幣/外幣帳戶頁面 / 轉帳交易功能),通過無障礙檢測,確保提供的金融服務體驗,是讓所有使用者都能夠輕易、無障礙地使用。

聊到為何有這個契機,Oly 提到金管會(金融監督管理委員會)推出的「公平待客」原則是主要的推進力(附註)。公平待客原則主要是指金融機構在提供金融商品服務的時候,需要確保使用者在過程中是獲得公平對待,而無障礙在這之中扮演很重要的角色,像是金融服務需要確保有「資訊的透明度」,提供的資訊對所有人都要清晰易懂,包括視障或是聽障等特殊需求的使用者。

附註:台灣的民間銀行受到金管會的監督和管理,所以得配合遵守頒布的相關規範。

國泰世華CUBE App 官網首頁截圖,左側有下載app的連結和QR碼,右側為App內的介面和配圖
CUBE App 為國泰世華銀行所打造的一站式數位金融服務平台,讓使用者可以在手機內操作各式金融服務,像是日常轉帳繳費、換匯、投資理財等。(圖片來源:CUBE App官網)

運用外部資源,強化團隊成員在無障礙的知識、同理心的建立和實務技能

Oly 說到在專案實作開始之前,公司特地找尋外部的諮詢公司,來幫團隊進行教育訓練以及實務過程的協助。

由於西方國家在無障礙的領域相對比較豐富,他們先是與位在加拿大一間專門在做無障礙設計支援服務的公司合作,將無障礙的趨勢和概念傳授給團隊成員,有這些基礎知識後,也才能更了解 W3C 組織推出的WCAG (Web Content Accessibility Guidelines) 和數位發展部的無障礙規範 (附註)。

附註:

  • W3C是一個致力於制定和推動網頁標準的組織。WCAG 是由 W3C 發佈的指南,確保網頁內容對於所有人,包括身障人士都是可以閱讀和訪問的。
  • 數位發展部為政府中負責制定數位政策、推動數位轉型的單位,確保數位服務對所有公民都是可訪問的,其中包含制定無障礙的規範,讓相關機構可以參照。
左圖:外部專家在台上授課,手持手機,同時投屏在背後螢幕上。右圖:團隊成員在上課時的情況,一位同事站著,指著兩位坐立的同事注視的螢幕,正在討論的場景。
左圖:外部專家到團隊內分享無障礙趨勢和概念,右圖:團隊在上課討論的情況。(圖片來源: Oly 提供)

有了前期的知識奠基,在實務階段,國泰則請了一間外部設計諮詢公司擔任顧問,透過內部訪談,了解不同角色對專案的期待,並因應團隊既有產品開發流程,提出無障礙在未來,哪些環節可以整合,像是以下:

  • 前期規劃研究階段:調研團隊可以制定出「無障礙旅程地圖」,針對不同障礙類型,制定旅程地圖和人物誌。
  • 中期產品設計階段:設計團隊可以盤點現有元件,調整不符合無障礙規範的部分,並且選擇符合品牌調性但同時可以貼近無障礙的產品風格,像是盡量使用扁平風格,少用陰影與漸層,將複雜事物簡化
  • 後期測試 + 上線階段:設計師可以使用 Figma 插件測試介面無障礙程度,前端工程師運用 iOS 的旁白、 Android 的 TalkBack 測試螢幕閱讀器的朗讀,QA回報問題時依據標籤分類,像是WCAG 2.1、數位發展部無障礙規範的成功準則或是A, AA, AAA評測等級;在產品上線後,繼續追蹤無障礙功能的淨推薦值(NPS)。

除了給予建議外,設計諮詢公司也負責障礙使用者的實測和幫忙梳理數位發展部的無障礙規範,並且依據CUBE App 現有的設計規範,提出因應無障礙規範的改版建議。

設計諮詢公司提供給團隊的不同部門和角色的流程圖和負責事項。
設計諮詢公司針對CUBE App 團隊流程提出的建議規劃示意圖 (圖片來源:Oly 提供,內容部分去敏處理)

盤點產品,規劃應用的首要功能,將無障礙納入到產品中,而不是獨立的“友善版本”

針對這次的無障礙專案,Oly 提到團隊今年的目標,是將app內的五大基礎功能,通過無障礙檢測,包含登入、登入後的首頁、台幣和外幣帳戶頁面以及轉帳交易功能,確保障礙使用者可以順暢使用基本的金融服務。CUBE App 團隊編制目前是有四個依據功能劃分的 scrum 小組,而這次無障礙的功能,主要由其中兩個小組負責。

此外,針對無障礙功能,團隊決定不採用單獨「友善版本」,而是將無障礙整合到現有產品中,主要原因是他們認為單獨做一個友善版本,其實也是另一種歧視。雖然業界中有些組織會獨立做一個友善版本,這樣做的好處是對現有產品的影響小,相較比較容易得到無障礙標章,但弊端是由於使用的人少,團隊在取得無障礙標章之後,可能就不再繼續維護,導致友善版本的功能不完整、出現問題,變成僅僅是表面上的“友善”,而事實上剝奪了障礙使用者的使用權利。

所以 Oly 說道,雖然整合的方式會帶來複雜的開發改動和較高的維護成本,但為了真正實現數位平權,團隊決定以整合無障礙設計到現有產品中的方式來進行。

國泰CUBE App內三個介面,第一張為首次登入,第二張為設定快速登入生物辨識/手勢),第三張為首頁顯示使用者個人帳戶資訊和其他相關訊息。
Oly 提到團隊今年的目標,是將app內的五大基礎功能,通過無障礙檢測,包含登入、登入後的首頁、台幣和外幣帳戶頁面以及轉帳交易功能,確保障礙使用者可以順暢使用基本的金融服務。(圖片來源:Oly 提供)

開始實作,探索規範之外的灰色空間,了解即便是小細節,也不可忽視

Oly 提到 CUBE App 是手機 app 產品,但 app 的無障礙規範,起步相對網頁晚,也沒有那麼完善,而且手機作業系統 Android 和 iOS 也都有各自的規範需要遵守,所以研發設計過程中,除了需要詳知各個作業系統的限制,也要仔細察覺兩邊抵觸的地方,設法解決。

像是她就舉了個實際案例,iOS 的導航欄上的原生按鈕觸控範圍尺寸是44pt,但無障礙規範中對於觸控目標尺寸規則說明卻寫48dp,讓團隊有些困惑。這時候就會需要透過團隊聯絡窗口人員與政府執行單位溝通釐清這部分的細節該如何處理,雖然是額外溝通成本,但趁早發現,能夠確保後面開發的流程順暢許多。

另外團隊有時可能認為不必完全遵守每一項規範,認為這樣也能通過無障礙檢測。但實際上,當將成品送到執行單位進行測試時,才發現那些細微的疏漏也會被專業的檢測人員注意到,這讓 Oly 的團隊成員明白,必須要“做好做滿”,按照規範去設計每一項細節。因此,在製作過程中,團隊成員間對於細節的溝通變得格外重要,所以團隊使用了 Figma 的插件A11y Focus Order來標註報讀的順序和範圍,至於螢幕閱讀器的報讀文字則由產品經理在文件中定義,讓工程師在製作過程中有明確的參照。

在製作過程中,團隊成員間對於細節的溝通格外重要,所以團隊使用了 Figma的插件A11y Focus Order來標註報讀的順序和範圍。(圖片來源:Figma A11y Focus Order Plugin 頁面)

一舉兩得,不僅支援無障礙,還能趁此整合產品不一致的設計風格

「趁這次機會,把一直以來的不一致的問題拉齊。」

Oly 說到這次的無障礙專案推動,也讓產品設計團隊有機會可以盤點目前產品中同時並存的不同風格,包含在CUBE App 之前的舊版,現在的 CUBE App 和未來無障礙整合的三種風格。團隊在初期並未充分將無障礙納入既有的設計系統中,然而,由於今年要達到無障礙合規的目標,才開始加重資源,與視覺設計師合作,像是調整顏色對比,將同一色階的顏色與白色的對比度都調整到3:1,加強閱讀性,和跨平台組件運用的一致性。

CUBE App 的設計系統文檔,其中包含顏色定義、組件交互等細節。
Oly 說到這次的無障礙專案推動,也讓產品設計團隊有機會可以盤點目前產品中同時並存的不同風格。 (圖片來源:Oly 提供)

當親眼看到身心障礙使用者真正在使用產品功能,深刻了解無障礙設計的重要性

「不管是對團隊內什麼角色來說,看到自己花時間做出來的東西,原來障礙使用者是這樣操作,那個感受其實蠻不同的。」

Oly 說到她們研發過程中,使用者測試佔了很重要的一環,這部分是透過設計諮詢顧問公司協助安排身心障礙使用者測試,通常他們會以居家訪談,在受測者熟悉有安全感的環境中進行產品測試,CUBE 團隊中的研究員也會隨行跟著,並且讓團隊的其他成員在線上旁聽過程。

她也說道,這個讓團隊參與使用者實測的過程蠻關鍵的,可以建立同理心之外,也可以觀察到原本在明眼人使用者上,看不到的盲點,並且了解自己研發的產品在真實情況下是如何被使用,非常有渲染力。

三位團隊成員正在電腦前工作,畫面中的第一位同事帶著特殊眼鏡,模擬視障者所看到的畫面。
除了參與使用者實測過程,團隊成員也會運用模擬工具,像是照片中戴的特殊眼鏡,模擬視障者看到的畫面,切身了解他們在使用產品上可能遇到的問題。(圖片來源:Oly 提供)

無障礙設計,可以讓產品思維更加全面,因為你不再只是考慮 “看得到”的東西

目前,團隊正在如火如荼,全心投入這個專案,雖然辛苦,挑戰不少,需要兼顧新功能的開發,但大家對這個專案的評價都非常正面,她分享道:「在國泰五年了,覺得這一年的收穫真的很多。」

儘管這次的無障礙專案是在金管會的“推坡助瀾”下啟動的,但在這過程中,她體會到在產品設計上,考慮的不僅僅是視覺層面,還需要顧及其他平台的一致性,以及縮放、螢幕閱讀器的朗讀等與無障礙相關的互動體驗,這些都讓她在產品設計的思維更加全面,「因為這個無障礙專案,設計時會想的更深入,顧及和考量的事情也更多了。」她說道。

「因為這個無障礙專案,設計時會想的更深入,顧及和考量的事情也更多了。」

她也提到,這個無障礙專案的經歷是在其他地方很難得到的,特別是在業界對無障礙設計的關注仍待加強的情況下。她非常開心有這個機會,可以深入了解無障礙領域,對她的專業成長有很大的價值。

上層的全力支持、同儕的積極合作 — 未來團隊研發方向都希望能夠朝著無障礙邁進,為 “所有人” 設計

Oly 講到這次的無障礙專案,雖然只有部分團隊參與,但從這之中的過程,讓整個組織開始了解無障礙的價值,也有共識希望在五年內的產品方向,都可以跟無障礙設計靠齊,例如:在功能開發初期,及早將無障礙考量進去,上層也希望能夠將無障礙列為跨部門的目標和關鍵成果(Objective and Key Results, OKR)。

在同儕之間,儘管有些人對無障礙的理解存在差異,無法感同身受到它的重要性,有種「為什麼要做這個?」的心態,但在透過教育訓練、實際開發過程和親眼見到障礙使用者操作產品後,大家逐漸意識到自己參與的這項工作所具有的重要價值。這次的專案,不僅是技術的挑戰,更是整個組織文化的轉變,讓無障礙設計漸漸成為組織共同追求的目標之一

最後,當談到身為產品設計師如何在組織內倡導無障礙設計的重要性時,Oly 提供了一個簡單實用的建議:「找隊友!」無論是產品經理還是研發工程師,讓他們了解無障礙的重要性,接著從小地方開始著手,像是視覺層面的建議,譬如拉高顏色對比度,再逐步到進階的文字縮放或是螢幕閱讀器的朗讀與互動體驗。

當談到身為產品設計師如何在組織內倡導無障礙設計的重要性時,Oly 提供了一個簡單實用的建議:「找隊友!」(圖片來源:Hannah Busing on Unsplash)

這次透過 Oly 的分享,讓我們了解在現有產品中支援無障礙設計所面臨的辛苦和挑戰。

期待 CUBE App 在無障礙方面的研發成果的同時,也讓我們意識到 — 無障礙設計不僅能照顧到特定需求的使用者,更能為所有人帶來更為順暢的體驗,就如同人行道斜坡 (Curb Cut Effect) 不僅能讓輪椅族受惠,其他人也可以透過它省力步行,讓每一位使用者都能夠無障礙地參與,共同享受包容平等的使用體驗。

街景道路中的人行道斜坡。
無障礙設計不僅能照顧到特定需求的使用者,更能為所有人帶來更為順暢的體驗,就如同人行道斜坡 (Curb Cut Effect) 不僅能讓輪椅族受惠,其他人也可以透過它省力步行,讓每一位使用者都能夠無障礙地參與,共同享受包容平等的使用體驗。(圖片來源:Nick-philly )

更進一步瞭解專案內容和國泰世華CUBE App,請到官方網站,或連結 Oly LinkedIn。

Oly LinkedIn https://www.linkedin.com/in/tzulin-huang/

國泰世華 CUBE App官網
https://www.cathaybk.com.tw/cathaybk/promo/event/ebanking/product/appdownload/index.html

你的支持是我們的最大動力 💪

如果喜歡我們的文章,可以按下拍手👏來支持我們
也歡迎追蹤我們的medium跟Facebook粉絲專頁,讓我們提供你更多優質的無障礙知識跟新知!

為A11y新手村拍手50下的示意圖

本文作者:Jo

目前座標英國,從事數位產品設計,工作日常是與產品經理和工程師辯論、設計和研究。喜歡健行,塗鴉和安靜發呆。

--

--

A11y新手村🏕
a11yvillage

每週分享Accessibility相關原創文章,實用性內容包含原理,UX/UI設計到開發實作等,也會訪問障礙者與正在Accessibility實踐路上耕耘的人,邀請你入村跟我們一起創造包容友善的世界🏕