brunch

라이킷 37 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX DAYS SEOUL Jul 24. 2022

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

UX/UI

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

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

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

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

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

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

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

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

스테퍼

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

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

라디오 그룹

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

추가 컨트롤

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