CASE STUDY

Bank App A11y Redesign

練習根據無障礙規定設計界面

Industry

無障礙/金融

Service

銀行轉帳 2C

Team Setup

3 設計師

Role

規則整理+設計

Year

2024

Overview

About

這是一個在公司中的小型練習專案，我們選擇了富邦銀行的首頁和轉帳流程來優化(因為大家都有用)，目的是透過實作了解A11Y的規範以及應用。

Goal

  • 盤點現有app轉帳流程中不友善的地方

  • 根據規範改善盤點的問題

  • 思考如何幫助設計師更容易符合規範


What I Built

  1. 無障礙友善的轉帳介面(包含可視畫面與Screen Reader順序)

  2. 精簡化A11Y規範，根據設計師使用情境製作檢核表


Progress

在有限的三天內，我們主要做了三件事:

  1. 實際使用手機上的Screen reader功能，閉著眼從頭到尾了走過了轉帳流程

  2. 比較其他家銀行App與Web的無障礙體驗

  3. 閱讀WCAG的規範，並尋找實例，整理設計過程需要注意的事項


經過簡單的研究後，我們整理出了流程中的幾個問題點:

主要是在於色彩對比度不足，以及聚焦的順序與語意情境讓人感覺混亂。

Result

以下是針對每個畫面的分析以及改善提案:

最後，這是我們根據自己在繪製介面過程中最常需要來回查找的規範，總結整理出的檢核表:
特別區分了與概念較相關的，以及較具體(如色彩\字體)的檢核項目

至此這個小小練習就告一段落了!(灑花)

不過我們後來也有討論，用來參考規範的網站WebAIM是否真的適合設計師使用。我們認為:

WebAIM Checklist 優點

  • 根據P.O.U.R精簡的列出具體檢查項目，適合作為概覽，可以在短時間內建立對規範範圍的認識；但是如果要做為檢測(看得比較細、需要考慮更多使用情況的時候)，就不太適合。

  • 可以篩選要AAA, AA, A 哪一層級的標準。

  • 內文都有提供相關說明文件連結，如果要再看得更詳細可以點進去。

  • 如果願意一層一層點進去的話，可以看到他的元件範例和這麼規定的原因，了解規範背後的思考感覺對判別各種情況下的應用會有幫助。

WebAIM Checklist 缺點

  • 網站結構不清晰且搜索功能不佳,如果對整體規範架構不熟悉會很難找到所需信息，比較適合當工具書?

  • WCAG 2 標準本身就很複雜,包含許多技術細節，想要了解術語或規範背後的原因，需要點擊到不同頁面一層一層進去找。而且進去後又會給予更多路線，很容易就會迷路。

  • 網站只提供英語版本, 而且很多的連結都是用很長的描述句，在一整頁都是文字排版而且很多類似連結的情況下要保持理智會很困難。

就是這樣了，非常感謝一組的夥伴，之後也會想持續探索比較實驗性的無障礙設計，有空再更新!

OTHER PROJECTS

Weverse

K-pop Fan Platform

Ecosia

Green Searching Engine

Taipei COOC

School Management System

More to come !

You can find me here

Logo
Logo