포괄적인 웹 디자인: 중요한 이유와 수행 방법

사회적 포용성은 중요한 문제가 되었으며 많은 조직과 옹호 단체는 사회적 배제를 경험하는 사람들에 대한 차별을 중지할 방법을 찾고 있습니다.

그러나 디지털 환경은 어떻습니까? 전 세계 인구의 15%가 어떤 형태로든 장애를 안고 살고 있기 때문에 온라인 경험의 포괄성은 추세 그 이상입니다.

예를 들어 웹 디자인을 생각해 보십시오. 귀하의 웹사이트를 방문하지만 탐색할 수 없는 수천 명의 사람들이 있을 것입니다. 그래서 무엇을 남길까요? 그들에게 깊은 인상을 주고, 문제를 해결하고, 장기적인 관계를 구축할 수 있는 수백만 개의 기회를 잃었습니다. 그렇기 때문에 기업은 모든 사용자에게 동등한 웹 브라우징 경험을 제공하는 데 집중하기 시작했습니다.

그러나 진실은 포용적인 웹 디자인이 새로운 표준이 되기까지 갈 길이 멀다는 것입니다. 대부분의 마케팅 담당자는 시간과 비용이 많이 든다고 생각하여 포괄적인 디자인 전술을 구현하는 것을 꺼려합니다. 이 기사에서는 포괄적인 웹 디자인에 대해 알아야 할 모든 것, 웹 디자인이 필요한 이유, 올바르게 수행하기 위한 모범 사례를 공유하여 이러한 통념에 대처할 것입니다.

포괄적인 웹 디자인이란 무엇입니까?

포괄적인 웹 디자인은 소수 그룹에 속하기 때문에 다양한 방식으로 배제를 경험하는 사용자의 특정 요구를 고려하는 관행입니다. 디자인 포용성에는 영구 장애가 있는 사람뿐만 아니라 억압받는 그룹 또는 디지털 제품과 상호 작용할 때 제한이나 배제를 경험하는 모든 사용자가 포함됩니다.

UX 전문가는 모든 사람이 접근할 수 있는 제품을 만들어야 하는 책임에 직면해 있습니다. 회사 블로그를 구축하는 방법이든 랜딩 페이지를 생성하는 방법이든 방문자가 직면하는 제한 유형에 관계없이 모든 사람의 브라우징 요구 사항을 수용하는 것이 나중에 고려되어서는 안 됩니다. 그렇긴 하지만 포용적 디자인과 접근성 관행을 혼동해서는 안 됩니다. 그 이상이기 때문입니다.

포괄적인 웹 디자인과 접근 가능한 웹 디자인

포괄적인 웹 디자인이 접근 가능한 웹 디자인과 같다는 일반적인 오해가 있습니다. 디자인의 접근성과 포용성은 밀접한 관련이 있지만 동일하지는 않습니다. 포괄적인 웹 디자인은 장애가 있는 사람들이 디지털 제품을 쉽게 이해할 수 있도록 하는 접근성 방법을 수반하는 포괄적인 용어입니다. 포괄성은 기술적 제약, 언어, 인구통계학적 장벽 또는 사용자가 웹 페이지에 완전히 참여할 수 없도록 하는 모든 유형의 상황적 제한과 같은 다른 요소로 확장됩니다.

포용적 디자인에 대해 이야기할 때 우리는 실제로 작은 화면이나 느린 인터넷 연결을 사용하는 사람부터 팔 부상과 같은 일시적인 장애가 있는 사람에 이르기까지 모든 유형의 제한을 해결하는 보편적인 디자인을 의미합니다. 포용적 디자인은 접근 가능하고 사용하기 쉬운 솔루션을 제공하는 데 국한되지 않으며, 더 중요한 것은 사람들이 감사함을 느끼게 해야 한다는 것입니다.

간단히 말해서 포괄적인 웹 디자인은 결과 자체보다는 다양성을 위한 디자인에 접근하는 방법에 관한 것입니다.

포괄적인 웹 디자인의 필수 요소

포괄적인 디지털 제품을 구축하려면 디자이너는 모든 사용자의 요구와 상황을 충족하는 경험을 만들어야 합니다. 따라서 처음부터 포괄적인 디자인 사고 방식을 채택하는 것이 중요합니다.

염두에 두어야 할 포용적 디자인의 기둥을 살펴보겠습니다.

• 제외 유형을 식별합니다. 일을 시작하기 전에 제외 지점을 검색하고 새롭고 보다 포괄적인 옵션을 만들기 위한 출발점으로 활용하십시오. 디자이너가 개인이 소외감을 느끼는 방식과 이유를 파악하면 포괄적인 디지털 경험을 향한 로드맵을 만드는 것이 더 쉬워집니다.
  
• 사용자를 참여시킵니다. 모든 디지털 솔루션의 중심에는 사용자가 있어야 합니다. 디자이너가 다양한 사용자 그룹의 가치를 파악하려면 이들을 참여시키는 것이 우선되어야 합니다. 이는 디자이너가 잘 모르는 그룹의 경우 더욱 중요해집니다. 따라서 변화하는 요구 사항을 발견하고 감사하는 경험을 제공하기 위해 의견을 기반으로 아이디어를 테스트하기 위해 의견을 요청하십시오.

• 개인적인 편견에서 벗어나십시오. 다양한 배경과 커뮤니티의 사용자를 포함하여 공평한 솔루션을 설계하는 데 방해가 되는 개인적인 편견을 피하세요. 이렇게 하면 디자인 프로세스에서 제외되는 사람을 인식하는 데 도움이 됩니다.
• 팀과 함께 시작하십시오. 편견을 피하는 첫 번째 단계는 자신의 팀에서 시작하는 것입니다. 포용적인 인력을 보유하면 개인적인 편견을 깨닫고 이를 극복하는 데 도움이 됩니다. 다양한 배경과 능력을 가진 사람들로 구성된 디자인 팀은 더 넓은 범위의 사용자 과제를 해결하는 열쇠입니다.

포용성이 웹 디자인에서 필수 요소인 이유는 무엇입니까?

사용자의 요구는 다양합니다. 따라서 획일적인 접근 방식을 가정하면 재앙이 발생할 수 있습니다. 또한 웹 디자인의 포괄적인 개발을 통해 업계 리더로 자리매김하고 경쟁업체를 능가할 수 있습니다.

디지털 제품을 디자인할 때 포괄적인 사고 방식을 채택해야 하는 가장 중요한 이유를 분석해 보겠습니다.

1. 더 많은 잠재고객에게 다가가기

사회적 영향은 제쳐두고 포괄적인 웹 디자인은 비즈니스 관점에서도 중요합니다. 청중의 많은 부분을 제외하면 고객을 잃게 된다는 것은 말할 필요도 없습니다. 번역 옵션, 시각적 구성 요소 또는 음성 도우미와 같은 포괄적인 기능을 통해 더 많은 청중에게 다가가고 웹 사이트 디자인의 포용성을 높일 수 있습니다. 보편적으로 긍정적인 경험을 구축하는 데 계속 집중하면 사용자는 충성도로 보답할 것입니다.

2. 사람들은 당신에게 그것을 기대합니다

소셜 미디어 플랫폼은 사회적 불의에 스포트라이트를 비추었기 때문에 오늘날 사용자는 그 어느 때보다 더 사회적으로 인식하고 있습니다. 사람들은 기업이 포용성으로 전환하는 것이 옳은 일이기 때문에 이를 기대합니다. 그렇기 때문에 서로 다른 필요와 능력을 가진 사람들을 포함시키는 것이 비즈니스 결정 이상입니다.

사용자를 포함하기 위해 권한 내에서 모든 조치를 취하지 않으면 의도치 않게도 사용자가 제품에 참여하지 못하도록 제외됩니다. 사용자가 고객으로 전환할지 여부에 영향을 미치므로 지금은 다양성을 고려하여 디자인해야 할 때입니다.

3. 다른 문제를 동시에 해결

모든 웹사이트 방문자는 다양한 상황에 따라 능력의 한계뿐만 아니라 관심과 동기가 있습니다. 결과적으로 우리 모두는 웹 디자인과 상호 작용하는 동안 배제를 경험할 수 있습니다. 포용적 디자인이 서로 다른 제한을 가진 서로 다른 사용자를 유사한 방식으로 연결할 수 있는 곳입니다. 예를 들어 크고 깨끗한 텍스트는 시력이 좋지 않은 사람들에게 도움이 되지만 운전자와 이동 중에 탐색하는 다른 사람들에게도 도움이 됩니다.

4. 브랜드 인지도 구축

소비자는 자신의 삶을 더 쉽게 만들어주는 브랜드를 좋아하며 포괄적인 디자인 요소보다 그러한 의도를 나타내는 것은 없습니다. 인터넷 사용자는 집중 시간이 짧고 다양한 화면에서 더 많은 시간을 보냅니다. 따라서 손목 터널 증후군이나 컴퓨터 시각 증후군과 같은 문제는 우리가 생각하는 것보다 더 흔합니다. 이 사람들은 모든 장치에서 쉽게 탐색할 수 있는 방문 웹사이트를 선호합니다.

포용성을 염두에 두고 웹 사이트를 디자인하면 방문자는 제공하는 고객 여정에 대해 환영받고 편안함을 느낍니다. 그렇게 하면 귀하의 브랜드가 가장 먼저 떠오르고 경쟁 우위를 확보할 수 있습니다.

5. SEO 향상

검색 엔진은 더 나은 사용자 경험과 포함 기능에 최적화된 웹 페이지를 선호합니다. 접근성 모범 사례를 따르지 않으면 매력적인 웹 사이트가 SEO 측면에서 유리하지 않습니다.

많은 마케팅 담당자는 웹 사이트의 사용성과 접근성을 간과하는 경향이 있습니다. 그러나 이것은 검색 엔진이 웹 사이트를 인지하고 순위를 높이는 방탄 방법입니다. 검색 알고리즘에 맞춰 Google을 만족시킬 뿐만 아니라 방문자에게 최상의 페이지 경험을 제공합니다.

8 포괄적인 설계 모범 사례

웹 페이지가 공평한 온라인 경험을 제공하는지 평가하기 어렵기 때문에 더 포괄적으로 디자인하면 실망할 수 있습니다. 출발점을 선택해야 한다면 그것은 모든 가정을 버리고 평균적인 사용자가 아닌 모든 사용자를 선호하기로 결정하는 것입니다. 모든 사람이 소속감을 느끼게 하려면 디자이너로서 따라야 할 모범 사례를 함께 읽으십시오.

1. 잘 구조화되고 읽기 쉬운 콘텐츠 만들기

웹사이트 콘텐츠는 콘텐츠 마케팅 전략의 필수적인 부분입니다. 읽기 쉽고 세심하게 구성된 콘텐츠는 방문자의 참여를 유지하는 데 핵심입니다.

인지 또는 시각 장애가 있는 방문자가 읽을 수 있는 구조를 선택하십시오. 또한 콘텐츠를 통해 사용자를 안내하고 마찰 지점을 제거하는 논리적 순서를 포함해야 합니다.

이러한 단계 외에도 사용자가 콘텐츠와 상호 작용하는 방식에 차이를 만드는 간단한 변경 사항이 있습니다. 다음은 읽기 쉽고 의미 있게 순서가 지정된 콘텐츠에 대한 몇 가지 주요 지침입니다.

• 콘텐츠를 쉽게 읽고 소화할 수 있도록 짧은 문장으로 간단한 언어를 사용하세요.
• 긴 텍스트 블록을 더 작은 섹션으로 나누고 제목, 글머리기호 목록, 이미지를 사용하여 시각 또는 읽기 장애가 있는 사용자를 지원합니다.
• 방문자가 먼저 액세스해야 하는 핵심 콘텐츠에서 주의를 분산시키는 콘텐츠를 숨기는 아코디언과 같은 요소 포함
• 콘텐츠와 배경 사이에 적절한 양의 대비를 사용해야 합니다.

2. 레이아웃을 명확하고 단순하게 유지

계층 구조는 콘텐츠와 마찬가지로 레이아웃에서도 중요합니다. 명확하고 미니멀한 디자인은 결코 유행을 타지 않으며 방문자는 복잡한 탐색과 혼란스러운 정보가 있는 지저분한 디자인을 좋아하지 않기 때문에 그럴만 한 이유가 있습니다. 명확하고 단순한 레이아웃은 직관적이고 사용자 친화적이며 시각적으로 매력적인 인터페이스로 변환됩니다.

방문자가 가장 관련성이 높은 정보에서 벗어나지 않고 유용성을 강조하는 웹 사이트의 핵심 기능을 구축했는지 확인하십시오. 그런 다음 필요한 구성 요소를 추가하여 가치를 보여주고 더 많은 참여를 유도할 수 있습니다.

3. 일관성 확보

디자이너로서 여러분은 이미 일관성이 여러분이 만드는 모든 디지털 제품에 필수적이라는 것을 알고 있습니다. 이는 다양한 청중을 포함하도록 디자인할 때 더욱 중요합니다. 일관되지 않은 디자인은 일반적으로 사용자를 혼란스럽게 하고 웹사이트를 떠나게 합니다. 인지 장애가 있는 사람들은 이치에 맞지 않는 복잡한 인터페이스를 통해 어려움을 겪기 때문에 더욱 어렵습니다.

웹 사이트 탐색의 일관성은 사용 용이성을 향상시키고 더 쉽고 빠른 전환을 가져올 수 있습니다. 그러나 오해하지 마십시오. 일관성이 예측 가능성을 의미하지는 않습니다. 따라서 가능한 한 창의력을 유지하면서 불만을 유발하는 요소만 제거해야 합니다.

4. 이미지에 대체 텍스트 사용

노련한 마케터는 감정을 전달하면서 이미지, 비디오 또는 인포그래픽과 같은 시각적 요소가 주의를 끄는 방법을 알고 있습니다. 그러나 대체 텍스트와 캡션을 각각 포함하지 않으면 웹사이트에 이미지나 동영상을 포함해도 소용이 없습니다.

스크린 리더는 시각 장애가 있는 사람들에게 이미지를 설명하기 위해 대체 텍스트에 의존합니다. 세심하게 제작된 간단한 설명은 방문자에게 이미지의 내용을 알려 오해를 방지하는 데 도움이 됩니다.

이미지에 대한 대체 텍스트를 작성할 때 고려해야 할 몇 가지 중요한 측면은 다음과 같습니다.

• 사용자가 가장 중요한 정보에 빠르게 액세스할 수 있도록 그림에서 일어나는 일을 간략하지만 정확하게 설명합니다.
• 이미지가 주변 환경과 어떻게 관련되어 있는지 포함해야 합니다.
• 이미지가 대부분 장식적인 경우 스크린 리더가 해당 이미지를 건너뛸 수 있음을 알 수 있도록 빈 <alt> 필드를 사용합니다.

또한 청각 장애가 있는 사람들이 비디오 콘텐츠를 이해할 수 있도록 비디오 콘텐츠에 대한 캡션을 포함하는 것을 잊지 마십시오. 사용자가 메시지를 완전히 이해할 수 있도록 웹사이트에 있는 모든 동영상에 캡션을 제공해야 합니다. 마지막으로, 무엇을 하든 사용자 인지 부하를 증가시키므로 동영상을 자동 재생에 넣지 마십시오.

5. 포괄적인 카피 선택

많은 마케터들이 저지르는 실수는 비주얼을 위해 카피를 소홀히 하는 것입니다. 그러나 말은 우리 자신을 표현하고 연결을 만드는 도구입니다. UX 디자인도 마찬가지입니다. 더 많은 청중에게 개방하려면 포괄적이고 간결한 카피가 필요합니다. 포괄적인 카피를 구현하기 위한 몇 가지 전술을 검토해 보겠습니다.

• 간단한 단어를 선택하고 복잡한 용어나 불필요한 전문 용어는 피하십시오. 그렇게 하면 학습 및 인지 장애가 있는 사람들이 메시지를 이해할 수 있습니다.
• 웹사이트에서 복잡한 아이디어나 용어를 사용해야 하는 경우 이미지나 동영상을 사용하여 장애가 있거나 원어민이 아닌 사용자를 위해 단순화하는 것이 좋습니다.
• 온라인 양식에 포함하는 사본에 각별히 주의하십시오. 리드 제네레이션에서 가장 민감하면서도 소홀히 여겨지는 부분 중 하나입니다. 질문해야 할 질문과 그 방법을 알아보고 제공하는 답변 옵션에 유의하십시오.
• 성별 대명사 및 성별에 민감한 용어(예: "신사 숙녀 여러분")를 제외하여 모든 사용자가 정확하게 표현되었다고 느낄 수 있도록 합니다.

6. 현명한 색상 선택

색상은 감정을 불러일으키고 보는 사람의 관심을 끌기 때문에 디자인에서 큰 역할을 합니다. 문제는 모든 사용자가 동일한 방식으로 색상을 인식하지 못하기 때문에 한계가 있다는 것입니다.

예를 들어, 적록 색맹인 사람은 녹색과 빨간색 음영을 보는 데 어려움을 겪습니다. 또한 문화적 배경이 다른 방문자는 색상을 다르게 해석하여 콘텐츠 이해에 영향을 미칠 수 있습니다. 예를 들어 시력이 좋지 않거나 색맹인 방문자는 데이터를 색상 차이 형식으로 표시하는 원형 차트를 이해하는 데 어려움을 겪을 수 있습니다.

방문객들 사이에서 이러한 고통을 피하기 위해 무엇을 할 수 있습니까? 유일한 시각적 신호로 색상에 의존하지 말고 레이블, 아이콘 또는 굵은 텍스트와 같은 요소를 통합하십시오. 또한 너무 대비되는 색상을 사용하거나 유사한 색상을 나란히 배치하는 것은 피하십시오. 이러한 작은 것들은 사용자가 웹 사이트를 편안하게 사용하는 동시에 다양한 잠재 고객 그룹 간의 차이점을 연결합니다.

어디서부터 시작해야 할지 모르겠다면 접근 가능한 색상 조합을 생성하는 Color Safe 또는 WebAIM과 같은 도구를 사용할 수 있습니다.

7. 키보드 접근성을 잊지 마세요

웹 사이트를 디자인할 때 테스트해야 할 핵심 구성 요소 중 하나는 키보드 접근성입니다. 키보드 탐색을 위해 웹 사이트를 최적화하지 않으면 시각 또는 운동 장애가 있는 방문자에게 어려움을 줄 수 있습니다. 키보드는 웹 사이트에 액세스하고 해당 구성 요소와 상호 작용할 수 있는 유일한 수단일 수 있음을 기억하십시오.

그러나 키보드 탐색을 위한 최적화는 무엇을 의미합니까? 왼쪽에서 오른쪽, 위아래로 이동하여 키보드만 사용하면서 웹 페이지를 탐색할 수 있는지 확인하십시오.

Tab을 사용하여 탐색 프로세스가 얼마나 쉬운지 또는 어려운지 테스트하는 것을 잊지 마십시오. Tab 키는 키보드만 사용하는 방문자가 웹 페이지를 탐색하는 방법이기 때문에 키보드 접근성에도 똑같이 중요합니다. 이 옵션의 기본 아이디어는 Tab 키를 클릭하여 페이지의 모든 요소를 ​​선택할 수 있는 기능을 제공하는 것입니다.

포용성의 중요성

수년 동안 웹 디자인은 관심을 끄는 매력적이고 다채롭고 평범하지 않은 웹 페이지를 만드는 것이었습니다. 이러한 특성은 여전히 ​​관련이 있지만 방문자에게 진정으로 즐거운 웹 경험을 제공하기에는 부적절합니다.

눈길을 끄는 웹사이트를 만든다고 잠시 상상해 보세요. 포괄적인 웹 디자인을 염두에 두고 구축하지 않으면 많은 사용자가 액세스하지 못하게 됩니다. 최종 결과는 모든 장치의 모든 사용자가 잘 받아들이는 보편적인 디자인이어야 합니다.

귀하의 웹사이트를 모든 방문자를 위한 포용적이고 평등한 공간으로 바꾸는 것은 말처럼 위협적이지 않습니다. 성공하려면 먼저 다양한 청중 그룹이 디지털 제품에 참여할 때 직면하는 문제를 확실하게 이해해야 합니다.

유용하고 가치 있는 웹 사이트를 만들려면 이 가이드에서 공유하는 모범 사례를 따르십시오. 그리고 무엇을 하든 포용적이고 고객 중심적인 디지털 경험에 대한 끊임없이 진화하는 청중의 요구를 따라가는 것을 멈추지 마십시오.