UX에서 Hidden vs Disabled

이 글은 Hidden vs Disabled in UX 를 번역한 것입니다. 원문과 번역본 간에 일부 차이가 있을 수 있으니 참고하시기 바랍니다.

기능을 숨기(hidden)거나 비활성화(disabled)하는 것은 사용자에게 매우 혼란스러울 수 있습니다. 이 두 가지 모두 사용할 때에는 매우, 매우 타당한 이유가 필요합니다. 기능을 숨기거나 비활성화할 때 고려해야 할 사항과 UX를 향상시키기 위한 대안에 대해 자세히 살펴보겠습니다.

필요한 것만 보여주고, 나머지는 정리해라

아마도 이런 상황을 겪어본 적이 있을 것입니다. 기능을 숨길까? 아니면 비활성화할까? 기능을 숨기면 사용자가 발견하기 어려워지고, 설명 없이 비활성화하면 사용자에게 짜증을 유발시킬 수 있습니다. 그렇다면 사용자가 필요로 하지 않거나 사용할 수 없는 옵션을 디자인할 때 가장 좋은 방법은 무엇일까요?

image01
기능을 숨길 것인가, 숨기지 않을 것인가? 사용자를 위해 기능과 옵션을 숨기거나 비활성화하는 데에는 타당한 이유가 있습니다. 하지만 UX에 해가 되지 않도록 신중하게 접근해야 합니다.

일반적으로, 기능이 존재하지만 사용할 수 없다는 것을 사용자에게 알리고 싶다면 비활성화하십시오. 화면에 나오는 것이 현재 무의미하고 사용할 수 없는 기능이라면 숨기십시오. 그러나 기본적으로 버튼이나 주요 필터는 숨기지 마세요. 사용자는 이러한 요소들은 항상 존재할 것으로 기대합니다.

숨겨진 기능과 달리, 비활성화된 기능은 사용자가 UI를 학습하는 데 도움이 될 수 있습니다. 예를 들어, 서비스 업그레이드의 이점을 이해시키는 데 도움이 될 수 있습니다. 따라서 사용할 수 없는 옵션이나 버튼을 제거하는 대신 비활성화하고, 사용자가 "모든 사용할 수 없는 옵션 숨기기"를 선택할 수 있도록 하십시오. 또한, 왜 기능이 비활성화되었는지, 어떻게 다시 활성화할 수 있는지 반드시 설명해 주십시오.

또한 주의해야 할 점은, 사용자가 기능을 표시하거나 숨길 수 있게 할 때 레이아웃 이동이 발생하지 않도록 해야 한다는 것입니다.

image02
버튼을 비활성화할 때, 계속 진행하기 위해 필요한 사항을 설명해 주는 것이 도움이 될 수 있습니다.

기능을 숨기거나 비활성화할 때는 사용 가능한 대안들을 철저히 고려해야 합니다. 예를 들어, 활성화된 버튼, 읽기 전용 상태, 더 나은 빈 화면, 숨기기/보이기 아코디언, 오류 메시지, 맞춤 설정 등이 있습니다. 결국 필요한 것만 보여주고 나머지는 정리해야 합니다.

저는 가능한 버튼들과 기능들이 기본적으로 활성화되고, 접근 가능하며, 읽기 쉬운 상태로 유지하려고 합니다. 사용자가 해당 기능과 상호 작용할 때, 왜 사용할 수 없는지, 어떻게 활성화할 수 있는지, 그리고 어떻게 활성화 상태를 유지할 수 있는지를 설명할 수 있습니다. 다만, 확인 코드 입력을 해야 할 때나 로딩/처리 중일 때는 예외적으로 비활성화 상태로 만듭니다.

숨기기 vs 비활성화 결정 트리

특정 상황에서 숨기기와 비활성화 중 어느 것이 더 나은 선택인지 확신이 서지 않는다면, Sam Solomon의 제안에 따라 다음 질문을 스스로에게 해보시기 바랍니다. 답에 따라 아래 단계를 따르시면 됩니다:

"사용자가 이 요소와 상호 작용할 가능성이 있는가?"

네 -> 비활성화하기 (비활성화된 버튼 또는 읽기 전용 상태로 설정)

아니오 -> 숨기기 (툴바에서 제거하거나 아코디언 접기)

핵심 요약