brunch

매거진 UX디자인가이드라인

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jun 25. 2024

긍정적 행동 유도를 위한 색상 대비 전략

UX 디자인 가이드라인 배우기 #12

긍정적 행동 유도를 위한 색상 대비 전략

긍정적 행동은 사용자가 태스크를 수행하는데 완료하겠다는 행동입니다. 그 때문에 긍정적 행동(바꾸기, 보내기, 정보 추가하기 등)을 유도하는 버튼에는 가장 높은 색상 대비 효과를 줘야 합니다.

그 이유는 다음과 같습니다.

첫째. 주목성 향상

높은 색상 대비는 사용자의 시선을 더욱 효과적으로 끌어, 긍정적 행동 버튼을 쉽게 찾을 수 있게 합니다. 이를 통해 사용자가 원하는 과업을 신속하게 완수할 수 있습니다.

둘째. 행동 촉진

색상 대비가 높은 버튼은 사용자에게 "지금 당장 이 버튼을 누르세요"라는 강력한 시각적 신호를 전달합니다. 이는 사용자의 긍정적 행동을 더욱 유도하는 효과가 있습니다.

예를 들어 다음 사례는 사용자에게 다음 행동을 유도하기 위해 주황색의 버튼으로 강조하고 있습니다.

셋째. 심리적 효과

높은 색상 대비는 사용자에게 "이 버튼을 누르면 원하는 결과를 얻을 수 있다"는 신뢰감과 확신을 줄 수 있습니다. 이는 사용자의 과업 완수 의지를 높이는 데 도움이 됩니다.

반면, 중립적이거나 부정적인 버튼은 긍정적 행동 버튼과 달리 낮은 색상 대비 효과를 줘야 합니다. 사용자의 주목을 덜 끌어 실수를 방지하고자 함입니다. 이를 통해 긍정적 행동을 보다 강조할 수 있습니다.

다음 사례는 로그인 페이지 내 회원+비밀번호를 입력 뒤, 페이지 하단의 회원가입과 로그인 버튼이 동일 색상으로 되어 있어, 어떤 버튼이 중요한 버튼인지, 그렇지 않은 버튼인지 한 번에 식별되지 않습니다.

아래 PC버전의 하단 영역의 경우 중요한 버튼만 강조하면 되는데 전부 파란색으로 되어 있어 어떤 버튼이 중요한 버튼인지 인지하기 어렵습니다. 버튼 적용 시 중요 버튼 외 나머지 버튼은 배경색이 들어가면 안 됩니다. 중요하지 않은 버튼에 배경색이 들어가게 되면 색상 대비 효과가 없고, 버튼들이 비슷하게 보이게 됩니다. 이 경우는 버튼에 배경색을 빼고 두꺼운 테두리만 쳐도 무방합니다.