brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Dec 08. 2016

화살표와 말줄임표 어포던스 사용 방법

UX 디자인 배우기 #91

민수샘의 UX 17개(신규 16개 오픈 기념!!!!) 강좌 묶음 할인 이벤트 !!!!!
(100명 한정 판매, 할인율 94%, 1,640,000원 > 98,000원) 
(평생 소장)


(아래 링크 선택 > (상단 우측) 라이브 클래스 회원 가입 > (우측: 패키지 신청)

https://ebprux.liveklass.com/packages/78858



Today UX 아티클


UX Movement에 올라온 Anthony의 글 How to Use Arrow and Ellipsis Affordances을 전문 번역한 글입니다.


텍스트 레이블만 유저가 클릭하는 것을 설명해주는 건 아닙니다. 메뉴와 버튼에서 가장 흔하게 쓰이는 두 가지 어포던스(affordance)는 ‘화살표’와 ‘말줄임표’입니다. 어포던스는 유저가 할 수 있는 행동을 설명해주는 유저 인터페이스 요소입니다. 이를 제대로 사용하면 인터페이스를 보다 직관적으로 만들 수 있습니다. 


버튼 및 메뉴에서 쓰이는 화살표 어포던스


화살표 어포던스는 메뉴와 버튼에서 서로 다른 의미를 갖습니다. 버튼에서 쓰인 화살표 어포던스는 버튼을 클릭하면 다음 페이지로 이동하는 액션이 완료될 것임을 강조하는 뜻입니다. 특히 행동 유도 버튼(call-to-action button)을 눈에 띄게 만드는 데 효과적입니다.


메뉴에서 쓰이는 화살표 어포던스는 해당 유저 인터페이스를 누르면 액션이 완료될 것임을 의미하지 않습니다. 화살표가 메뉴에 있으면 이는 유저에게 해당 레이블 안에 더 많은 옵션이 있음을 말해주는 겁니다. 화살표 어포던스가 없으면, 유저는 선택할 수 있는 메뉴가 더 있다는 것을 알 수 없을 겁니다.



버튼 및 메뉴에서 쓰이는 말줄임표 어포던스


때로는 버튼이나 옵션을 클릭하면 액션이 완료되는 대신 모달 윈도우(modal widow)가 뜨는 경우가 있습니다. 말줄임표 어포던스는 이러한 일이 일어날 것임을 알려줍니다. 영어에서는 끝나지 않은 생각을 표현할 때 말줄임표를 사용합니다. 인터페이스에서는 디자이너가 끝나지 않은 액션을 표현할 때 버튼이나 메뉴에 말줄임표를 사용합니다. 유저는 모달 윈도우에서 액션을 완료하게 됩니다. 



어포던스는 유저 인터페이스를 더 직관적으로 만든다


유저 인터페이스상에서 문구만으로 모든 것을 소통할 수는 없습니다. 화살표와 말줄임표 어포던스는 유저에게 유저 인터페이스가 취할 행동을 더 잘 전달하여 유저가 옳은 행동을 취할 수 있도록 도와줍니다. 인터페이스가 직관적일 때, 유저는 결과에 대한 걱정 없이 클릭할 수 있습니다. 이런 경우엔 어포던스가 문자보다 더 중요합니다. 


감사합니다. 




민수샘의 UX 17개(신규 16개 오픈 기념!!!!) 강좌 묶음 할인 이벤트 !!!!!
(100명 한정 판매, 할인율 94%, 1,640,000원 > 98,000원) 
(평생 소장)


(아래 링크 선택 > (상단 우측) 라이브 클래스 회원 가입 > (우측: 패키지 신청)

https://ebprux.liveklass.com/packages/78858




17개 UX 강좌 커리큘럼 



감사합니다. 

매거진의 이전글 아이콘 설계 UI 가이드라인 9가지

매거진 선택

키워드 선택 0 / 3 0

댓글여부

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