항상 활성화된 버튼은 오랫동안 UX 디자인의 "모범 사례" 중 하나였지만 인터페이스 여기저기에는 여전히 비활성화된 버튼이 있습니다. 2021년에 "Open Investments"의 동료들은 "버튼은 항상 활성화되어야 한다"는 개념에 대한 이론적 증거를 가지고 프레젠테이션을 해달라고 요청했습니다. 제품 관리자에게 발표할 논쟁을 준비하는 것이 편리합니다. 프레젠테이션을 기사로 공식화했으며 제품 디자이너와 제품 관리자에게도 도움이 되기를 바랍니다.
왼쪽: 핸들이 활성화되어 있습니다. 오른쪽: 손잡이가 비활성 상태입니다. 문을 여는 5가지 방법을 제안합니다.
버튼의 목적
작업을 수행하려면 버튼이 필요합니다. 버튼이 작동하지 않으면 해당 작업을 수행할 수 없습니다. 작업을 수행하는 데 필요한 조건(또는 데이터)이 충분하지 않은 경우 작업을 차단하는 것이 적절합니다.
데이터가 충분하지 않습니다.
프로그램은 자체 구성 요소(서버, 로컬 저장소, 로컬 계산 결과) 또는 사용자로부터 데이터를 기다릴 수 있습니다.
사용자는 다음과 같은 경우 데이터를 제공하지 않을 수 있습니다.
현재 화면에서
이전 단계에서
제3자 서비스(예: 이메일 주소를 확인하지 않음)
프로그램 구성 요소는 데이터를 제공하지 않을 수 있습니다.
연결 오류로 인해(인터넷 속도가 느림)
긴 계산으로 인해(키 생성과 같은)
내부 프로그램 오류로 인해
따라서 작업이 차단되는 이유에 대해 최소한 6가지 설명이 가능 합니다.
사용자는 프로그램의 내부 프로세스에 대해 아무것도 모르며 버튼이 비활성화된 이유를 확실하게 확인할 수 없습니다. 사용자의 반응은 "내가 뭔가 잘못했습니다"또는 "프로그램에서 내가 원하는 것을 할 수 없습니다"라는 옵션으로 축소됩니다. 두 옵션 모두 부정적인 감정을 유발합니다.
사용자가 부정적인 감정을 피할 수 있는 유일한 옵션은 비활성화된 버튼을 전혀 눈치채지 못하는 것입니다. 이것이 바로 디자이너가 적용하는 패턴입니다. 즉, 비활성 요소를 최대한 보이지 않게 만드는 것입니다.
그러나 그것은 별로 도움이 되지 않습니다. 이 레이아웃을 살펴보고 변형을 비교해 보겠습니다.
활성화된 버튼:
✅ 선명하게 보입니다
✅ 누르기 쉬운 위치에 위치
✅ 누를 수 있음
❌ 너무 일찍 누르면 오류가 발생합니다.
비활성화된 버튼:
❌ 눈에 잘 띄지 않음
❌ 누르기 쉬운 위치에 있습니다 (그러나 아무 것도 걸리지 않습니다)
❌ 누를 수 없습니다
❌ 너무 성급하게 눌러도 아무 일도 일어나지 않습니다
비활성화된 버튼은 사용자를 어떤 좋은 방법으로도 만족시킬 수 없습니다. 디자이너가 활성화된 버튼을 위한 공간을 미리 예약해 두는 것이 편리합니다. 디자이너는 그의 작업을 더 쉽게 만들고 그에게 유익했습니다. 그러나 그는 사용자에 대해 생각하지 않았습니다.
디자이너는 자신의 작업을 더 쉽고 좋게 만들었습니다. (사진 제공: Nodeus)
버튼을 활성화하세요!
버튼을 항상 활성화해 두세요. 사용자는 언제든지 작업 수행을 시도할 수 있습니다. 시도가 거부되면 인터페이스는 누락된 데이터(예: 빨간색으로 강조 표시됨)를 가리켜 이유를 알려줍니다. 사용자는 자신(또는 프로그램)이 무엇을 잘못하고 있는지 추측할 필요가 없습니다.
스크롤할 때 버튼 숨기기
스크롤 아래 맨 아래에 있는 버튼을 숨기면 좋습니다. 활성화 여부를 아무도 알 수 없습니다. 사용자가 모든 데이터를 입력하고 맨 아래로 스크롤하면 활성화된 버튼이 표시됩니다. 적시성의 원칙이 준수되며 모든 것이 훌륭합니다. 변형을 비교해 보겠습니다.
버튼은 항상 표시됩니다.
✅ 눈에 잘 띄어요
✅ 누르기 쉬운 위치에 위치
❌ 콘텐츠 공간을 차지합니다.
❌ 너무 일찍 누르면 오류가 발생합니다.
버튼은 스크롤 아래에 숨겨져 있습니다.
❌ 페이지 끝까지 스크롤할 때까지 표시되지 않습니다.
✅ 누르기 쉬운 위치에 위치함 (모든 데이터 입력 후)
✅ 공간을 차지하지 않습니다
✅ 조기 압착 가능성 없음
실제로 두 번째 변형에 대해서는 더 많은 주장이 있습니다. 따라서 스크롤 아래에 버튼을 숨기는 것이 좋습니다. 그러나 실제로 사용자는 이상적으로 행동하지 않습니다. 일부는 데이터를 채우지 않고 아래로 스크롤합니다. 그러한 사용자가 비활성화된 버튼을 본다면 그/그녀는 왜 버튼이 작동하지 않는지라는 질문에 직면하게 될 것입니다. 위에서 정의한 대로 최소 6개의 답변이 있을 수 있습니다. 이것은 과잉입니다. 따라서 스크롤 아래에 숨겨진 버튼도 활성화해야 합니다.
버튼 위치 규칙
우리는 버튼이 항상 활성화되어야 한다는 것을 이해했습니다. 이제 활성화된 이 버튼의 위치를 지정하는 규칙을 정의해 보겠습니다. "버튼이 공간을 차지합니다" 인수는 콘텐츠가 거의 없는 페이지에서는 작동하지 않습니다. 따라서 페이지의 내용에 따라 장점과 단점의 균형이 달라집니다. 단점보다 장점을 더 중요하게 생각하면서 두 가지 다른 경험 법칙에 도달하게 됩니다. 콘텐츠가 적음(버튼이 표시됨)과 콘텐츠가 많음(스크롤 아래에 버튼이 숨겨져 있음)입니다.
왼쪽 - 콘텐츠가 화면에 맞습니다. 오른쪽 - 콘텐츠가 화면에 맞지 않습니다.
콘텐츠가 적고 버튼이 표시됨:
✅ 선명하게 보입니다
✅ 누르기 쉬운 위치에 위치
✅ 콘텐츠 공간을 차지하지 않습니다.
❌ 너무 일찍 누르면 오류가 발생합니다.
많은 콘텐츠, 숨겨진 버튼:
❌ 페이지 끝까지 스크롤할 때까지 표시되지 않습니다.
✅ 누르기 쉬운 위치에 위치함 (모든 데이터 입력 후)
✅ 공간을 차지하지 않습니다
✅ 조기 압착 가능성 없음
디자이너로서 저는 하나의 보편적인 모양을 만드는 것이 더 쉽습니다. 버튼을 화면 하단 가장자리에 고정하고 항상 콘텐츠 위에 표시합니다(위에서 이러한 변형을 보여주었습니다). 그리고 프로그래머도 한 가지 모습을 드러내는 것이 더 쉽습니다. 디자이너와 프로그래머는 인터페이스의 단순성 과 인터페이스 생성 의 단순성을 무의식적으로 혼동하여 그들의 간단한 솔루션이 사용자의 삶도 단순화시키는 것처럼 구성합니다. 그러나 보편적인 출현에 대한 주장은 반박하기 쉽습니다. 사용자들은 항상 같은 곳에서 탭을 하는 것이 편하죠? 틀렸습니다. 사용자는 화면의 다양한 위치를 탭하지만 신경 쓰지 않습니다. 사용자는 메인 버튼이 항상 같은 위치에 있기를 원합니까? 예, 페이지 끝으로 스크롤하면 같은 위치에 버튼이 표시됩니다. 등등.
결국 모든 것이 적응형 규칙을 선호합니다. 콘텐츠가 적고(버튼이 표시됨), 콘텐츠가 많음(스크롤 아래에 버튼이 숨겨져 있음).
버튼을 비활성화하세요!
때로는 비활성화된 버튼이 여전히 필요한 경우도 있습니다. 버튼으로 인해 되돌릴 수 없을 정도로 파괴적인 작업이 발생하는 경우 실수로 또는 무모하게 버튼을 누르는 것을 방지하는 것이 유용합니다. 우리는 사용자가 후회할 가능성이 있는 행동을 조장하려고 하지 않습니다. 사용자는 발을 쏘기 전에 총의 안전 장치를 제거해야 합니다.
이 기사의 시작 부분에서 나는 "모범 사례"에 대해 썼습니다. 저는 " UX 트렌드는 신화입니다 "라는 별도의 기사를 작성했으며 "모범 사례"를 비판적으로 검토할 또 다른 기사를 작성할 예정입니다. 트렌드를 연구하면서 저는 단 하나의 트렌드, 즉 기술 진보라는 결론에 도달했습니다. UX 디자이너는 디지털 제품 사용 경험을 실제 경험, 즉 자연이 정한 인간 인식 메커니즘에 더 가깝게 만들기 위해 새로운 기술만을 사용합니다. 모범 사례와 동일합니다. 디지털 경험을 실제에 더 가깝게 만드는 것만큼 좋습니다. 현실에 더 가까워지는 것이 유일한 모범 사례입니다. 버튼의 경우 현실 세계의 간단한 비유가 떠오릅니다. 무언가가 작동하지 않으면 고장난 것입니다. 객체가 터치에 반응하지 않으면 해당 객체는 죽은 것입니다.
결론
따라서 위의 결과에 따라 다음 규칙을 준수해야 합니다.
버튼은 항상 활성화되어 있습니다.
버튼을 눌렀을 때 작업 조건이 충족되지 않으면 인터페이스에 해당 조건이 표시됩니다.
약간의 콘텐츠 - 버튼이 표시됩니다.
콘텐츠가 많음 - 버튼이 콘텐츠와 겹치지 않고 스크롤 아래 숨겨져 있음
파괴적이고 되돌릴 수 없는 작업 - 사용자의 의도가 확인될 때까지 버튼이 비활성화됩니다.
