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

웹 사이트 사용성은 웹 사이트를 사용하고 상호 작용하는 용이성을 설명하는 광범위한 용어입니다. 그러나 웹사이트를 사용할 수 있도록 디자인할 때 기억해야 할 중요한 점은 모든 사람이 동일한 방식이나 동일한 상황에서 웹사이트에 참여하는 것은 아니라는 점입니다.

"보통" 또는 "이상적인" 사용자를 위한 웹사이트를 디자인하면 현실적으로 다른 사람들에게는 불쾌하거나 어렵거나 사용 불가능한 인터페이스가 만들어질 수 있습니다.

World Wide Web Consortium과 지방 정부에서 제공하는 지침은 디자이너가 사용성 및 접근성과 관련하여 격차를 줄이는 데 도움이 되었습니다. 그러나 이것이 반드시 웹사이트를 완전히 포함하는 것은 아닙니다.

다음 포스트에서는 인클루시브 디자인이 의미하는 바, 웹 디자인에서의 가치, 인클루시브 인터페이스와 인터랙션을 디자인할 때 고려해야 할 사항에 대해 알아볼 것입니다.

웹 접근성을 위한 디자인 방법 알아보기

인클루시브 디자인이란?

포괄적인 웹 디자인은 웹사이트에서 편견과 가정을 제거하여 사용자가 장애, 인구 통계 또는 기타 일시적 또는 영구적인 상황으로 인해 소외된 느낌을 받지 않도록 합니다.

접근 가능한 웹 디자인과 UX 디자인은 모두 포괄적인 웹 사이트의 중요한 구성 요소입니다. 접근 가능한 디자인은 장애인 및 기타 장애가 있는 사람들의 진입 장벽을 제거하는 프로세스입니다. UX 디자인은 실제 사용자가 웹사이트에 참여하는 방식을 테스트하고 검증하는 데이터 기반 디자인 접근 방식입니다.

이 때문에 웹 사이트를 완전히 사용하거나 웹 사이트에 만족하지 못하는 사용자의 장애가 엄밀히 말하면 사용자의 장애가 아니라 포괄적인 디자인에서 고려해야 할 사항이 많습니다. 웹 디자이너는 또한 독점적인 사용자 집합을 위한 경험을 제작함으로써 문제에 직면할 수 있습니다.

따라서 웹 디자이너는 다음 요소를 고려해야 합니다.

• 시력, 청력 또는 손재주와 관련된 신체 장애
• 인지 또는 언어에 영향을 미치는 정신 장애
• 사용자가 제품에 완전히 참여하지 못하게 하는 상황적 제한
• 하드웨어, 인터넷 연결 및 컴퓨터 활용 능력과 같은 기술적 제약
• 언어 및 지리적 장벽
• 연령, 인종, 성별과 같은 인구통계학적 차이
• 사회경제적 차이

결론: 포괄적인 디자인은 궁극적으로 유니버설 디자인으로 변환됩니다.

웹 디자이너는 포괄적인 디자인의 접근성 측면을 처리하기 위해 다양한 도구를 사용할 수 있습니다. 예를 들어, WordPress 접근성 도구, 웹 접근성 검사기, WAI-ARIA 지침 등을 통해 접근 가능한 디자인과 구현을 더 쉽게 수행할 수 있습니다.

그러나 포괄적인 디자인을 사용하려면 웹에서 사용자가 직면할 수 있는 제한 사항에 대한 더 큰 이해가 필요합니다. 웹사이트를 스캔하고 가능한 가장 다양하고 공평한 경험을 만들었는지 확인하는 도구는 없습니다. 직접 구현하고 확인하는 방법을 배워야 합니다.

포괄적인 웹 디자인이 중요한 이유

웹 디자이너가 구축하는 모든 웹 사이트에 접근성과 포괄성을 포함해야 하는 데에는 여러 가지 이유가 있습니다. 비포함 웹사이트가 모든 사람에게 어떤 피해를 주는지 먼저 살펴보겠습니다.

비 포괄성의 단점

2021년 WebAIM은 스크린 리더 사용자 설문조사 #9의 결과를 발표했습니다. 설문 응답자의 7.7%는 온라인 상태일 때 스크린 리더를 사용해야 한다고 말했습니다.

오늘날 인터넷 접근성 현황에 대해 어떻게 생각하느냐는 질문에는 39.3%만이 이전보다 접근성이 좋아졌다고 답했습니다. 42.3%는 달라진 것이 없다고 생각했고 18.5%는 더 나빠졌다고 답했다.

CivicActions의 Mike Gifford에 따르면 인구의 7.7% 이상이 접근 불가능을 경험하고 이러한 감정을 공유할 수 있습니다.

“장애의 조합과 사람들이 장벽을 극복하는 방법은 매우 다양합니다. 윤리적으로 가장 불리한 사용자를 위한 구축에 최우선 순위가 부여되어야 합니다. 불행히도 새롭고 화려함을 향한 끊임없는 노력으로 우리는 정기적으로 동료 시민의 10-20%를 배제하고 있습니다.”

미국 변호사 협회(American Bar Association)에 따르면 2017년에서 2020년 사이에 연방 법원에 제기된 미국 장애인법 타이틀 III 소송은 8,000건이었습니다. Accessibility.com에 따르면 이 수치는 2021년 한 해에만 14.3% 증가한 2,352건입니다.

웹사이트에서 배제되었다고 느낄 수 있지만 법적 대응책이 없는 다른 사람들이 있습니다. 예를 들어, World Data Lab은 11억 명의 인터넷이 부족한 사람들이 있다고 말합니다. 어떤 경우에는 모바일 데이터 요금제를 감당할 수 없음을 의미합니다. 다른 경우에는 가능하지만 사용할 데이터가 충분하지 않아 리소스가 많은 웹 사이트에서 시간을 보낼 여유가 없습니다.

고려해야 할 노인 인구도 있습니다. Pew Research Center에 따르면 인터넷을 사용하는 노인의 수가 최근 몇 년 동안 증가했습니다. 하지만 TechCrunch는 노인의 약 50%가 새로운 디지털 기술을 설정하고 사용하는 데 도움을 줄 누군가가 필요하다고 보고합니다. 또한 실리콘 밸리 바로 옆에 있는 샌프란시스코 시의 40% 노인은 디지털 문맹입니다.

귀하의 웹사이트가 소송의 대상이 아니더라도 비포함 디자인으로 인해 방문자의 20% 이상을 잃는 것이 브랜드의 장기적 생존 가능성에 어떤 영향을 미치는지 고려하십시오. 웹 사이트가 환영받지 않거나 사용할 수 없기 때문에 단순히 사라질 청중의 거대한 부분입니다.

포괄성의 장점

포괄적인 웹 사이트를 디자인할 때 모든 사람이 웹 사이트에 완전히 참여하고 소외감을 느끼지 않도록 디자인해야 합니다. 인터넷이 포용적인 곳이 되면 모두가 승리합니다.

포괄적인 웹 디자인은 더 나은 제품 디자인으로 이어집니다.

웹 사이트에서 모바일 앱 및 그 사이의 모든 것에 이르기까지 포괄적인 디자인은 디자이너가 훌륭하고 유용하며 공감하는 디자인의 기본으로 돌아가도록 합니다.

브랜드는 더 많은 청중에게 다가갑니다.

이상적인 사용자뿐만 아니라 모든 사람에게 보편적으로 긍정적인 경험을 우선시하는 브랜드는 포용성과 형평성을 중시하는 충성도가 높은 사용자 기반을 끌어들일 것입니다.

사용자는 포괄적인 웹사이트와 더 나은 상호 작용을 합니다.

오늘날 사람들은 손목 터널 증후군, 컴퓨터 시각 증후군, 인터넷 중독 장애와 같은 문제가 너무나 흔한 문제로 스크린 앞에서 너무 많은 시간을 보냅니다. 포용적이고 윤리적인 디자인은 사용자가 마음과 몸 모두에서 더 나은 느낌을 받을 수 있도록 도와줍니다.

포괄적인 웹 디자인은 검색 결과에서 웹 사이트의 순위를 높이는 데 도움이 됩니다.

Google은 몇 년 전에 검색 알고리즘을 업데이트하여 최고의 페이지 경험을 만드는 데 필수적인 4가지 요소를 성능(속도) 접근성, 모범 사례(디자인 및 코드) 및 SEO(예: 대체 텍스트)로 명명했습니다. 포괄적인 디자인은 이들 각각에 기여합니다.

포괄적인 웹 디자인 페르소나를 만드는 방법

종종 디자이너는 웹 사이트 프로젝트를 시작할 때 가상의 페르소나를 생각해냅니다. 이것은 그들이 웹사이트를 구축하는 최종 사용자를 시각화하고 관련시키는 데 도움이 됩니다. 또한 특정 사용자가 웹사이트에 참여하는 방식을 이해하는 데 도움이 됩니다.

웹 디자인 프로세스에 포괄성을 포함할 때 사용자 페르소나 설명을 어느 정도 조정해야 합니다. 일반적인 사용자 페르소나는 다음과 같이 분류됩니다.

• 이름
• 인구통계(예: 연령, 성별, 직업 등)
• 인격
• 목소리
• 목표
• 동기
• 좌절
• 두려움

포괄적인 사용자 페르소나는 또한 다음을 포함해야 합니다.

능력: 이것은 포괄성의 접근성 구성 요소입니다. 일부 사용자가 웹사이트를 사용하고 참여하는 방식이 신체적으로나 인지적으로 얼마나 제한될 수 있는지 예상해야 합니다.

적성: 얼마나 많은 사용자가 온라인 상태인지에 대한 데이터를 보면 사용자 중 일부가 디지털에 익숙하지 않을 수 있음을 알게 될 것입니다. 기본 구조 및 레이아웃에서 벗어나 충분한 컨텍스트(예: 연락처 양식의 레이블)를 제공하지 않으면 이러한 사용자의 경험에 해로울 수 있습니다.

태도: 이것은 웹사이트를 안전하지 않은 환경으로 인식할 수 있는 사용자를 나타냅니다. 개인 정보 보호에 대해 지나치게 염려하거나 맬웨어와의 만남에 대해 걱정하는 경우, 이러한 유형의 두려움은 인식 가능하고 신뢰할 수 있는 보안 및 개인 정보 보호 기능으로 해결해야 합니다.

액세스: 사용자는 웹에 대한 액세스를 제한하기 위해 인터넷이 열악할 필요가 없습니다. 예를 들어 유네스코에 따르면 세계 인구의 절반 이상이 집에서 인터넷에 접속할 수 있습니다. 이것은 그들이 온라인에 접속할 수 없다는 것을 의미하는 것이 아니라 단지 도서관이나 인터넷 카페에 가는 것과 같이 온라인에 접속할 수 있는 다른 방법을 찾아야 한다는 것을 의미합니다. 따라서 연결, 하드웨어, 소프트웨어 및 위치도 모두 액세스에 영향을 줄 수 있습니다.

현지화: 모든 사용자가 같은 국가에 살고 있고 같은 문화권에서 왔으며 같은 언어를 사용한다고 가정하는 것은 결코 안전하지 않습니다. 따라서 포괄적인 사용자 페르소나를 만들 때 이러한 차이점을 해결해야 합니다.

인클루시브 디자인의 7가지 원칙

포괄적인 디자인이 작동하려면 웹 디자이너는 가정, 선입견, 모든 사용자의 이익보다 일반 사용자의 편애를 제거해야 합니다. 이를 성공적으로 수행하려면 설계자는 다음 원칙을 따라야 합니다.

1. 유연성

웹 디자인에서 한 가지 크기는 없습니다. 그렇다고 해서 사용자마다 다른 웹사이트나 방문 페이지를 구축해야 하는 것은 아닙니다. 그러나 이는 다른 사용자 경험 간의 격차를 줄이는 데 도움이 된다고 생각되는 경우 UI에 추가 기능을 추가하는 것을 의미합니다.

예를 들어 포함된 파일 아래에 비디오의 스크립트를 포함하는 것이 좋습니다. 이렇게 하면 비디오를 듣거나 보고 싶지 않은 사용자가 텍스트를 읽을 수 있습니다.

2. 단순성

미니멀리즘은 지속적인 웹 디자인 트렌드이며 그럴만한 이유가 있습니다. 시각적으로 더 즐거운 인터페이스를 만들기 때문이 아니라 미니멀리즘과 단순함이 더 직관적인 디자인을 위한 길을 열어주기 때문입니다.

이에 접근하는 가장 좋은 방법은 웹사이트를 MVP(Minimum Viable Product)처럼 취급하는 것입니다. 유용하고 가치 있는 제품으로 만드는 핵심 기능을 구축하십시오. 그런 다음 필요한 곳에만 추가 요소를 추가하고 모든 사람의 경험에 가치를 부여하십시오.

3. 일관성

일관성이란 웹사이트가 예측 가능하거나 지루해야 한다는 의미가 아닙니다. 일관성을 유지하면서 여전히 창의적일 수 있습니다.

디자인의 일관성은 누구나 혜택을 받습니다. 동일한 웹사이트에서 다른 방식으로 제공되는 동일한 요소 또는 기능으로 인해 발생하는 좌절과 혼란을 제거합니다. 또한 대부분의 웹에서 웹사이트 탐색과 같은 핵심 요소를 처리하는 방식과 일관성을 유지하면 웹사이트의 유용성을 높이고 전환 시간을 단축할 수 있습니다.

4. 지각

사람들 이 웹사이트에 참여하는 방식을 고려하는 것 외에도 디자이너는 웹사이트에 참여하는 방식을 고려해야 합니다. 예를 들어, 이미지가 지배하는 웹사이트는 시각적 학습자가 아닌 사용자가 콘텐츠를 소화하기 매우 어려울 수 있습니다.

웹 사이트에 대한 콘텐츠를 모을 때 건전한 혼합이 있는지 확인하십시오. 한 가지 유형의 콘텐츠(예: 모든 텍스트 및 이미지 없음)만 있는 경우 방문자 중 일부는 이해도나 사용 편의성 면에서 불리할 수 있습니다.

5. 자본

웹 디자인의 형평성은 공평한 결과를 나타냅니다. 즉, 방문자가 누구인지에 관계없이 모든 방문자가 작업을 쉽게 완료할 수 있어야 합니다.

여기에서 UX 디자인 프로세스가 유용합니다. 사용자의 목표와 목표를 완료하는 데 필요한 사항에 대한 직접적인 사용자 입력을 얻는 것은 디자이너가 모든 사람을 위한 마찰 없는 상호 작용과 사용자 여정을 만드는 데 도움이 됩니다.

예를 들어 이미지 슬라이더와 같은 UI 구성 요소를 고려하십시오. 그것을 디자인하는 포괄적인 방법은 자동 슬라이드 기능을 비활성화하는 것입니다. 그런 다음 모든 사용자가 슬라이더와 속도를 제어할 수 있도록 스와이프 및 클릭 기능을 모두 포함합니다.

6. 예방

포괄적인 디자인은 인적 오류를 완화합니다. 즉, 가능한 한 많은 오류를 방지하는 동시에 발생하는 오류에 대해 관대하고 유용한 응답을 제공하도록 UI를 설계해야 합니다. 오류와 관련된 좌절이나 수치심을 줄임으로써 포괄적인 디자인은 방문자와의 신뢰를 구축하는 데 더 큰 역할을 합니다.

이 특정 원칙은 참여 시점에서 가장 자주 적용됩니다. 예를 들어 버튼은 항상 보고 클릭할 수 있을 만큼 충분히 크게 디자인되어야 합니다.

문의 양식의 오류 메시지는 또 다른 좋은 예입니다. 모든 사람이 읽을 수 있는 색상과 크기의 인라인 오류 메시지를 표시하면 오류가 반복될 가능성을 줄일 수 있습니다. 모호한 오류 메시지나 프로세스에서 너무 늦게 발생하는 오류 메시지를 제공하는 것보다 더 도움이 되는 문의 양식도 있습니다.

7. 숙박

웹사이트가 오프라인 비즈니스와 같은 방식으로 접근성 소송의 대상이 되는 이유 중 하나는 웹사이트가 "공공 시설의 장소"로 간주되었기 때문입니다. 모든 사람이 웹사이트를 읽고 탐색하고 참여할 수 있도록 하는 것 외에도 포괄적인 디자인은 방문자에게 어느 정도의 편안함을 보장합니다.

편안함은 충분한 공간, 예측 가능한 레이아웃 등 많은 사람들에게 많은 것을 의미할 수 있습니다. 또한 포괄적인 디자인은 디자이너에게 사용자가 웹사이트 콘텐츠를 얼마나 편안하게 느낄지 고려하도록 요청합니다.

예를 들어, 대상 고객을 반영하는 다양한 이미지를 사용하면 사용자가 몇 번이고 다시 본 일반 스톡 이미지보다 더 환영하는 환경을 만들 수 있습니다. 청중의 일부만 이해할 수 있는 전문 용어로 가득 찬 카피 대신 간단한 카피를 사용하는 경우에도 마찬가지입니다.

결론

포괄적인 웹 디자인은 UX 디자인, 접근 가능한 디자인, 반응형 디자인과 같은 분야를 포함하는 포괄적인 용어입니다. 그러나 포괄적인 디자인은 최종 결과가 보편적으로 사용 가능하고 호평을 받는 웹 사이트가 되도록 한 단계 더 나아갑니다.

이 웹 디자인 접근 방식은 장애나 장애를 넘어 다양한 사람들이 웹 사이트에 참여할 때 직면하는 문제에 대한 확실한 이해를 필요로 합니다.

포괄성을 웹 디자인 프로세스에 통합하는 가장 좋은 방법은 먼저 WordPress 및 Elementor의 접근성 기능과 같이 이를 구현하는 데 도움이 되는 도구로 작업하고 있는지 확인하는 것입니다. 그런 다음 능력, 적성 및 액세스 권한과 같은 포괄적인 요소로 사용자 페르소나 템플릿을 업데이트합니다. 마지막으로 사용자 경험과 웹을 사용할 때 직면하는 일반적인 문제에 대해 자세히 알아볼 때 프로세스를 최신 상태로 유지하십시오.