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