툴팁의 문제점과 대신해야 할 일
본문
툴팁은 사용자가 인터페이스의 일부 (일반적으로 아이콘) 위로 마우스를 가져가 특정 작업의 작동 방식 또는 의미를 설명하는 메시지입니다.
그런 다음 사용자가 요소를 가져 오면 사라집니다.
https://adamsilver.io/articles/the-problem-with-tooltips-and-what-to-do-instead/
그들은 당신이 화면에 추가 정보를 짜낼 수 있지만 많은 문제가 있습니다.
기에서는 툴팁의 몇 가지 단점과 그 대신 수행 할 작업에 대해 설명합니다.
1. 그들은 발견하기 어렵습니다
일부 사용자에게는 툴팁이 표시되지 않으므로 툴팁에 포함 된 콘텐츠를 볼 수 없을 위험이 높습니다.
2. 노력이 필요합니다
복잡한 규칙이 있는 비밀번호 필드를 충족시키기 위해 사용자에게 추가 정보가 필요하다고 가정 해 보겠습니다. 사용자가 먼저 컨텐츠를 공개하게 하는 것은 불필요한 부담입니다.
3. 그들은 화면을 가립니다
툴팁이 화면 상단에 표시되어 일부 인터페이스를 차단합니다.
즉, 툴팁을 읽고 동시에 나머지 화면을 조작 할 수 없습니다.
사용자는 힌트를 기억하기 위해 열심히 노력하거나 두 가지 작동 모드를 반복적으로 전환해야 합니다.
4. 작은 화면에서 잘릴 수 있음
툴팁이 겹쳐지면서 더 작은 뷰포트에서 잘릴 수 있습니다.
5. 음성 인식 기능이 제대로 작동하지 않습니다
아이콘으로 구성된 툴팁에는 액세스 가능한 레이블이 필요합니다. 그러나 음성 사용자가 있더라도 음성 사용자는 자신이 보는 것을 해석하고 그 내용을 추측해야 합니다.
벨 아이콘을 상상해보십시오. 활성화하기 위해 사용자가 '클릭 벨', '클릭 알림'또는 다른 것을 말해야 하는지 확실하지 않습니다.
6. 호버에서 컨텐츠를 공개 할 수 없습니다
먼저, 키보드 및 터치 스크린 사용자를 제외한 도구 설명을 사용하려면 마우스 또는 기타 포인팅 장치를 사용해야 합니다.
둘째, 호버링이 항상 컨트롤을 활성화하려는 것은 아닙니다. 사용자가 실수로 활성화하는 툴팁 위로 커서를 이동할 수 있습니다.
셋째, 작동하려면 훌륭한 운동 기술이 필요합니다. 사용자는 마우스를 적중 영역 위로 정확하게 이동 시키고 실수로 마우스를 숨기지 않도록 고정 시켜야 합니다.
넷째, 화면 돋보기 사용자는 툴팁을 숨기지 않고 시야를 이동할 수 없습니다.
마지막으로, 사용자는 툴팁 내에서 컨텐츠를 선택하거나 상호 작용할 수 없습니다.
툴팁에 초점을 맞춰 키보드 사용자에게 비슷한 환경을 제공 할 수 있습니다. 그러나 이것은 기존의 것이 아니며 여전히 터치 스크린 사용자를 제외합니다.
대신해야 할 일
1. 사용자가 할 필요가 없도록 열심히 노력하십시오.
사용자가 인터페이스를 이해하도록 돕기 위해 콘텐츠를 갖는 것은 디자인이 잘못되었음을 나타냅니다.
아이콘을 사용하여 의미를 전달하는 경우 대신 텍스트를 사용하거나 아이콘과 텍스트를 함께 사용하십시오.
위 : 아이콘 만 (나쁜) 중간 : 텍스트 만 (좋음). 하단 : 텍스트 및 아이콘 (양호)
하나의 복잡한 질문이 있는 경우 몇 가지 간단한 질문을 통해 더 간단하게 만들 수 있습니까?
어느 쪽이든 간결하게 하기 위해 노력하십시오.
2. 추가 내용 만 표시
실제로 사용자에게 설명을 제공해야 하는 경우 컨텐츠를 표시하십시오.
위 : 툴팁의 내용 (나쁜). 하단 : 콘텐츠 인라인 (양호)
사용자에게 필요할 때 필요한 것을 제공하십시오.
3. 더 나은 콘텐츠 전환 패턴 사용
(1) 및 (2)가 작동하지 않으면 인라인 토글 구성 요소를 사용하십시오.
다음과 같은 이유로 더 좋습니다.
- 도해만으로는 의존하지 않습니다
- 뷰포트에서 잘리지 않습니다
- 내용을 가리지 않습니다
- 모든 상황에서 잘 작동하는 클릭시 활성화됩니다.
요약
툴팁은 컨텐츠를 숨기고 표시하는 방법을 제공하지만, 인터페이스 작동 방식을 명확히 해야 하는 것은 디자인이 잘못되었음을 나타냅니다.
기껏해야 툴팁으로 사용자는 컨텐츠에 액세스하기 위해 일련의 장애물을 뛰어 넘습니다. 최악의 경우, 그들은 보이지 않고 완전히 접근 할 수 없습니다.
더 좋은 대안은 콘텐츠를 현장에서 보여 주거나 더 나은 방법으로 인터페이스를 디자인하여 사용자가 처음에 추가 지침이 필요하지 않도록 하는 것입니다.
다른 모든 방법이 실패하면 인라인 토글 구성 요소를 사용하십시오. 툴팁의 함정 없이 진보적 인 공개의 모든 이점을 제공합니다.
- 이전글코드 검토를 수행하는 방법 - Google의 엔지니어링 사례 문서 19.09.13
- 다음글Caniuse 및 MDN 호환성 데이터 협업 19.09.13