드롭다운은 최후 수단이어야 합니다

UX/UI

이 기사는 루크 로블르스키의 허가 아래 게재하고 있습니다.
(2015년 07월 17일의 기사입니다)

간단하거나 더 적절한 작동이 필요할 때 모바일 폼에서 종종 드롭다운 메뉴를 사용합니다.

다음은 디자인에서 고려해야 할 드롭다운에 대한 몇 가지 대안과 그 이유입니다.

그러나 정보를 탐색하기 어렵고 기본적으로 옵션을 숨기고 계층을 지원하지 않으며 편집이 아닌 선택만 활성화하므로 드롭다운을 가장 먼저 고려하는 폼이 되어서는 안 됩니다.
따라서 다른 입력 컨트롤을 먼저 검토하고 드롭다운을 최후의 수단으로 고려하는 것이 좋습니다.

기대치는 전환에 영향을 미칩니다.

폼 작성을 좋아하는 사람은 없습니다. 그리고 폼이 길거나 더 복잡해 보일수록, 특히 (손가락과 같은) 부정확한 입력이 있는 작은 디바이스 화면에서 폼을 채우려는 가능성은 줄어듭니다.

왼쪽의 "고통스러운 버전"에는 두 개의 추가 필드가 있지만 이 두 항공편 예약 폼의 주요 차이점은 질문하는 방식입니다. 하나는 거의 모든 질문에 대해 드롭다운 메뉴를 사용하고 다른 하나는 각 질문에 가장 적합한 입력 컨트롤을 사용합니다.

모바일 및 데스크톱에서 드롭다운 메뉴와 상호 작용하는 것은 생각보다 더 많은 노력이 필요한 다단계 프로세스입니다. 먼저 컨트롤을 탭한 다음 스크롤(보통 한 번 이상)하고 대상을 찾아 선택하고 마지막으로 계속 진행합니다. 그러나 우리는 더 좋은 방법을 생각할 수 있습니다.

스테퍼

스테퍼 컨트롤은 값을 일정하게 늘리거나 줄이며 작은 조정에 적합합니다. 모바일 항공편 예약 폼의 사용성 테스트에서 사람들이 승객 수를 선택할 때 스테퍼를 선호한다는 것을 발견했습니다. 특히 최대 8명의 여행자가 허용되고 대다수가 1-2명의 여행자를 선택하기 때문에 드롭다운 메뉴가 필요하지 않습니다.

스테퍼로 작업할 때 일반적으로 단순할수록 좋습니다. 스테퍼 컨트롤의 기본 디자인을 너무 많이 변경하면 기능의 명확성이 떨어집니다. 모든 입력 컨트롤이든 마찬가지입니다.

라디오 그룹

라디오 그룹 또는 분할된 컨트롤은 밀접하게 관련되어 있지만 상호 배타적인 선택의 집합입니다. 모바일 항공편 예약 폼을 비교할 때 라디오 그룹이 여행 클래스를 선택하는 데 정말 효과적이라는 것을 알았습니다.

추가 컨트롤

스테퍼와 라디오 그룹은 드롭다운 메뉴 대신 사용할 수 있는 유일한 컨트롤이 아닙니다. 스위치는 두 가지 단순하고 정반대의 선택을 지원합니다. 슬라이더를 사용하면 허용된 범위에서 세분화된 값을 선택할 수 있습니다. 무거운 드롭다운 폼을 시작할 때 각 질문을 살펴보고 이러한 컨트롤 중 하나가 답변을 얻는 더 적절한 방법인지 고려하십시오.

버튼 입력은 드롭다운에 숨겨져 있을 수 있는 옵션을 노출하고 단일 탭 대 다중 탭 작업을 선택하게 합니다.

경우에 따라 여러 드롭다운 메뉴를 하나의 입력 컨트롤로 압축할 수 있습니다. 위에서 "고통스러운 버전"이라고 라벨을 붙인 항공편 예약 예는 여행 날짜를 수집하기 위해 6개의 드롭다운을 사용했습니다.

모바일 항공편 예약 리서치에서 여행 날짜에 대한 단일 입력 컨트롤이 훨씬 더 효과적이라는 것을 발견했습니다.

드롭다운은 최후의 수단으로

드롭다운 메뉴에 대한 이러한 모든 대안이 사용자 인터페이스 디자인에서 사용해서는 안 된다는 의미는 아닙니다. 잘 설계된 폼은 각 질문에 가장 적합한 입력 컨트롤을 사용합니다. 그 폼은 때로는 스테퍼, 라디오 그룹 또는 드롭다운 메뉴 일수도 있습니다.