[UI/UX 원칙 #19] 링크(links) Hover Effect 4가지 UX 원칙 가이드라인

링크(links) Hover Effect 4가지 UX 원칙 가이드라인

앤서니의 글 [링크(links) Hover Effect 4가지 UX 원칙 가이드라인] 소개하고자 합니다.

링크는 사용자에게 클릭할 수 있는 요소임을 명확히 인식시켜야 합니다. 텍스트가 링크로 사용될 경우, 일반 텍스트와 시각적으로 구별되지 않으면 사용자는 클릭 가능한 부분을 놓칠 수 있습니다. 이는 사용자 경험에 부정적인 영향을 미치고, 필요한 정보를 찾는 데 방해가 될 수 있습니다.

적절한 대비는 링크를 강조하여 사용자가 쉽게 인식하도록 돕습니다. 예를 들어, 링크에 색상, 밑줄 또는 다른 스타일을 적용하면 사용자는 자연스럽게 그 부분이 클릭 가능하다는 것을 이해하게 됩니다. 따라서 링크의 시각적 구분은 사용자에게 명확한 행동 유도를 제공하고, 웹 페이지의 가독성을 높이는 데 중요한 역할을 합니다.

원칙1. 색맹에겐 색상을 바꾸는 것으로는 충분하지 않다

대부분의 웹사이트는 링크를 구별하기 위해 텍스트 색상을 변경하지만, 색맹 사용자에게는 이러한 대비가 충분하지 않을 수 있습니다. 색맹은 특정 색상을 인식하는 데 어려움을 겪기 때문에, 색상 차이만으로 링크를 구분하는 것이 불가능할 수 있습니다.

이러한 사용자들은 링크인지 여부를 판단할 때 주로 커서 모양의 변화를 의존하게 됩니다. 즉, 화살표 모양의 커서가 손가락 모양으로 바뀌는 것을 통해 클릭 가능한 요소임을 인식합니다. 따라서 링크의 시각적 구분을 색상 외에 다른 방법으로 보완하는 것이 중요합니다. 예를 들어, 링크에 밑줄을 추가하거나 폰트 스타일을 변경하는 등의 방식으로 색맹 사용자도 쉽게 인식할 수 있도록 디자인해야 합니다. 이는 모든 사용자가 웹사이트를 효과적으로 이용할 수 있도록 하는 포괄적인 접근입니다.

호버 효과(hover effect)는 사용자가 커서를 링크나 버튼 위에 올렸을 때 발생하는 시각적 변화로, 클릭 가능한 요소임을 명확히 알려줍니다. 이 효과는 색상, 모양, 크기 등의 변화를 통해 사용자에게 클릭할 수 있는 대상임을 시각적으로 강조하는 것입니다.

이러한 시각적 신호는 사용자가 링크를 쉽게 인식하고, 잘못된 링크를 클릭하는 것을 방지하는 데 도움을 줍니다. 예를 들어, 링크의 색상이 바뀌거나 밑줄이 추가되면, 사용자는 해당 요소가 상호작용이 가능하다는 것을 즉시 알 수 있습니다. 결과적으로 호버 효과는 사용자 경험을 향상시키고, 웹 페이지에서의 탐색을 더 직관적으로 만들어 줍니다.

원칙2. 마우스 커서에 집중하지 않아도 된다

호버 효과가 없으면 색맹 사용자뿐만 아니라 일반 사용자도 링크를 인식하는 데 어려움을 겪을 수 있습니다. 일반 사용자는 색상 차이를 인식할 수 있지만, 링크가 클릭 가능한 요소임을 명확히 알려주는 추가적인 시각적 신호가 없으면 링크를 찾기 위해 더 많은 노력을 기울여야 합니다.

이런 경우 링크가 웹 페이지에서 눈에 띄지 않거나 다른 텍스트와 혼동될 수 있습니다. 특히 비슷한 색상이나 디자인이 많을 때, 사용자는 링크를 찾기 위해 커서를 이동하면서 불확실성을 느낄 수 있습니다. 따라서 호버 효과는 사용자에게 클릭 가능한 요소를 직관적으로 인식하게 하고, 탐색의 효율성을 높여줘야 합니다. 모든 사용자, 특히 일반 사용자에게 호버 효과는 중요한 디자인 요소입니다.

사용자가 링크를 클릭하기 전에 커서를 링크 위에 놓았는지 확인하는 이유는 클릭의 정확성을 보장하기 위해서입니다. 여러 개의 링크가 있는 웹 페이지에서 사용자는 원하는 링크를 클릭하고자 할 때, 커서가 정확히 링크에 위치하고 있는지를 확인해야 합니다.

만약 커서가 잘못된 위치에 있거나 비슷한 색상의 텍스트나 버튼이 근처에 있다면, 사용자는 원하지 않는 요소를 클릭할 위험이 있습니다. 따라서 커서를 링크 위에 올렸을 때의 시각적 피드백(예: 호버 효과)은 사용자가 클릭할 요소를 확실히 인식하고 잘못된 클릭을 방지하는 데 중요한 역할을 합니다. 이러한 확인 과정을 통해 사용자는 웹 페이지를 보다 원활하게 탐색할 수 있습니다.

원칙3. 완벽한 호버 효과

저 대비 호버 효과는 사용자가 링크나 버튼 위에 커서를 올렸을 때 나타나는 변화가 눈에 잘 띄지 않아, 클릭 가능한 요소를 인식하는 데 효과적이지 않을 수 있습니다. 반면, 고대비 호버 효과는 색상과 모양의 변화를 통해 사용자가 즉각적으로 클릭 가능성을 인식하게 도와줍니다.

완벽한 호버 효과를 만들기 위해서는 색상과 모양에서 높은 대비를 제공하는 것이 중요합니다. 예를 들어, 링크가 기본 텍스트와는 확연히 다른 색상으로 변경되거나, 모양이 부풀어 오르거나 그림자가 생기는 등의 변화가 필요합니다.

즉, 호버 효과에서 색상에 고대비 효과를 더하기 위해서는, 더 차가운 색에서 더 따뜻한 색으로 색을 바꿔야 하거나, 링크에 밑줄을 표시하거나 블록 하이라이트를 줘야 합니다. 

이러한 변화는 사용자가 쉽게 인식할 수 있도록 도와주어, 클릭할 요소를 빠르게 식별할 수 있게 합니다. 결국, 잘 설계된 호버 효과는 사용자 경험을 향상시키고, 웹 페이지의 탐색을 더 직관적으로 만들어 줍니다.

원칙4. 모바일 호버 효과

모바일 기기에서는 호버 효과를 줄 수 없습니다. 모바일 기기에서는 호버 효과를 적용할 수 없는 이유는 마우스 커서가 없기 때문입니다. 사용자가 화면을 터치하여 요소를 선택하기 때문에, 링크 위에 커서를 올려놓는 방식으로 시각적 피드백을 제공할 수 없습니다.

이로 인해 모바일에서 링크는 더욱 명확하게 구분되어야 합니다. 색상과 모양에서 높은 대비 효과를 제공하면 사용자가 링크를 쉽게 인식하고 클릭할 수 있습니다. 예를 들어, 링크의 색상을 배경과 확연히 다르게 하거나, 두꺼운 글씨체나 눈에 띄는 스타일을 적용하는 것이 중요합니다. 이러한 방식은 사용자가 링크를 빠르게 찾아 클릭할 수 있도록 도와주어, 모바일 환경에서도 원활한 탐색 경험을 제공합니다

따라서 모바일 링크는 마치 호버 효과가 이미 적용된 것처럼 만들어야 합니다. 아래와 같이 화살표 어포턴스, 밑줄, 블록 하이라이트 등을 사용하여 모든 사용가 접근 가능하도록 만들어야 합니다. 

결론

모든 사용자가 링크를 쉽게 찾고 클릭할 수 있어야 하는 이유는 웹사이트의 접근성과 사용자 경험을 향상시키기 위해서입니다. 링크에 호버 효과를 주는 것은 사용자가 클릭 가능한 요소를 명확히 인식할 수 있도록 도와주는 간단하면서도 효과적인 방법입니다.

링크와 일반 텍스트가 단순히 색상으로만 구별되는 것이 아니라, 다른 방식으로 반응해야 하는 이유는 사용자에게 직관적인 시각적 피드백을 제공하기 위해서입니다. 예를 들어, 링크가 클릭 가능할 때 색상이나 모양이 변화하면 사용자는 즉시 해당 요소가 상호작용이 가능한 것임을 인식할 수 있습니다.