본문 바로가기
  1. 무인정보단말기
  2. 공통 UI 가이드
  3. 개요
  4. 사용성 체크리스트

사용성 체크리스트

정보 영역과 컨트롤 영역을 중심 시야각에 위치하도록 한다.

사용자의 중심 시야각을 벗어나면 설계 요소의 초점 이동은 사용자가 쉽게 이해할 수 있도록 논리적인 순서로 이동되어야 한다. 순서와 관계없는 메뉴의 나열에서는 적용할 필요 없다.

권장사항

사용성 체크리스트 화면은 27인치 이상의 크기를 권장한다 의 권장사항 예시이미지

무인정보단말기 과업의 단계 표시를 해야 한다.

단계 표시는 사용자의 현재 위치를 알려줄 수 있고, 남은 프로세스를 예측할 수 있다. 과업 수행 시 어느 단계에 있는지 가시적으로 보여줘야 하고, 앞으로 얼마나 남았는지 안내해 끝까지 수행할 수 있도록 해야 한다.

  • 단계는 숫자와 글자로 표현한다.
  • 단계는 방향성을 나타낼 수 있도록 좌측부터 하나씩 채워져 표시한다.
  • 현재 위치까지 채워지도록 표현하여 지나온 여정을 보여준다.

권장 사례

무인정보단말기 과업의 단계 표시를 해야 한다 의 권장 사례 예시이미지

피해야 할 사례

무인정보단말기 과업의 단계 표시를 해야 한다 의 피해야 할 사례 예시이미지

모든 컨트롤은 다중 누르기(multi-touch) 동작을 요구하지 않아야 한다.

모든 컨트롤은 두 개 이상의 손가락을 동시에 이용해야 하는 다중 누르기(multi-touch) 동작을 요구하지 않아야 하며, 다중 누르기 동작은 연속된 단순 누르기 동작으로 대체해야 한다.

화면 상의 모든 글자의 크기는 글자의 높이가 12mm 이상으로 해야 한다.

단말기 표면에 부착된 표기, 화면에 표시되는 글자 모두 적용해야 한다. 화면을 확대했을 때 글씨가 가늘어지거나 깨지면 안된다. 서체는 획의 삐침이 없는 산세리프체를 사용한다.

글자 높이 12mm를 위한 기준 픽셀 (기준. 해상도 1920x1080, 화면 비율 16:9)

글자 높이 12mm를 위한 기준 픽셀 - 22인치, 24인치, 27인치, 32인치, 40인치
22인치 24인치 27인치 32인치 40인치
약 48px 약 43px 약 39px 약 33px 약 27px
※ 주의: 실제 업체마다 해상도와 화면 비율이 다르므로, 설계 과정에서 직접 측정해야 한다.

권장 사례

화면 상의 모든 글자의 크기는 글자의 높이가 12mm 이상으로 해야 한다 의 권장 사례 예시이미지

피해야 할 사례

화면 상의 모든 글자의 크기는 글자의 높이가 12mm 이상으로 해야 한다 의 피해야 할 사례 예시이미지

모든 컨트롤의 크기는 150mm2이상, 한 변의 길이 12mm 이상, 간격은 2.5mm 이상으로 해야 한다.

모든 컨트롤은 표면적의 크기가 150mm2 이상, 한 변의 길이가 최소 12mm 이상으로 제공해야 한다. 또한, 화면상의 모든 이웃한 컨트롤 간에는 2.5mm 이상의 충분한 간격을 제공해야 한다.

권장 사례

모든 컨트롤의 크기는 150mm<sup>2</sup>이상, 한 변의 길이 12mm 이상,  간격은 2.5mm 이상으로 해야 한다 권장 사례 예시이미지

피해야 할 사례

모든 컨트롤의 크기는 150mm<sup>2</sup>이상, 한 변의 길이 12mm 이상,  간격은 2.5mm 이상으로 해야 한다 의 피해야 할 사례 예시이미지

의미 있는 글자나 아이콘, 컨트롤은 배경과 명도 대비가 명확해야 한다.

시각적 정보는 배경으로부터 뚜렷하게 구분되어야 하며, 최소 4.5:1 이상의 명도 대비를 제공해야 한다. 예외적으로 글자 크기가 12mm보다 큰 경우에는 명도 대비를 3:1까지 낮출 수 있다. 모든 시각적 정보는 녹색 바탕에 빨간색 글자, 파란색 바탕에 노란색 글자로 제공되지 않아야 한다.

콘텐츠는 시각적으로 명확히 구분될 수 있도록 한다.

모든 이웃한 콘텐츠는 시각적으로 쉽게 구분될 수 있도록 제공해야 한다.

  • 테두리, 구분선, 무늬를 이용하여 구분
  • 배경과의 명도대비 또는 채도의 차이를 주어 구분
  • 줄 간격 및 글자 간격을 조절하여 구분

권장 사례

의미 있는 글자나 아이콘, 컨트롤은 배경과 명도 대비가 명확해야 한다 의 권장 사례 예시이미지

피해야 할 사례

의미 있는 글자나 아이콘, 컨트롤은 배경과 명도 대비가 명확해야 한다 의 피해야 할 사례 예시이미지

불필요한 이미지 삽입을 지양해야 한다.

불필요한 이미지는 무인정보단말기 가독성에 방해가 될 수 있다. 또한, 저시력자는 이미지보다 글자를 파악하는 것이 좋다. 과도한 이미지 정보 때문에 화면 내의 중요정보를 파악하는 데 시간이 오래 걸리고 이용에 어려움을 겪을 수 있다.

권장 사례

불필요한 이미지 삽입을 지양해야 한다 의 권장 사례 예시이미지

피해야 할 사례

불필요한 이미지 삽입을 지양해야 한다 의 피해야 할 사례 예시이미지

아이콘은 식별하기 쉬운 표준 모양으로 글자와 함께 표시되어야 한다.

주요 기능을 나타내는 컨트롤의 아이콘 및 픽토그램은 이해하기 쉬운 일반적인 표준 모양으로 표시되어야 한다. 자체 제작한 특별한 아이콘 및 픽토그램은 사용하지 않아야 한다. 아이콘 및 픽토그램로 표시된 정보는 글자와 함께 제공되어야 한다.

권장사항

아이콘은 식별하기 쉬운 표준 모양으로 글자와 함께 표시되어야 한다 권장사항의 예시이미지

글자 정보는 일상적이고 자연스러운 용어를 사용해야 한다.

글자 정보는 어려운 관용구나 외래어 등으로 표시되어 있지 않아야 한다. 전문용어, 외래어, 약어, 어려운 용어, 영문자/한자 및 기타 외국어 표기 등을 사용하는 경우 일상적이고 자연스러운 용어로 대체하거나 쉬운 설명을 덧붙여야 한다. 또한, 짧고 명확한 표현을 사용한다.

권장 사례

글자 정보는 일상적이고 자연스러운 용어를 사용해야 한다 권장 사례 예시이미지

피해야 할 사례

글자 정보는 일상적이고 자연스러운 용어를 사용해야 한다 피해야 할 사례 예시이미지

색은 강조용으로 사용하고 패턴과 함께 제공해야 한다.

색맹 및 저시력인을 위해 색이 시각적 요소를 구분하는 유일한 수단으로 사용되지 않아야 한다. 모든 시각적 정보는 색을 배제하더라도 다른 방법으로 식별할 수 있도록 중복적인 방법으로 설계되어야 한다. 색은 강조용으로 사용하고 쉬운 구분을 위해 레이블과 패턴 표시를 함께 제공되어야 한다. 여러 개의 메뉴 중에서 하나가 선택된 경우, 사용자의 사용성을 고려하여 색상 구분과 함께 도형 패턴을 표시해야 한다.

권장 사례

색은 강조용으로 사용하고 패턴과 함께 제공해야 한다 의 권장 사례 예시이미지

피해야 할 사례

색은 강조용으로 사용하고 패턴과 함께 제공해야 한다 의 피해야 할 사례 예시이미지

추가적인 탐색 인터랙션이 없도록 2줄 카테고리를 사용한다.

메뉴 카테고리가 한 줄을 넘어갈 때, 좌우 스와이프보다는 2줄 카테고리를 적용한다. 스와이프를 적용하면 사용자는 한 줄 이상 넘어가는 메뉴를 탐색하지 못하여 조작의 어려움을 느낄 수 있다.

권장 사례

추가적인 탐색 인터랙션이 없도록 2줄 카테고리를 사용한다 의 권장 사례 예시이미지

피해야 할 사례

추가적인 탐색 인터랙션이 없도록 2줄 카테고리를 사용한다 의 피해야 할 사례 예시이미지

늘어난 화면은 페이징을 기본으로 스크롤(Scroll) 구성을 해야 한다.

늘어난 화면은 컨트롤을 통해 다음 페이지로 넘어갈 수 있는 페이징 방식으로 우선 설계하고, 추가 조작에 스크롤 방식을 적용할 수 있다. 시야각이 좁아 화면 중심에 집중해야 하는 시각장애인은 화면이 스크롤 되면 어지러워할 수 있다.

페이지가 늘어나는 경우, 명확한 페이지 표시를 해야 한다.

현재 화면이 쪼개진 화면 중 몇 번째인지 명확하게 제공해야 한다.

권장 사례

페이지가 늘어나는 경우, 명확한 페이지 표시를 해야 한다 의 권장 사례 예시이미지

피해야 할 사례

페이지가 늘어나는 경우, 명확한 페이지 표시를 해야 한다 의 피해야 할 사례 예시이미지

이전, 처음으로 컨트롤을 제공해야 한다.

사용자가 언제든지 실행을 되돌리거나 취소 및 초기화가 가능해야 한다. 언제든지 쉽게 시작화면 또는 홈 화면으로 돌아가서 처음부터 다시 시작할 수 있어야 한다.

직원 호출 컨트롤을 통해 지원 서비스를 제공해야 한다.

무인정보단말기 이용 과정에서 담당자에게 도움을 요청하고 지원받을 수 호출 컨트롤을 제공해야 한다. 찾을 때 어렵지 않도록 색상을 강조한다. 부득이하게 컨트롤을 제공하지 못한다면, 도움을 요청할 수 있는 연락처를 사용자가 확인할 수 있는 위치에 숫자 및 촉각(점자 표시)으로 표시되어야 한다.

권장사항

직원 호출 컨트롤을 통해 지원 서비스를 제공해야 한다 의 권장사항 예시이미지

사용자의 조작 없이 자동으로 변경되는 콘텐츠는 사용되지 않아야 한다.

과업 진행 중에 콘텐츠가 자동으로 변경되면 사용자들이 무인정보단말기 사용 흐름에서 길을 잃을 수 있다. 무인정보단말기 내 콘텐츠가 사용자의 조작 없이 자동으로 변경되지 않도록 설계해야 한다. 사용자가 의도하지 않는 화면 전환이나 이벤트 등이 자동으로 실행되지 않아야 한다. 광고 등과 같이 자동으로 변경되는 콘텐츠가 부득이하게 사용될 때는 앞/뒤로 이동, 건너뛰기, 일시정지와 같이 이를 제어할 수 있는 수단(컨트롤)을 알기 쉽게 표시하여 제공해야 한다.

사용자의 선택적 응답을 요구하는 조작에는 시간제한(timeout)을 두지 않아야 한다.

부득이하게 시간제한을 두는 경우, 화면에 남은 제한 시간을 표시하고 시간제한을 연장하는 컨트롤을 제공해야 한다. 서비스를 이용하는 과정에서 시간 제약이 없도록 설계한다.

권장사항

사용자의 선택적 응답을 요구하는 조작에는 시간제한(timeout)을 두지 않아야 한다 의 권장사항 예시이미지

화면에 깜빡이거나 번쩍이는 객체가 사용되지 않아야 한다.

화면에 깜빡이는 객체가 사용된다면, 초당 3~50회의 주기로 깜빡이지 않아야 한다.

장애인과 고령자에게 접근성을 위한 기능을 제공해야 한다.

접근성 기능에는 휠체어 모드, 고대비, 확대, 수어 안내, 음성 안내 등이 있다.

고대비 화면을 제공하며, 사용자가 이를 쉽게 활성화할 수 있도록 제공하여야 한다.

모든 화면을 고대비 화면으로 직접 전환할 수 있어야 하며, 고대비 화면에 일반 화면에서 제공하는 기능이 모두 포함되어 있어야 한다.

의미 있는 모든 콘텐츠는 대체 콘텐츠와 함께 제공해야 한다.

대체 콘텐츠(이미지, 음성 안내, 자막 안내, 수어 안내 등)를 표시해주면 고령자, 장애인 등이 무인정보단말기의 반응을 인지하기 편할 수 있다. 화면에 문자 및 그림, 영상 정보가 의미를 지니는 경우, 이와 동등한 대체 콘텐츠를 제공해야 한다. 모든 그림과 영상 정보에 대해서 대체 텍스트가 정확한 내용으로 제공되어야 한다.(※ 예. 시각 대체 콘텐츠: 점자/음성, 청각 대체 콘텐츠: 수어/자막)

의미 있는 모든 콘텐츠는 음성을 통해 안내해야 한다.

모든 시각적 정보는 음성과 함께 제공해야 한다. 음량의 최대 크기는 65dBA를 보장하며, 음량의 조절 범위는 12dB~18dB로 제공해야 한다. 음성 안내 다시듣기 기능을 제공함으로써 편의성을 제공한다. 과업에 방해가 될 수 있으니, 사용자의 선호에 따라 음성 안내를 활성화하거나 차단할 수 있어야 한다.
(※ 장애인 유형별 UI 가이드 시각장애인 음성 안내 내용 참고)

점자 표시를 제공해야 한다.

무인정보단말기에 부착된 디바이스(예. 신용카드 투입구, 티켓 배출함 등)에 용도와 목적을 알 수 있도록 점자 표시를 하여 시각장애인의 정확한 무인정보단말기의 사용을 지원해야 한다.
(※ 장애 유형별 UI 가이드 시각장애인(점자 표시) 내용 참고)

의미 있는 모든 콘텐츠는 수어 안내를 함께 제공해야 한다.

무인정보단말기의 사용 상황과 맥락을 이해하기 위한 수어 안내를 해야 한다. 메뉴와 같은 단어 위주가 아닌 무인정보단말기 화면마다 사용 상황과 맥락을 수어 안내를 해야 한다.
(※ 장애 유형별 UI 가이드 청각장애인(수어 안내) 내용 참고)

컨트롤 영역의 위치는 지면에서 400mm~1,220mm 사이에 있어야 한다.

휠체어 모드 기능을 제공하여 컨트롤 영역의 위치를 화면 하단에 위치시켜 휠체어 사용자를 고려한 설계를 해야 한다. 화면 또는 인터페이스에 부착된 컨트롤의 위치는 바닥으로부터 400mm ~ 1,220mm 사이에 있어야 한다. 휠체어 모드에서 위치에 대한 학습성이 강한 메뉴는 해당 위치를 유지해야 한다. 중요도와 사용 빈도가 높은 기능들은 화면 하단에 위치하도록 설계해야 한다.

화면 내의 시각적 정보의 위치는 바닥으로부터 1,220mm를 넘지 않아야 한다.

화면의 시각적으로 표시된 정보의 위치가 1220mm를 넘지 않아야 한다. 예외로 큰 글씨의 로고, 화면 제목 등과 같은 과업 수행에 중요하지 않은 정보는 예외로 할 수 있다.

중요한 입력이 완료된 경우에는 이를 알려주는 소리 정보를 제공해야 한다.

별도의 확인 절차가 없는 경우, 항목 컨트롤을 선택했을 때 컨트롤의 색상이나 명도가 변화하거나, 소리나 진동으로 선택에 대한 피드백을 제공해야 한다. 입력 컨트롤이 완료된 후 확인 컨트롤 버튼을 눌러야 다음 단계로 넘어가는 경우, 반드시 확인 컨트롤 버튼의 색상을 변경해 주고, 동시에 음향이나 진동 등으로 알려주어야 한다.

입력 오류를 정정하는 방법을 제공해야 하고, 오류 발생 원인에 대한 정확한 시각/비시각 안내가 제공되어야 한다.

경고음은 점멸, 불빛, 등의 시각적 효과와 함께 제공하여야 한다. “확인”을 나타내거나 수행의 완료를 나타내면서 화면이 전환되거나, 알림(Pop-up)창이 뜰 때는 반드시 경고음을 주어야 한다.

개인정보는 사용자가 직접 설정할 수 있도록 제공해야 한다.

개인식별번호(예. 전화번호, 주민등록번호)를 시스템이 임의로 정하면 안 된다. 개인식별번호를 사용자가 직접 정할 수 있어야 한다.

생체 인식 형태의 사용자 식별 또는 제어를 사용하는 경우, 사용자를 인식할 수 있는 다양한 방법을 제공해야 한다.

숫자 등을 직접 입력하는 방식 이외에 지문, 얼굴 인식 등으로 개인식별 기능을 제공해야 한다. 생체 인식 형태의 사용자 식별 또는 제어를 사용하는 경우, 하나 이상의 생체 인식 방법을 사용해야 한다. 또한, 생체 인식사용방법에 대한 정확한 가이드를 제공해야 한다.

무인정보단말기에 입력 및 출력되는 개인정보는 보호되어야 한다.

개인정보를 입력하는 경우, 시각적인 노출이 차단되어야 하고, 특히 음성정보가 사용되는 경우 사용자가 동의한 장치를 통해서만 제공되어야 하며, 외부에 음성으로 읽어주지 않아야 한다. 개인식별정보를 입력하는 내용이 어떤 상황에서도 화면에 그대로 표시되지 않아야 한다. 개인식별정보를 입력하는 내용이 화면에 암호형식으로 표시되어야 한다.

권장사항

무인정보단말기에 입력 및 출력되는 개인정보는 보호되어야 한다 의 권장사항 예시이미지1 무인정보단말기에 입력 및 출력되는 개인정보는 보호되어야 한다 의 권장사항 예시이미지2

지원되는 모든 외국어 서비스는 한국어 서비스와 동등한 수준의 접근성 서비스를 제공해야 한다.

이 페이지의 내용과 사용편의성에 만족하십니까?

사용편의성 만족도
자료 담당자
김민수 선임(053-230-1380)
최근자료수정일
2024-03-25