page title

안내 영역은 본문을 이해하고 이용하는 데 포괄적으로 이해가 필요한 정보를 전달하는 데 사용한다.

본문 콘텐츠와 전반적으로 관련 있는 도움말은 안내 영역에 배치하여 중요한 정보를 인지한 상태에서 본문에 접근할 수 있도록 한다. 안내 영역에 포함할 수 있는 정보의 예시는 다음과 같다.

• 취소/수정 가능 여부
• 전자서명/본인인증 절차의 포함 여부
• 제출할 증빙서류
• 기타 안내 사항

안내 영역은 본문 상단에 배치한다.

안내 영역을 본문 하단에 배치하면 사용자는 정보가 필요한 순간에 도움말에 접근할 수 없다.

한 화면에 여러 개의 안내 영역을 사용하지 않는다.

여러 개의 안내 영역을 사용하게 되면 사용자가 중요한 정보에 집중하기 어렵고 안내 영역 내부의 설명을 무시할 수 있다. 안내 영역에는 중요한 정보만 포함하여 간결하게 구성하고 필요한 경우 디스클로저 컴포넌트를 활용하여 정보를 제공한다. 이때, 디스클로저는 접힌 상태로 표시되어야 하며 사용자가 반드시 확인해야 할 중요한 정보를 담지 않아야 한다.

플레이스홀더를 레이블이나 도움말의 대체 수단으로 사용하지 않는다.

플레이스홀더는 사용자가 값을 입력하기 시작하는 순간 사라지기 때문에 플레이스홀더 텍스트가 인라인 텍스트와 완전히 동일하거나 추가적으로 전달되는 정보가 없어야 한다. 플레이스홀더는 다음과 같이 어떤 값을 입력해야 하는지에 대한 힌트나 예시를 제공하기 위한 목적으로 사용하기 적합하다. 그러나 이 경우에도 플레이스홀더 텍스트가 인라인 텍스트로 제공되어야 한다.

• 날짜, 숫자의 입력 형식을 안내함
• 입력 가능한 텍스트의 자릿수를 표시함

사용자가 작업을 완료하는 데 필요한 중요한 정보는 인라인 텍스트로 제공한다.

사용자 요청에 의한 도움말은 사용자에 따라 발견이 어려울 수 있으므로 반드시 확인해야 하는 중요한 정보는 도움이 필요한 요소에 인접한 위치에 인라인 텍스트로 제공하는 것이 적합하다.

컨트롤 요소에 대한 레이블과 같이 간단한 추가 정보를 제공하는 데 툴팁을 사용한다.

인라인 텍스트에 비해 중요도가 낮고 도움 정보가 1~2단어로 구성되어 있거나 한 문장으로 간결한 경우에는 툴팁을 사용한다. 예를 들어, 텍스트 레이블이 없는 아이콘 단독 컨트롤 요소에 레이블을 표시하고자 하는 경우에는 툴팁을 사용한다.

컴포넌트의 상태나 관련된 상세 정보를 제공하는 데 맥락적 도움말을 사용한다.

컴포넌트나 레이블 옆에 배치되어 해당 요소에 관한 부가적인 정보나 사용자가 알았을 때 도움이 되는 정보 또는 사용자의 과업을 적극적으로 돕기 위한 정보 제공에 맥락적 도움말을 사용한다.

도움말 콘텐츠의 양이 많거나 복잡한 과업에 도움 패널을 사용한다.

도움 패널은 본문 콘텐츠의 섹션이나 일부 요소에 대한 도움말이 많은 양의 텍스트나 관련 리소스로 구성되어 있어 개별 화면 수준의 도움말을 제공해야 하는 경우에 사용한다. 도움 패널에 주로 제공되는 정보의 예시는 다음과 같다.

• 과업 수행의 결과
• 입력 필드의 구성과 각 입력 필드에 정보 입력이 필요한 이유
• 선택적 입력 사항에 대한 입력을 결정하는 데 참고할 수 있는 정보
• 입력 필드에 값을 입력하는 방법
• 서비스에 대한 정의, 복잡한 용어 설명

작업을 완료하는 방법에 대한 단계별 안내가 필요한 복잡한 과업에 코치마크와 따라하기 패널을 사용한다.

사용자의 이용 빈도가 매우 낮고 여러 단계의 입력으로 구성된 과업에 코치마크와 따라하기 패널을 사용하면 사용자는 보다 쉽게 과업 목표를 달성할 수 있다.