[UX/UI 아티클] 2. 비활성화된 버튼을 회색으로 표시하지 않는 이유!

[UX/UI 아티클] 

2. 비활성화된 버튼을 회색으로 표시하지 않는 이유!

 

비활성화된 버튼이 있는 상황에서 버튼은 어떻게 나타나야 할까? 버튼이 있던 위치에서 제거한 이후에 나중에 나타나도록 하면 사용자가 놀랄 수 도 있다. 이렇게 하는 대신에 디자이너나 기획자들은 인터페이스가 크게 변경되는 것을 피하기 위해 사용 중지되었음을 표시한다. 

 

대부분의 기획자와 디자이너들이 비활성화된 상태를 전달하는 방법은 버튼을 회색으로 표시하는 것이다. 그러나 이런 접근 방법 또한 버튼의 활성화 상태가 비활성화 상태와 거의 유사하지 않아 사용자들은 뜻밖의 상황에 놀래기도 한다. 

 

 

회색에서 완전히 다른 색상으로 바뀌는 버튼은 사용자들로 하여금 예상하지 하지 못한  변경으로 인해  방금 무슨 일이 일어났는지 궁금하게 만든다. 부드럽고 매끄러운 경험을 위해서는 이런 것은 피하는 것이 가장 좋다. 비활성화된 버튼을 회색으로 표시하지 말고 불투명도를 줄여 투명하게 만들어야 한다. 

 

비활성화된 버튼이 투명하면 사용자는 활성화된 상태에서 버튼의 모양을 볼 수 있다. 버튼이 희미해지긴 했지만 사용자가 알아볼 수 있도록 일부 색상은 여전히 보인다. 비활성화된 버튼이 활성화된 상태로 전환될 때, 새로운 모양은 사용자의 경험을 방해하지 않는다. 

 

투명 버튼은 배경과 더 잘 혼합되며, 반면에 회색 버튼은 전경에 남아 있다.(배경이 회색인 경우는 제외).  전경의 요소들이 사용자에게 더욱 두드러진다. 사용자들은 회색으로 된 전경의 요소들을 상호작용의 버튼으로 보는 경향이 있는데, 이것은 사용자들이 회색으로 표시된 비활성화된 버튼과 상호작용할 가능성이 더 높다는 것을 의미한다.

 

사용자들은 투명 버튼을 다른 버튼과 혼돈할 가능성이 적다. 회색이 항상 비활성화된 상태를 나태는 것도 아니다. 때때로 버튼들 중 우선순위가 낮은 버튼( 예: 취소 버튼)으로 의미를 전달하기 위해 회색이 사용되는 경우도 있다. 사용자는 회색으로 비활성화된 버튼을 보조 클릭 액션을 유도하는 버튼이라고 쉽게 착각할 수 있다. 또는 최악의 시나리오로 사용자들이 색상 대비가 낮은 잘못 디자인된 버튼으로 오인할 수도 있다. 

 

비활성화된 버튼을 설계할 때는 색이 아닌 불투명도를 조정하자. 최적의 불투명도 값은 배경색에 따라 달라진다. 경험에 의하면 불명도 수준을 40% 이하의 목표로 하는 것이다. 또는 텍스트 레이블을 읽을 수 없을 때까지 불투명도를 충분히 낮게 설정하는 것이 중요하다. 그렇지 않으면 사용자는 여전히 버튼이 활성화한 된 것으로 볼 수 있다.

 

이 기술에 따르면, 당신은 사용자들을 혼란스럽게 하지 않고 당신의 버튼들을 비활성화된 것처럼 보이게 할 것이다. 사용자들은 버튼 상태에 따라 원활하고 매끄러운 전환을 경험하게 될 것이다.

 

 

ㅣ원문 참조

https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/

Why You Shouldn't Gray Out Disabled Buttons

ㅣ 내 생각

 

지난번 확인 버튼이 오른쪽에 위치해야 한다는 의견과 같이 이번 아티클의 경우에도 필자에게 많은 의문의 질문들이 댓글을 통해서 많이 있었습니다. 대부분의 의견들이 해당 의견과 다르다고 얘기하고 있었습니다. 저의 경우에도 위의 내용과 비슷한 사례들을 찾으려고 했지만 찾기가 어렵기는 했습니다. 예시로 보여주었던 익스피디아 경우에도 위의 UX가 보이지는 않았습니다. 그래서 필자의 의견에 맞는 사례가 찾기는 어려웠습니다. 

반대되는 사례는 우연찮게 찾기는 했습니다. 아래의 그림과 같이 모두 불투명화된 상태가 아닌 상태가 비활성화된 상태로 보였고 마우스를 오버했을 경우에는 투명화되면서 활성화된 상태로 보였습니다. 이 경우가 더 자연스럽게 보이기는 했습니다. 

위의 버튼 중 하나에 마우스를 오버하면 투명화된 상태로 보입니다. 

다만 회색 버튼이 취소와 같은 경우로 보인다는 필자의 의견과는 어느정도 동의하는 부분이 있기는 합니다. 긍정적인 의견을 보여주는 부분에서의 버튼에서 회색 버튼은 가능하면 지양해야 될 거 같기는 합니다. 

 

마지막으로 이 글에서 필자가 강조한 것은 활성화된 버튼과 비활성화된 버튼에 관해서 얘기를 강조하는 것이 아닌, 어떻게 하면 사용자들에게 자연스러운 경험을 전달할 것인간에 관해서 얘기하고 있는 것이라고 생각됩니다. 이런 부분은 기획자로서 많이 본받아야 하는 부분인 거 같습니다. 

 

이 글은 허접하지만 번역기를 이용하여 영문 아티클을 번역한 글입니다.