화살표와 말줄임표 어포던스 사용 방법
UX 디자인 배우기 #91
Today UX 아티클
UX Movement에 올라온 Anthony의 글 How to Use Arrow and Ellipsis Affordances을 전문 번역한 글입니다.
텍스트 레이블만 유저가 클릭하는 것을 설명해주는 건 아닙니다. 메뉴와 버튼에서 가장 흔하게 쓰이는 두 가지 어포던스(affordance)는 ‘화살표’와 ‘말줄임표’입니다. 어포던스는 유저가 할 수 있는 행동을 설명해주는 유저 인터페이스 요소입니다. 이를 제대로 사용하면 인터페이스를 보다 직관적으로 만들 수 있습니다.
버튼 및 메뉴에서 쓰이는 화살표 어포던스
화살표 어포던스는 메뉴와 버튼에서 서로 다른 의미를 갖습니다. 버튼에서 쓰인 화살표 어포던스는 버튼을 클릭하면 다음 페이지로 이동하는 액션이 완료될 것임을 강조하는 뜻입니다. 특히 행동 유도 버튼(call-to-action button)을 눈에 띄게 만드는 데 효과적입니다.
메뉴에서 쓰이는 화살표 어포던스는 해당 유저 인터페이스를 누르면 액션이 완료될 것임을 의미하지 않습니다. 화살표가 메뉴에 있으면 이는 유저에게 해당 레이블 안에 더 많은 옵션이 있음을 말해주는 겁니다. 화살표 어포던스가 없으면, 유저는 선택할 수 있는 메뉴가 더 있다는 것을 알 수 없을 겁니다.
버튼 및 메뉴에서 쓰이는 말줄임표 어포던스
때로는 버튼이나 옵션을 클릭하면 액션이 완료되는 대신 모달 윈도우(modal widow)가 뜨는 경우가 있습니다. 말줄임표 어포던스는 이러한 일이 일어날 것임을 알려줍니다. 영어에서는 끝나지 않은 생각을 표현할 때 말줄임표를 사용합니다. 인터페이스에서는 디자이너가 끝나지 않은 액션을 표현할 때 버튼이나 메뉴에 말줄임표를 사용합니다. 유저는 모달 윈도우에서 액션을 완료하게 됩니다.
어포던스는 유저 인터페이스를 더 직관적으로 만든다
유저 인터페이스상에서 문구만으로 모든 것을 소통할 수는 없습니다. 화살표와 말줄임표 어포던스는 유저에게 유저 인터페이스가 취할 행동을 더 잘 전달하여 유저가 옳은 행동을 취할 수 있도록 도와줍니다. 인터페이스가 직관적일 때, 유저는 결과에 대한 걱정 없이 클릭할 수 있습니다. 이런 경우엔 어포던스가 문자보다 더 중요합니다.
감사합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
