button inactive2

비활성화 버튼 디자인 고려할 점

온라인 쇼핑 중에 종종 제품이 품절됬을때, 구매 버튼이 비활성화된 경우를 보게 됩니다. 그리고 많은 비활성화 버튼들에 회색색상이 사용되는 경우를 보게 되는데요. 회색색상의 비활성화 버튼이 활성화되면 전혀 다른 색으로 보이기 때문에 사용자가 의식하지 않고 봤을 때 같은 버튼이라는 것을 예측하기 어렵게 만듭니다. 곧 시각적인 일관성이 떨어지는 거죠.

매끄러운 사용자 경험을 위해서 회색 색상보다는 투명도 (opacity)를 조절하여 비활성화 버튼을 만드는 것이 적합합니다. 그에 대한 3가지 이유가 있습니다.





1. 활성화 버튼의 색상을 미리 확인할 수 있다.


비활성화 버튼에 투명도가 적용되면, 사용자는 활성화된 버튼의 색상을 미리 볼 수 있습니다. 물론 배경색에 의해 버튼의 색상이 흐려질 수는 있지만, 여전히 사용자는 고유의 버튼 색상을 인지할 수 있고, 버튼이 활성화 상태로 바뀌더라고 같은 버튼의 색상을 예측할 수 있습니다.



2. 회색 색상의 비활성화 버튼은 너무 눈에 띈다.


투명도가 있는 비활성화 버튼은 어느 정도 배경색에 녹아들어 다른 버튼들과 있을 때 눈에 쉽게 띄지 않지만 회색 색상 버튼은 물론 배경색상에 따라 다르겠지만 여전히 너무 눈에 잘 띄기 때문에 사용자가 비활성화 버튼을 실수로 클릭하게 유도할 수 있습니다.



3. 회색 색상의 버튼은 보조 버튼으로 더 많이 쓰인다.


회색은 우선순위를 두 번째로 두는 보조 버튼 등 (예를 들어 취소 버튼) 에 많이 사용되기 때문에 사용자가 오인할 수 있는 여지를 줄 수 있습니다. 이러한 디자인적 측면에서 불확실성과 불 예측성은 사용자 경험 측면에서 좋지 않습니다.






비활성화 버튼에 투명도 (opacity)를 줄 때 배경색에 따라 최적의 투명도 퍼센티지는 다를 수 있겠지만 보통은 대략 30% 이내에서 조절해 주는 것이 좋습니다. 그래야만 버튼 안의 텍스트의 가독성을 살리면서 여전히 시각적으로 눈에 띄지 않기 때문에 버튼이 비활성화 되어있다는 것을 쉽게 구별할 수 있습니다.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top