[UI/UX 원칙 #16] 드롭다운 메뉴 UX 원칙 가이드라인

드롭다운 메뉴 UX 원칙 가이드라인

닉 바비치의 [드롭다운 메뉴 UX 원칙 가이드라인] 소개하고자 합니다.

셀렉트 메뉴(select menu) 또는 드롭다운 메뉴(drop-down menu)는 적절히 활용하면 매우 유용한 도구입니다. 이 메뉴는 허용된 선택지만을 표시하여 화면 공간을 절약하고, 사용자가 데이터를 잘못 입력하는 것을 방지하는 데 도움을 줍니다.

드롭다운 메뉴는 그룹핑 옵션, 키보드 내비게이션, 플랫폼 간 안정적인 렌더링 등 다양한 멋진 기능을 제공합니다. 디자이너는 여러 목적에 맞춰 드롭다운을 활용해야 합니다. 예를 들어 폼(form) 작성 시 사용자가 입력란에 원하는 옵션을 쉽게 선택할 수 있도록 합니다. 

사람들이 폼을 작성하는 것을 꺼리는 것은 잘 알려진 사실입니다. 특히 그 과정이 길거나 복잡하게 보일수록, 사용자는 더욱 작성하지 않으려는 경향이 있습니다. 작은 스크린에서 부정확한 입력이 발생할 가능성이 높아지는 상황에서는 더욱 그러합니다. 이러한 문제를 악화시키는 요소 중 하나가 바로 ‘셀렉트 메뉴’입니다.

1. 셀렉트 메뉴와 옵션의 개수

때때로 옵션이 두 개뿐인 셀렉트 메뉴를 만나기도 하고, 또 어떤 경우에는 20개가 넘는 옵션이 있는 셀렉트 메뉴를 볼 때도 있습니다. 두 경우 모두 셀렉트 메뉴가 적절하게 활용되지 않은 사례라고 할 수 있습니다.

1) 옵션이 너무 많은 경우

셀렉트 메뉴의 옵션이 15개 이상으로 증가하면, 사용자가 이를 훑어보거나 원하는 항목을 찾기가 어려워집니다. 긴 드롭다운 리스트는 사용자에게 정말로 불편한 경험이 될 수 있습니다. 옵션을 리스트에 넣어 스크린에서 숨김으로써, 사용자는 리스트 내에서 스크롤을 내려야 하며, 이로 인해 고통스러운 사용자 경험이 발생하고 전반적인 프로세스가 느려지게 됩니다.

여기에 적합한 사례로는 100개 이상의 옵션이 포함된 국가 선택 메뉴를 들 수 있습니다. 사용자가 이러한 메뉴를 전반적으로 파악하는 것은 거의 불가능하며, 원하는 옵션을 쉽고 빠르게 찾는 방법이 없습니다. 보통 미국(United States)을 선택할 때 어려움을 겪곤 하는데, ‘인기 순’으로 정렬되어 있을 때는 미국이 리스트의 상단에 위치하지만, 알파벳 순서로 정렬되면 아프가니스탄이 가장 먼저 나오고 미국은 한참 아래, 아랍에미리트 연합국(United Arab Emirates) 바로 뒤에 위치하게 되기 때문입니다. 그래서 가장 먼저 해야 할 일은 어떤 기준으로 순서가 정해졌는지를 파악하는 것입니다.

사용자가 원하는 항목을 이미 알고 있는 경우, 셀렉트 메뉴 대신 자동 완성 기능이 있는 텍스트 필드를 사용하는 것을 권장합니다. 국가 선택 메뉴의 경우, 이는 효과적인 해결책이 될 수 있습니다. 또한, 프로그램 측면에서 자동으로 위치를 인식할 수 있는지 확인하고, 이를 바탕으로 최대한 정확하게 예측하는 노력이 필요합니다. 정리하자면, 옵션이 15개를 초과하는 경우에는 텍스트 입력란(일반형 또는 자동 완성형)을 고려하는 것이 좋습니다.

(1) 효율성 향상
사용자가 원하는 항목을 이미 알고 있을 때, 자동 완성 기능이 있는 텍스트 필드를 사용하면 원하는 옵션을 빠르게 찾을 수 있어 시간과 노력을 절약할 수 있습니다.

(2) 사용자 경험 개선
긴 리스트에서 스크롤하며 찾는 것보다, 텍스트 입력란에 직접 입력하여 결과를 즉시 확인하는 것이 사용자에게 더 직관적이고 편리한 경험을 제공합니다.

(3) 정확성 증가
자동 완성 기능은 사용자가 입력하는 내용을 기반으로 관련 옵션을 제시하므로, 사용자가 실수로 잘못된 항목을 선택할 가능성을 줄입니다.

(4) 유연성 제공
텍스트 입력란은 사용자에게 더 많은 유연성을 제공하여, 특정한 요구 사항이나 선호도에 따라 원하는 옵션을 쉽게 찾을 수 있도록 합니다.

(5) 접근성 향상
특히 모바일 기기와 같은 작은 스크린에서는 긴 드롭다운 메뉴보다 텍스트 필드가 더 접근하기 쉬운 인터페이스를 제공합니다.

2) 옵션이 너무 적은 경우

셀렉트 메뉴의 옵션이 7개 이하인 경우, 표시되는 정보가 너무 적어 문제가 발생할 수 있습니다. 사용자는 적절한 옵션을 보기 위해 먼저 메뉴를 클릭해야 하므로, 이로 인해 불편함을 겪게 됩니다.

이와 같은 경우에는 라디오 버튼을 사용하는 것이 적합합니다. 사용자는 클릭(혹은 타이핑) 없이도 옵션의 개수와 각 옵션의 내용을 즉시 파악할 수 있어야 합니다. 정리하자면, 리스트에 옵션이 7개 이하일 경우에는 라디오 버튼을 고려하는 것이 좋습니다.

(1) 정보의 가시성
라디오 버튼은 모든 옵션을 한눈에 볼 수 있도록 하여, 사용자가 클릭이나 타이핑 없이도 옵션의 개수와 내용을 즉시 확인할 수 있습니다. 이는 사용자가 선택을 더 쉽게 할 수 있게 돕습니다.

(2) 사용자 편의성
사용자가 여러 옵션 중에서 선택할 때, 라디오 버튼은 빠르고 직관적인 방식으로 선택을 가능하게 합니다. 클릭을 통해 메뉴를 열고 다시 선택하는 번거로움을 줄일 수 있습니다.

(3) 정확한 선택
모든 옵션이 명확하게 표시되므로, 사용자는 실수로 잘못된 옵션을 선택할 가능성이 줄어듭니다. 

(4) 간결한 인터페이스
옵션이 적은 경우 라디오 버튼은 화면 공간을 효율적으로 사용할 수 있어, 복잡하지 않고 깔끔한 인터페이스를 유지할 수 있습니다.

2. 셀렉트 메뉴와 레이블

다른 폼 인풋과 마찬가지로, 셀렉트 메뉴에도 항상 입력란 옆에 레이블을 붙여야 합니다(이는 W3C 표준에 따릅니다). 그러나 셀렉트 메뉴 안에 사용자가 ‘정확히 무엇을 선택하는 것인지’ 알려주는 의미 있는 레이블(예: “None”이나 “Please Select”와 같은 포괄적인 표현이 아닌)을 사용하는 것도 중요합니다. 레이블은 옵션 그룹을 완전히 설명할 수 있도록 명확하고 뚜렷해야 합니다.

(1) 접근성 향상
레이블을 통해 사용자는 폼 요소의 목적을 쉽게 이해할 수 있습니다. 이는 특히 시각적으로 제한된 사용자나 스크린 리더를 사용하는 사용자에게 중요합니다.

(2) 사용자 경험 개선
명확한 레이블은 사용자가 선택해야 할 내용에 대해 혼란을 줄여줍니다. 사용자는 어떤 옵션이 필요한지 즉각적으로 인식할 수 있어, 보다 효율적으로 입력할 수 있습니다.

(3) 정확한 선택 유도
의미 있는 레이블은 사용자가 선택해야 할 내용을 구체적으로 안내하므로, 잘못된 선택을 방지하는 데 도움이 됩니다. 일반적인 표현보다는 구체적인 레이블이 더 유용합니다.

(4) 정보의 일관성
셀렉트 메뉴 안과 밖에 레이블을 모두 추가함으로써, 사용자에게 일관된 정보를 제공할 수 있습니다. 이는 전체적인 폼 디자인의 통일성을 높이고, 사용자가 각 요소의 관계를 이해하는 데 도움을 줍니다.

(5) 혼란 방지
레이블이 명확하게 제공되면, 사용자는 어떤 액션을 취해야 할지 혼란 없이 인식할 수 있습니다. 이로 인해 입력 과정이 원활해집니다.

3. 셀렉트 메뉴와 디폴트 옵션

디폴트 값을 설정하는 것은 특정 값을 선택할 것이라고 믿는 비율(90%)이 상당히 높지 않다면 피하는 것이 좋습니다. 

(1) 빠른 입력 경향
많은 사용자들이 폼을 신속하게 입력하려는 경향이 있습니다. 이 경우 디폴트 값이 설정되어 있으면 사용자가 이를 확인하지 않고 넘어갈 가능성이 높아집니다.

(2) 검토 생략 가능성
사용자가 모든 선택지를 차근차근 검토할 것이라고 가정하기 어렵습니다. 특히 바쁜 상황에서는 여러 옵션을 확인하지 않고 빠르게 제출할 수 있습니다.

(3) 실수로 인한 오류
이미 값이 입력된 경우, 사용자는 이를 실수로 지나칠 수 있습니다. 이는 잘못된 옵션을 선택하게 만들고, 결과적으로 의도하지 않은 정보로 폼이 제출될 수 있습니다.

(4) 오류 메시지의 중요성
잘못된 옵션을 선택하여 폼을 제출하는 것보다, 입력하지 않은 란에 대한 오류 메시지를 보여주는 것이 사용자에게 더 안전한 접근법입니다. 이는 사용자가 필요한 정보를 다시 확인하고 수정할 수 있는 기회를 제공합니다.

4. 셀렉트 메뉴와 모바일 기기

셀렉트 메뉴는 데스크탑 브라우저에서는 반드시 나쁜 요소는 아니지만, 모바일 환경에서는 사용자에게 더 많은 불편함을 초래할 수 있으며, 맥락과 관련된 관계가 더욱 희미해질 수 있습니다.

모바일 디바이스는 제한된 스크린 공간을 가지고 있어, 이는 사용자에게 스크롤링할 수 있는 공간이 줄어들고 원하는 옵션을 찾는 데 더 오랜 시간이 걸린다는 의미입니다. 그럼에도 불구하고, 많은 디자이너들은 모바일에서 폼 입력을 위해 더 간단하고 적절한 컨트롤을 사용할 수 있음에도 불구하고 여전히 셀렉트 메뉴를 자주 활용하고 있습니다.

1) 문제 #1. 액션의 수

모바일과 데스크탑에서 셀렉트 메뉴와 상호작용하는 것은 여러 단계를 거치는 과정으로, 일반적으로 필요 이상의 노력을 요구합니다. 다음은 앞서 살펴본 드롭다운 메뉴를 이용한 폼에서 폼을 완성하는 데 필요한 액션의 수입니다.

2) 문제 #2. 스크린 공간 활용

셀렉트 메뉴의 UI 인터랙션은 모바일 기기의 스크린을 효과적으로 활용하지 못합니다. 예를 들어, 아이폰에서는 셀렉트 메뉴가 거의 스크린 공간의 50%를 차지하게 되며, 이는 동시에 제스처를 사용할 수 있는 공간도 50%로 제한된다는 것을 의미합니다.

3) 해결책

모든 정보가 첫 번째 섹션에 포함되어 있을 경우, 드롭다운 메뉴보다 더 직관적이고 효율적인 대안적인 컨트롤을 활용하는 것이 사용자 경험을 개선하는 데 도움이 됩니다.

(1) 사용자 편의성
모든 정보가 첫 번째 섹션에 위치할 경우, 사용자는 추가적인 클릭이나 스크롤 없이 필요한 정보를 즉시 확인할 수 있습니다. 이는 입력 과정을 더 간편하게 만들어 줍니다.

(2) 시각적 명확성
드롭다운 메뉴는 선택지를 펼쳐야만 내용을 볼 수 있으므로, 정보가 한눈에 들어오지 않습니다. 대안적인 컨트롤을 사용하면 사용자가 필요한 정보를 더 쉽게 인식할 수 있습니다.

(3) 효율적인 공간 활용
드롭다운 메뉴는 열고 닫는 과정에서 화면 공간을 차지하게 됩니다. 대신 다른 컨트롤을 사용하면 화면 공간을 더 효율적으로 활용할 수 있습니다.

(4) 빠른 액세스
드롭다운 메뉴는 여러 단계를 거쳐야 하므로 시간이 더 걸릴 수 있습니다. 다른 형태의 컨트롤을 사용하면 사용자가 원하는 정보를 빠르게 찾고 선택할 수 있습니다.

해결책 1. 라디오 그룹(radiogroup)또는 세그먼티드 컨트롤(segmented control)

라디오 그룹(radiogroup)또는 세그먼티드 컨트롤(segmented control)은 상호 배타적이지만 밀접한 관련이 있는 선택지 세트(예: 지역 선택)입니다.

(1) 상호 배타적 선택
라디오 그룹이나 세그먼티드 컨트롤은 사용자가 여러 옵션 중에서 하나만 선택할 수 있도록 설계되어 있습니다. 이는 선택지를 명확히 구분하여 사용자가 직관적으로 이해할 수 있게 합니다.

(2) 밀접한 관련성
라디오 그룹이나 세그먼티드 컨트롤은 관련된 옵션들을 그룹화하여 제공하므로, 사용자가 특정 맥락에서 선택할 수 있는 적절한 선택지를 쉽게 찾을 수 있습니다. 예를 들어, 지역 선택과 같은 경우, 서로 연관된 옵션을 제공하여 사용자가 보다 자연스럽게 선택할 수 있도록 돕습니다.

(3) 직관적인 사용자 경험
라디오 그룹과 세그먼티드 컨트롤은 사용자가 선택할 수 있는 옵션을 시각적으로 명확하게 보여줍니다. 이는 사용자가 원하는 옵션을 쉽게 찾고 선택할 수 있도록 도와줍니다.

(4) 빠른 선택 가능: 라디오 그룹이나 세그먼티드 컨트롤은 드롭다운 메뉴보다 사용자가 선택하는 데 필요한 클릭 수를 줄여주며, 즉각적으로 선택지를 보여주기 때문에 빠른 의사결정을 지원합니다.

해결책 2. 스테퍼(steppers)

스테퍼(steppers)는 정수 값을 올리거나 내리는 방식으로 사용되며, 조정해야 하는 양이 적은 경우(예: 승객 수)에 적합합니다.

(1) 정수 값 조정
스테퍼는 주로 정수 값을 증가시키거나 감소시키는 데 사용됩니다. 예를 들어, 승객 수와 같이 자연수로 표현되는 경우에 적합합니다.

(2) 간편한 사용자 인터페이스
스테퍼는 버튼 클릭을 통해 값을 쉽게 조정할 수 있도록 하여, 사용자가 원하는 값을 빠르게 선택할 수 있게 돕습니다. 이는 직관적이고 간편한 사용자 경험을 제공합니다.

(3) 작은 범위의 조정에 적합
조정해야 하는 양이 적은 경우, 예를 들어 승객 수가 1명에서 10명 사이일 때, 스테퍼를 사용하면 사용자가 쉽게 원하는 값을 선택할 수 있습니다. 많은 수치를 입력할 필요가 없기 때문에 스테퍼가 효율적입니다.

(4) 오류 감소
스테퍼를 사용함으로써 사용자는 실수로 잘못된 값을 입력할 가능성이 줄어듭니다. 버튼 클릭으로 값을 조정하므로, 입력 오류를 최소화할 수 있습니다.

해결책 3. 스위치(switch)

스위치(switch)는 간단하게 180도 다른 두 개의 선택지를 제공하는 데 사용됩니다.

(1) 명확한 선택
스위치는 두 가지 상반된 상태(예: 켜기와 끄기, 활성화와 비활성화)를 명확하게 나타냅니다. 사용자는 한 번의 클릭으로 즉각적으로 상태를 변경할 수 있습니다.

(2) 직관적인 인터페이스
스위치는 사용자가 이해하기 쉽고 직관적으로 사용할 수 있는 요소입니다. 시각적으로도 두 상태를 쉽게 구분할 수 있어 사용자 경험을 향상시킵니다.

(3) 간편한 조작
스위치를 조작하는 것은 간단하고 빠르며, 추가적인 입력 없이 즉시 결과를 반영할 수 있습니다. 이로 인해 사용자는 필요한 변경을 손쉽게 수행할 수 있습니다.

(4) 효율적인 공간 활용
스위치는 두 가지 선택지를 하나의 간결한 요소로 표현할 수 있어 화면 공간을 효율적으로 사용할 수 있습니다. 이는 특히 모바일 기기와 같은 제한된 공간에서 유용합니다.

해결책 4. 슬라이더(slider)

슬라이더(slider)는 주어진 범위 내에서 값을 세밀하게 조절할 수 있도록 해줍니다.

(1) 정밀한 조정
슬라이더는 사용자가 원하는 값을 세밀하게 조정할 수 있도록 설계되어 있습니다. 이는 사용자가 특정 범위 내에서 원하는 정확한 값을 쉽게 선택할 수 있게 해줍니다.

(2) 직관적인 인터페이스
슬라이더는 시각적으로 사용자가 위치를 쉽게 확인할 수 있도록 하며, 이를 통해 사용자는 실시간으로 값을 조정하는 과정을 직관적으로 이해할 수 있습니다.

(3) 즉각적인 피드백
슬라이더를 조작할 때, 사용자는 값이 변경되는 것을 즉시 확인할 수 있어, 조정 결과를 바로 반영할 수 있습니다. 

(4) 유연한 범위 설정
슬라이더는 최소값과 최대값을 설정할 수 있어, 다양한 상황에서 유연하게 사용할 수 있습니다. 예를 들어, 볼륨 조절이나 밝기 조절 등 다양한 애플리케이션에서 유용합니다.

5. 결론

셀렉트 메뉴는 여러 가지 문제점을 가지고 있습니다. 원하는 항목을 찾기 어렵고, 자연스럽게 옵션을 숨기기도 어렵고, 선택한 값을 편집할 수 없습니다. 그러나 이는 유저 인터페이스 디자인에서 셀렉트 메뉴를 절대 사용하지 말라는 의미는 아닙니다. 보통 프로덕트 매니저나 디자이너가 이를 언제 어떻게 사용해야 할지 모를 때, 나쁜 사용자 경험이 발생하게 됩니다.