방해하지 않고 설명하는 툴팁
도움이 되는 도구 설명을 디자인하는 방법: 간략한 추가 정보, 마우스 오버 및 키보드 액세스, 터치 대안, 필수 지침이 도구 설명에 속하지 않는 이유.
핵심 포인트
도구 설명은 측정항목의 의미와 같은 추가 정보를 제공하기 위해 마우스를 올리거나 키보드에 초점을 맞추면 표시되는 간단한 메시지입니다. 짧게 유지하고, 필수 지침을 절대 넣지 말고, 키보드로 접근할 수 있도록 하고, 터치 스크린에서 탭 기반 대안을 제공하고, 링크나 버튼을 안에 넣지 마세요.
툴팁이란 무엇입니까?
Nielsen Norman Group는 툴팁을 사용자가 마우스 호버 또는 키보드 호버(요소에 키보드 포커스 유지)로 시작되는 요소와 상호 작용할 때 나타나는 간단하고 유익한 메시지로 정의합니다. 마우스 오버에 의존하기 때문에 일반적으로 터치스크린에서는 툴팁을 사용할 수 없습니다.
보충적이지 결코 필수적이지 않음
NN/g는 실수의 명확한 예를 제공합니다. 즉, 툴팁에 비밀번호 요구 사항을 입력한 사이트입니다. 사람들이 작업을 완료하는 데 필요한 정보가 화면에 표시되어야 합니다. 도구 설명은 정의, 필드가 필요한 이유에 대한 설명, 아이콘 전용 버튼의 레이블에 적합합니다.
접근성
모든 사람이 사용할 수 있는 툴팁 만들기:
- 키보드 포커스 및 마우스 오버 시 열립니다.
- 사람들이 초점을 이동하지 않고 Escape로 무시하도록 하세요.
- 포인터가 위로 이동하는 동안 열어 두십시오.
- 화면 판독기가 이를 알릴 수 있도록 트리거에 연결합니다.
- 내부에 대화형 콘텐츠를 넣지 마세요. 대신 팝오버를 사용하세요.
터치 장치에 대한 도구 설명
터치시 호버가 존재하지 않습니다. 탭하면 작은 팝오버가 열리는 시각적 정보 아이콘을 사용하거나 설명을 인라인으로 표시합니다. 복잡한 기업 지표의 경우 레이블 옆에 있는 정보 아이콘은 모든 장치에서 친숙한 패턴입니다.
모션 및 타이밍
표시 전 짧은 지연은 포인터가 요소 위로 지나갈 때 도구 설명이 깜박이는 것을 방지합니다. 툴팁이 열리면 인접한 툴팁이 즉시 나타날 수 있습니다. 트리거의 빠른 페이드 또는 작은 스케일은 사람들이 그것이 어디서 왔는지 확인하는 데 도움이 됩니다. 약 150밀리초 미만으로 유지하세요.
기억할 핵심 원칙
- 도구 설명은 간단하고 보충적입니다.
- 툴팁에 필수 지침을 숨기지 마세요.
- 키보드 포커스 및 Escape 지원
- 터치 기기에서 탭 가능한 정보 아이콘 사용
- 툴팁 내에 대화형 콘텐츠가 없습니다.
자주 묻는 질문
출처
- Tooltip Guidelines — Nielsen Norman Group