brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Apr 04. 2017

링크의 어포던스

UX 디자인 배우기 #117

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


UX Movement에 올라온 Anthony의 글 Affordances of a Link를 전문 번역한 글입니다. 


텍스트를 링크라고 생각하고 실수로 클릭한 적이 있으신가요? 잘 디자인 된 웹사이트는 링크와 텍스트를 명확히 구분하여 유저가 실수를 하지 않게 해줍니다. 그렇게 하는 방법은 링크 어포던스를 이용하는 것입니다. 


이를 적용하면 유저가 무엇이 클릭가능하고 무엇이 클릭 불가능한지 이해하는 데 도움이 됩니다. 만일 여러분 사이트의 클릭률이 낮다면 아마도 충분히 강력한 링크 어포던스를 이용하고 있지 않은 것일 겁니다. 


어포던스는 웹 요소가 그 기능을 나타내는 시각적 특성을 뜻합니다. 링크는 클릭가능함을 소통하는 어떠한 특성 혹은 어포던스를 가지고 있습니다. 만일 약한 어포던스를 사용하면, 유저가 링크를 놓치기 쉽습니다. 


클릭률을 더 높이고 싶다면, 최소한 두 개 이상의 어포던스를 링크에 사용해야 합니다. 

다음은 링크를 구분하기 위해 사용할 수 있는 다양한 어포던스 리스트입니다. 


1. 텍스트 링크에 파란색을 사용한다. 꼭 파란색을 사용할 필요는 없지만, 파란색은 링크에 가장 흔하게 사용되는 색입니다. 텍스트와 같은 색이 아니라면, 그 색 또한 링크에 사용할 수 있습니다.

 

2. 링크를 가리키거나 링크에서 나가는 표시의 글머리 기호나 화살표를 사용한다. 여러분이 사용할 수 있는 화살표 스타일은매우 다양합니다. 보통 “»”을 많이 사용합니다.

 

3. 링크에 밑줄을 친다. 많은 사이트에서 마우스를 링크에 올렸을 때 밑줄이 뜨도록 만듭니다. 이는 마우스를 올리기 전에 링크임을 나타내주는 다른 어포던스(색상등)만 있다면 사용해도 괜찮습니다.

 

4. 링크에서 연결되는 내용과 관련된 이미지를 이용한다. 링크에 이용되는 이미지에는 해당 링크를 유저가 눌렀을 때 연결되어 보여지는 내용을 반영해야 합니다. 


5. 텍스트 주변에 테두리를 친다. 이렇게 하면 링크가 버튼처럼 보여집니다. 사람들은 버튼을 익숙하게 생각하며 어떻게 이용해야 하는지 알고 있습니다.

 

6. 링크는 좌우 여백이나 페이지 상하단에 배치한다. 이런 페이지 상의 위치는 네비게이션에서 기본적으로 이용됩니다. 유저는 이런 영역에 클릭 가능한 링크가 있을 것이라고 기대합니다.




링크에 강력한 어포던스를 주는 것은 간단하며 필수로 해야 하는 작업입니다. 일관적으로 적용하면, 유저가 사이트 이용 방법을 이용하게 될 것입니다. 링크의 어포던스는 웹에서 널리 이용되고 있습니다. 대부분의 웹사이트에서 링크 어포던스를 이용하고 있지만, 스타일은 조금씩 다릅니다. 어떤 어포던스 스타일을 이용하게 되건, 유저가 충분히 구분할 수 있게 만들어야 합니다.  



매거진의 이전글 유저 인터페이스 제약에는 낮은 색상 대비를 이용하라

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari

브런치 로그인