Accessibility 본문

9.1 사용자 인터페이스의 일관성

사용자 인터페이스 요소들의 배치를 일관성 있게 제공하는 것이 바람직하다.

필요성

저시력인이나 고령자 등 화면을 확대하는 사용자는 전체 화면이 아니라 창의 일부 영역을 화면에 확대하여 이용한다. 따라서 애플리케이션 창마다 내비게이션 컨트롤의 위치와 모양이 다르다면 새로운 애플리케이션 창으로 이동할 때마다 사용법을 익히는 데 많은 어려움이 있을 것이다. 또한 지적 장애인은 방문한 웹 페이지별로 메뉴와 내비게이션 컨트롤의 위치나 모양이 바뀌게 되면 사용자는 이들 웹 페이지를 동일한 웹 사이트가 제공하는 웹 페이지로 인식하기보다는 새로운 웹 사이트가 제공하는 웹 페이지로 인식할 가능성이 높다.

대상

  • 지적
  • 저시력
  • 비장애

적용기술

애플리케이션 내의 UI 컨트롤들의 위치나 사용 방식을 일관되게 제공

iOS, Android
일관성 있는 UI를 제공하는 방법
  • 애플리케이션 개발에 앞서서 디자인이 끝난 후에는 반드시 일관성 있는 UI로 가이드라인 작성
  • Interface Builder 를 이용하거나 순수 코딩으로 개발할 때 컨트롤의 위치와 방법이 같로록 한다.

검사방법 및 QA 지표 산정방법

iOS, Android
  • 애플리케이션 내의 UI 요소들의 위치가 동일한지 체크
  • 폰트, 크기, 화면 색상, 링크 제공 방법, 이모티콘 등의 내용이 일관되게 적용되었는지 체크
오류수(건)

애플리케이션 창마다 확인 시 내비게이션 컨트롤의 위치와 모양이 다르게 되어 있는 페이지 수

사례

오류사례

첫화면에서는 메뉴를 이동할 수 있는 컨트롤을 사용하고 두 번째 화면에서는 sns용 컨트롤이 배치되어 있어 일관성 없는 UI를 제공하고 있음 (캡쳐 화면 하단)

오류사례이미지 1
오류사례이미지 2
개선방법

개발할 때 컨트롤의 위치와 방법이 동일하도록 함

우수사례

페이지 이동 시에도 일관성 있는 UI를 유지하고 있음 (캡처화면 파란색 보더)

우수사례이미지 1
우수사례이미지 2