가장 좋아하는 웹사이트나 앱을 떠올려 보세요. 이 웹사이트 또는 앱이 가장 좋아하는 이유는 무엇인가요? 이제 싫어하는 웹사이트나 앱이 무엇인지 생각해 보세요. 무엇이 마음에 들지 않나요? 사용자가 디자인과 상호작용하는 방식, 웹사이트 및 앱에서의 사용자 경험은 다를 수 있습니다.
이러한 경험은 일과 시간, 사용한 기기 유형, 전날 밤 충분한 수면을 취했는지, 몸의 컨디션이 좋지 않은지, 보조 기술을 사용하는지 여부 등에 따라 달라질 수 있습니다. 전 세계 80억 명에 달하는 사람들이 디자인을 사용하고 경험할 수 있는 가능성은 무한합니다.
포용적 디자인
사용자의 잠재적인 니즈를 한 번에 모두 충족하려면 어떻게 해야 할까요? 포괄적인 디자인을 입력하세요. 포용적 디자인은 포용성, 사용성, 접근성을 하나로 연결하는 인간 중심의 접근 방식을 활용합니다.
가능한 한 많은 사람이 사용할 수 있는 단일 디자인에 중점을 둔 범용 디자인과 달리 포용적인 디자인 원칙은 특정 개인 또는 사용 사례에 맞게 디자인한 후 다른 사람에게도 이를 적용하는 데 중점을 둡니다.
다음과 같은 접근성에 중점을 둔 포용적인 디자인 원칙 7가지가 있습니다.
- 비슷한 환경 제공: 모두가 동일한 경험을 할 수 있도록 인터페이스를 제공하여 사용자가 콘텐츠의 품질을 저하시키지 않으면서 자신의 필요에 맞는 방식으로 작업을 완료할 수 있도록 합니다.
- 상황 고려: 모든 상황에서 사용자에게 가치 있는 경험을 제공하는 인터페이스가 필요합니다.
- 일관성 유지: 익숙한 규칙을 사용하고 논리적으로 적용합니다.
- 제어 권한 부여: 사용자가 원하는 방식으로 콘텐츠에 액세스하고 상호작용할 수 있도록 합니다.
- 제안 선택: 사람들이 작업을 완료할 수 있는 다양한 방법을 제공하는 것이 좋습니다. 특히 복잡하거나 표준에 맞지 않는 방법은 더욱 그렇습니다.
- 콘텐츠 우선순위 지정: 콘텐츠 및 레이아웃 내에서 이러한 요소를 원하는 순서대로 정렬하여 사용자가 핵심 작업, 기능, 정보에 집중할 수 있도록 합니다.
- 가치 창출: 기능의 목적과 중요성을 고려하고 기능별로 사용자 환경을 개선하는 방법을 고려합니다.
캐릭터
새로운 디자인이나 기능을 개발할 때 많은 팀이 사용자 캐릭터에 의존하여 프로세스 진행을 안내합니다. 캐릭터는 디지털 제품을 사용하는 가상의 캐릭터로, 보통 정량적 및 정성적 사용자 연구를 기반으로 합니다.
캐릭터는 또한 설계 및 개발 프로세스 전반에 걸쳐 이러한 기능을 테스트하고 우선순위를 지정할 수 있는 빠르고 저렴한 방법을 제공합니다. 전략을 조정하고 특정 사용자 그룹에 중점을 둔 목표를 만드는 데 도움이 되도록 대화에 실질적인 고려사항을 추가하여 사이트 구성요소와 관련된 의사 결정을 내리는 데 도움이 됩니다.
장애 통합
"사람들은 저마다 다릅니다. 경험을 통해 말씀드릴 수밖에 없습니다. 청각장애인을 한 명 만났다면 청각장애인을 한 명만 만난 것이지요, 우리 모두가 아니라는 셈입니다."
ID24 대담의 메릴 에반스, Deaf Tech: Travel Through Time from Past to Future
장애인을 캐릭터에 통합할 때 캐릭터를 포용적인 디자인 도구로 사용할 수 있습니다. 이를 수행하는 여러 가지 방법이 있습니다. 장애가 있는 캐릭터를 만들거나 기존 사용자 캐릭터에 장애를 추가하며 상황에 따른 장애, 일시적, 영구적인 장애의 역동적인 현실을 반영하는 캐릭터 스펙트럼을 만들 수도 있습니다.
어떤 방식으로 장애인을 캐릭터에 포함시키든, 장애를 가진 사람들이 실제 사람이나 고정관념을 바탕으로 해서는 안 됩니다. 캐릭터는 결코 사용자 테스트를 대체할 수 없습니다.
- 이름: Jane Bennet
- 나이: 만 57세
- 위치: 영국 에섹스
- 직업: UX 엔지니어
- 장애: 젊은 발병 파킨슨병 (YOPD)으로 인한 손 떨림
- 목표: 음성 텍스트 변환 입력을 사용하여 코드 제안을 더 쉽게 추가하고, 최소한의 키 입력으로 온라인에서 자전거 장비를 찾습니다.
- 불편: 키보드 전용 지원이 부족한 웹사이트, 터치 상호작용을 위한 작은 영역이 있는 디자인을 위한 앱
UX 엔지니어인 Jane은 회사 사이트의 관련성을 유지하는 데 필수적인 페이지를 디자인하고 만듭니다. 하루 종일 많은 팀원을 지원하고 있습니다. 기술 화재를 진압하는 여왕이기도 하고 예기치 못한 일이 발생하면 모두가 부서를 찾아갑니다.
떨림으로 인해 섬세한 운동 능력을 잃으면 마우스를 사용하기가 점점 더 어려워지고 있습니다. 웹 탐색을 위해 꾸준하게 키보드를 더 많이 사용하고 있습니다. Jane은 항상 체력 강화에 힘쓰고 있습니다. 로드 레이싱과 BMX를 좋아합니다. 그 결과 작년에 영병 파킨슨병을 진단받았을 때 더 큰 충격을 받았습니다.
장애 시뮬레이터
장애 시뮬레이터를 사용하여 캐릭터를 에뮬레이션하거나 보완할 때는 각별히 주의하세요.
장애 시뮬레이터는 동정이나 공감을 형성할 수 있다는 점에서 양날의 검입니다. 개인, 시뮬레이터가 사용되는 맥락 및 기타 제어할 수 없는 여러 요인에 따라 달라질 수 있습니다. 많은 접근성 지지자들은 장애 시뮬레이터 도구를 사용하는 것을 반대하며 장애인이 만든 영화, 데모, 튜토리얼 및 기타 콘텐츠를 찾아보고 이들의 경험을 직접 배울 것을 권장합니다.
"시뮬레이션 활동이 사람들의 마음과 머리로 알 수 있는 가장 중요한 이해에는 영향을 미치지 않는다는 점을 솔직히 밝힐 필요가 있다고 생각합니다. 실명이 우리를 정의하는 특성은 아닙니다. 실명에 대한 오해와 낮은 기대가 가장 큰 장애물입니다.
이러한 오해는 우리가 온전히 참여할 수 없게 만드는 인위적인 장벽을 만들어 주며, 이러한 잘못된 한계는 우리의 일을 방해하는 요인으로 작용합니다."
마크 리코보노, 전미 시각장애인 연합회 회장
접근성 휴리스틱
캐릭터와 디자인을 구축할 때 워크플로에 heuristics을 추가하는 것이 좋습니다. 휴리스틱은 1990년 Jakob Nielsen과 Rolf Molich가 소개한 상호작용 설계의 간단한 규칙입니다. 이 10가지 원칙은 수년간의 사용성 엔지니어링 경험을 바탕으로 개발되었으며 이후 설계 및 인간-컴퓨터 상호작용 프로그램에 사용되어 왔습니다.
2019년을 맞이하여 Deque의 디자인팀은 디지털 접근성에 중점을 둔 새로운 휴리스틱을 만들어 공유했습니다. 연구 결과에 따르면 접근성을 디자인 프로세스의 일부인 경우 웹사이트나 앱의 모든 접근성 버그 중 최대 67% 를 피할 수 있다고 합니다. 이는 코드를 한 줄도 작성하기도 전에 엄청난 영향을 미칠 수 있습니다.
기존의 휴리스틱 세트와 유사하게 설계를 계획할 때 고려해야 할 10가지 접근성 휴리스틱이 있습니다.
- 상호작용 방법 및 모달리티: 사용자가 자신이 선택한 입력 방법 (예: 마우스, 키보드, 터치 등)을 사용하여 시스템과 효율적으로 상호작용할 수 있습니다.
- 내비게이션 및 길 찾기: 사용자는 시스템 내에서 쉽게 탐색하고, 콘텐츠를 찾고, 항상 자신의 위치를 결정할 수 있습니다.
- 구조 및 의미 체계: 사용자는 각 페이지의 콘텐츠 구조를 이해하고 시스템 내에서 작동하는 방법을 이해할 수 있습니다.
- 오류 방지 및 상태: 대화형 컨트롤에는 실수를 방지하는 데 도움이 되는 지속적이고 의미 있는 안내가 있으며, 문제가 무엇이고 오류가 반환될 때마다 해결 방법을 알려주는 명확한 오류 상태를 사용자에게 제공합니다.
- 대비 및 가독성: 사용자가 텍스트와 기타 의미 있는 정보를 쉽게 구별하고 읽을 수 있습니다.
- 언어 및 가독성: 사용자가 콘텐츠를 쉽게 읽고 이해할 수 있습니다.
- 예측 가능성 및 일관성: 사용자가 각 요소의 목적을 예측할 수 있습니다. 각 요소가 전체 시스템과 어떤 관련이 있는지 명확하게 알 수 있습니다.
- 시기 및 보존: 사용자는 작업을 완료할 충분한 시간을 갖게 되며 시간 (즉, 세션)이 소진되더라도 정보를 잃지 않습니다.
- 움직임 및 깜박임: 사용자는 페이지에서 움직이거나 플래시되거나 애니메이션이 작동하는 요소를 멈출 수 있습니다. 이러한 요소로 인해 사용자가 주의를 산만하게 하거나 다른 방식으로 피해를 주어서는 안 됩니다.
- 시각 및 청각적 대체: 사용자는 정보를 전달하는 모든 시각적 또는 청각적 콘텐츠를 위한 텍스트 기반 대체 콘텐츠에 액세스할 수 있습니다.
이러한 접근성 휴리스틱에 관한 기본 사항을 이해했다면 접근성 휴리스틱 워크시트를 사용하고 제공된 안내에 따라 캐릭터 또는 디자인에 적용할 수 있습니다. 이 연습은 여러 가지 관점을 모을 때 더 계몽이 됩니다.
다음은 탐색 및 길찾기 체크포인트의 접근성 휴리스틱 검토의 예입니다.
팀의 모든 구성원이 페이지 또는 구성요소를 보고 접근성 휴리스틱 검토를 수행하면 각 체크포인트의 총계가 집계됩니다. 이 시점에서 디지털 접근성 지원에 가장 중요한 것으로 발견된 문제를 해결하거나 누락을 수정하는 방법을 결정할 수 있습니다.
접근성 주석
설계를 개발팀에 넘기기 전에 접근성 주석을 추가하는 것이 좋습니다. 일반적으로 주석은 광고 소재 선택을 설명하고 디자인의 다양한 측면을 설명하는 데 사용됩니다. 접근성 주석은 개발자가 디자인팀 또는 접근성 중심 전문가의 안내에 따라 프로그래매틱 방식으로 더 쉽게 선택할 수 있는 영역에 중점을 둡니다.
접근성 주석은 와이어프레임에서 고충실도 모형에 이르기까지 디자인 프로세스의 모든 단계에서 적용할 수 있습니다. 여기에는 사용자 흐름, 조건부 상태, 기능이 포함될 수 있습니다. 보통 기호와 라벨을 사용하여 프로세스를 간소화하고 디자인을 중심으로 합니다.
다음 디자인 삽화 예는 Indeed.com의 Figma용 접근성 주석 키트에서 가져온 것입니다.
디자인 프로그램에 따라 여러 접근성 주석 시작 키트 중에서 선택해야 합니다. 또는 원하는 경우 나만의 세트를 만들 수도 있습니다. 두 경우 모두 핸드오프팀에 전달해야 하는 정보와 가장 효과적인 형식을 결정해야 합니다.
접근성 주석에 고려해야 할 몇 가지 영역은 다음과 같습니다.
- 색상: 팔레트에 다양한 색상 조합의 명암비를 포함합니다.
- 버튼 및 링크: 기본, 마우스 오버, 활성, 포커스, 사용 중지 상태를 식별합니다.
- 링크 건너뛰기: 숨겨졌거나 보이는 디자인 측면과 페이지에서 이러한 요소가 연결되는 위치를 강조 표시합니다.
- 이미지 및 아이콘: 꼭 필요한 이미지/아이콘을 위한 대체 텍스트를 추천합니다.
- 오디오 및 동영상: 자막, 스크립트, 오디오 설명의 영역/링크를 강조표시합니다.
- 제목: 프로그래매틱 수준을 추가하고 제목처럼 보이는 모든 항목을 포함합니다.
- 랜드마크: HTML 또는 ARIA를 사용하여 디자인의 여러 섹션을 강조 표시합니다.
- 상호작용 구성요소: 클릭 가능한 요소, 마우스 오버 효과, 포커스 영역을 식별합니다.
- 키보드: 포커스가 시작되어야 하는 위치 (알파 중지)와 다음 탭 순서를 식별합니다.
- 양식: 필드 라벨, 도우미 텍스트, 오류 메시지, 성공 메시지를 추가합니다.
- 접근성 높은 이름: 보조 기술이 요소를 인식하는 방식을 식별합니다.