包容性網頁設計:為什麼重要以及如何去做

已發表: 2023-03-16

社會包容性已成為一個關鍵問題,許多組織和倡導團體正在尋找方法來停止對遭受社會排斥的人的歧視。

但是數字環境呢? 全球 15% 的人口患有某種形式的殘疾,在線體驗的包容性不僅僅是一種趨勢。

以網頁設計為例。 可能有成千上萬的人訪問您的網站但無法瀏覽它。 那麼,這會給你留下什麼? 數以百萬計的人失去了打動他們、應對挑戰和建立長期關係的機會。 這就是企業開始關注為所有用戶創造平等的網絡瀏覽體驗的原因。

但事實是,要使包容性網頁設計成為新常態,我們還有很長的路要走。 大多數營銷人員似乎不願意實施包容性設計策略,認為這既費時又費錢。 在本文中,我們將通過分享關於包容性網頁設計的所有知識、您需要它的原因以及正確執行它的最佳實踐來解決這個流行的信念。

什麼是包容性網頁設計?

包容性網頁設計是考慮因屬於少數群體而以不同方式遭受排斥的用戶的特定需求的做法。 設計包容性不僅包括永久性殘障人士,還包括受壓迫群體或在與數字產品交互時遇到限製或排斥的任何用戶。

作為用戶體驗專家,您面臨著創建人人都可以使用的產品的責任。 無論是如何構建公司博客還是如何創建登錄頁面,也無論訪問者面臨何種類型的限制,滿足每個人的瀏覽需求都不應該是事後才想到的。 話雖如此,我們不應該將包容性設計與可訪問性實踐混淆,因為它遠不止於此。

包容性網頁設計與無障礙網頁設計

有一個普遍的誤解,認為包容性網頁設計等同於可訪問的網頁設計。 設計中的可訪問性和包容性可能是齊頭並進的,但它們並不相同。 包容性網頁設計是一個涵蓋性術語,涉及可訪問性方法,涉及使數字產品易於殘障人士理解。 包容性擴展到其他因素,例如技術限制、語言和人口統計障礙或任何類型的使用戶無法完全參與網頁的情境限制。

(來源)

當我們談論包容性設計時,我們實際上是指解決任何類型限制的通用設計,從使用小屏幕或互聯網連接速度慢的人到手臂受傷等暫時性殘疾的人。 包容性設計不僅限於提供易於訪問和易於使用的解決方案,更重要的是,它應該讓人們感到被欣賞。

長話短說,包容性網頁設計更多的是關於如何處理多樣性設計,而不是結果本身。

包容性網頁設計的基本支柱

要構建包容性數字產品,設計師需要創造滿足每個用戶需求和環境的體驗。 因此,從一開始就採用包容性設計思維方式至關重要。

讓我們來看看您需要牢記的包容性設計的支柱。

  • 確定排除的類型。 在開始之前,搜索排除點並將它們作為創建新的和更具包容性的選項的起點。 當設計師弄清楚個人如何以及為何感到被排斥時,就可以更輕鬆地創建通向包容性數字體驗的路線圖。
  • 讓用戶參與進來。 用戶應該是每個數字解決方案的中心。 為了讓設計師了解不同用戶群體的價值,讓他們參與應該是一個優先事項。 這對於設計師不太了解的群體來說變得更加重要。 因此,徵求他們的意見以發現他們不斷變化的需求,並根據他們的意見測試想法,以提供他們喜歡的體驗。
  • 遠離個人偏見。 包括來自不同背景和社區的用戶,以避免個人偏見妨礙設計公平的解決方案。 這將幫助您了解您在設計過程中遺漏了哪些人。
  • 從你的團隊開始。 避免偏見的第一步是從你自己的團隊開始。 擁有一支包容的員工隊伍不僅可以幫助您認識到自己的個人偏見,還可以克服這些偏見。 由具有不同背景和能力的人組成的設計團隊是解鎖更廣泛的用戶挑戰的關鍵。

為什麼包容性是網頁設計的必備條件?

(來源)

用戶需求是多種多樣的。 因此,假設一種放之四海而皆準的方法可能會導致災難。 此外,網頁設計中的包容性開發可幫助您確立自己的行業領導者地位並超越競爭對手。

讓我們分解一下在設計數字產品時採用包容性思維方式的最重要原因。

1. 覆蓋更多受眾

撇開社會影響不談,包容性網頁設計從商業角度來看也至關重要。 不用說,如果您將大部分受眾排除在外,您將失去客戶。 翻譯選項、視覺組件或語音助手等包容性功能可幫助您覆蓋更多受眾並增強網站設計的包容性。 專注於建立普遍積極的體驗,用戶將以忠誠度回報您。

2. 人們對你有期望

社交媒體平台讓人們關注社會不公,因此今天的用戶比以往任何時候都更有社會意識。 人們希望企業轉向包容性,因為這是正確的做法。 這就是為什麼將具有不同需求和能力的人包括在內不僅僅是一項業務決策。

如果您不盡一切努力讓用戶參與進來,您就會將他們排除在與您的產品互動之外,即使是無意的。 現在是為多樣性進行設計的時候了,因為它會影響用戶是否會選擇轉變為客戶。

3.同時解決不同的問題

每個網站訪問者都有興趣和動機,以及根據不同情況限制他們的能力。 因此,我們每個人在與網頁設計互動時都可能會受到排斥。 這就是包容性設計可以以相似的方式將具有不同限制的不同用戶聯繫起來的地方。 例如,乾淨的大文本有益於視力不佳的人,但它也有助於司機和其他在運動中瀏覽的人。

4. 建立品牌知名度

消費者喜歡讓他們的生活更輕鬆的品牌,沒有什麼比包容性設計元素更能表明這種意圖。 互聯網用戶的注意力持續時間較短,花在各種屏幕上的時間更多。 因此,腕管綜合症或計算機視覺綜合症等問題比我們想像的更為普遍。 這些人更喜歡訪問可以在任何設備上輕鬆瀏覽的網站。

當您在設計網站時考慮到包容性,訪問者會對您為他們提供的客戶旅程感到歡迎和舒適。 這樣一來,您的品牌就會佔據首位並具有競爭優勢。

5.它改善了你的搜索引擎優化

搜索引擎更喜歡為更好的用戶體驗和包含功能而優化的網頁。 如果您不跟上可訪問性最佳實踐,那麼引人注目的網站在 SEO 方面對您沒有任何好處。

許多營銷人員往往會忽視其網站的可用性和可訪問性。 但是,這是搜索引擎注意到網站並提高其排名的可靠方式。 您不僅可以通過與其搜索算法保持一致來保持 Google 的滿意度,而且還可以為訪問者提供最佳的頁面體驗。

8 個包容性設計最佳實踐

更具包容性的設計可能會令人沮喪,因為很難評估您的網頁是否提供公平的在線體驗。 如果我們必須選擇一個起點,那就是放棄所有假設,並決定支持所有用戶,而不僅僅是普通用戶。 為了成功地讓每個人都感到被包容,請繼續閱讀以發現作為設計師應遵循的最佳實踐。

1. 創建結構合理、可讀性強的內容

您的網站內容是內容營銷策略不可或缺的一部分。 可讀且結構嚴謹的內容是保持訪問者參與的關鍵。

選擇一種結構,讓有認知或視覺障礙的訪客能夠閱讀它。 您還應該包含一個邏輯序列,引導用戶瀏覽您的內容並消除摩擦點。

除了這些步驟之外,還有一些簡單的更改可以改變用戶與您的內容的交互方式。 以下是可讀性和有意義的排序內容的一些關鍵指南:

  • 使用簡單的語言和簡短的句子,使您的內容易於閱讀和消化
  • 將長文本塊分成較小的部分,並使用標題、項目符號列表和圖像來支持有視力或閱讀障礙的用戶
  • 包括手風琴之類的元素,以隱藏會分散訪問者註意力的內容,而這些核心內容是他們需要首先訪問的核心內容
  • 確保在內容和背景之間使用足夠的對比度

2. 保持佈局清晰簡單

層次結構對於佈局和內容一樣重要。 作為設計趨勢,清晰和簡約永遠不會過時,這是有充分理由的,因為訪問者不喜歡帶有復雜導航和混亂信息的凌亂設計。 清晰簡單的佈局轉化為直觀、用戶友好且視覺上吸引人的界面。

確保構建網站的核心功能,突出其可用性,同時不會讓訪問者偏離最相關的信息。 然後,您可以添加任何必要的組件來展示價值並進一步吸引他們。

3.確保一致性

作為一名設計師,您已經知道一致性對於您創建的每個數字產品都至關重要。 當您設計以包含不同的受眾時,這一點就更為重要。 不一致的設計通常會使用戶感到困惑,並導致他們離開您的網站。 對於有認知障礙的人來說更難,因為他們很難通過沒有意義的複雜界面。

網站導航的一致性可提高易用性,並可帶來更輕鬆、更快速的轉換。 但不要誤會我們的意思——一致性並不意味著可預測性。 因此,請確保您只刪除導致挫敗感的元素,同時盡可能保持創意。

(來源)

4.為圖像使用替代文本

精明的營銷人員知道圖像、視頻或信息圖表等視覺元素如何在傳達感受的同時吸引註意力。 但是,如果您不分別包含替代文本和標題,那麼在您的網站上包含圖片或視頻是沒有用的。

屏幕閱讀器依靠替代文本向有視力障礙的人描述圖像。 精心製作的簡短描述通過告知訪問者圖像的含義來幫助避免誤解。

當您為圖像編寫替代文本時,需要考慮以下幾個重要方面:

  • 簡要而準確地描述圖片中發生的事情,以便用戶快速訪問最關鍵的信息
  • 請記住包括圖像與周圍環境的關係
  • 當圖像主要是裝飾性時,使用空的 <alt> 字段讓屏幕閱讀器知道他們可以跳過該圖像

此外,不要忘記為您的視頻內容添加字幕,以便有聽力障礙的人能夠理解您的視頻內容。 確保為網站上的每個視頻提供字幕,以便用戶充分理解您的信息。 最後,無論您做什麼,都不要將視頻置於自動播放狀態,因為這會增加用戶的認知負擔。

5.選擇包容性副本

許多營銷人員犯的一個錯誤是忽視文案而偏愛視覺效果。 但文字是我們表達自我和建立聯繫的工具。 用戶體驗設計也是如此。 為了向更多的觀眾開放,您需要一份包容而簡潔的文案。 讓我們回顧一下為包容性副本實施的一些策略:

  • 選擇簡單的詞,避免複雜的術語或不必要的行話。 這樣做可以讓有學習和認知障礙的人理解您的信息。
  • 如果您必須在您的網站上使用複雜的想法或術語,請考慮使用圖像或視頻為殘障用戶或非母語人士簡化操作
  • 對在線表格中包含的副本要格外小心。 它是潛在客戶生成中最敏感但最被忽視的部分之一。 找出您需要提出哪些問題以及如何提出,並註意您提供的答案選項。
  • 排除性別代詞和對性別敏感的術語(例如,“女士們,先生們”),以確保所有用戶都感覺準確。

6. 明智地選擇顏色

顏色在設計中起著巨大的作用,因為它能喚起情感並吸引觀眾的注意力。 問題是它有局限性,因為並非所有用戶都以相同的方式感知顏色。

例如,患有紅綠色盲的人很難看到綠色和紅色的陰影。 最重要的是,來自不同文化背景的訪問者對顏色的解釋不同,這可能會影響他們對您的內容的理解。 例如,視力不佳或色盲的訪客可能難以理解以色差形式呈現數據的餅圖。

你能做些什麼來避免訪客中的這種困擾? 不要依賴顏色作為唯一的視覺提示,而是嘗試結合標籤、圖標或粗體文本等元素。 此外,避免使用高度對比的顏色並將相似的顏色並排放置。 這些小事讓用戶可以舒適地使用您的網站,同時彌合不同受眾群體之間的差異。

如果您不知道從哪裡開始,您可以使用 Color Safe 或 WebAIM 等工具為您生成易於訪問的顏色組合。

7. 不要忘記鍵盤輔助功能

設計網站時要測試的關鍵組件之一是鍵盤可訪問性。 如果您不針對鍵盤導航優化您的網站,就會給有視覺或運動障礙的訪問者帶來困難。 請記住,鍵盤可能是他們訪問您的網站並與其組件交互的唯一方式。

(來源)

但是優化鍵盤導航意味著什麼呢? 嘗試從左到右,從上到下,確保您可以只使用鍵盤瀏覽網頁。

不要忘記通過簡單地使用 Tab 來測試導航過程的難易程度。 Tab 鍵對於鍵盤輔助功能同樣重要,因為它是純鍵盤訪問者瀏覽網頁的方式。 此選項背後的主要思想是讓他們能夠通過單擊 Tab 鍵來選擇頁面上的每個元素。

包容性的重要性

多年來,網頁設計一直致力於創建引人入勝、色彩豐富且與眾不同的網頁,以引起人們的注意。 雖然這些特徵仍然相關,但它們不足以為訪問者提供真正愉快的網絡體驗。

試想一下,您創建了一個引人注目的網站。 如果您在構建它時沒有考慮到包容性網頁設計,就會阻止很大一部分用戶訪問它。 您的最終結果應該是每個設備上的每個用戶都能很好地接受的通用設計。

將您的網站變成一個對所有訪問者都具有包容性和平等性的空間並不像聽起來那麼嚇人。 要想成功,您首先需要深入了解不同受眾群體在使用數字產品時面臨的挑戰。

請記住遵循本指南中分享的最佳實踐來創建可用且有價值的網站。 而且,無論您做什麼,都不要停止跟上不斷變化的受眾對包容性和以客戶為中心的數字體驗的需求。

下載電子書:25 個網站必備品