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