버튼 색상 적용 UX 가이드
UX 디자인 배우기 #68
Today UX 아티클
UX Movement에 올라온 Anthony의 글 How Button ColorContrast Guides Users to Action를 전문 번역한 글입니다.
실수로 잘못된 버튼은 클릭해본 적이 있으십니까? 유저는 제대로 된 방향으로 안내를 받지 못하면 모달 윈도(modal windows)에서 잘못된 판단을 내리게 됩니다. 그런데도 많은 모달에서 서로 다른 액션을 분명하게 구분하지 않으면서 유저가 행동하도록 유도합니다.
서로 다른 버튼 사이의 명확한 색상 대비는 유저가 정확한 버튼을 선택하도록 가이드해줍니다. 어떤 행동을 취해야 하는지 명확히 보여주지 않으면 유저가 확신을 가지지 못하게 되고 과업 수행이 느려지게 됩니다. 심지어 유저가 과업에서 이탈하게 되는 잘못된 행동을 선택하게 만들 수도 있습니다.
긍정적, 중립적, 부정적 행동
모든 버튼은 다음 세 가지 행동(actions) 유형 중 하나로 분류됩니다:
1. 긍정적 행동 – 바꾸기, 보내기, 정보 추가하기
2. 중립적 행동 – 변화를 주지 않거나 유저가 뒤로 가게 해줌 (예: 취소하기)
3. 부정적 행동 – 삭제하기, 재설정하기, 정보 차단하기
모달 윈도에는 보통 이 세 가지 행동이 섞여서 등장합니다. 유저가 서로 다른 행동을 구분하게 해주려면, 버튼 사이의 색상 대비에 그 역할을 반영해야 합니다.
긍정적 행동에는 가장 높은 대비 효과를
긍정적 행동은 모달에서 가장 흔한 행동입니다. 유저는 어떤 행동이 자신의 태스크를 완료하게 해주는지 알아야 합니다. 긍정적인 행동에 다른 것과 비교해서 가장 높은 색상 대비 효과를 주어 쉽게 선택할 수 있도록 만들 수 있습니다. 그 옆에 놓이게 될 모든 중립적이거나 부정적인 행동에는 낮은 색상 대비 효과를 주어야 합니다.
가장 높은 대비 효과를 주기 위해서는, 차가운 배경색에 흰색 텍스트를 사용하여 긍정적 행동 버튼을 만들면 됩니다. 파란색, 녹색, 보라색 등과 같은 차가운 색은 유저의 시각을 누그러뜨려주고, 공간에서 튀어 보이지 않게 해주는 경향이 있습니다. 하얀색 텍스트는 평범한 검은색 텍스트보다 눈에 잘 읽을 수 있고 더 눈에 띕니다.
중립적 혹은 부정적 행동에는 배경색이 들어가면 안 됩니다. 배경색을 넣게 되면 색상 대비 효과가 너무 비슷비슷하게 들어가 버립니다. 대신, 그런 버튼에는 두꺼운 테두리만 이용하면 됩니다. 이렇게 하면 배경색과 잘 섞여 들어가서 긍정적 액션과 경쟁하여 유저의 관심을 끌어오는 일이 없어질 겁니다.
부정적 행동에 가장 높은 대비 효과를 줘야 하는 경우
부정적 행동에는 긍정적 행동보다 높은 대비 효과가 들어가면 안 됩니다. 긍정적 행동은 더 자주 이용되고 더 안전하기 때문에 유저가 부정적 행동을 긍정적 행동으로 오해하지 않게 만드는 것이 중요합니다. 하지만 부정적 행동이 중립적 행동하고만 같이 있는 경우에는 부정적 행동에 더 높은 대비 효과를 줘야 합니다.
이런 경우에는, 부정적 행동 버튼에 따뜻한 색상을 배경색으로 줘야 합니다. 빨강이나 오렌지, 노란색 같은 따뜻한 색상은 유저의 눈을 자극하여 공간에서 튀어 보이는 경향이 있습니다. 유저가 이런 버튼을 보면, 버튼을 클릭하기 전에 2번 생각해볼 것입니다.
중립적 행동에는 가장 낮은 대비 효과를
모달 윈도에 중립적 행동만 존재하는 경우는 없습니다. 언제나 긍정적 혹은 부정적 행동과 함께 나타납니다. 이런 중립적 행동에는 가장 낮은 대비 효과를 주어 다른 행동과 경쟁하게 만들지 않아야 합니다.
버튼의 검은색 두꺼운 테두리만으로도 중립적 행동이라는 것을 유저에게 충분히 전달할 수 있습니다. 버튼엔 배경색은 넣지 않아야 긍정적 혹은 부정적 행동으로부터 관심을 끌어오지 않을 수 있습니다.
버튼의 테두리와 텍스트를 회색으로 만들면 유저가 사용할 수 없는 버튼으로 오해할 수도 있으니 그렇게 만들면 안 됩니다. 전체 바탕색과는 대비되게 만들어 잘 보이면서도 활성화되어 있다는 걸 알려줘야 합니다.
결론
색상 대비가 명확하게 보이기만 하면 긍정적, 중립적, 부정적 행동은 공존할 수 있습니다. 대비가 더 명확할수록, 유저는 더 빠르게 태스크를 완료할 수 있습니다. 컬러는 유저 인터페이스에서 중요한 역할을 합니다. 심미성을 위해서만 아니라 유저의 행동을 가이드하는 도구의 역할도 하는 것입니다.
전민수 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 오픈했습니다)
https://www.inflearn.com/users/196290
