소개
설문지 작성은 모바일 건강 앱을 사용하는 대부분의 의료 종사자에게 핵심 작업입니다.
데이터 입력은 어려울 수 있으며 오류가 발생할 수 있습니다. 구조화된 데이터 캡처 (SDC) 라이브러리와 설계 가이드라인의 목표는 데이터 입력의 사용자 환경과 캡처된 데이터의 품질을 개선할 수 있도록 지원하는 것입니다.
이 섹션에서 다루는 네 가지 테마는 다음과 같습니다.
레이아웃 및 탐색
긴 스크롤 및 페이지로 나눈 레이아웃
Android FHIR SDK에는 다음 두 가지 레이아웃 옵션이 있습니다.
- 긴 스크롤 (기본값)
- 페이지 나눔
긴 스크롤 설문조사는 한 페이지에 모든 질문을 표시하며 사용자는 스크롤하여 각 질문으로 이동합니다.
페이지로 나누어진 설문지는 별도의 페이지에 콘텐츠를 표시합니다. 관련 질문이나 입력 필드를 한 페이지에 함께 그룹화할 수 있습니다. 뒤로 및 다음 버튼은 페이지 간에 이동할 수 있도록 페이지 하단에 고정되어 있습니다.
GitHub에서 설문지를 페이지로 나누는 방법 알아보기
어떤 레이아웃을 선택해야 하나요?
각 레이아웃 옵션에는 장단점이 있습니다. 아래는 사용할 레이아웃을 선택할 때 고려해야 하는 각 레이아웃 유형의 속성입니다.
| 긴 스크롤 | 페이지 나눔 | |
|---|---|---|
| 탐색 속도 | 더 빠른 탐색 | 탐색 속도가 느림 |
| 탐색의 정확도 | 정밀도가 낮은 탐색 | 더 정확한 탐색 |
| 작업 전환 후 질문에 다시 집중 | 중단 후 다시 방향을 잡기 어려움 | 중단 후 다시 방향을 잡기 쉬움 |
| 방문 후 디지털 설문지 작성 (종이에서 복사) | 종이에서 복사할 때 더 쉬움 | 종이에서 복사할 때 더 어려움 |
| 소형 화면 | 작은 화면에 적합하지 않음 | 작은 화면에 더 적합 |
| 접근성 | 접근성이 떨어집니다. 탐색이 어렵습니다. | 접근성 향상 스크린 리더, 텍스트 음성 변환, 기타 기술로 처리할 수 있는 개별 화면 |
| 안내 및 설명을 위한 공간 | 안내 및 요청 사항에 적합하지 않음 | 안내 및 지침에 적합 |
긴 스크롤
단일 페이지 레이아웃에서 쉽게 탐색할 수 있도록 질문에 번호를 지정합니다.
긴 스크롤을 사용할 때는 질문 제목의 글꼴 크기를 작게 하여 화면에 더 많은 콘텐츠가 표시되도록 합니다. 예: 긴 스크롤은 16px입니다. 페이지로 나누기는 28px입니다.
페이지로 나누기
키보드, 드롭다운, 기타 구성요소가 페이지에서 공간을 차지하므로 페이지당 질문 하나를 목표로 하세요.
콘텐츠는 스크롤 없이 볼 수 있는 부분에 표시되어야 합니다.
예: 이 세 개의 텍스트 필드는 모두 대체 연락처 정보와 관련되어 있으므로 한 페이지에 함께 그룹화됩니다.
혼동을 피하기 위해 한 페이지에 관련 없는 콘텐츠를 그룹화하지 마세요.
진행 상태 표시기
진행률 표시기는 설문지 내에서 진행된 상황을 반영합니다.
긴 설문조사에는 사용자가 탐색하고 진행 상황을 확인할 수 있도록 진행률 표시기를 포함하세요. 진행률 표시기는 설문지 내 위치와 완료해야 할 항목을 보여줍니다.
질문 위에 배치하고 스크롤할 때도 항상 표시되도록 고정합니다.
뒤로 및 다음 버튼 위쪽의 하단에 배치할 수 있습니다. 이 레이아웃을 사용하면 사용자가 현재 보고 있는 페이지도 표시할 수 있습니다.
탐색 버튼
탐색 버튼 (뒤로, 다음)은 설문지 하단에 고정되어 있습니다. 무한 스크롤 또는 페이지로 구분된 설문지의 마지막 페이지에서 다음 버튼의 라벨은 제출입니다.
버튼을 일관된 위치에 유지하고 항상 뒤로, 다음과 같은 작업으로 라벨이 지정된 활성 버튼을 사용합니다.
양식이 불완전하더라도 항상 활성 버튼을 표시합니다. 다음을 탭하면 누락된 필드 또는 유효성 검사 오류를 완료하기 위한 안내가 포함된 팝업 대화상자를 표시합니다.
비활성 버튼은 사용자가 문제를 해결하는 방법을 알기 어렵게 만듭니다.
아이콘 전용 버튼은 피하세요. 항상 설명이 포함된 작업으로 버튼에 라벨을 지정하세요.
질문 및 안내
- 설문지 제목입니다.
- 진행 상태 표시기
- 그룹 헤더입니다.
- 질문 제목입니다.
- 안내
- 입력 필드
- 항목 형식입니다.
- 필수 입력란입니다.
- 도움말을 탭합니다.
그룹 헤더
그룹 헤더는 질문 제목 위에 표시되는 텍스트 헤더입니다.
그룹 헤더를 사용하여 유사한 질문을 함께 그룹화합니다. 유용한 정보를 추가하는 경우에만 그룹 헤더를 사용하세요.
짧은 제목을 사용하여 비슷한 질문을 그룹화합니다. 예: 환자 병력과 관련된 모든 질문이 그룹화됩니다.
복잡한 제목이나 한 줄을 초과하는 긴 제목은 피하세요.
질문 제목
질문 제목은 요청된 정보를 간결하게 설명합니다. 질문 제목은 사용자의 시선을 질문으로 유도하기 위해 페이지에서 가장 큰 글꼴 크기를 사용합니다.
모든 페이지 또는 질문에는 질문 제목이 있어야 합니다. 질문 제목을 짧게 유지하거나 질문 형식으로 작성합니다.
짧은 제목을 사용하면 사용자가 더 쉽게 읽을 수 있습니다.
매우 긴 질문이나 두 질문을 함께 중첩하는 것은 피하세요.
사용자가 입력해야 하는 정보를 쉽게 알 수 있도록 항상 질문 제목을 포함하세요.
안내
안내는 질문 제목 아래에 표시되는 선택적 텍스트 필드입니다.
instructions 필드를 사용하여 질문이 필수인지, 선택할 수 있는 항목이 몇 개인지 (하나 또는 여러 개), 모든 정보를 입력하거나 질문에 답할 수 없는 경우 사용자가 해야 할 일과 같은 관련 안내를 설명합니다.
질문이 필수인지, 선택할 수 있는 항목이 몇 개인지 안내 필드를 사용하여 알립니다.
사용자가 모든 필드를 완료할 수 없는 시나리오가 발생할 경우 어떻게 해야 하는지 안내합니다.
질문 제목에 사용된 용어에 대한 추가 맥락 또는 정의를 제공하기 위해 안내를 사용합니다.
라벨 텍스트
라벨 텍스트는 텍스트 필드 또는 드롭다운에 요청되는 정보를 사용자에게 알려줍니다. 필드를 선택하면 라벨 텍스트가 텍스트 필드의 가운데에서 상단으로 이동합니다.
모든 텍스트 필드와 드롭다운 상자에는 라벨이 있어야 합니다. 라벨 텍스트는 짧고 명확하며 완전히 표시되어야 합니다.
라벨 텍스트는 짧고 명확하며 완전히 표시되어야 합니다.
라벨 텍스트가 너무 길거나 잘리거나 여러 줄을 차지하면 안 됩니다.
사용자가 입력해야 하는 정보를 알 수 있도록 항상 텍스트 필드에 라벨을 지정합니다.
항목 형식
EntryFormat은 텍스트 필드 아래에 표시되어 사용자에게 데이터를 입력해야 하는 특정 형식을 알려줍니다. 오류 메시지가 EntryFormat 필드에 표시되고 기존 EntryFormat 요청 사항을 대체합니다.
날짜, 전화번호, 단위, 정수에는 EntryFormat을 사용하세요.
필드 아래에 날짜 형식을 표시하고 설명 문구를 포함합니다.
데이터 형식을 표시하지 않으면 데이터가 잘못 입력될 수 있습니다.
의료 범위를 입력할 때는 정상 범위의 예를 제공하세요. 이를 통해 사용자는 오류나 범위를 벗어난 숫자를 포착할 수 있습니다.
필수 입력란
필수 필드는 사용자가 필드를 완료해야 하며 필드가 완료될 때까지 진행이 차단됨을 나타냅니다.
필드가 필수임을 나타내려면 질문 제목 끝에 별표 (*)를 표시합니다. 별표 (*)가 무엇을 나타내는지 명확하지 않은 사용자를 위해 안내 필드에 '필수 질문'을 포함하세요. 질문 제목이 없으면 라벨 텍스트에 별표 (*)를 표시합니다.
별표 (*)로 필드가 필수임을 표시하고 `필수 질문`을 나타내는 글로 된 안내를 포함합니다.별표(*)의 의미를 잘 모르는 사용자가 많으므로 설명이 도움이 될 것입니다.
별표 (*)만 표시하고 그 의미에 대한 설명은 쓰지 마세요.
사용자에게 가장 익숙한 용어를 사용하세요. 예: '필수' 대신 일부 국가에서 더 친숙한 용어인 '의무'를 사용할 수 있습니다.
대부분의 질문이 필수인 경우 선택사항 질문을 대신 표시하세요.
질문 제목이 없는 경우 라벨 텍스트에 별표를 표시합니다.
도움말
질문 제목 옆에 도움말 아이콘이 표시됩니다. 아이콘을 탭하면 추가 정보가 포함된 도움말 정보 상자가 표시됩니다. 아이콘을 다시 탭하면 도움말 정보 상자가 닫힙니다.
선택사항입니다. 항상 표시할 필요가 없는 추가 정보를 표시하는 데 유용한 경우에만 사용하세요.
사용자가 한 번만 보거나 추가 정보를 제공하는 정보에는 도움말을 사용하세요.
모든 사용자에게 표시되어야 하는 안내를 도움말 상자 내에 숨기지 마세요.
데이터 캡처
어떤 구성요소를 언제 사용해야 할까요?
| 데이터 입력 유형 | 불리언 선택 | 1개 선택 | 객관식 | 선택사항 열기 | 드롭다운 | 날짜 선택 도구 | 텍스트 입력란 | 슬라이더 | 자동 완성 |
|---|---|---|---|---|---|---|---|---|---|
| '예' 또는 '아니요'를 선택하세요. | |||||||||
| 한 가지 옵션 선택 | 주의 |
||||||||
| 여러 옵션 선택 | 주의 |
||||||||
| 텍스트 | |||||||||
| 날짜 | |||||||||
| 숫자 | 주의 |
입력란
텍스트 필드는 사용자가 정보를 입력할 수 있음을 나타냅니다.
이름, 전화번호, 주소 등 설문지에 텍스트를 입력해야 하는 경우 텍스트 필드를 사용합니다. 미리 입력된 선택사항(객관식 또는 단일 선택)을 대신 사용할 수 있는 경우 텍스트 (키보드) 입력이 필요한 데이터 입력을 제한합니다.
material.io에서 텍스트 필드에 대해 자세히 알아보기
고유한 단어나 숫자를 입력해야 하는 데이터 입력에 텍스트 필드를 사용합니다.
자유 형식 텍스트 응답 대신 다중 선택, 드롭다운 또는 단일 선택을 사용할 수 있는 경우 자유 형식 텍스트 응답을 사용하지 마세요.
단답형 및 불리언 선택
단일 선택 및 불리언 선택은 사용자가 옵션에서 하나의 선택사항을 선택하라는 메시지가 표시될 때 라디오 버튼으로 표시되는 선택 컨트롤입니다.
'예' 또는 '아니요'의 이진 선택이 있는 경우 불리언 선택을 사용합니다. 그렇지 않으면 단일 선택 구성요소를 사용합니다. 목록에 10개 이상의 옵션이 있는 경우 단일 선택 대신 드롭다운을 사용합니다. 옵션이 많은 경우 드롭다운이 더 밀도 있고 탐색하기 쉽습니다.
옵션이 '예'와 '아니요'인 경우 불리언 선택을 사용합니다.
사용자가 목록에서 하나의 옵션을 선택할 수 있는 경우 단일 선택을 사용합니다.
매우 긴 목록 (10개 이상)에는 단일 선택을 사용하지 마세요. 대신 드롭다운을 사용하세요.
날짜 선택 도구
날짜 선택기를 사용하면 사용자가 캘린더 날짜 선택기와 키보드를 통해 날짜를 입력할 수 있습니다. 캘린더 아이콘을 탭하면 캘린더 날짜 선택기가 활성화됩니다.
캘린더 날짜 선택기는 오늘 날짜와 가까운 날짜(예: 마지막 생리일 또는 다음 방문일)에만 사용하세요. 그렇지 않으면 생일과 같은 날짜에 키보드 입력을 우선시합니다.
날짜를 입력할 때는 키보드 입력 (텍스트 상자 탭)과 캘린더 날짜 선택 도구 (아이콘 탭)를 모두 사용 설정합니다.
생일의 유일한 입력 방법으로 캘린더 날짜 선택기를 사용하지 마세요. 월과 연도로 이동하기가 어렵습니다.
드롭다운
드롭다운 메뉴를 사용하면 사용자가 여러 옵션 중에서 선택할 수 있습니다. 사용자가 입력을 시작하면 입력된 내용을 기준으로 옵션이 필터링됩니다. 이를 통해 사용자는 긴 목록에서 적절한 옵션을 빠르게 찾을 수 있습니다.
드롭다운 메뉴는 옵션 목록이 매우 긴 경우 (옵션 10개 이상) 공간을 덜 차지하므로 단일 선택의 좋은 대안입니다.
주 또는 도시를 선택하는 등 옵션이 매우 긴 목록에서 옵션 하나를 선택할 때는 드롭다운을 사용합니다.
나이와 같이 모든 옵션을 스크롤하는 것보다 콘텐츠를 입력하는 것이 더 쉬운 경우 드롭다운을 사용하지 마세요.
객관식
복수 선택은 사용자가 옵션 목록에서 여러 섹션을 선택할 수 있는 경우 체크박스로 표시되는 선택 컨트롤입니다.
사용자가 미리 정해진 옵션 목록에서만 선택할 수 있는 경우 객관식을 사용합니다. 사용자가 직접 자유 형식 응답을 추가할 수 있는 경우 자유 선택 구성요소를 대신 사용하세요. 안내 필드에 '해당하는 항목을 모두 선택하세요'라고 작성하여 사용자가 여러 옵션을 선택할 수 있음을 알립니다.
기본 모양은 탭할 수 있는 영역을 명확하게 표시하기 위해 체크박스 주위에 컨테이너가 있습니다.
휴대전화 화면 크기와 텍스트 크기가 다양하므로 행당 여러 옵션을 표시하면 텍스트가 잘릴 수 있습니다.
선택사항 열기
열린 선택은 객관식과 비슷하지만 사용자가 기타를 선택하고 자유 형식 텍스트를 입력할 수 있는 기능이 추가됩니다.
사전 설정된 옵션 목록이 있지만 사용자가 추가 옵션을 추가할 수도 있는 경우 열린 선택을 사용합니다. 대부분의 옵션을 알고 있지만 제공된 옵션이 적용되지 않아 일부 사용자가 기타를 선택할 것으로 예상되는 경우 열린 선택을 사용합니다.
정확한 데이터가 수집되는 것이 중요하고 사전 정의된 옵션이 적용되지 않는 경우에 사용합니다. 예: 직업
대부분의 대답에 기타를 선택해야 하는 경우 사용하지 마세요. 이 경우 텍스트 필드 또는 단락 필드를 대신 사용하세요.
슬라이더
슬라이더를 사용하면 사용자가 값 범위에서 선택할 수 있습니다. Android FHIR SDK의 슬라이더는 불연속 슬라이더입니다. 불연속 슬라이더를 사용하면 사용자가 미리 정해진 범위에서 특정 값을 선택할 수 있습니다. 눈금은 사용 가능한 값을 나타내는 데 사용할 수 있습니다. 수치 데이터 입력에 슬라이더를 사용하지 않습니다. 텍스트 필드나 드롭다운 메뉴를 대신 사용하세요.
material.io에서 슬라이더에 대해 자세히 알아보기
범위가 넓은 경우 특정 값에 슬라이더를 사용하지 마세요. 대신 키보드 입력이 있는 텍스트 필드를 사용하세요.
데이터 유효성 검사 및 오류
데이터 검증
데이터 확인은 텍스트 필드에 입력할 수 있는 데이터 유형 또는 값을 제한합니다. 데이터 검증을 통해 수집된 데이터의 품질을 개선할 수 있습니다.
EntryFormat 필드를 사용하여 형식 또는 값 제한을 표시합니다. 사용자가 오류를 수정할 수 있도록 의미 있는 데이터 유효성 검사 오류 메시지를 인라인으로 즉시 표시합니다.
사용자가 데이터를 입력하는 방법을 알 수 있도록 데이터 유효성 검사 제한사항을 미리 표시합니다.
전화번호에 필요한 자릿수를 표시하지 않으면 사용자에게 오류가 발생할 수 있으며 완료하는 데 시간이 더 오래 걸립니다.
필드를 완료한 후 의미 있는 데이터 유효성 검사 오류를 즉시 표시합니다. 오류 메시지가 기존 항목 형식 텍스트를 대체합니다.
사용자가 '제출'을 누를 때까지 기다렸다가 유효성 검사 오류를 처음 표시하지 마세요.
오류
오류 메시지는 문제가 발생했을 때 사용자에게 알리고 문제를 해결하는 방법을 전달합니다.
색상, 아이콘, 텍스트를 사용하여 오류를 전달합니다.
material.io의 오류 메시지에 대해 자세히 알아보기
오류가 발생하는 이유 (필수 질문)와 오류를 수정하기 위해 할 수 있는 일 (하나 선택)을 설명합니다.
'오류'라고만 표시되는 오류 메시지는 사용자가 오류를 수정하는 방법을 알 수 없으므로 도움이 되지 않습니다.
예: '날짜 형식이 잘못되었습니다. 형식은 dd/mm/yyyy여야 합니다.
'귀하'가 포함된 오류 메시지로 사용자를 비난하지 마세요. 예: '귀하가 잘못된 날짜 형식을 입력했습니다.'
색상, 아이콘, 텍스트를 사용하여 오류가 있음을 사용자에게 알립니다.
적록색맹과 같은 일반적인 시각 장애를 지원하려면 오류를 전달할 때 색상에만 의존하지 마세요.
아이콘 하나로 충분한 경우가 많습니다. 오류를 전달하기 위해 아이콘을 과도하게 사용하지 마세요.