링크(links) Hover Effect 원칙
UX 디자인 배우기 #49
Today UX 아티클
UX Movement에 올라온 Anthony의 글 Why Your Links Need a Hover Effect를 전문 번역한 글입니다.
링크에는 텍스트가 들어가 있지만 절대 텍스트처럼 보여서는 안 됩니다. 유저는 웹 페이지를 읽을 때 어떤 것이 클릭 가능한 것인지 구분할 수 있어야 합니다. 만일 링크가 적절히 대비되지 않으면, 유저가 링크를 놓칠 수도 있습니다.
색맹에겐 색상을 바꾸는 것으로는 충분하지 않다
대부분의 사이트에서는 링크에 텍스트와 다른 색을 사용합니다. 하지만 색맹 유저에겐 충분하지 않은 대비 효과입니다. 색맹 유저는 그런 색상의 차이를 보는 것이 어렵습니다. 색맹 유저는 커서가 화살표에서 손가락 모양으로 바뀌는 것에 의존해야 합니다.
호버 효과(hover effect)는 유저에게 어떤 것을 클릭할 수 있는지 분명한 신호를 줍니다. 유저가 커서를 링크 위에 올리면, 클릭할 수 있음을 말해주는 색이나 모양의 변화가 보이는 겁니다. 이렇게 되면 잘못된 링크를 클릭하는 것을 방지할 수 있습니다.
마우스 커서에 집중하지 않아도 된다
호버 효과를 주지 않으면 색맹 유저뿐만 아니라 일반 유저도 영향을 받게 됩니다. 일반 유저가 색맹 유저보다는 링크를 더 잘 볼 수는 있겠지만, 링크를 겨냥하기 위해서는 여전히 노력을 기울여야 합니다.
유저는 링크를 보면 마우스를 링크로 옮깁니다. 하지만 클릭하기 전에 커서가 링크 위에 놓인 것인지 확인해야 합니다. 그렇지 않으면 링크를 잘못 클릭하게 되기 때문입니다.
호버 효과를 주면, 유저는 마우스를 링크로 옮겨서 호버 효과를 보자마자 링크를 클릭할 수 있게 될 겁니다. 그러면 커서에 집중하지 않고도 링크를 빠르게 겨냥하고 클릭할 수 있게 됩니다. 대신, 페이지 내용에 좀 더 집중할 수 있습니다.
완벽한 호버 효과
저 대비 호버 효과는 눈에 잘 띄지 않기 때문에 고대비 호버 효과만큼 효과적이지 않습니다. 하지만 완벽한 호버 효과를 만들기 위해 할 수 있는 일이 있습니다. 완벽한 호버 효과는 색과 모양에 있어서 높은 대비 효과를 보여줄 것입니다.
호버 효과에서 색상에 고대비 효과를 더하기 위해서는, 더 차가운 색에서 더 따뜻한 색으로 색을 바꿔야 합니다. 모양에 고대비 효과를 더하기 위해서는 링크에 밑줄을 표시하거나 블록 하이라이트를 줘야 합니다.
모바일 호버 효과
모바일 기기에서는 호버 효과를 줄 수 없습니다. 마우스 커서가 없기 때문입니다. 즉, 모바일 링크는 색상과 모양에 있어서 높은 대비 효과를 주어야 합니다.
모바일 링크는 마치 호버 효과가 이미 적용된 것처럼 만들어야 합니다. 아래와 같이 화살표 어포턴스, 밑줄, 블록 하이라이트 등을 사용하여 모든 유저가 접근 가능하도록 만들어야 합니다.
결론
여러분의 유저가 색맹이건 아니건, 모든 사람들은 링크를 쉽게 찾고 클릭할 수 있어야 합니다. 링크에 호버 효과를 주는 것은 유저의 니즈를 충족할 수 있는 간단하면서도 효과적인 방법입니다. 링크와 텍스트는 달라 보이기만 하면 안 됩니다. 최고의 사용자 경험을 위해서 링크는 다른 방식으로 반응해야 합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
