UX 三刀流 2024 春季班期中作業

更新於 發佈於 閱讀時間約 4 分鐘


作業內容

挑選一篇 UX 案例,進行介紹與評論

挑選主題

無障礙

挑選文章

UX Case Study: Slack accessibility redesign
https://medium.com/@izzy-shehan/19aa6eb6bfae

文章介紹

此為 2019 的文章,作者設定了一個擁有閱讀障礙的新進人員情境,並指出 15–20% 的人擁有閱讀障礙為數不少,Redesign 的目標是幫助有同樣情況的人在即時通訊軟體上溝通順利而不會遭受批判。
此篇文章以 Slack 為範例進行重新設計,並且聚焦在 Slack 的可讀性方面有些問題,例如顏色對比、資訊結構權重雜亂、沒有輔助使用功能等。並且根據這些缺點提出改善計畫,大致如下:

  1. 調整顏色
  2. 行距、間距調整,縮短
  3. 收合側邊頻道選單
  4. 時間提示的改善
  5. 提供文字轉語音服務
  6. 文章有鎖定位置功能,以便觀看與回應

文章評論

在僅有閱讀障礙這個條件下,作者提出的改善的確是能大幅增加閱讀的舒適程度、撐出畫面的呼吸空間以及在畫面上固定會呈現在畫面上的物件讓人感覺到放心,最後文章的結論使用動畫模擬操作過程令人一目瞭然,雖然這篇文章很短沒有細部闡述,但其實內含觀察、思考、實驗、解法與結論的完整文章。

不禁在想,如果更深入一點點探討,能做到什麼程度?所以從 2018 年之後再也沒碰過 Slack 的我,又再次打開它。

Slack 現況觀察

關於 Slack 的無障礙,在協助工具頁面上有提到一些,還有一些關於包容性議題的文章。另外在系統的設定裡,有顏色工具、輔助工具、還有使用鍵盤時會跳出快捷鍵提示。

raw-image

raw-image

raw-image

從上至下為: Slack的無障礙設定、 主題色選擇、鍵盤操作規定

「第一次進 Slack 系統」的情境

在不更動任何設定的情況下,很明顯,在顏色方面選單的問題很大:

在預設的主題色之下,選單大部分顏色都過不了現有的無障礙規範

在預設的主題色之下,選單大部分顏色都過不了現有的無障礙規範


再過了六年之後,仍舊是沒辦法符合現在無障礙的規範,不免跟 slack 的協助工具提到的有衝突,是蠻諷刺的。

列舉一些技術影響行為的問題如下:

  1. 自定義快捷鍵,導致鍵盤使用者
  2. 更改與限制鍵盤 Tab 使用方式,導致沒辦法以平常瀏覽網頁的方式進行瀏覽
  3. 沒有定位點,沒辦法以平常瀏覽網頁的方式跳躍
  4. 資訊階層雖然在 UI 上有顯示,但技術面上沒有實行,導致鍵盤使用者沒辦法依照標題層級跳躍
  5. 沒有做 RWD ,如果使用者的螢幕解析度較差,可能會不好做事
  6. 使用者上傳圖片時,沒有 alt

raw-image

raw-image

選單顏色沒通過以及沒有標題層級

能透過設定改善更多嗎?

在設定裡面,多媒體能設定要不要自動播放、訊息的通知設定以及一些文字格式等,但能設定的東西不多,自然改善的效果有限,只能從源頭就先做起才是最好的方式。

結論

稍微初步評估了 Slack 的無障礙之後可以發現:

  1. 現有網站只要稍微多做一些無障礙細節的 redesign,就能幫助到更多人容易地使用,不需要大改 UI 就能夠獲得超出預期的收穫(除非是動線的設計真的有出大問題)。
  2. 設計時最好不要改變平常瀏覽網頁的主要習慣(除非是在做創新、獨家的應用),否則使用者學習曲線和教育訓練成本會大增。

基本上無障礙越早進入越好,否則到最後會累積越來越多問題,修改的成本會大幅上升。而且既然宣稱了對無障礙的重視,那就真的要去實踐,不然除了被看破手腳,在歐美可能還會吃上官司。

留言
avatar-img
留言分享你的想法!
avatar-img
Neil 的沙龍
4會員
16內容數
紀錄突然想到的設計靈感或實作的經過
Neil 的沙龍的其他內容
2023/08/15
大概七年前看到同事有做了一個瀏覽器擴充程式,當時的我也是躍躍欲試,沒想到就這樣過了七年,直接變成大叔了。 這次在想 2023 鐵人賽的題目,突然想起了這件事,於是就快速地學習了一下,暸解從 0 到 1 的過程,打鐵趁熱寫篇文章記錄一下。
Thumbnail
2023/08/15
大概七年前看到同事有做了一個瀏覽器擴充程式,當時的我也是躍躍欲試,沒想到就這樣過了七年,直接變成大叔了。 這次在想 2023 鐵人賽的題目,突然想起了這件事,於是就快速地學習了一下,暸解從 0 到 1 的過程,打鐵趁熱寫篇文章記錄一下。
Thumbnail
2023/06/16
ChatGPT 問世後,AI 各領域引起了關注,在靈感、知識、素材方面我也都有使用,非常方便。 但如今我試用了 Framer AI 之後,我的心裡有這種念頭出現: 「我真的需要一個生成式 AI 工具來產生整份網頁設計稿嗎?」
Thumbnail
2023/06/16
ChatGPT 問世後,AI 各領域引起了關注,在靈感、知識、素材方面我也都有使用,非常方便。 但如今我試用了 Framer AI 之後,我的心裡有這種念頭出現: 「我真的需要一個生成式 AI 工具來產生整份網頁設計稿嗎?」
Thumbnail
2022/07/01
自從專注在無障礙網頁設計之後,始終有一個問題一直盤旋在我的腦海裡,那就是「要如何使用 icon 才能達成好的無障礙設計體驗?」,而在回答這個問題之前,則是要先理解什麼是 icon 以及 icon 會如何影響整個網站視覺。
Thumbnail
2022/07/01
自從專注在無障礙網頁設計之後,始終有一個問題一直盤旋在我的腦海裡,那就是「要如何使用 icon 才能達成好的無障礙設計體驗?」,而在回答這個問題之前,則是要先理解什麼是 icon 以及 icon 會如何影響整個網站視覺。
Thumbnail
看更多
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
對於文字工作者來說,有合適發揮的平台就試試,尤其是對於日更的創作者來說,可以有更多曝光度的地方都值得努力看看。
Thumbnail
對於文字工作者來說,有合適發揮的平台就試試,尤其是對於日更的創作者來說,可以有更多曝光度的地方都值得努力看看。
Thumbnail
利用文字紀錄,明確寫下自己的採購項目......
Thumbnail
利用文字紀錄,明確寫下自己的採購項目......
Thumbnail
最近幫忙弄了貼圖, 寫個心得來小小紀念一下~ 不囉嗦,先上圖~
Thumbnail
最近幫忙弄了貼圖, 寫個心得來小小紀念一下~ 不囉嗦,先上圖~
Thumbnail
大家好,好久沒更新,最近教學論命繁忙,這邊有所耽擱,真的抱歉。 最近也有跟設計師在討論要架官網,時間真的是不夠用了,因此方格子這邊我會先暫停一下,架好官網之後會將文章轉移到官網,至於會不會有收費文章,這邊我還再思考當中。 如果想看我最新的貼文,可以轉到我的社群上面去。目前是每周二晚上八點發放貼文
Thumbnail
大家好,好久沒更新,最近教學論命繁忙,這邊有所耽擱,真的抱歉。 最近也有跟設計師在討論要架官網,時間真的是不夠用了,因此方格子這邊我會先暫停一下,架好官網之後會將文章轉移到官網,至於會不會有收費文章,這邊我還再思考當中。 如果想看我最新的貼文,可以轉到我的社群上面去。目前是每周二晚上八點發放貼文
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News