設計和使用者體驗

想想你最喜歡的網站或應用程式,它有什麼吸引人之處?然後想想你不喜歡的網站或應用程式你不喜歡哪些方面?使用者與設計互動的方式,以及他們在網站和應用程式上的體驗,可能會有所不同。

這項體驗會因時間、使用裝置類型、前一天是否有充足睡眠、是否身體不適、是否使用輔助技術等因素而有所不同。全球人口已逼近八十億,因此使用者使用和體驗設計的方式無窮無盡。

我們如何一次滿足所有潛在使用者的需要?進入包容設計。包容設計採用以人為本的做法,將包容性、可用性和無障礙性融為一體。

範例的範疇圖,無障礙、包容性和可用性都以包容性設計為中心。

與通用設計不同,後者著重於盡可能讓更多人使用單一設計,而多元包容的設計原則主要著重於特定個人或用途的設計,然後再延伸至其他設計。

以下是七項著重於無障礙功能的多元包容設計原則

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

職位

在開發新設計或功能時,許多團隊都會依靠使用者角色來引導整個過程。使用者人物角色是使用您數位產品的虛構人物,通常是根據定量和定性使用者研究而定。

角色設定也提供快速且省錢的方法,可在設計和開發過程中測試並排定這些功能的優先順序。這類討論可在對話中加入實際考量層面,協助調整策略並建立以特定使用者群組為主的目標,進而協助您做出以網站元件為重點的決策。

納入無障礙設計

身心障礙可能是永久、臨時或情境性。這些障礙可能會影響觸覺、視覺、聽覺和說話能力。
Microsoft 的 Inclusive 101 工具包中的 Persona Spectrum (人物 a Spectrum)。

「人人都不同,我只能說自己的經歷。當你遇到一位聽障人士,你就認識一位聽障人士,而不是所有聽障人士。」

ID24 講者 Meryl Evans 的演講主題為「Deaf Tech: Travel Through Time from Past to Future」(失聰者科技:從過去到未來的時間之旅)。

當您將身心障礙人士納入使用者人物時,可以將人物角色用作包容設計工具。您可以透過多種方式進行這項程序。您可以建立特定障礙類型的使用者原型、為現有使用者原型新增障礙,甚至建立原型光譜,以反映情境性、暫時性和永久性障礙的動態現實。

無論您如何將身心障礙人士納入使用者人物,都不應以真實人物或刻板印象為依據。而且,使用者設定檔絕對無法取代使用者測試。

Jane Smith 身材高挑,留著長黑髮,穿著灰色長袖襯衫和牛仔褲
  • 名稱:Jane Bennet
  • 年齡:57 歲
  • 地點:英國,埃塞克斯
  • 職業:使用者體驗工程師
  • 殘疾:因早發性帕金森氏症 (YOPD) 導致的手部顫抖
  • 目標:使用語音轉文字輸入功能,輕鬆新增程式碼建議;以最少的按鍵動作在線上尋找自行車裝備。
  • 令人困擾的情況:網站缺乏僅支援鍵盤的功能;設計應用程式僅提供小範圍的觸控互動區域。

身為使用者體驗工程師,Jane 負責設計及建構與維持公司網站關聯性的關鍵頁面。她每天都會協助許多團隊成員。她是解決技術問題的專家,也是部門中遇到任何意外問題時,大家會找的對象。

由於細微動作能力因顫抖而受損,她越來越難使用滑鼠。她越來越常使用鍵盤瀏覽網頁。Jane 一直很注重身體健康,她喜歡賽車和越野車。 這使得她去年被診斷出患有幼年帕金森氏症的年輕時,發出更多的爆炸聲。

身心障礙模擬遊戲

使用無障礙模擬工具模擬或補足使用者類型時,請務必格外謹慎。

身心障礙模擬工具是一種雙面刃,能建立同理心或同理心,可以取決於個人、模擬工具使用的情境,以及許多其他無法控制的因素。許多無障礙倡議者反對使用身心障礙模擬工具,建議您尋找身心障礙人士製作的電影、示範影片、教學課程和其他內容,並親身體驗他們的經驗。

「我認為我們必須誠實面對,任何模擬活動都不會影響我們希望視障者在心裡和頭腦中掌握的部分重要概念。失明並不是我們的主要特徵,相反地,對失明的誤解和低期待才是我們面臨的最大障礙。

這些誤解造成了人為障礙,阻礙我們充分參與,這些錯誤的限制會成為阻礙我們前進的絆腳石。」

Mark Riccobono,美國國家盲人協會主席。

無障礙經驗法則

建立使用者人物角色和設計時,不妨考慮在工作流程中加入啟發法。啟發法是互動設計的規則,由 Jakob Nielsen 和 Rolf Molich 於 1990 年提出。這十項原則是根據可用性工程領域多年的經驗所制定,並且一直用於設計和人機互動計畫。

時間快轉至 2019 年,Deque 的設計團隊建立並分享了新的以數位無障礙為重點的啟發法。根據他們的研究,如果在設計過程中考量無障礙功能,就能避免多達 67% 的網站或應用程式無障礙功能錯誤。這對編寫程式碼前所能帶來的影響非常巨大。

與原始的啟發法規則一樣,規劃設計時,請考量十項無障礙啟發法規則。

  1. 互動方法和模式:使用者可以使用所選輸入方法 (例如滑鼠、鍵盤、觸控等) 與系統進行互動。
  2. 導覽和尋路功能:使用者可在系統中隨時瀏覽、查找內容,並判斷自身所在位置。
  3. 結構和語意:使用者可以瞭解每個網頁上內容的結構,並瞭解如何在系統中操作。
  4. 錯誤預防和狀態:互動式控制項會提供持續且有意義的指示,以防使用者出錯,並在傳回錯誤時,向使用者提供清楚的錯誤狀態,說明問題為何以及如何修正。
  5. 對比度和可讀性:使用者可輕鬆分辨及閱讀文字和其他有意義的資訊。
  6. 語言和可讀性:使用者能輕鬆閱讀及理解內容。
  7. 可預測性和一致性:使用者可以預測每個元素的用途。每項元素之間的關係顯而易見。
  8. 時間和保存:使用者有足夠的時間完成工作,且在時間 (即工作階段) 結束時不會遺失資訊。
  9. 移動和閃爍:使用者可以停止網頁上移動、閃爍或動畫效果的元素。使用者不應受到這些元素的干擾或受到其他傷害。
  10. 視覺和聽覺替代品:對於任何傳達資訊的影像或聽覺內容,使用者可以取得以文字為基礎的替代方案。

對這些無障礙法則有基本瞭解後,您可以使用無障礙法則工作表,並按照提供的操作說明,將這些法則套用至使用者設定檔或設計。如果您收集到多個觀點,這個練習會更有吸引力。

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

導航和路線規劃的檢查點 表現優異 (+2 分) 通過 (+1 分) 失敗 (-1 分) N/A (0 pt)
所有有效元素在收到焦點時,是否都會顯示清楚可見的指標?
網頁是否有有意義的標題文字,並以網頁專屬資訊為首要?
網頁標題元素和 H1 是否相同或相似?
每個主要章節是否有具意義的標題?
連結目的是否與連結文字本身或其直接關聯有關?
網頁最頂端是否提供略過連結,並是否聚焦於該連結?
導覽元素的安排是否有助於尋路?

在團隊的所有人查看網頁或元件,並都進行無障礙經驗法則審查後,我們就會針對每個查核點計算總計。此時,您可以決定如何修正所發現的問題,或修正任何對支援數位無障礙功能至關重要的遺漏項目。

無障礙註解

將設計交給開發團隊之前,請考慮加入無障礙工具註解

一般來說,註解是用來說明廣告素材選擇,並描述設計的不同面向。無障礙註解著重於開發人員在設計團隊或無障礙專家的指導下,可透過程式輔助功能做出更無障礙的選擇。

無障礙說明可在設計流程的任何階段套用,從線框到高保真度原型設計皆可。可包含使用者流程、條件狀態和功能。他們經常使用符號和標籤來簡化程序,並將設計為主要焦點。

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

設計插圖:針對各種可能的按鈕狀態所使用的視覺修改。
動作按鈕的設計會因狀態而異,包括預設、焦點、懸停、啟用和停用。
設計插圖:徵人啟事資訊卡中使用的三個不同圖示。
三個圖示的替代文字已醒目顯示。「儲存工作」和「不感興趣」圖示會做為按鈕使用,因此替代文字對於理解動作至關重要。「使用 Indeed 履歷表格應徵」旁的圖示純粹是裝飾用,因此不需要替代文字。
說明表單標籤應與月份和年份相關輸入內容的關係。
每項輸入內容可以與多個輸入標籤建立關聯,協助使用者瞭解背景資訊。

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

以下是使用無障礙註解時需要考量的事項:

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