버튼에 시각적 무게를 두면 행위를 유도할 수 있다
UX 디자인 원칙
버튼에 시각적인 무게를 두면
사용자의 다음 행위를 적극적 유도할 수 있습니다
시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다.
특히 버튼에 시각적 무게감을 두는 것은 사용자의 시선을 끌어모으는 데 유용합니다.
그래서 주요 액션 버튼에 시각적 무게감을 둬야 합니다.
반면에, 주요 액션 버튼이 아닌 부차적인 버튼이라면, 시각적 무게감은 덜 줘야 합니다.
WHY?
버튼 사이에 시각적 무게감을 두는 것은 사용자가 버튼 선택하는데 올바른 도움을 주기 때문입니다.
만약, 버튼에 색상을 적용하는 데 있어 버튼의 시각적 무게감을 버리거나 명확하고 일관된 기준도 없다면 사용자가 버튼 선택에 어려움을 가질 수 있습니다.
그렇다면, 버튼에 시각적 무게감을 높이는데 가장 좋은 방법은 뭐가 있을까요?
채도 혹은 배경색과 텍스트를 조화롭게 사용하는 것입니다.
버튼에 채도가 높으면 더 밝아 보이고, 사용자의 시선을 이끌어 모을 수 있기 때문입니다.
특히, 배경색의 경우 차가운 배경에 흰 텍스트를 사용하면 시각적 무게감이 더 높아집니다.
그럼 이제부터, 버튼에 시각적 무게감을 어떻게 해야 하는지, UX 원칙에 대해 하나하나 알아보도록 하겠습니다.
첫째. 긍정적 행동(바꾸기, 보내기, 추가하기 등)을 유도하는 버튼에 가장 높은 대비 효과를 줘야 합니다
긍정적 행동이란 사용자가 과업을 완료하겠다는 주요 액션 행위를 의미합니다.
따라서, 긍정적 행동을 유도하는 버튼에는 가장 높은 색상 대비 효과를 줘야 합니다.
반면, 중립적이거나 부정적인 버튼은 긍정적 행동 버튼과 달리 낮은 색상 대비 효과를 줘야 합니다.
예를 들어 '비밀번호 변경'의 버튼은, 사용자에게 다음 행동을 유도하기 위한 목적으로 강조 (주황) 색상이 적용되었습니다.
CJ맴버십반면, 아래 OOO 로그인 페이지의 버튼은 사용자의 행위를 유도하는데 한계가 있어 보입니다.
WHY?
회원번호와 비밀번호를 입력한 다음에, 로그인 버튼을 찾으려 하는데, 페이지 하단에 있는 회원가입과 로그인 버튼이 동일 색상으로 적용되어 있어, 로그인 버튼이 한눈에 인지가 되지 않습니다.
HOW?
현재 페이지에서 '회원번호' 입력 필드와 '비밀번호' 입력 필드가 있다는 그 자체만으로....
'회원가입'이 아닌 '로그인'을 유도하는 페이지이므로,
페이지 하단의 '로그인' 버튼은 '회원가입' 버튼에 비해 상대적으로 더 강조되어야 하는 등 시각적 무게감을 더 줘야 합니다
OOO 로그인 페이지또한, OO은행 PC버전의 경우 ('이체확인증 일괄출력, 이체확인증 건별출력, 합산영수증출력' 버튼 모두가 사용자의 주요 액션 행위를 유도하는 버튼이 아닌데...) 버튼 색이 전부 파란색으로 되어 있어서, 어떤 버튼이 중요한 버튼인지, 그렇지 않은지 한 번에 인지하기 어렵습니다.
OOO은행. 페이지 하단 버튼(이체확인증 일괄출력, 이체확인증 건별출력, 합산영수증출력)에 적용된 색이 동일합니다WHY?
중요하지 않은 버튼에 배경색이 들어가게 되면 어떤 버튼이 중요한 버튼인지, 그렇지 않은 버튼인지 한 번에 인지하기 어렵기 때문입니다.
위 사례처럼, 버튼 모두가 중요하지 않은 부가적 버튼이라면, 버튼에 배경색을 빼고 두꺼운 테두리만 쳐도 무방합니다.
둘째. (모달창의 경우) 긍정적 행동을 유도하는 버튼은 우측, 부정적 행동을 유도하는 버튼은 왼쪽에 배치합니다.
모달 창에 버튼 제공할 때 왼쪽에는 부정적 행동을, 오른쪽에는 긍정적 행동을 유도하는 버튼을 제공합니다.
긍정적 행동을 유도하는 버튼이 오른쪽에 있으면, (모바일에서) 사용자 자신이 엄지 손가락으로 버튼을 누르기 쉬울 뿐만 아니라 사용자의 다음 과업 행위로 자연스럽게 연결됩니다.
예를 들어 Hmall과 G마켓의 경우 장바구니에서 상품을 삭제하고자 하는 경우, 부정적 행동을 나타내는 취소 버튼은 왼쪽에, 긍정적 행동을 나타내는 확인 버튼은 오른쪽에 배치가 되었습니다.
셋째. 부정적 행동을 나타내는 버튼은 긍정적 행동을 유도하는 버튼보다 더 높은 시각적 대비 효과가 적용되어서는 안 됩니다.
부정적 행동의 버튼이란, (버튼을 누르더라도) 현재 상태 변화를 주지 않거나, 뒤로 가기나 취소하기 등이 해당합니다.
부정적 행동을 나타내는 버튼은 긍정적 행동을 유도하는 버튼보다 더 높은 시각적 대비 효과가 적용되어서는 안 됩니다.
WHY?
부정적 행동에 시각적 무게감을 더 두게 되면 마치 부정적 버튼이 긍정적 행동 버튼처럼 오해받을 수 있기 때문입니다.
반면, 부정적 버튼이 중립적 행동을 유도하는 버튼과 함께 나란히 있는 경우, 부정적 버튼에 더 높은 시각적 대비 효과를 줘야 합니다.
WHY?
부정적 버튼에 따뜻한 색을 적용하면 사용자의 눈을 자극하여 더 돋보이게 하기 때문입니다.
넷째. 되돌릴 수 없는 액션 버튼에 시각적 무게감을 둬서는 안 됩니다.
되돌릴 수 없는 액션의 대표적인 버튼이 취소 버튼이 있습니다.
만약, 취소 버튼에 시각적 무게감을 두게 되면 간혹 일부 사용자는 긍정적 행동 버튼으로 오해하고 실수로 클릭할 수 있습니다.
(위) 취소 버튼에 시각적 무게감을 가장 많이 주었다.
(아래) 취소 버튼에 시각적 무게감을 덜 주었다
다섯째. 중립적 행동을 나타내는 버튼에는 가장 낮은 대비 효과를 줍니다.
중립적 행동을 유도하는 버튼은 긍정적 버튼 혹은 부정적 버튼과 함께 사용하는 경우가 많습니다.
중립적 행동을 유도하는 버튼에는 가장 낮은 대비 효과를 줘야, 사용자의 시선을 방해하지 않습니다.
우리가 목표로 하는 행위(긍정적 액션 행위)로 사용자의 시선을 유도해야 하기 때문입니다.
다시 말하면, 중립적 버튼은 중요한 버튼이 아니므로 사용자의 시선을 뺏기지 않도록 하는 것!!!! 중요합니다!!!!
따라서, 중립적 버튼에 배경색을 넣는 것보다는 테두리 치는 것만으로도, 사용자는 중립적 버튼이라는 것을 인지하는데 전혀 어려움이 없을 것입니다.
전민수 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
