Inclusive Design Principles

三個熱氣球一起懸浮在寧靜、充滿陽光的天空

作者: Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson

中文翻譯: Yuming Cheung

包容設計原則是以人為優先。有協助需求的人,分為永久、暫時、在某些情況和漸漸不便,其實就是我們所有人。

任何跟網站和應用程式設計、開發有關的人(設計師、使用者體驗專家、開發者、產品主持人、 發明家、藝術家與思想家)都能夠藉此初步認識包容設計。

原則條目

提供相等體驗

確保介面提供相等的體驗,讓人們可以依照自己的需求完成事務,且不犧牲內容的品質。

完整內容

不管有沒有考慮到環境、選擇與情境,人就是有各種不同的類型。因為人們使用不同的方法與工具來閱讀和操作介面,介面應讓每位使用者有相同的價值、品質與效率。

範例

  • 替代內容呈現:至少有些替代內容,不管是補充文字、逐字稿、語音描述或手語,讓內容觸及更廣泛,而且還要跟原本內容的精髓相當。
  • 人因功能:無障礙的影片提供同步字幕。如果還可以自訂色碼和位置,那就是更相等的體驗。
  • 通知訊息:介面上的通知很顯眼,但是對螢幕報讀器使用者來說,得要專注使用才會發現。動態區域 (live region) 讓視力障礙使用者獲得相等的體驗。這類的使用者就不必因為通知,而得進行與往常不同的動作。

複製提供相等體驗的連結

考量使用情境

人們在各種不同的情境使用介面。請確保介面在任何環境,都能傳遞有價值的體驗。

完整內容

人們會是初次使用者、習慣使用者;在工作場所、在家裡、移動中還有感到壓力的情況,這些情境都會造成影響。對於互動已經感到窒礙,例如有不便的人來說,這影響會造成使用起來尤其困難。

範例

  • 顏色對比:在戶外使用介面時,良好的對比降低耀眼陽光的影響。
  • 根據情境輔助:使用者首次遇到複雜的表單或互動時,可能需要幫忙;使用者熟悉表單或互動後,這些輔助變得多餘,甚至覺得干擾。根據情境的輔助讓使用者可以選擇何時取得協助,更能掌握頁面。
  • 行動裝置的字幕:你應該有注意過影片是在行動裝置上觀看,也就是人們通常不想觀看時惹怒路人的公開場合。在比較小的螢幕上,預設靜音且打開字幕。

複製考量使用情境的連結

保持一致

使用易於理解的常規,並且一致地使用。

完整內容

介面能夠易於使用,來自於驗證過的操作模式。它們在介面上的使用原則應該要一致,藉以強化意義與目的。這樣的作法必須在功能、行為、文體與展示時皆適用。你應該要用相同的方法講相同的事,這樣子,使用者才會以相同的方式做相同的事。

範例

  • 設計模式一致:使用一致的設計模式,讓網站與平台建立起熟悉感且好懂。
  • 文體一致:在每個平台都一致地使用白話語言,尤其是螢幕報讀器使用者倚賴的替代文字、標題、表單標籤與按鈕⋯等。一致的文體風格也很重要,例如文章頂部都有標註清楚的概要,或清單的開頭都是粗體字釋義。
  • 頁面結構一致:在每個範本使用一致的頁面結構,讓人易於掃視、切換重點內容。

複製保持一致的連結

賦予掌握感

確保人們是在掌握的情況。他們應該能夠以自己偏好的方式看到內容、與其互動。

完整內容

請勿改寫或關閉標準瀏覽器和平台設定可以改變的功能,例如方向、字型大小、縮放與對比。此外,除非有方法控制,避免不是使用者主動觸發的內容改變。

範例

  • 捲動控制:「無限捲動」會帶來許多麻煩,尤其是以鍵盤操作的使用者,他們無法跳過不斷更新的內容。請提供關閉此功能的選項,改用「繼續看」按鈕。
  • 可以靜止:有些使用者因為動畫或視差滾動而造成暈眩,有些人則是單純覺得看不到重點。自動播放的地方,應該至少能夠輕鬆地透過明確的播放控制停止。
  • 允許縮放:使用者在觸控螢幕裝置上以手指施展縮放 (pinch-to-zoom) 的原因千百種。請確認沒有覆蓋這功能的作用,內容也沒有在施展後看起來是模糊的。

複製賦予掌握感的連結

提供選擇

請考慮讓人們能夠不只以一種方式完成事情,尤其是複雜或非標準的。

完整內容

通常,完成事情的方法不只一種,你無法假設某人的偏好。提供不同的版面與完成任務方式,就是讓人們能挑選當下適合自己與情境。

範例

  • 多種完成動作的方法:在適當時機,提供多種完成動作的方法。在手機上,撥動刪除可以搭配編輯按鈕,接著刪除已選項目。這種方法的範例是 iOS 的郵件。
  • 排版:放一大串內容的地方,請考慮能夠選擇以格狀或清單呈現。想要在螢幕上呈現大一點的圖片,或較小的排狀都可以選擇。
  • 無障礙替代方案:各種展示資料的方法,例如每個人都應該可以看到資訊圖表用的資料表格。而不是放個只有螢幕報讀器使用者專用的隱藏連結。無障礙替代方案並不僅僅只有特定對象獲益,而是只要能提供選擇,所有使用者皆然。

複製提供選擇的連結

內容優先順序

以內容與排版安排核心事務、功能與資訊的優先順序,有助於使用者專注其中。

完整內容

核心功能沒有清楚地揭露和優先顯示時,介面就會變得難以理解。網站或應用程式裡,可能會提供許多資訊和功能,只不過,人們一次只能專注一件事。請找出介面的核心用途,還有為了滿足此用途的內容和功能。

範例

  • 讓事務看得到重點:有需要的時候,才逐漸地顯示功能與內容。而不是一口氣全部呈現。
  • 安排事務的優先順序:基本上,電子郵件程式就是在撰寫、閱讀電子郵件。因此,「撰寫」按鈕就要在所有畫面都看得到,專注順序 (focus order) 也是很前面。收件閘會比其他類型的電子郵件清單重要,例如:寄件與垃圾訊息。像是標籤和整理進資料夾這些比較少用到的功能,因為它們通常是主要事務完成之後才開始使用,就會在專注順序比較低的地方才出現。
  • 安排內容的優先順序:新聞型文章頁面的主要內容是報導。因此,報導應該要在視覺與專注順序安排在其他內容之前。接下來是類似文章的相關內容;不相關的內容放在更後面。
  • 安排文體的優先順序:要以白話文撰寫連結、標題與按鈕使用的文體,且重點文字優先出現。看得到與隱藏的文字皆適用。對於螢幕報讀器的使用者來說,這不論是視覺還是聽覺都可以輕易地掃視。白話文對於非母語人士也很有用,且易於翻譯。

複製內容優先順序的連結

提升價值

把功能的價值納入考量,使得它們為不同的使用者增進體驗。

完整內容

藉由有效率、多樣的方法找到內容、與之互動,使得功能可以為使用者體驗提高價值。把語音、地理位置、相機和震動 API 等功能納入考量,還有跟連結裝置或第二台螢幕所能提供的選擇。

範例

  • 連結裝置或第二台螢幕整合:使用語音介面控制多媒體、搜尋內容、音樂或電視的輸出,為使用其他介面有困難的人增加價值。
  • 平台 API 整合:使用平台功能加強功能性。震動 API 使得通知功能對於聽不見或聽覺障礙人士來說,會更有用。而地理資訊 API 讓移動障礙的人可以使用根據位置的服務。
  • 更輕鬆完成事務:使用者可以透過「顯示密碼」按鈕檢查是否正確輸入。或者,在密碼保護區域使用指紋辨識。

複製提升價值的連結