設計和使用者體驗

想想你最喜歡的網站或應用程式 - 哪些是你最喜歡的網站或應用程式？接著，想想你不喜歡的網站或應用程式 哪些方面讓你不滿意？使用者如何與設計內容互動，以及他們在網站和應用程式中的體驗可能有所不同。

視時段、使用的裝置類型、他們前一晚是否充足睡眠、是否使用輔助技術等因素，體驗情況都有可能改變。全球將近 80 億人 使用者運用和體驗設計的無限可能

多元包容的設計

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

不像通用設計，著重於開放更多人使用的單一設計，多元包容的設計原則著重於特定個人或用途，然後再將此設計延伸至其他項目。

以下列舉七大以無障礙功能為主軸的多元包容設計原則：

1. 提供同等的使用體驗：確保介面能為所有使用者提供同等的使用體驗，讓使用者能以符合需求的方式完成工作，同時避免內容品質低落。
2. 考量情況：請確保介面不論使用者身處什麼情況，都能為使用者提供有價值的體驗。
3. 保持一致：使用熟悉的慣例，並以邏輯方式套用。
4. 賦予控制權：確保使用者能以偏好的方式存取內容並進行互動。
5. 提供選項：建議您提供不同方式讓使用者完成工作，尤其是複雜或非標準的工作方式。
6. 排定內容的優先順序：在內容和版面配置中，依偏好順序排列這些元素，協助使用者專注於核心工作、功能和資訊。
7. 提升價值：考量功能的用途和重要性，以及這些功能如何改善不同使用者的體驗。

人物角色

開發新的設計或功能時，許多團隊都會依賴使用者「人物角色」來引導成員完成程序。人物角色是指使用數位產品的虛構角色，這類角色通常以量化和質性使用者研究為基礎，

在設計與開發過程中，人物角色也提供快速且成本低廉的測試方式，並排定這些功能的優先順序。這類實驗可在對話中加入現實世界的考量因素，讓大家能專注在與網站元件相關的決策，有助於協調策略，以及針對特定使用者群組建立目標。

結合身心障礙

Microsoft 多元包容的 101 工具中的 Persona Spectrum。

「每個人各有不同，我只能向自己的經驗說話。遇到一位失聰人士時，你就會遇到一位失聰人士，並不是我們所有人。

ID24 的 Meryl Evans 將在《Deaf Tech: Travel Through Time from Past to Future》(Deaf 科技：旅程從過去到未來) 中出發。

將身心障礙者融入人物角色時，則可將人物角色視為多元包容的設計工具。方法有很多種例如建立身心障礙專用人物角色、為現有使用者職務角色加入身心障礙者，或建立人物角色頻譜，反映情境、暫時性和永久性身心障礙的動態現況。

無論如何將身心障礙者融入人物角色，不應以真人或刻板印象為目標，人物角色也絕對無法取代使用者測試。

人物角色：Jane Bennet

查看支援特定用途的人物角色範例。

• 名稱：Jane Bennet
• 年齡：57 歲
• 地區：英國埃塞克斯
• 職業：使用者體驗工程師
• 身心障礙：年輕 Onset Parkinson 疾病的手震 (YOPD)
• 目標：使用語音轉文字輸入輕鬆加入程式碼建議，只需減少按鍵動作，即可在線上尋找自行車裝備。
• 糖果：網站不支援僅限鍵盤使用；針對小型區域進行觸控互動的應用程式。

身為使用者體驗工程師，Jane 在設計和建構頁面時，特別重視讓公司網站的相關性。她每天為許多團隊成員提供支援。 她是召喚技術性火災的人士，如果發生意外狀況，大家都會在部門裡當面。

她失去了對手震技巧的細膩技能，因此越來越難使用滑鼠。她一直以來都越來越依賴鍵盤瀏覽網路。Jane 向來致力於維持體能健康。她超愛公路賽車和越野賽車。 這也使得她去年被診斷為年輕 Onset Parkinson 的疾病更是如此。

身心障礙模擬工具

使用身心障礙模擬工具模擬或補充人物角色時，請務必謹慎小心。

身心障礙模擬工具是雙腳設計，能夠建立同理心或同理心，取決於個人、模擬工具的使用情境，以及許多其他無法控制的因素。許多無障礙設計推廣者都使用身心障礙模擬工具，建議尋找身心障礙者製作的電影、示範、教學課程和其他內容，並親身瞭解他們的使用經驗。

「我認為我們必須完全誠實，任何模擬活動都不會影響一些最重要的認知。失明不是所謂的「失明」特性，而是「失明」或「失明」的真諦，是我們最大的障礙。

這些誤解會構成人為因素，使我們無法完全參與。這些錯誤限制也形成了讓我們追溯的契機。」

Mark Riccobono - National Federation of the Blind

無障礙經驗法則

建構人物角色和設計時，請考慮在工作流程中加入heuristics。「經驗法則」是互動設計的簡單規則，由 Jakob Nielsen 和 Rolf Molich 在 1990 年推出。這些十大原則是根據可用性工程領域的多年經驗開發而成，至今持續用於設計和人工電腦互動程式。

Deque 的設計團隊向前邁進了 2019 年，設計並分享了一組以數位無障礙為核心的經驗法則。根據他們的研究，在設計過程中，如果網站或應用程式的無障礙功能有無障礙錯誤，最多可避免出現 67% 的錯誤。即使未編寫一行程式碼，也能產生巨大的影響。

與原本的經驗法則組合類似，在規劃設計時，您需要將十種無障礙經驗法則納入考量。

1. 互動方式和形式：使用者可以使用自己選擇的輸入法 (例如滑鼠、鍵盤、觸控等)，有效率地與系統互動。
2. 導航和路線指引：使用者可以在系統中輕鬆瀏覽、尋找內容，並判斷他們當下所在位置。
3. 結構和語意：使用者可以理解每個網頁的內容結構，也瞭解在系統中的運作方式。
4. 錯誤預防方式和狀態：互動控制項有永久性的指示，有助於避免錯誤發生，並提供明確的錯誤狀態給使用者，協助他們瞭解問題所在，並告知如何修正時發生問題修正方式。
5. 對比度和易讀性：使用者可以輕易分辨及閱讀文字和其他有意義的資訊。
6. 語言和可讀性：使用者可以輕鬆閱讀及理解內容。
7. 可預測性和一致性：使用者可以預測每個元素的用途。每個元素與系統的整體關聯都有明顯的差別。
8. 時間與保留：使用者有足夠時間完成工作，不會在時間 (即工作階段) 結束時遺失資訊。
9. 移動和閃爍：使用者可以停止網頁上的元素移動、閃爍或動畫。請勿讓使用者分心或受到這些元素造成傷害。
10. 視覺和聽覺的替代選擇：使用者可以針對傳達資訊的任何影像或聽覺內容，以文字為基礎的替代方案。

對這些無障礙經驗法則有基本瞭解後，就可以按照無障礙經驗法則學習單，並遵循提供的操作說明，將其套用至人物角色或設計。當您收集多個觀點時，這個練習會更有動力。

以下是導覽和路線指引檢查點的無障礙經驗法則審查範例：

導航和路線指引的檢查點	Excel (+2 分)	票證 (+1 分)	失敗 (-1 分)	不適用 (0 分)
在接收焦點時，所有使用中的元素是否都設有清楚的可見指標？	✅
網頁是否有有意義的標題文字，並優先呈現網頁特定資訊？			✅
網頁標題元素和 H1 是否相同或相似？		✅
每個主要部分是否都有有意義的標題？		✅
連結的用途是單看連結文字，還是直接使用上下文定義？				✅
網頁最上方有提供跳轉連結，是否突顯出重點？			✅
導覽元素的結構是否有助於取得指引？	✅

團隊的所有成員查看該網頁或元件，並進行無障礙經驗法則審查後，就會計算每個查核點的總數。此時，您可以決定如何修復任何發現的問題，或修正對於支援數位無障礙功能至關重要的任何疏失。

無障礙註解

將設計交給開發團隊之前，建議您先新增無障礙功能註解。一般而言，註解是用來說明創意選擇，並說明設計的不同面向。無障礙功能註解的重點是開發人員在設計團隊或無障礙專家的指導下，做出更無障礙的程式輔助選擇。

無障礙功能註解可在設計程序的任何階段套用，包括線框、高精確度模擬等。其中包含使用者流程、條件狀態和功能。他們通常會使用符號和標籤來簡化程序，並且以設計為主要焦點。

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

動作按鈕的設計會因狀態而異：預設、聚焦、懸停、啟用和停用。

三個圖示醒目顯示替代文字。「儲存工作」和「不感興趣」的圖示代表按鈕，因此替代文字是瞭解動作的關鍵。「使用獨立履歷表」旁的圖示純粹是裝飾性，因此不需要替代文字。

每項輸入內容可建立多個輸入標籤，協助使用者瞭解背景資訊。

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

無障礙註解部分需要考量的部分包括：

• 色彩：包含調色盤中所有不同顏色組合的對比率。
• 按鈕與連結：識別預設、懸停、啟用、聚焦和停用狀態。
• 略過連結：醒目顯示隱藏/可見的設計元素，以及這些元素連結到網頁上的位置。
• 圖片和圖示：針對重要圖片/圖示新增建議替代文字。
• 音訊和影片：醒目顯示字幕、轉錄稿和口述影像的區域/連結。
• 標題：新增程式輔助層級，並加入與標題類似的所有項目。
• 地標：使用 HTML 或 ARIA 醒目顯示設計的各個部分。
• 互動元件：識別可點擊的元素、懸停效果和焦點區域。
• 鍵盤：識別焦點的開始位置 (Alpha 停止) 和以下分頁順序。
• 表單：新增欄位標籤、說明文字、錯誤訊息和成功訊息。
• 無障礙功能名稱：指明輔助技術如何辨識元素。