[UI] 팁박스 #14
Description
어떤 UI를 구현하나요?
- Tooltips
주로 어디에, 왜 쓰이나요?
plain text와 더불어 button을 option으로 가지고 있다.
부가적인정보 제공- 기능을 잘 모를 때: 기능에 대한 설명 제공
- 기능을 잘 알 때: 혜택 등의 정보 제공
- 다음 단계에 대한 가이드 제공
즉, 화면을 구성할 때 제공하는 정보가 중요하지 않거나, 자주 바뀌는 경우, 혹은 공간이 없을 때 주로 사용한다.
- 툴팁의 종류
- tooltips: hover, focus 상태에 따라 보여주는 팁박스
- popup tips: click 액션에 따라 보여주는 팁박스
비슷한 UI와의 차이점
- title 속성 : 브라우저에서 접근성과 관련하여 기본적으로 제공하는 툴팁 기능. 태그에 title 속성을 사용하여 구현이 가능하다. 스크린리더가 해당 내용을 잘 읽어준다.
어떤 UX를 가지고 있나요?
-
tooltips:
- hover, focus 상태에서 보이고, 그 외의 경우 보통 보이지 않게 한다.
- 팁박스를 보여주는 것 외에 상호작용할 수 있는 기능이 있는 곳에 사용한다.
-
popup tips:
- 클릭을 했을 때 툴팁을 띄우는 것 외의 다른 동작을 하면 안된다.
?등의 아이콘 표시가 별도로 존재한다.- 모바일 기기에서 주로 사용한다.
-
버튼: 옵션으로 있으며, 어떤 버튼이든 close 기능을 포함하고 있다.
- ex) Next Step, Got it, X
- 버튼이 있는 경우 click 액션으로도 툴팁의 상태를 처리할 수 있다.
- 한 번 팁박스를 띄우면 버튼과 상호작용을 해야 없어진다.
-
툴팁의 위치
- 마우스를 사용하는 경우: 커서의 위치와 뷰포트의 위치를 기준으로 화면에 띄운다.
- tab 등 focus로 접근하는 경우: 툴팁의 대상을 가리지 않은 상태에서 띄운다.
- 어떤 위치이든, 상호작용 대상을 가리는 경우를 피한다.
장점
- 잘 사용하지 않은 기능에 대해 간략하게 정보를 제공할 수 있다.
단점
- hover, focus 상태가 잘 적용되지 않는 모바일 기기의 경우 close button을 별도로 두거나 click action으로 처리해야 한다.
- 화면에 바로 보이지 않는 정보이므로 접근성이 떨어진다. << 필요할 때 아니면 지양하면 좋은 UI
추가적으로
- 좋은 툴팁의 조건
- 쉬운 발견
- 적절한 정보 제공: 필요한 정보가 아닌 부가적인 정보만 사용
- 중복되지 않은 정보 제공
- 간단한 상호작용만 허락: close button
어떻게 접근성을 높일 수 있을까요?
- 팁박스의 내용을 title 속성에 할당한다.
- 사라지기까지 최소 지연 시간이 있으면 좋다.
레퍼런스