본문 바로가기

스터디/웹개발

2022년9월20일 키오스크 UIUX 디자인

공공 단말기 접근성 가이드라인 (KS X 9211) 준수

고령층 친화 디지털 접근성 표준

요약

사이즈

21인치

1080x1920

폰트

가로세로 10mm 이상 (38px 이상)

38px, 50px, 80px 기준으로 사용

명암 대비 4.5:1 이상으로

버튼

아웃라인, 그림자 등을 사용해서 버튼에 입체감 제공

중요한 버튼은 색을 눈에 띄게 구분

선택 상태를 명확하게 보여줘야한다.

레이아웃

중요 버튼과 내용은 화면 중앙에 배치되도록 한다

화면전환/메뉴 는 가로로 목록과 정보는 세로 스크롤 형태가 좋다.

1. 정보구조

정보와 구조를 쉽게 파악할 수 있어야한다.

1-1 인지가쉬운글자와조작버튼사용하기

  1. 1 화면 내의 정보성 텍스트의 크기는 가로·세로 모두 최소 10mm 이상이 되도록 제공하고 배경과의 명암 차이가 뚜렷해야 합니다.
  2. 2 버튼은 아웃라인, 그림자 또는 입체감을 제공해야 합니다.
  3. 3 중요한 버튼의 색은 눈에 띄게 구분하고, 선택 상태가 명확해야 합니다.

1-2 일관된레이아웃사용하기

  1. 1 화면내의메뉴형태,버튼,서식등은일정순서와위치를가져야합니다.
  2. 2 화면 전환과 메뉴는 가로, 목록과 정보는 세로 스크롤 형태가 좋습니다.
  3. 3 상하좌우로 추가 콘텐츠가 있는 경우 화면 내에 일부가 보여야 합니다.
  4. 4 24인치 이상 화면에서 중요 버튼과 내용은 중앙에 배치해야 합니다.

1-3 이해하기쉬운용어사용하기

  1. 1 전문용어, 외래어, 약어, 마케팅 용어 등을 사용하는 경우 일상적이고 자연스러운 용어로 대체하거나 쉬운 설명을 덧붙여야 합니다.
  2. 2 아이콘 등 상징 이미지는 텍스트와 함께 사용해야 합니다.
  3. 3 상품 카테고리 등의 메뉴 사용 시, 전체 메뉴(탭)를 제공해야 합니다.

2. 서비스 흐름

쉽고 명확한 서비스 흐름을 제공해야 한다.

  1. 2-1 한화면에하나의과업만보여주기
    1. 1 한 번에 하나의 과업을 수행하고, 되도록 단순한 선형 구조를 사용합니다.
    2. 2 과업 수행 도중 새로운 과업의 제안·추천 ·광고 정보 등은 배제해야 합니다.
    3. 3 이용자가 복잡하게 느낄 수 있는 선택사항에 대해 쉽게 기본값 또는 추천(인기순위)값을 선택할 수 있도록 해야 합니다.
  2. 2-2 가시적인설명과조작결과안내하기
    1. 1 과업 수행 시, 현재 어느 단계에 있는지 가시적으로 보여주어야 합니다.
    2. 2 색반응이나 음성 피드백 등으로 조작 결과를 알려주어야 합니다.
    3. 3 앞으로얼마나남았는지안내하고끝까지수행할수있도록심리적부담을낮출수있는메시지를적극활용해야합니다.
    4. 4 조작이 없어 초기화되는 경우 반드시 사전에 알리고, 간단한 조작으로 제한시간을 충분히 연장할 수 있도록 해야 합니다.
  3. 2-3 잘못된조작이나오류를쉽게정정할수있도록하기
  4. 1 잘못된서식입력이나선택등에대해오류내용을알려주고쉽게수정할수있어야합니다.2 잘못선택한경우를정정하기위해선택내용을변경또는이전단계로돌아가거나종료할수있어야합니다.

2-4 화면밖과업의위치·방법등을안내하기

1 투입구등화면밖의결과·조작이필요한경우불빛등으로알리고,위치·방법등의 영상(그림)제공으로흐름을놓치지않아야합니다.

3. 대체 수단

2-1 (한 화면에 하나의 과업만 보여주기) 가 적용하기 어려운 경우 간편 모드를 제공해야 한다.

3-1 첫화면에간편모드제공하기

1 첫화면에간편모드버튼을눈에띄게안내해야합니다.2 간편모드에서 보여지는 모든 화면은 Rule 1, 2를 준수해야 합니다.