화살표와 말줄임표 어포던스 사용 방법
UX 디자인 배우기 #91
Today UX 아티클
UX Movement에 올라온 Anthony의 글 How to Use Arrow and Ellipsis Affordances을 전문 번역한 글입니다.
텍스트 레이블만 유저가 클릭하는 것을 설명해주는 건 아닙니다. 메뉴와 버튼에서 가장 흔하게 쓰이는 두 가지 어포던스(affordance)는 ‘화살표’와 ‘말줄임표’입니다. 어포던스는 유저가 할 수 있는 행동을 설명해주는 유저 인터페이스 요소입니다. 이를 제대로 사용하면 인터페이스를 보다 직관적으로 만들 수 있습니다.
버튼 및 메뉴에서 쓰이는 화살표 어포던스
화살표 어포던스는 메뉴와 버튼에서 서로 다른 의미를 갖습니다. 버튼에서 쓰인 화살표 어포던스는 버튼을 클릭하면 다음 페이지로 이동하는 액션이 완료될 것임을 강조하는 뜻입니다. 특히 행동 유도 버튼(call-to-action button)을 눈에 띄게 만드는 데 효과적입니다.
메뉴에서 쓰이는 화살표 어포던스는 해당 유저 인터페이스를 누르면 액션이 완료될 것임을 의미하지 않습니다. 화살표가 메뉴에 있으면 이는 유저에게 해당 레이블 안에 더 많은 옵션이 있음을 말해주는 겁니다. 화살표 어포던스가 없으면, 유저는 선택할 수 있는 메뉴가 더 있다는 것을 알 수 없을 겁니다.
버튼 및 메뉴에서 쓰이는 말줄임표 어포던스
때로는 버튼이나 옵션을 클릭하면 액션이 완료되는 대신 모달 윈도우(modal widow)가 뜨는 경우가 있습니다. 말줄임표 어포던스는 이러한 일이 일어날 것임을 알려줍니다. 영어에서는 끝나지 않은 생각을 표현할 때 말줄임표를 사용합니다. 인터페이스에서는 디자이너가 끝나지 않은 액션을 표현할 때 버튼이나 메뉴에 말줄임표를 사용합니다. 유저는 모달 윈도우에서 액션을 완료하게 됩니다.
어포던스는 유저 인터페이스를 더 직관적으로 만든다
유저 인터페이스상에서 문구만으로 모든 것을 소통할 수는 없습니다. 화살표와 말줄임표 어포던스는 유저에게 유저 인터페이스가 취할 행동을 더 잘 전달하여 유저가 옳은 행동을 취할 수 있도록 도와줍니다. 인터페이스가 직관적일 때, 유저는 결과에 대한 걱정 없이 클릭할 수 있습니다. 이런 경우엔 어포던스가 문자보다 더 중요합니다.
감사합니다.
라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내
1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30)
2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)
3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)
4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)
5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)
6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)
7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)
8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)
라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)
(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플
(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의
(VOD) UX 로드맵 시리즈 #3. UX 가설 설계
(VOD) UX 로드맵 시리즈 #4. 데스크 리서치
(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치
(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립
(VOD) UX 로드맵 시리즈 #7. UX 설계
(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치
(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙
