디자인 시스템의 다양한 비활성화 버튼 타입
비활성화 버튼의 3가지 타입을 분석해보기.
Grey Out, Opacity, Inline validation.
비활성화 버튼은 디자인 시스템에 포함시켜야 하나요?
최근 해외 디자이너들 사이에서 비활성화 버튼 UI 방식에 대해 다양한 논쟁이 이어지고 있다. 대부분의 디자이너들은 'Grey'의 버튼 타입이 비활성화 버튼이라 인지하고 있지만 Bootstrap이나 Tailwind 같은 Top 3 CSS Frameworks에선 버튼들의 Opacity를 40%(평균) 낮추는 방식을 사용하고 있다. 또 다른 방식으로 동작하지 않는 비활성화 버튼을 디자인 시스템에 포함시키지 않고 활성 버튼을 클릭했을 때 Inline validation을 제공한다. 현재 비활성화 버튼에 대한 웹 콘텐츠 접근성 지침과 타입의 장단점 그리고 프로덕트 디자이너들의 다양한 의견들을 모아보았다.
Web Content Accessibility Guidelines (WCAG)
Contrast의 최소 기준.디자인 시스템의 주요 컬러가 Web Content Accessibility 기준에 맞는지 확인하기 위해서는 이 사이트를 참고하길 바란다.
Grey Out
앞서 말했듯 최소 20년간 일반적인 디자인 비활성화 버튼은 Grey 색상으로 통용되었다. 이미 비활성화는 오래도록 회색이라는 인식의 약속이 되어있는 상태인 것이다. 버튼뿐만 아니라 토글과 체크박스 등의 비활성화도 대부분 Grey 색상이다. 확립된 UI는 사용자로 하여금 멘탈 모델*로 자리 잡았기 때문에 다른 프로덕트에서 배운 기존 지식으로 새로운 프로덕트의 작동방식을 쉽게 이해할 수 있다.
카카오톡의 로그인 화면멘탈 모델이란?
멘탈 모델이란 우리가 어떤 시스템에 관해, 특히 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 바를 가리킨다. 과거의 경험으로 쌓은 지식을 새로운 대상과 인터랙션 할 때 사용한다.
한편 오랫동안 자리 잡은 UI 방식임에도 불구하고 Grey 색상의 '나쁜 사용성'에 대해 많은 이야기가 나오고 있다. 첫째로 배경과 CTA 버튼의 조화가 잘 이루어지는데 반해 Grey 색상의 비활성화와 버튼 간의 오묘한 색상 불화가 이루어진다. 둘째로 우리는 종종 중요하지 않는 버튼을 CTA과 함께 배치할 때 Grey 색상을 사용하곤 하는데 이때 비활성화 버튼으로 인식하거나 반대로 비활성화 버튼을 활성화 버튼으로 인식할 수 있다.
Opacity
Opacity방식은 기존 CTA 버튼에 불투명 상태를 제공하는 것이다. 이러한 방식은 Grey Out방식과는 다르게 활성화 버튼과의 조화가 잘 이루어져 사용자가 굳이 새로운 버튼 스타일을 인지하지 않아도 된다. 활성화 상태와 비활성화 상태가 유사한 형태로 하나의 버튼에 다른 콘텍스트를 제공한다는 것을 알 수 있다. 말 그대로 배우지 않아도 충분히 예측 가능한 버튼 형태를 만들 수 있는 것이다.
Bootstrap과 Tailwind UI System그러나 Opacity로 제공하는 것은 신중할 필요가 있다. 40%를 넘어설 경우 같은 활성화 버튼으로 인식될 수 있으며 너무 낮을 경우 배경색과 합쳐져 버튼이 있다는 사실 자체를 인지하지 못하거나 심미성을 해칠 수 있다.
Inline validation
Inline validation이란 간단히 말해서 사용자가 이동하면서 정보를 수정하도록 돕는 것을 의미한다. 흔히 사용되는 곳은 폼 필드를 채울 때, 일부 필수항목을 채우지 못하면 오류 메시지를 보여준다. 몇몇 디자이너들은 버튼을 활성화 상태로 두되, 오류를 범했을 때 오류가 행해진 곳에 메시지를 띄움으로써 사용자에게 조금 더 친절한 설명을 더하는 방식이 모범적인 답안이라고 생각한다.
사용자가 실수를 했을 때 적절한 피드백을 제공하는 것은 휴리스틱 원칙 09 사용자가 스스로 오류를 인식하고, 수정할 수 있도록 설계한다(Help user recognize, diagnose, and recover from errors)에도 해당된다. 특히 최근 앱에서 비활성화 버튼을 거의 볼 수 없다. 그러나 기본 폼처럼 버튼이 하나인 경우가 아니라 여러 개일 경우 혹은 사용자가 무언갈 입력할 일이 없거나 버튼들이 동일한 레벨로 배치되어 있을 때 비활성화 버튼을 제거하면 상당히 어색한 모습으로 보일 수 있다.
그렇다면 어떤 형태의 UI를 제공하는 것이 좋을까? 현재로선 정해진 답이 없다. 하지만 분명한 것은 우리의 디자인 시스템을 구축해 나갈 때 배경, 텍스트의 적절한 Contrast를 고민하고 프로덕트 상황에 맞는 원칙을 제대로 세우는 것이 중요하다.
CTA와 휴리스틱에 대한 설명은 이전 글 참고
참고 1 : https://uxplanet.org/disabled-buttons-in-user-interface-4dafda3e6fe7
참고 2 : https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/
참고 3 : https://medium.com/@h_locke/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae
