設計和使用者體驗

想想您最喜歡的網站或應用程式，是什麼原因讓您喜歡？現在，請想想您不喜歡的網站或應用程式。你認為這個應用程式有哪些缺點？使用者與設計的互動方式，以及在網站和應用程式上的體驗可能有所不同。

這項體驗可能會因一天中的時間、使用的裝置類型、前一晚是否睡眠充足、身體狀況、是否使用輔助技術等因素而有所不同。全球人口將近 80 億，使用者如何使用及體驗您的設計，有無限可能。

多元包容設計

如何一次滿足所有潛在使用者需求？輸入多元包容設計。無障礙設計採用以人為本的方法，將無障礙、可用性和易用性融為一體。

通用設計著重於單一設計，盡可能讓更多人使用，而包容性設計原則則是以特定個人或用途為中心設計，然後將設計擴展到其他人。

以下是七項以無障礙功能為重點的包容性設計原則：

1. 提供同等體驗：確保介面為所有人提供同等體驗，讓使用者能以符合自身需求的方式完成工作，同時不影響內容品質。
2. 考量情況：確保介面能為使用者提供有價值的體驗，無論他們的情況如何。
3. 保持一致：使用熟悉的慣例，並以合乎邏輯的方式套用。
4. 提供控制權：確保使用者能以偏好的方式存取及互動內容。
5. 提供選擇：考慮提供不同的方式讓使用者完成工作，尤其是複雜或非標準的工作。
6. 優先顯示重要內容：在內容和版面配置中，將核心工作、功能和資訊依偏好順序排列，協助使用者專注於這些元素。
7. 增加價值：考量功能的目的和重要性，以及如何改善不同使用者的體驗。

職位

開發新設計或功能時，許多團隊會依據使用者角色來引導整個流程。虛構角色是使用您數位產品的虛構人物，通常以量化和質性使用者研究為依據。

此外，在設計和開發過程中，您也可以透過使用者角色，快速且經濟實惠地測試及優先處理這些功能。他們會在對話中加入實際考量因素，協助您專注於網站元件相關決策，進而制定策略並建立以特定使用者群組為目標的目標。

納入身心障礙人士

「每個人都不一樣。我只能根據自己的經驗分享。你認識一位聽障人士，就只認識一位聽障人士，而不是我們所有人。」

ID24 演講的 Meryl Evans Deaf Tech：從過去到未來，穿越時空。

將身心障礙人士納入使用者角色後，即可將使用者角色當做包容性設計工具。方法有很多種。 您可以建立特定障礙類別的使用者輪廓、在現有使用者輪廓中新增障礙，甚至建立使用者輪廓光譜，反映情境、暫時和永久障礙的動態現實。

無論您如何將身心障礙者納入目標對象，都不應以真實人物或刻板印象為依據。此外，使用者輪廓絕不能取代使用者測試。

身心障礙模擬器

使用無障礙模擬工具模擬或補充使用者角色時，請務必格外謹慎。

身心障礙模擬器是一把雙面刃，因為模擬器可能會建立同情或同理心，但這取決於個人、模擬器的使用情境，以及許多其他無法控制的因素。許多無障礙倡議人士反對使用身心障礙模擬工具，並建議尋找身心障礙人士製作的電影、示範、教學課程和其他內容，直接瞭解他們的體驗。

「我覺得我們必須坦白承認，任何模擬活動都不會影響我們希望視力正常者從心底和腦海中瞭解的某些重要事項。盲人並非由失明定義，而是對失明的誤解和低期望，才是我們最大的障礙。

這些誤解會造成人為障礙，阻礙我們充分參與，而這些錯誤的限制會累積成阻礙我們發展的因素。」

Mark Riccobono， 美國全國盲人聯盟主席。

無障礙經驗法則

建立目標對象和設計時，建議在工作流程中加入啟發式評估。啟發式是互動設計的規則，由 Jakob Nielsen 和 Rolf Molich 於 1990 年提出。這十項原則是根據多年來在可用性工程領域的經驗所制定，並已用於設計和人機互動程式。

快轉到 2019 年，Deque 的設計團隊建立並分享了一組著重於數位無障礙的全新啟發式方法。根據他們的調查，如果設計流程納入無障礙功能，網站或應用程式最多可避免 67% 的無障礙錯誤。這是在編寫任何程式碼之前，就能帶來的巨大影響。

與原始的一組啟發式原則類似，規劃設計時，有十項無障礙啟發式原則可供參考。

1. 互動方法和模式：使用者可以選擇自己偏好的輸入方式 (例如滑鼠、鍵盤、觸控等)，與系統有效互動。
2. 導覽和尋路：使用者隨時都能在系統中導覽、尋找內容，以及判斷自己所在位置。
3. 結構和語意：使用者可以瞭解每個頁面的內容結構，以及如何在系統中操作。
4. 避免錯誤和狀態：互動式控制項會提供持續且有意義的指示，協助使用者避免錯誤，並在傳回錯誤時，提供清楚的錯誤狀態，指出問題所在和修正方式。
5. 對比度和易讀性：使用者可以輕鬆辨識及閱讀文字和其他重要資訊。
6. 語言和可讀性：使用者可以輕鬆閱讀及理解內容。
7. 可預測性和一致性：使用者可以預測每個元素的用途。清楚瞭解每個元素與整個系統的關係。
8. 時間和保留：使用者有足夠的時間完成工作，即使時間 (即工作階段) 結束，也不會遺失資訊。
9. 移動和閃爍：使用者可以停止網頁上移動、閃爍或有動畫效果的元素。這些元素不應干擾使用者或造成其他傷害。
10. 視覺和聽覺替代內容：使用者可以存取任何傳達資訊的視覺或聽覺內容的文字替代內容。

對這些無障礙啟發式方法有基本瞭解後，您可以使用無障礙啟發式方法工作表，並按照提供的操作說明，將這些方法套用至角色或設計。收集多種觀點，有助於更深入瞭解情況。

以下是導覽和尋路檢查點的無障礙啟發式評估範例：

導航和尋路檢查點	表現優異 (+2 分)	通過 (+1 分)	失敗 (-1 分)	不適用 (0 分)
當所有有效元素獲得焦點時，是否會顯示清楚可見的指標？	check
網頁是否含有有意義的標題文字，且網頁專屬資訊位於最前面？			check
網頁標題元素和 H1 是否相同或相似？		check
每個主要部分是否有意義明確的標題？		check
連結的用途是否僅從連結文字或其直接脈絡定義？				check
網頁最頂端是否提供略過連結，且該連結是否會在焦點移至該處時顯示？			check
導覽元素的編排方式是否方便使用者尋路？	check

團隊成員查看網頁或元件並進行無障礙啟發式評估後，系統會計算每個檢查點的總分。此時，您可以決定如何修正發現的問題，或補足對支援數位無障礙功能至關重要的任何遺漏之處。

無障礙註解

將設計稿交給開發團隊前，請考慮加入無障礙註解。

一般來說，註解是用來解釋廣告素材選擇，以及描述設計的不同面向。無障礙註解著重於開發人員可根據設計團隊或無障礙專家的指引，做出更符合無障礙標準的程式輔助選擇。

在設計流程的任何階段 (從線框圖到高傳真模擬)，都可以套用無障礙註解。包括使用者流程、條件狀態和功能。他們通常會使用符號和標籤簡化流程，並將設計視為主要重點。

以下設計插圖範例來自 Indeed.com 的 Figma 無障礙註解套件。

視設計計畫而定，您應該可以選擇多個無障礙註解入門套件。或者，您也可以自行建立一組。無論是哪種情況，您都應決定要向交接團隊傳達哪些資訊，以及最適合的格式。

無障礙註解可考慮的領域包括：

• 顏色：包含調色盤中所有不同顏色組合的對比度。
• 按鈕和連結：識別預設、懸停、有效、焦點和停用狀態。
• 略過連結：醒目顯示隱藏和可見的設計元素，以及這些元素在網頁上的連結位置。
• 圖片和圖示：為重要圖片和圖示新增替代文字建議。
• 音訊和影片：醒目顯示字幕、轉錄稿和口述影像的區域和連結。
• 標題：新增程式輔助層級，並加入所有看起來像標題的內容。
• 地標：使用 HTML 或 ARIA 醒目顯示設計的不同區段。
• 互動式元件：識別可點擊的元素、懸停效果、焦點區域。
• 鍵盤：找出焦點的起始位置 (Alpha 停止) 和後續的 Tab 鍵順序。
• 表單：新增欄位標籤、輔助文字、錯誤訊息和成功訊息。
• 可存取的名稱：識別輔助技術應如何辨識元素。