툴팁의 문제점과 대안

원문링크: https://adamsilver.io/articles/the-problem-with-tooltips-and-what-to-do-instead/

툴팁은 사용자가 인터페이스의 일부에 마우스를 갖다대면(hover), 기능이나 의미를 설명하는 메시지를 말한다. 대개 사용자가 마우스를 치우면 사라진다.

여러가지 툴팁의 예시

툴팁은 화면에 부가정보를 넣는 역할을 하지만 몇 가지 문제점이 있다.

1. 눈에 잘 띄지 않는다.

일부 사용자는 툴팁을 알아채지 못한다. 따라서 그 내용을 전혀 보지 못할 가능성이 있다.

2. 추가적으로 신경을 써야 한다.

비밀번호 필드를 충족시키기 위한 복잡한 규칙을 설명하는 추가 정보가 필요하다고 가정하자. 사용자에게 해당 정보를 먼저 표시하는 건 불필요한 부담이 된다.

3. 화면을 가린다.

툴팁은 인터페이스의 일부 위에 표시된다. 그러니 툴팁을 읽으면서 동시에 나머지 화면을 작동시킬 수는 없다.

화면 일부가 가려졌다.

4. 작은 스크린에서는 잘릴 수 있다.

스크린 사이즈가 작다면 툴팁이 잘려서 표시될 수 있다.

툴팁은 잘릴 수 있다.

5. 음성인식 도구에는 잘 대응하지 못한다.

툴팁의 아이콘은 적절한 레이블이 필요하다. 그럼에도 음성인식 도구를 쓰는 사용자는 아이콘을 어떻게 실행해야 할지 애매해진다.

아이콘은 음성인식 소프트웨어로는 잡아내기 어렵다

종 아이콘을 생각해보자. 사용자가 아이콘을 실행하기 위해 '종을 클릭하라', '공지를 클릭하라' 그것도 아니면 뭐라고 해야할지 애매하다.

6. 마우스 오버(hover)는 접근성이 떨어진다.

첫 번째, 툴팁은 마우스가 필요한데, 키보드나 터치스크린 사용자는 마우스가 없다.

두 번째, 사용자가 꼭 툴팁을 실행할 생각이 없어도 실수로 실행할 수 있다.

세 번째, 마우스를 적절히 사용하는 기술이 필요하다. 사용자는 마우스를 실행 지점에 정확히 갖다댄 다음 툴팁이 없어지지 않도록 딱 고정하고 있어야 한다.

네 번째, 화면 확대 기능 사용자는 툴팁을 유지한 채 기능을 사용할 수가 없다.

마지막으로, 사용자는 툴팁을 유지한 채 선택하거나 수행할 수 없다.

그럼 대안은.

1. 툴팁이 필요없도록 만들라.

사용자가 인터페이스를 이용하기 위한 콘텐트가 따로 필요하다는 것 자체가 좋지 않은 디자인이다.

2. 추가정보를 보여주라.

꼭 설명을 제공해야겠다면, 그냥 화면에 표시하라.

툴팁을 쓰지 말고 표시하라

3. 토글 기능을 써라.

1번과 2번으로 안된다면, 토글 기능을 써라.

토글 요소

이게 더 나은 이유:

• 아이콘 하나에만 의존하지 않고,
• 화면에서 잘리지 않으며,
• 콘텐트를 가리지도 않고,
• 클릭해서 실행하니 어떤 상황에서도 잘 작동한다.

요약

툴팁은 잘 쓰더라도 사용자가 여러 장애물을 거쳐 콘텐트에 접근하게 만들고, 잘 쓰지 못하면 아예 콘텐트에 접근도 못하게 만든다. 보다 좋은 방법은 콘텐트를 원래의 자리에서 보여주는 것이고, 더 좋은 방법은 애초에 추가 정보가 필요없도록 만들어야 한다.

모든 방법이 통하지 않는다면, 토글 기능을 사용하라. 

그래서, 옮긴이도 동의하는가?

나도 툴팁이 최선이 아니라는 것은 인정한다. 툴팁이 필요 없이 그냥 화면에 보이는 UI 만으로 사용자가 소프트웨어를 이용하는 데 불편함이 없으면 가장 좋다. 아울러 때로는 툴팁이 이름 그대로 'tip'을 제공하는 의도인 경우도 있다.

동시에 이 글에서 결국 대안으로 제시한 '토글 기능(toggle component)'이 정말 좋은 대안인지는 잘 모르겠다. 그냥 툴팁을 hover가 아니라 클릭해서 실행하도록 바꾸고, 화면 요소를 가리지 않도록 위치를 잡으면 충분하지 않을까?