링크의 어포던스
today
Today UX 아티클
UX Movement에 올라온 Anthony의 글 Affordances of a Link를 전문 번역한 글입니다.
텍스트를 링크라고 생각하고 실수로 클릭한 적이 있으신가요? 잘 디자인 된 웹사이트는 링크와 텍스트를 명확히 구분하여 유저가 실수를 하지 않게 해줍니다. 그렇게 하는 방법은 링크 어포던스를 이용하는 것입니다.
이를 적용하면 유저가 무엇이 클릭가능하고 무엇이 클릭 불가능한지 이해하는 데 도움이 됩니다. 만일 여러분 사이트의 클릭률이 낮다면 아마도 충분히 강력한 링크 어포던스를 이용하고 있지 않은 것일 겁니다.
어포던스는 웹 요소가 그 기능을 나타내는 시각적 특성을 뜻합니다. 링크는 클릭가능함을 소통하는 어떠한 특성 혹은 어포던스를 가지고 있습니다. 만일 약한 어포던스를 사용하면, 유저가 링크를 놓치기 쉽습니다.
클릭률을 더 높이고 싶다면, 최소한 두 개 이상의 어포던스를 링크에 사용해야 합니다.
다음은 링크를 구분하기 위해 사용할 수 있는 다양한 어포던스 리스트입니다.
1. 텍스트 링크에 파란색을 사용한다. 꼭 파란색을 사용할 필요는 없지만, 파란색은 링크에 가장 흔하게 사용되는 색입니다. 텍스트와 같은 색이 아니라면, 그 색 또한 링크에 사용할 수 있습니다.
2. 링크를 가리키거나 링크에서 나가는 표시의 글머리 기호나 화살표를 사용한다. 여러분이 사용할 수 있는 화살표 스타일은매우 다양합니다. 보통 “»”을 많이 사용합니다.
3. 링크에 밑줄을 친다. 많은 사이트에서 마우스를 링크에 올렸을 때 밑줄이 뜨도록 만듭니다. 이는 마우스를 올리기 전에 링크임을 나타내주는 다른 어포던스(색상등)만 있다면 사용해도 괜찮습니다.
4. 링크에서 연결되는 내용과 관련된 이미지를 이용한다. 링크에 이용되는 이미지에는 해당 링크를 유저가 눌렀을 때 연결되어 보여지는 내용을 반영해야 합니다.
5. 텍스트 주변에 테두리를 친다. 이렇게 하면 링크가 버튼처럼 보여집니다. 사람들은 버튼을 익숙하게 생각하며 어떻게 이용해야 하는지 알고 있습니다.
6. 링크는 좌우 여백이나 페이지 상하단에 배치한다. 이런 페이지 상의 위치는 네비게이션에서 기본적으로 이용됩니다. 유저는 이런 영역에 클릭 가능한 링크가 있을 것이라고 기대합니다.
링크에 강력한 어포던스를 주는 것은 간단하며 필수로 해야 하는 작업입니다. 일관적으로 적용하면, 유저가 사이트 이용 방법을 이용하게 될 것입니다. 링크의 어포던스는 웹에서 널리 이용되고 있습니다. 대부분의 웹사이트에서 링크 어포던스를 이용하고 있지만, 스타일은 조금씩 다릅니다. 어떤 어포던스 스타일을 이용하게 되건, 유저가 충분히 구분할 수 있게 만들어야 합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성전자, SK텔레콤, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
