툴툴툴 팁팁팁 툴팁 툴팁
손 대면 톡 하고 열리는 Tool-Tips
미니멀한 모바일 환경에서 툴팁은
당장 눈에 안 보여도 되는 물건을
담아두는 수납함처럼 쓰인다.
툴팁 이야기가 나온 건, 어려운 용어를 어떻게 알려줄 것인가?를 논하던 자리에서였다. 토스피드와 같은 콘텐츠에서는 문장 안에서 풀어 쓰거나, 단락 밑 또는 각주를 활용할 수 있지만, 미니멀한 플로우에서는 공간적 제약이 따랐다. 그래서 거론된 게 만만한(?) 툴팁이었다. 물음표(또는 느낌표) 아이콘에 마우스를 갖다 대면 등장하는 네모난 툴팁 박스는 어려운 전문용어 옆에 찰싹 붙어 사용자의 궁금증을 바로 해결해 줄 수 있는 만능키와 다름없었다.
ⓒ 토스피드, 전문용어를 알기 쉽게 표현하는 방법additional information about a page element or feature
물론 그 쓸모가 툴팁에 관한 전부는 아니다. 툴팁에 관해 알아두어야 할 건 생각보다 꽤 있다.
어려운 용어를 설명해야 할 때 적합한 기능은 맞지만, 그렇다고 과용하면 안 될 기능이기도 했다. 왜냐하면, 툴팁 역시도 상호작용의 한 수단이기 때문이다. 눈에 띄긴 띄어야 하나 너무 많이 띄면 사용자 흐름을 방해하는 요소가 되어 오히려 역효과가 나타날 수 있으니 주의해야 한다. *아직 이런 불편한 경험은 하지 못했다. 나중에 발견하면 추가할 예정
user-triggered messages
툴팁 관련 정보 중 눈길을 끈 건 사용자의 의지로 유발되는 기능이라는 점이다. 따라서 사용자가 필요로 할 때, 흐름에 방해가 되지 않는 위치에서 적시적소에 나타나야 한다. 툴팁은 크게 두 가지 형태로 구분할 수 있다.
레이블이 없는 Tooltips
- 생김새: 말풍선과 닮았다.
- 텍스트 분량: 3음절 키워드 or 10글자 이내 서술형 문장
* 아이콘만으로 의미 설명이 불충분하다면, 툴팁 제공 필수
- 텍스트 목적: 주로 기능의 이름 또는 사용법 안내
- 텍스트 속성: 간결하게
아이콘 기능/사용법을 알려주는 툴팁 / (위)신한쏠 (아래)하나원큐레이블이 있는 Tooltips
- 생김새: 화이트/블랙/연회색 네모박스툴, 우측상단에 X 버튼, 줄글 모양도 가지각색
- 텍스트 분량: 그때 그때 달라요. 보기 좋게. 가지런히. 읽기 좋게. 쓰세요.
- 텍스트 목적: 추가/보충 설명이 필요할 때
*이때 레이블과 툴팁 내용은 짝을 이루어야 한다.★★★★★
- 텍스트 속성: 간결하게, 명확하게
툴팁 모양도 가지각색툴팁은 생각보다 다양한 형태를 갖는다. 느낌표나 물음표 아이콘뿐만 아니라 앱 바App Bar에 있는 작은 아이콘 또는 텍스트링크, 버튼, 이미지 등에서 툴팁 기능을 찾아볼 수 있었는데 팝업팁Popup Tips라는 개념과 혼용되어 쓰인다는 걸 알게 됐다. 컴포넌트를 부르는 용어가 여기저기 조금씩 다른 것처럼 툴팁과 팝업팁도 기능상 크게 달라 보이진 않았다. 아래 링크를 누르면, 툴팁과 팝업팁을 비교한 표를 볼 수 있다.
https://www.nngroup.com/articles/tooltip-guidelines/
Don’t use tooltips for
3가지만 기억하자. ① 툴팁은 사용자에게 있어 '추가로 필요한 정보'일 뿐이지 단계를 밟는데 '꼭 필요한 정보'여서는 안 된다. 예를 들어 인풋 텍스트Input Text 아래, 헬프Helf 텍스트로 있어야 할 내용을 물음표(또는 느낌표) 아이콘 안에 수납해 버리면, 사용자가 일일이 클릭해서 열어 봐야 하는 번거로움이 생길 수 있다.
② keep it brief 툴팁은 말 그대로 'Tip'이다. 한눈에 들어오도록 경제적으로 써야 한다.
③ redundant text are not beneficial to users 툴팁 문구 첫머리가 레이블과 중복되지 않아야 한다. 그런데 최근 흐름을 보면 꽤 다양하게 타이틀을 쓰고 있다는 걸 쉽게 찾아 볼 수 있다. 툴팁의 유형으로 바텀시트를 적용하는 경우도 있고.(2024. 3월 업데이트)
본문을 쓸 때는 사용자에게 더 유의미한 정보가 무엇일까를 고민해 보자. 짧게 쓰든 길게 쓰든 툴팁은 일목요연해야 제맛이다.
토스, 툴팁Add tip
## 닐슨노먼그룹의 자곤 관련 아티클
https://www.nngroup.com/articles/technical-jargon/
*미디엄에서 따옴.
Conclusion
Tooltips are small details that can make your product more usable. When introducing tooltips, design them to make easily and show concise and helpful, information that help users interact with your product.
