유저 액션을 부르는 모달 버튼 색상 UX

 

 

모달에서 액션별로 다른 색상의 버튼을 제공해야 합니다.
모달에서 할 수 있는 모든 액션을 고려해 버튼을 제공해야 합니다.

 

 

모달 버튼의 액션

사용자가 모달 에서 올바른 액션을 하도록 유도하려면, 버튼 색상에 유의할 필요가 있습니다.

모든 버튼에는 다음과 같은 세 가지 유형의 작업이 있습니다.

 

긍정적인 액션 : 정보를 변경, 전송, 또는 추가합니다.
중립적인 액션 : 아무것도 하지 않고 행동을 취소하거나, 사용자를 기존 화면으로 되돌립니다.
부정적인 액션 : 정보를 삭제, 재설정 또는 차단합니다.

 

모달 에서는 종종 이러한 작업이 조합된 상태로 제공됩니다.

따라서 유저가 액션을 구분할 수 있도록, 버튼 색상 대비가 필요합니다.

 

 

긍정적인 버튼

긍정적인 버튼 은 높은 명암차이를 통해 주목성을 높입니다.

또한 파랑 , 초록 , 보라 같은 차가운 색상을 이용하는 것이 일반적입니다.

차가운 계열의 색은 시각적으로 사용자의 눈을 편안하게 하고, 흰색 텍스트가 잘 읽히게 됩니다.

 

이 때 긍정적인 버튼  옆에 있는 중립적인 버튼 , 부정적인 버튼 은 배경을 채우지 않은 외곽선으로만 표현하면 됩니다.

이렇게 표현하면, 다른 주요 버튼보다 사용자의 주의를 끌지 않게 되어 액션에 도움이 됩니다.

 

 

부정적인 버튼

긍정적인 버튼 옆에 위치한 부정적인 버튼 은 명암차이를 낮게, 중립적인 버튼 은 명암차이를 높게 합니다.

만약 부정적인 버튼 이 중립적인 버튼 옆에 위치한다면, 높은 명암차를 이용합니다.

 

배경은 빨강 , 주황 , 노랑  등 따뜻한 색상으로 하는 것이 일반적입니다.

따뜻한 계열의 색은 시각적으로 화면에서 전진하는 듯한 효과를 주기 때문에 사용자가 클릭하기 전에 한번 더 생각하게 됩니다.

 

 

 

 

중립적인 버튼

중립적인 버튼  요소는 낮은 명암차를 이용해 다른 기능의 버튼보다 눈에 덜 띄도록 합니다.

색을 채우지 않은 배경과 외곽선만 블랙으로 표현하면 충분합니다.

여기서 주의할 점은 외곽선을 색을 옅은 그레이로 할 경우 클릭할 수 없는 비활성화 버튼처럼 보이는 단점이 있습니다.