숨김 vs 비활성화 상태

비활성화 상태는 사용자가 권한, 종속성, 또는 사전 요구 조건 때문에 컴포넌트와 상호작용할 수 없을 때 적용됩니다. 컨트롤이 비활성화되면 일반적으로 기본 상태보다 약간 투명하거나 대비가 낮아지며, 값 입력을 받지 않게 됩니다(읽기 전용 상태). 숨김 상태는 컨트롤이 인터페이스에서 완전히 사라집니다. 두 경우 모두 사용자가 컴포넌트와 상호작용을 할 수 없게 됩니다.

비활성화 상태

비활성화 버튼을 표시하는 것의 장점

• 발견 가능성: 많은 사용자들은 애플리케이션의 이곳 저곳을 둘러보고, 라벨을 읽으면서 사용 방법을 배웁니다. 비활성화 상태인 버튼을 사용하기 위해 추가적인 조치가 필요하지만 애플리케이션이 어떻게 이루어져있는지, 무엇을 할 수 있는지 사용자에게 보여줄 수 있습니다.
• 학습 용이성: 사용자는 UI에서 컨트롤과 버튼의 위치가 어디인지 배울 수 있습니다.

비활성화 버튼을 표시하는 것의 단점

• 정신적 부담감 증가: 비활성화된 버튼이 있으면 사용자가 생각해야 할 것들이 늘어납니다. 비활성화된 버튼을 보면 사용자는 왜 이 버튼이 사용이 불가능한지, 어떻게 활성화 할 수 있는지 궁금해할 것입니다. Steve Krug의 "Don't Make Me Think(생각하게 만들지 마라)"에 따르면, 사용자가 고민하게 만드는 요소는 제거해야 합니다.
• 일부 사용자에게는 클릭 가능한 것처럼 보임: 비활성화된 버튼이 올바르게 구현되지 않으면 사용자를 혼란스럽게 할 수 있습니다. 예를 들어, 일부 사용자는 회색으로 표시된 버튼을 Secondary 버튼으로 오해할 수 있습니다.
• 접근성: 비활성화된 버튼은 잘 보이지 않을 수 있습니다. 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)에는 비활성화된 버튼의 색 대비 비율에 대한 명확한 지침이 없기 때문에, 버튼의 스타일은 개발자의 판단에 따라 결정됩니다. 그러나 잘못된 색상 대비로 인해 비활성화 버튼이라고 인식하지 못할 수 있습니다. 또한, 이러한 버튼은 사용자에게 어떠한 피드백도 제공하지 않기 때문에 시각 장애가 있는 사용자에게 특히 큰 어려움을 줄 수 있습니다.

숨김 상태

버튼을 숨기는 것의 장점

• 정신적 부담감 감소: 사용자에게 필요한 것만 보여줌으로써 사용자의 주의를 분산시키는 요소를 제거할 수 있습니다. 덕분에, 사용자는 현재 하고 있는 작업에 더 집중할 수 있습니다.
• 단순성: 비활성화된 버튼이 없으면 공간을 절약할 수 있어, 동일한 공간을 더 효율적으로 사용할 수 있습니다.

버튼을 숨기는 것의 단점

• 과도하게 사용하면, 산만해질 수 있음: 버튼을 계속 숨기거나 나타나게 하면 화면이 계속 변하게 되어 사용자의 주의를 산만하게 할 수 있습니다.
• 발견하기 어려움: 사용자가 숨겨진 컨트롤을 찾기 위해 많은 시간을 소비할 수 있습니다.

어떤 상태를 사용해야 할까?

어떤 상태를 사용할지 결정하기 전에 다음 질문들에 답해보세요:

• 사용자가 이 시점에서 알아야 할 것은 무엇인가?
• 사용자가 이 시점에서 해야 할 일은 무엇인가?
• 사용자가 그 기능에 대해 알고 있을 것인가?
• 사용자가 그 기능을 찾느라 많은 시간을 소비할 것인가?

위 질문들에 대한 답변이 어떤 상태를 사용할지 결정하는 데 도움이 될 것입니다.

제안

다음과 같은 경우 비활성화 상태를 사용하세요:

• 버튼이 일시적인 비활성화 상태가 되어야 하거나, 사용자의 특정 행동이 선행되어야 되는 경우. 이 경우, 사용자가 버튼을 활성화하기 위해 취해야 하는 행동을 알려주는 툴팁이나 상세 설명을 제공하는 것이 좋습니다. (예: 로딩 중인 경우, 프로젝트 선택이 선행되어야 하는 경우)
• 사용자가 컨트롤의 존재는 알지만, 그 컨트롤이 현재는 비활성화 상태임을 알리고 싶은 경우. (예: 프리미엄 버전으로 전환을 유도하기 위한 용도)
• 원래 있던 컨트롤이 어떠한 이유로 종료되었을 때 바로 숨기기보다는 비활성화 상태로 유지하여 사용자가 왜 사용할 수 없는지 이해할 수 있도록 해야 합니다. 이렇게 하면 사용자는 이전에 본 컨트롤을 찾느라 시간을 낭비하지 않게 됩니다.

다음과 같은 경우 숨김 상태를 사용하세요:

• 사용자가 해당 컨트롤을 사용할 권한이 없어서 사용자에게 절대 제공되지 않는 경우
• 해당 컨트롤이 매우 드문 상황에서만 활성화되는 경우, 사용자에게 사용할 수 없거나 활성화할 수 없는 버튼을 보여주지 않는 것이 좋습니다. (예: 사용자가 프로필 사진을 업로드 했을 때만 활성화 되는 프로필 사진 삭제 버튼)
• 페이지에 비활성화된 기능이 많은 경우. 예를 들어, 한 섹션의 폼 전체가 비활성화 되어 있는 경우, 사용자에게 이러한 기능이 존재함을 알리지 않는 것이 좋습니다.

Note: 비활성화 상태를 사용하는 것이 일시적으로 사용할 수 없는 기능을 막는 유일한 방법은 아닙니다. 비활성화 버튼을 사용하는 대신, 버튼을 기본 상태로 유지하면서 사용자가 왜 진행할 수 없는지 알려주는 오류 메시지를 표시할 수도 있습니다. (예: 날짜나 시간을 선택하지 않았을 때, 예약 버튼을 클릭하면 "예약 날짜와 시간을 선택해주세요"라는 오류 메시지를 표시합니다.)

또 다른 고려사항

비활성화 상태를 사용할 때 접근성 지침을 준수해야 합니다. 비활성화 버튼과 활성화 버튼 스타일 간의 명확한 구분이 필요합니다. 웹 접근성에서 색상 대비는 매우 중요한 요소입니다.

비활성화 상태의 버튼을 회색으로 표시하는 대신 투명도를 주는 것이 좋습니다. 투명한 버튼은 다른 버튼과 혼동할 가능성을 줄일 수 있습니다. 회색 버튼은 Secondary 버튼(예: 취소 버튼)으로 사용될 수 있어 혼동을 줄 수 있습니다.

정신적 부담감을 줄이기 위해 사용자에게 설명을 제공하는 것이 좋습니다. 예를 들어, 버튼이 비활성화 상태로 변경될 때, 왜 이런 일이 발생했는지 사용자에게 설명하는 도움말 같은 것을 제공하는 것을 고려해야 합니다.

결론

• 컨트롤이 사용가능 하지만, 지금 당장 사용할 수 없는 경우 비활성화합니다. 이 때, 사용자에게 왜 비활성화되었는지 그리고 어떻게 활성화할 수 있는지 설명함으로써 사용자 경험을 향상시킬 수 있습니다.
• 사용자가 해당 컨트롤을 사용할 권한이 없어서 절대 사용 가능해지지 않는 경우, 컨트롤을 숨겨야 합니다.