13.툴팁 가이드라인
[3.툴팁, 다이어로그, 학습을 위한 오버레이]
툴팁은 새로운 것이 아니지만 여전히 잘못사용되는 경우들이 있다.
정의 : 툴팁은 요약된, 정보전달을 위한 메세지로 그패픽 UI의 한 요소로 사용자가 상호작용을 할 수 있다. 툴팁은 두가지 방법으로 나태낼수 있다. 마우스 오버를 하는 경우, 데스크탑에서는 키보드 오버하는 경우 두가지가 있다.
이경우 당신은 키보드 오버가 무엇인지 궁금 할 것이다. 활성화된 요소를 페이지에서 접근하기 위해 사용자는 마우스를 이동하거나 키보드에서 tab버튼을 눌러 이동을 하게된다. 키보드 호버는 tab을 이용해서 툴팁이 나오는 곳에 좀 더 오래 머무르는 경우 나타나게된다.
툴팁은 어떤 요소에나 다 나타낼 수 있다. (아이콘, 텍스트링크, 버튼 등에) 툴팁은 툴팁과 짝을 이루는 요소의 설명을 제공한다. 그래서 툴팁은 맥락에 맞는 내용이 꼭 나타나야하고 특정한 내용을 설명해야하며 너무 큰 내용이나 작업 흐름등에 관련해서 설명하지 않는다.
한가지 중요한 툴팁의 측면은 사용자의 트리거에 의해서 조작된다는 점이다. 그러므로 팁은 새로운 기능 또는 특정기능을 사용하는 방법에 대해서 사용자에게 알려준다.
툴팁은 호버제스쳐에 의해서 나타나기때문에 툴팁은 마우스나 키보드로 조작되는 환경에서 사용될수있다. 모바일 처럼 터치스크린의 경우 가능하지 않다. 먼 미래에는 눈동자의 움직임을 인식하여 사용자가 GUI를 일정 시간 동안 바라볼때 활성화 될 수도 있다.
툴팁과 팝업팁의 차이
데스크탑 컴퓨터 또는 랩탑에서만 제한적으로 툴팁이 사용된다고 하지만 이와 비슷한 요소로 일반적인 터치스크린 디바이스에 적용되는 아이템을 팝업팁이라고 일컫는다. 툴팁과 팝업팁은 같은 목표를 가지고 있다. 도움이 되고 추가적인 정보를 전달하는 목표를 위한 요소이다. 아래 표를 보면 비슷한 점과 차이점을 알 수 있다
툴팁 / 팝업팁
적용되는곳 : 테스크탑 / 아무데나
무엇에의해 나타나나 : 호버 (마우스 또는 키보드) / 터치 또는 클릭
사라지는 지점 : 사용자가 상호작용 하는 영역을 벗어났을때 / 사용자가 닫기버튼 또는 다른 영역의 스크린을 터치했을 때
나타낼 수 있는 요소들 : 아이콘, 텍스트링크, 버튼, 이미지 / 물음표 또는 i 아이콘
콘텐츠타입 : 작은 컨텐츠 / 작은 컨텐츠
아래는 툴팁이 데스크탑 사이트에서 사용되는 내용에 대한 가이드이다.
툴팁 사용 가이드라인
1.툴팁을 반드시 작업을 완료해야하는 정보를 표현하는데 사용하지 않는다.
사용자는 그들의 작업을 완료하기 위해 툴팁을 찾을 필요가 없어야한다. 툴팁은 폼필들 중에서 익숙하지 않은 부분을 작성하기 위해 추가적인 정보가 필요할때 보여지거나 일반적인지 않은 요청을 하게되는 경우 보여지는 경우 적용되는 것이 잘 적용된 사례라고 말할 수 있다. 툴팁은 사라질 수 있다는 것을 기억해라 그래서 작업을 진행하기 위한 지시사항이나 다른 직접적으로 수행해야하는 정보 예를 들어 필드에 반드시 적어야하는 내용같은 것은 툴팁으로 디자인하면 안된다. 툴팁에 나온 내용을 기억했다가 작업을 해야하하면 기억하지 못할 경우 다시 툴팁을 계속 열어봐야하기때문에 번거롭게된다.
2.요약과 도움이 되는 정보를 툴팁안에 제공해라
툴팁에 너무 많은 양의 글이 적혀있다면 이것은 분명 사용자에게 도움이 되지 않을 것이다. 만약 당신이 부분적으로 도움이 되는 정보를 생각하지 못한다면 툴팁을 사용하지 않으면 된다. 그렇지 않으면 UI에 불필요한 정보들이 노출되고 운이 나쁜 사용자들은 툴팁이 활성될때 마다 불필요한 정보때문에 비효율적인 작업을 하게된다.
추가적으로 매우 긴 내용은 더이상 '팁=간단한 조언'이 아니기 때문에 내용을 요약해야한다. 툴팁은 적은 내용을 담는다. 짧은 글의 요소는 그것 자체로 충분한 설명이 되도록한다. 당신이 쓴 툴팁의 내용은 한줄 또는 여러 줄이 될 수 있지만 관련있는 내용이어야한다.
3.마우스와 키보드 호버를 둘다 지원해라
툴팁이 마우스 호버를 할때만 나타난다면 키보드로 조작하는 사용자들에게는 툴팁의 내용을 알 수 없게 된다. 당신의 툴팁이 키보드로도 확인 할 수 있도록 기능을 지원해라.
4.주변에 여러 요소들이 있다면 툴팁 내용안의 화살표를 활용해라
화살표는 툴팁이 설명하고 있는 내용을 분명하게 알려주는 장점이 있다. 여러 요소들이 붙어 있는 경우에 화살표는 혼란을 방지한다.
5.툴팁을 사이트에 전체적으로 일관성있게 사용해라
툴팁을 활성화 시키는 시각적인 요소가 잘 나타나지 않기 때문에 발견하기 어렵다. 만약 툴팁이 당신의 웹사이트에서 나타는 것이 들쭉날쭉하다면 사람들은 어떤 툴팁은 절대 발견하지 못할 것이다. 몇개의 요소에만 툴팁이 적용되는 것이 아니라 일관성있게 툴팁이 적용되는 것은 중요하다. 만약 몇개 요소만 설명이 필요한 경우라면 팝업팁을 대신 적용해라.
추가적인 권장사항들
- 라벨이 없는 아이콘에는 툴팁을 제공해라 : 대부분의 아이콘은 모호하기에 우리는 모든 아이콘에 텍스트 라벨을 제공하도록 권장한다. 당신의 사이트에서 아이콘에 라벨을 작성하지 않는 것을 고집한다면 당신은 최소한 툴팁으로 해당 아이콘에 대한 설명을 제공해야한다.
- 툴팁은 백그라운드와 적절하게 대비시는 것을 확실히 해라 : 사용자들은 그들이 클릭해야하거나 호버해야하는 요소들을 일반적으로 본다. 적절한 대비로 사용자가 툴팁안에 있는 텍스트를 일을 수 있게 확실히한다. 시각적인 결함으로 인해 사용자들이 텍스트를 읽기 어려운 경우들이 있는데 흰색 페이지에 옅은 회색 텍스트의 툴팁은 읽기가 어렵다.
- 툴팁의 위치가 관련있는 내용을 가리지 않도록 주의해라 : 툴팁이 관련있는 내용을 가리게 되면 사용자는 툴팁을 닫았다가 다시 읽었다가 반복해야만한다. 툴팁의 위치가 컨텐츠를 가리자 않는지 테스트를 해서 사용자가 하려는 작업을 방해하지 않는다.
결론
툴팁은 사용자들이 이해하지 못한 기능들을 알게하는 이중장치로 자주 사용된다. 많은 툴팁 적용사례들을 보면 다른 디자인 가이드라인들은 따르지만 툴팁에경우 그러지 않는 경우들이 있다. 중요한 정보는 페이지에 반드시 보여야하기에 툴팁은 반드시 사용자가 작업을 완수해야하는 내용에 적용되면 안된다.
더 나아가 우리는 극한의 미니멀리즘 디자인을 추구하기 때문에 더 많은 툴팁이 필요할것이다. 툴팁에 대해서 고려할때 마다 스스로에게 이 정보가 반드시 사용자가 작업을 완수하기 위해 필요한 정보인지 물어보고 만약 아니라면 툴팁을 적절하게 적용한다. 그렇지 않다면 해당 정보를 스크린에 보여줘야한다.
*저는 전문번역가가 아니기 때문에 정확한 내용은 원문을 통해 확인하시기바랍니다.*
https://www.nngroup.com/articles/tooltip-guidelines/
