수정이 필요한 짜증나는 디자인 패턴: 생일 선택 도구

당신은 전에 그들을 본 적이 있습니다. 한 웹사이트에서 다른 웹사이트로 가는 모든 곳에서 당신을 쫓는 것처럼 보이는 혼란스럽고 실망스러운 디자인 패턴. 실제로 무엇이 잘못되었는지 알려주지 않는 비활성화된 제출 버튼이거나, 한 번 열리면 실수를 수정해야 할 때 입력 필드 를 덮는 툴팁일 수 있습니다. 그것들은 도처 에 존재하고, 잘 짜여진 쥐덫처럼 보이는 곳에서 종종 우리를 막다른 길에서 다른 막다른 곳으로 요동치게 합니다.

이러한 패턴은 악의적이거나 악의적이지 않습니다. 그들은 사기성 쿠키 프롬프트 또는 소화전 및 횡단 보도로 위장한 신비한 보안 문자와 공통점이별로 없습니다. 나쁜 의도나 피해를 염두에 두고 설계되지도 않았습니다. 아침에 일어나서 이탈률을 높이거나 전환율을 줄이려고 하는 사람은 아무도 없습니다.

몇 년에 걸쳐 다소 무작위적인 설계 결정이 널리 받아들여지고 채택되어 데이터 또는 사용성 테스트에 의해 질문을 받거나 검증되지 않은 채 계속해서 반복됩니다. 그들은 확립된 디자인 패턴이 되었습니다. 그리고 종종 아주 가난한 사람들 . 테스트하는 동안 사용자 불만 중 몇 번이고 계속해서 나타납니다.

이 새로운 시리즈의 기사에서 이러한 실망스러운 디자인 패턴 중 일부를 자세히 살펴보고 패턴을 구축하거나 디자인할 때 염두에 두어야 할 많은 예제와 질문과 함께 더 나은 대안을 살펴보겠습니다 . 이러한 통찰력은 커뮤니티의 진정한 동료와 동료가 수행한 사용자 연구 및 사용성 테스트에서 나온 것이며 물론 향후 각 게시물에서 모두 참조됩니다.

우리 모두가 어느 시점에서 경험한 겸손하고 겉보기에 무해한 패턴부터 시작하겠습니다. 너무 자주 액세스할 수 없고 느리고 사용하기 번거로운 악명 높은 생일 선택 도구 입니다. 우리는 완벽한 날짜 및 시간 선택기에 대해 이미 훨씬 자세하게 작성했지만 생일 선택기는 별도의 대화가 필요합니다.

답답한 UX: 2021년부터 시작되는 생일 드롭다운/위젯

구직 신청을 하거나 은행 계좌를 개설하거나 항공편을 예약할 때마다 생년월일 을 입력해야 할 것입니다. 분명히 입력은 date 이므로 잘 채택된 date-picker-calendar-alike 위젯(네이티브 또는 사용자 정의)을 사용하는 인터페이스를 보거나 특정 입력을 요청하는 드롭다운을 보는 것은 그리 놀라운 일이 아닙니다. .

이러한 옵션이 자주 선호되는 이유를 찾을 수 있습니다. 기술적인 관점에서 우리는 입력이 올바른지 확인하고 오류를 조기에 포착 하기를 원합니다. 우리의 검증은 입력을 검증하고, 명확한 오류 메시지를 제공하고, 고객이 그것을 수정하기 위해 정확히 무엇을 해야 하는지 설명하기에 충분히 방탄이어야 합니다. 드롭다운이나 캘린더 위젯에 이러한 모든 문제가 있는 것은 아닙니다. 또한 청구서에 맞는 옵션만 제공하여 로케일이나 형식의 차이를 쉽게 방지할 수 있습니다.

실수를 방지하는 가장 좋은 방법은 실수하기 어려운 방식으로 UI를 디자인하는 것 같습니다. 이는 양식 디자인에서 엄격하고 명시적이어야 한다는 것을 의미할 수 있습니다. 기본적으로 올바른 형식의 입력 만 허용합니다. 결국, 사용 가능한 모든 선택이 제대로 구성된 경우 잘못된 형식의 입력을 제공하는 것은 불가능합니다. 그러나 입력 이 실제로 올바른 형식이기는 하지만 입력을 제공하는 것이 피곤하고 실망스러운 경우 특히 정확할 필요는 없습니다.

실제로 우리는 지나치게 복잡하고 엄격한 비밀번호 요구 사항으로 유사한 실수를 저지릅니다. 사람들이 이러한 요구 사항에 너무 화가 나서 화면의 스티커 메모에 암호를 넣거나 데스크톱의 personal.txt 파일에 숨기고 필요한 경우 다시 입력할 수 있도록 하는 것을 보는 것은 드문 일이 아닙니다. 기업 Wi-Fi 비밀번호와 온라인 뱅킹을 위한 복잡한 SuperPIN이 그 좋은 예입니다.

사람들은 자신에게 유리하게 규칙을 구부리 는 데 매우 창의적이기 때문에 시스템을 사용할 수 없으면 안전하지 않습니다. 양식 입력을 사용할 수 없으면 수신 데이터의 정확도가 떨어지고 더 많은 오류가 발생합니다. 궁극적으로 사용자가 잠기고 진행이 불가능하여 UI를 포기 해야 하는 상황으로 이어집니다.

그 동전에도 이면이 있습니다. 물론 모든 복잡성을 제거하고 항상 단일 입력 필드를 제공하여 사용자가 원하는 대로 입력할 수 있습니다. 실제로 그것은 그들이 실제로 그들이 선호하는 것을 타이핑 할 것이라는 것을 의미하며, 종종 구조가 좋지 않고 비효율적인 방식으로 입력됩니다.

생일 입력의 경우 사용성 테스트에서 고객은 7월에서 7 월 부터 06 에서 6 까지 무엇이든 입력합니다. 종종 임의의 구분 기호와 약간의 오타가 있고 일, 월, 연도가 혼합된 순서로 입력합니다. 제출 후 해당 입력의 유효성을 검사하는 것은 어떤 입력 형식이 작동할지 모르기 때문에 사용자에게 잘 제공되지 않습니다. 분명히 그것은 우리의 요구에도 잘 부합하지 않습니다.

우리의 디자인에서는 접근 가능한 기술 구현과 함께 정중하고 직접적인 지침 을 제공해야 합니다. 이것은 기본 날짜 선택기 및 드롭다운의 몇 가지 일반적인 단점을 제공합니다.

기본 날짜 선택 도구 및 드롭다운의 함정

불행히도 <input type="date"> 에 의해 프롬프트된 기본 날짜 선택기 는 접근성의 악몽과 함께 많이 제공됩니다. 글을 쓰는 시점에서 기본적으로 사용되는 경우 거의 모든 종류의 날짜 입력에 대해 접근하기 쉬운 선택이 아닙니다. 화면 판독기 문제가 많을 뿐만 아니라 초점 및 레이아웃 문제, 혼란스럽고 일반적인 오류 메시지도 있습니다.

나는 많은 수의 구현이 키보드 입력을 완전히 비활성화하여(위 참조) 고객이 기본 날짜 선택기의 달력 위젯을 독점적 으로 사용하도록 요구하는 것을 보았습니다. 그리고 이것은 고통스럽고 고통스럽게 느립니다. 키보드 입력 폴백이 없으면 사용자는 수십, 수십 개의 탭 또는 클릭 을 사용하여 며칠, 몇 달, 몇 년 사이의 긴 여정을 시작해야 합니다.

날짜를 즉시 알 수 있지만 인터페이스는 날짜 사이를 탐색 하고 도착하면 월별 개요에서 날짜를 찾으 라는 메시지를 표시합니다. 이것이 이러한 경험이 좌절되는 이유입니다.

그런 점에서 드롭다운 은 훨씬 빠르고 쉽게 탐색할 수 있습니다. 기본적으로 액세스할 수 있으며 월과 년 사이를 탐색하는 대신 일, 월 및 연도의 3개 목록에서 올바른 숫자를 찾는 것으로 충분합니다. 그러나 드롭 다운은 여전히 ​​​​느립니다. 확대/축소 문제가 있습니다. 스크롤 가능한 옵션을 꼬집는 것은 피곤합니다. 그들은 많은 공간을 차지합니다. 연도 목록은 깁니다. 그리고 입력을 지정할 때 컨트롤을 탭한 다음 스크롤(보통 두 번 이상)하고 대상을 찾아 선택하고 다음 드롭다운으로 계속해야 합니다. 짜릿하지도 않습니다.

따라서 드롭다운이 최후의 수단으로 여겨지는 UI로 간주되고 일반적으로 버튼(예: 필터용), 토글, 분할된 컨트롤 또는 텍스트 상자의 유연성과 <select> 의 보증을 결합한 자동 완성 상자로 대체되는 것을 보는 것은 드문 일이 아닙니다. 상자. 드롭다운 자체는 나쁘지 않습니다. 사용자가 데이터를 채우는 데 필요한 것보다 훨씬 더 많은 시간을 소비할 뿐입니다.

그리고 기본값 에 대한 질문이 있습니다. 드롭다운을 사용하면 기본적으로 아무 입력도 하지 않는 경우가 많지만( mm/dd/yyyy ), 날짜 선택기를 사용하면 달력 보기에 대한 시작점을 제공해야 합니다. 후자의 경우, 아이러니하게도 "시작" 날짜는 일반적으로 양식이 채워진 날짜(예: 2021년 5월 15일)와 비슷 합니다. 이것은 물론 최적으로 보이지는 않지만 정확한 날짜는 무엇이어야 합니까? 우리는 어딘가에서 시작해야 합니다. 맞죠?

글쎄요, 사실 정확한 날짜는 없습니다 . 3개월 전이나 내일 일찍 시작하거나 늦게 시작할 수 있지만 생일 선택자의 경우 이러한 옵션은 모두 순전히 추측입니다. 따라서 고객은 입력이 없으면 1901년부터 1980년대 후반까지 스크롤해야 할 수 있으며 일부 입력이 있으면 수정해야 하며 수십 년을 왔다갔다 하는 경우가 많습니다. 그 상호 작용은 스크롤에 흠잡을 데 없는 정밀도를 요구할 것입니다.

우리가 어떤 선택을 하든, 우리는 거의 항상 틀릴 것입니다. 이것은 호텔 예약 웹사이트나 음식 배달 서비스, 그리고 생일 입력이 아닌 다른 많은 사용 사례에서 다를 수 있습니다. 이것은 양식 입력이 얼마나 잘 디자인되었는지 객관적으로 평가하는 방법에 대한 대화로 이어집니다.

양식 디자인의 품질 평가

디자인은 매우 주관적인 문제라고 볼 수 있습니다. 결국 모든 사람은 주어진 문제에 대한 올바른 접근 방식에 대한 자신의 의견과 선호도를 가지고 있는 것 같습니다. 그러나 어떤 자기표현이나 예술과 달리 디자인은 문제를 해결해야 합니다. 그렇다면 문제는 특정 설계가 특정 문제를 얼마나 잘 해결하느냐는 것입니다. 디자이너의 의도를 명확하게 표현할수록 고객이 저지르는 실수가 줄어들고 방해를 덜 받을수록 디자인이 좋아집니다. 이러한 속성은 측정 가능하고 객관적 입니다.

내 경험에 따르면 양식은 사용자 경험에서 가장 어려운 측면입니다. 마이크로카피 및 양식 레이아웃에서 인라인 유효성 검사 및 오류 메시지에 이르기까지 어려운 측면이 너무 많습니다. 양식을 올바르게 작성하려면 백엔드 오류 및 타사 오류를 프론트엔드에 적절하게 표시하고 복잡한 기본 구조를 예측 가능하고 합리적인 양식 필드 세트로 단순화해야 합니다. 이는 복잡한 레거시 애플리케이션 및 타사 통합에서 쉽게 좌절할 수 있는 악몽이 될 수 있습니다.

따라서 우리의 프로젝트에서 형태 디자인 에 관해서는 다음 9가지 속성을 기반으로 특정 솔루션의 품질을 측정하려고 항상 노력합니다.

• 멘탈 모델
  우리의 양식 디자인이 고객의 멘탈 모델에 얼마나 잘 들어맞습니까? 개인 정보를 요청할 때 고객이 시작하는 데 필요한 최소한의 정보를 정확히 물어봐야 합니다. 우리는 정당한 이유가 없는 한 민감하거나 개인 정보(성별, 생일, 전화번호)를 묻지 않고 UI에 설명합니다.
• 복잡성
  모바일 및 데스크톱에서 페이지당 몇 개의 입력 요소를 표시합니까? 양식에 70-80개의 입력 필드가 포함되어 있으면 한 페이지에 모두 표시하거나 여러 열 레이아웃을 사용하는 대신 작업 목록 패턴을 사용하여 복잡성을 더 작고 관리 가능한 청크로 나누는 것이 좋습니다.
• 입력 속도
  고객이 데이터를 올바르게 입력하려면 얼마나 많은 시간과 노력이 필요합니까? 주어진 입력에 대해, 도중에 실수가 없다고 가정하고 주어진 데이터로 양식을 정확하게 완성하기 위해 얼마나 많은 탭/키스트로크/작업이 필요합니다.
• 접근성
  입력 속도에 대해 이야기할 때 주로 스크린 리더 사용자와 키보드 사용자와 같은 다양한 상호 작용 모드를 지원해야 합니다. 이는 레이블, 큰 버튼, 입력 필드 위에 배치된 레이블, 기타 여러 가지 중에서 적절하게 전달된 오류를 올바르게 설정했음을 의미합니다.
• 확장성
  UI를 다른 언어로 번역하거나 다른 폼 팩터에 맞게 조정해야 한다면 얼마나 간단하고 얼마나 많은 문제를 일으킬까요? (문제가 되는 솔루션의 대표적인 예로 플로팅 라벨 패턴이 있으며 이에 대해서는 별도의 포스트에서 다루도록 하겠습니다.)
• 중단의 심각도
  로드 스피너, 초기 또는 늦은 인라인 유효성 검사, 제공된 UI를 기반으로 인터페이스를 조정하기 위해 UI 일부 고정(예: ​​국가 선택), 잘못 미리 채워진 데이터 빈도, 또는 잘못 자동 수정된 데이터?
• 양식 성공률
  단 한 번의 실수도 없이 성공적으로 양식을 완성한 고객은 몇 명입니까? 양식이 잘 디자인된 경우 대다수의 고객이 오류를 전혀 볼 수 없습니다. 예를 들어, 이것은 우리가 브라우저의 자동 채우기를 탭해야 하고 탭 순서가 논리적이고 편집을 하는 것이 관습적이고 명백해야 합니다.
• 회복 속도
  오류를 발견하고 수정하고 양식의 다음 단계로 이동하는 데 성공한 고객의 비율은 얼마나 됩니까? 오류 메시지가 나타나는 빈도와 가장 일반적인 오류 메시지를 추적해야 합니다. 그렇기 때문에 종종 고객 지원에 들러 고객이 자주 불평하는 사항을 먼저 확인하는 것이 좋습니다.
• 양식 실패율
  얼마나 많은 고객이 양식을 포기합니까? 이것은 일반적으로 양식의 복잡성 때문만이 아니라 공격적인 유효성 검사기 또는 비활성화된 "제출" 버튼으로 인해 고객이 오류를 수정할 방법을 찾을 수 없기 때문에 발생합니다. 또한 양식이 정당한 이유없이 너무 민감하고 개인 정보를 요구하기 때문에 발생합니다.

양식이 얼마나 잘 작동하는지 이해하기 위해 모바일 장치, 태블릿, 랩톱 또는 데스크톱과 같은 자체 컴퓨터의 인터페이스에 액세스하는 고객을 대상으로 사용성 연구 를 실행합니다. 가능하면 화면을 녹화하고 사고 방식의 프로토콜을 사용하여 실수가 어디서, 어떻게, 왜 발생하는지 추적하도록 요청합니다. 우리는 또한 고객이 한 양식 필드에서 다른 양식 필드로 얼마나 빨리 이동하는지, 언제 잠시 멈추고 생각할 때, 그리고 언제 대부분의 실수가 발생하는지 연구합니다.

분명히, 탭 또는 클릭의 순전한 수 는 입력이 간단하거나 번거롭다는 것을 항상 암시하지는 않습니다. 그러나 일부 입력 모드는 오류를 생성하거나 혼동을 일으킬 가능성이 더 높을 수 있고, 다른 모드는 다른 옵션에 비해 훨씬 더 많은 시간이 필요한 이상값일 수 있습니다. 그것이 우리가 테스트에서 찾고 있는 것입니다.

이제 이것을 생일 입력 문제에 어떻게 적용할 수 있는지 봅시다.

더 나은 생일 입력 디자인하기

누군가가 당신에게 생일을 묻는다면 아마도 당신은 특정한 숫자 문자열을 염두에 두고 있을 것입니다. dd/mm/yyyy 또는 mm/dd/yyyy 로 주문할 수 있지만 아주 어렸을 때부터 모든 종류의 문서에서 반복했던 8자리 문자열입니다.

우리는 일, 월, 연도의 세 가지 입력을 모두 결합하는 간단한 단일 입력 필드 를 사용하여 생일 입력이 무엇인지에 대한 이 간단한 모델을 활용할 수 있습니다. 이는 사용자가 항상 키보드에 머물면서 8개의 숫자 문자열을 입력한다는 것을 의미합니다.

그러나 이 접근 방식은 몇 가지 문제를 야기합니다.

• 자동 서식 및 마스킹을 지원해야 합니다.
• 일/월 입력의 위치를 ​​설명해야 합니다.
• 입력에서 Backspace 버튼의 동작을 지원해야 합니다.
• 마스킹을 추적하고 숨기거나 표시하거나 영구적으로 표시해야 합니다.
• 특정 값(예: 월)으로의 점프를 지원해야 합니다.
• 모바일 장치에서 특정 값을 변경하려면 입력 내 에서 분노 클릭과 탐색을 최소화해야 합니다.
• 자동 생성이 사용되지 않는 경우 모든 종류의 구분 기호를 지원하는 정리 및 유효성 검사 규칙 집합을 만들어야 합니다.

양식 디자인 패턴에 대한 그의 책에서 Adam Silver는 하나의 입력 대신 여러 입력을 사용하는 것은 거의 좋은 생각이 아니지만 날짜에는 좋은 옵션 이라고 주장합니다. 각 입력이 나타내는 내용을 명확하게 전달할 수 있으며 포커스 스타일로 특정 입력을 강조 표시할 수 있습니다. 또한 유효성 검사가 훨씬 쉽고 입력의 특정 부분이 유효하지 않은 것으로 보이는 부분과 수정 방법을 쉽게 전달할 수 있습니다.

입력이 완료되면 사용자를 자동으로 한 입력에서 다음 입력으로 전환하거나 사용자가 스스로 필드 사이를 이동할 수 있도록 할 수 있습니다. 언뜻 보기에 전자가 입력에 하나씩 차례로 입력되는 8자리만 필요하기 때문에 더 나은 것처럼 보입니다. 그러나 사람들이 오류를 수정할 때 입력 버퍼 가 필요한 경우가 많습니다. 즉, 기존 입력을 수정하기 위한 입력 필드 내의 공간입니다.

예를 들어, 사람들이 01을 입력하고 실수를 했다는 것을 깨닫고 입력을 010으로 변경한 다음 처음 0 을 제거하여 반전된(그리고 올바른) 문자열인 10 으로 끝나는 것을 흔히 볼 수 있습니다. 한 필드에서 다음 필드로의 자동 전환을 통해 문제를 덜 일으키고 올바른 UI를 좀 더 예측 가능하고 다루기 쉽게 만들 수 있습니다.

입력을 설명하려면 일, 월, 연도에 대한 레이블 을 제공해야 하며 올바른 입력의 예도 보여줘야 합니다. 레이블은 부동 레이블이 아니어야 하지만 표시하려는 힌트 또는 예제와 함께 입력 필드 위에 편안하게 있을 수 있습니다. 또한 모든 입력은 초점에 강조 표시될 수 있습니다.

수년에 걸쳐 나는 수년간의 테스트를 통해 이 솔루션에서 단 하나의 문제를 발견할 수 없었고 Gov.uk에서도 패턴이 사용되는 것은 놀라운 일이 아닙니다.

날짜 선택 도구가 필요할 때

위의 솔루션은 생일 입력에는 충분하지만 일반적인 상황에서는 충분하지 않을 수 있습니다. 고객이 제공 하는 대신 날짜를 선택 해야 하는 생년월일보다 문자가 적은 날짜 입력이 필요할 수 있습니다(예: " 7월의 첫 번째 토요일" ). 이 경우 사용자가 사용할 수 있는 캘린더 위젯 으로 3개의 입력 필드를 향상시킬 수 있습니다. 기본 입력은 현재 날짜 또는 대부분의 고객이 선택하는 미래 날짜에 따라 다릅니다.

Adam은 NoStyle 디자인 시스템에서 기억에 남는 날짜 패턴에 대한 간단한 코드 예제를 제공합니다. 캘린더 위젯 주위를 두드리거나 드롭다운 휠 주위를 불필요하게 스크롤하지 않도록 함으로써 많은 개발 작업을 해결하고 많은 접근성 문제를 피할 수 있습니다.

마무리

물론 좋은 양식 제어는 우리가 기대하는 날짜 입력의 종류에 따라 다릅니다. 고객이 도착 날짜를 선택하기를 기대하는 여행 계획자의 경우 달력 조회와 함께 유연한 입력이 유용할 수 있습니다.

우리가 고객에게 생년월일 에 대해 물을 때 우리는 매우 구체적인 날짜, 즉 정확한 일, 월, 연도를 나타내는 매우 구체적인 문자열 을 요구합니다. 이 경우 드롭다운이 필요하지 않습니다. 어느 정도의 임의 값을 기본값으로 하는 달력 조회도 아닙니다. 필요한 경우 기본 날짜 선택 도구 및 기본 드롭다운을 가능한 피하고 대신 액세스 가능한 사용자 지정 솔루션을 사용하십시오. 그리고 입력 필드 위에 레이블과 설명이 있는 세 개의 간단한 입력 필드에 의존합니다.

또한 완벽한 날짜 및 시간 선택 도구를 디자인하거나 구축하는 데 사용할 수 있는 체크리스트와 함께 긴 작업을 게시했습니다.

관련 기사

이 기사가 유용하다고 생각되시면 저희가 지난 몇 년 동안 발행한 유사한 기사에 대한 개요를 살펴보십시오. 몇 가지 더 추가될 예정입니다.

• 완벽한 반응형 구성기
• 완벽한 기능 비교
• 완벽한 슬라이더
• 완벽한 아코디언
• SmashingMag에 게시된 Adam Silver의 Form Design Patterns Book
• 다음 뉴스레터를 놓치지 않으려면 이메일 뉴스레터를 구독하세요.