디자인과 사용자 경험
- 좋아하는 웹사이트/앱
- 좋아하는 이유: 디자인, 사용 편의성, 기능성 등
- 싫어하는 이유: 불편한 인터페이스, 접근성 부족 등
- 사용자 경험
- 사용자 경험은 다양한 요인(기기 종류, 시간대, 신체 상태 등)에 따라 달라질 수 있음.
- 전 세계 약 80억 명의 다양한 사용자 경험을 모두 고려해야 함.
포용적 디자인 (Inclusive Design)
- 정의
- 인간 중심 접근법으로 포용성, 사용성, 접근성을 결합한 디자인.
포용적 디자인은 모든 사람을 포용하면서, 사용성이 좋고, 보조 기술(AT)을 사용하는 사람들까지도 접근할 수 있는 사이트나 시스템을 만드는 것으로, 누구에게나 편리하고 유용한 경험을 제공하는 것을 목표로 한다.- 특정 그룹을 먼저 고려하여 그 그룹의 요구 사항을 해결한 뒤, 그것을 기반으로 더 많은 사람들을 아우르는 방식.
- 포용적 디자인의 7가지 원칙
- 비교 가능한 경험 제공: 모든 사용자가 필요에 맞게 동일한 품질의 경험을 얻을 수 있도록 설계.
- 상황 고려: 사용자의 환경이나 상황에 관계없이 유익한 경험 제공.
- 일관성 유지: 익숙한 패턴과 논리적 구조 사용.
- 사용자 제어 권한 부여: 사용자가 원하는 방식으로 콘텐츠에 접근 및 상호작용 가능.
- 선택권 제공: 복잡한 작업을 완료할 수 있는 다양한 방법 제안.
- 콘텐츠 우선: 중요한 정보와 핵심 기능에 집중하도록 설계.
- 가치 추가: 기능의 목적과 중요성을 고려해 다양한 사용자 경험 개선.
페르소나 (Personas)
장애를 가진 사람들을 포함시킬 때,
페르소나는 포용적인 디자인 도구로 활용될 수 있습니다. 장애에 특화된 페르소나를 만들거나, 기존의 사용자 페르소나에 장애를 추가하거나 등
- 정의
- 가상의 사용자 캐릭터로, 사용자 행동을 기반으로 디자인과 개발 과정에서 활용.
- 의사 결정을 사용자 중심으로 만듦.
- 장애 요소 포함
- 영구적, 일시적, 상황적 장애를 페르소나에 통합 가능.
- 예: 청각, 시각, 운동, 언어 장애 등.
- 주의점
- 페르소나는 실제 사람이나 고정관념을 기반으로 하지 않아야 함.
- 사용자 테스트를 대체할 수 없음.
접근성 휴리스틱
2019년 Deque의 디자인 팀이 heuristics focused on digital accessibility를 공유했다.
- 정의
- 디자인 초기 단계에서 접근성을 고려하기 위한 10가지 원칙.
- 그들의 연구에 따르면 접근성이 디자인 프로세스의 일부가 될 때, 전체 접근성 버그의 67%를 사전에 방지 가능.
- 코드를 작성하기도 전에 달성할 수 있다는 것이 엄청난 임팩트!
- 디자인 할 때 고려하는 10가지 접근성 휴리스틱
- 상호작용 방식: 사용자가 원하는 입력 방식(마우스, 키보드, 터치 등)을 효율적으로 사용 가능해야 함.
- 네비게이션 및 위치 안내: 사용자가 항상 현재 위치와 콘텐츠를 쉽게 탐색 가능해야 함.
- 구조와 의미: 페이지 구조와 시스템 사용법이 명확해야 함.
- 오류 예방 및 상태: 오류를 방지하고, 문제가 무엇인지와 해결 방법을 명확히 제공.
- 대비와 가독성: 텍스트와 정보가 쉽게 구분되고 읽히도록 설계.
- 언어와 읽기 용이성: 콘텐츠가 쉽게 이해되어야 한다.
- 예측 가능성과 일관성: 각 요소의 목적이 예측되도록 명확하게, 시스템 전체와 일관되게 설계.
- 시간과 정보 보존: 사용자가 작업을 완료할 충분한 시간을 제공하고(세션타임 등), 그동안 정보를 잃으면 안됨(작성중이던 글 등).
- 움직임과 깜박임 제어: 사용자는 페이지 내의 움직임, 깜박임, 애니메이션 되는 요소들을 멈출 수 있어야 한다. 유저가 이러한 것들에 방해받으면 안된다.
- 시각적/청각적 대안 제공: 시각적·청각적 콘텐츠에 텍스트 기반 대안을 제공.
디자인 팀의 구성원들이 각각 접근성 휴리스틱 리뷰를 진행하고, 체크포인트에서 누락된 부분들을 찾아서 개선한다.
접근성 주석 (Accessibility Annotations)
- 디자인 팀에서 개발 팀으로 전달(hand-off)하기 전에, 필요한 접근성 관련 정보를 추가해서 줘야함.
- 개발자가 프로그래밍 적으로 접근성을 더 높이는 가이드라인에 대한 정보.
- 접근성 주석에 대해 고려해야 할 몇 가지 영역은 다음과 같습니다:
- 색상: 팔레트의 모든 색상 조합에 대한 대비 비율을 포함합니다.
- 버튼과 링크: 기본, 호버, 활성, 포커스, 비활성 상태를 식별합니다.
- 건너뛰기 링크: 숨겨진 디자인 요소와 표시되는 디자인 요소 및 페이지에서 링크되는 위치를 강조 표시합니다.
- 이미지와 아이콘: 중요한 이미지와 아이콘에 대한 대체 텍스트 권장 사항을 추가합니다.
- 오디오 및 비디오: 캡션, 전사본, 오디오 설명이 있는 영역과 링크를 강조 표시합니다.
- 제목: 프로그래밍된 수준을 추가하고 제목처럼 보이는 모든 것을 포함합니다.
- 랜드마크: HTML 또는 ARIA로 디자인의 다양한 섹션을 강조 표시합니다.
- 인터랙티브 구성 요소: 클릭 가능한 요소, 호버 효과, 포커스 영역을 식별합니다.
- 키보드: 포커스가 시작되는 위치(알파 스탑)와 이후의 탭 순서를 식별합니다.
- 폼: 필드 레이블, 도움말 텍스트, 오류 메시지, 성공 메시지를 추가합니다.
- 접근 가능한 이름: 보조 기술이 요소를 어떻게 인식해야 하는지 식별합니다.
Indeed 팀에서 공유한 접근성 주석 예시www.figma.com
