마우스를 사용하지 않고 주석 확인
키보드를 이용하여 아이콘으로 이동하여 터치스크린에서 시도해 보세요. 캡션은 적절한 방식으로 열릴 수 있어야 합니다. 결정에 필요한 정보는 인터페이스에 직접 나타나야 합니다.
툴팁 디자인 시스템
필수 정보를 숨기지 않고 설명을 추가합니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
인덱스의 해석
초점을 맞출 때 '완료율' 옆에 있는 아이콘을 누르면 간단한 설명이 열립니다. 캡션을 닫아도 색인 레이블과 값을 계속 읽을 수 있습니다.
변형 및 사용 사례
힌트를 여는 방법
마우스를 올려서 열고 적절한 경우 초점을 맞추세요. 필수 정보는 도구 설명에 숨겨지지 않고 즉시 표시되어야 합니다.
키보드와 터치만 사용해 보십시오. 아직도 행동의 의미를 알고 있어요.
예시 사용자 이름이 있는 아이콘 버튼; 도구 설명에 바로가기가 추가되지만 이름은 변경되지 않습니다.
추가 정보작업을 설명하고 내용을 숨기지 마십시오.
추가 정보
도구 설명은 반복되는 레이블을 피하거나 복잡한 작업을 포함하지 않고 세부 사항을 간략하게 설명합니다.
라벨을 읽고 툴팁을 읽어보세요. 보충 자료는 사용자가 아직 알지 못하는 내용에 답해야 합니다.
예시 데이터 도구 설명에는 "수익"을 반복하는 대신 업데이트 날짜가 표시됩니다.
추가 정보작업을 설명하고 내용을 숨기지 마십시오.작업을 설명하고 내용을 숨기지 마십시오.
읽을 수 있는 너비
도구 설명을 너무 좁은 열로 만들지 않고 줄 바꿈을 제공하여 길이에 맞게 너비를 제한합니다.
긴 번역과 작은 화면을 사용해 보세요. 툴팁이 가로로 넘치지 않습니다.
예시 지시문은 콤팩트한 틀 안에 두 줄이면 됩니다.
추가 정보작업을 설명하고 내용을 숨기지 마십시오.작업을 설명하고 내용을 숨기지 마십시오.
객체를 기준으로 한 위치
설명하는 부분에 툴팁을 가깝게 두고, 가장자리에 도달하면 방향을 바꾸고, 읽어야 할 부분은 가리지 마세요.
창 가장자리에 가까운 초점 아이콘. 힌트는 시야 내에 완전히 남아 있습니다.
예시 오른쪽 가장자리의 도구 설명이 버튼 왼쪽으로 이동합니다.
추가 정보정보정보추가 정보
적합한 케이스
추가 도움이 필요하면 도구 설명을 사용하세요. 오류, 입력 요청 및 중요한 경고에는 다른 표시 공간이 필요합니다.
툴팁을 끄십시오. 사용자는 필수 조건을 놓치지 않고 작업을 완료할 수 있습니다.
예시 비밀번호 요청은 입력 상자 아래에 표시되며, 버튼 바로가기는 툴팁에 표시될 수 있습니다.
정보
알림 켜기추가 정보작업을 설명하고 내용을 숨기지 마십시오.