Accessibility 본문

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

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

필요성

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

대상

  • 지적장애
  • 저시력
  • 비장애

적용기술

Mobile Web 내의 UI 컨트롤들의 위치나 사용 방식을 일관되게 제공

iOS, Android

일관성있는 UI를 제공하기 위한 방법

Mobile Web 개발에 앞서서 디자인이 끝난 후에는 반드시 일관성 있는 UI로 가이드라인 작성

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

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

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

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

사례

오류사례

게시물 이동 UI 요소들 위치가 일관성이 없음 (캡처화면 하단)

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

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

우수사례

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

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