드롭다운 메뉴 사용 UX 원칙
UX 디자인 배우기 #46
UX Design:Drop-Downs in Forms
Today UX 아티클UX Planet에 올라온 Nick Babich의 글 UX Design:Drop-Downs in Forms을 전문 번역한 글입니다.
셀렉트 메뉴(select menu) 혹은 드롭다운 메뉴(drop-down menu)는 제대로만 이용하면 훌륭한 도구입니다. 허용된 선택지만 보여주기 때문에 스크린의 공간이 절약되고 유저가 데이터를 잘못 입력하는 걸 방지할 수 있습니다.
드롭다운은 예를 들면 그룹핑 옵션, 키보드 내비게이션, 플랫폼 간 안정적인 렌더링 등과 같은 많은 멋진 기능들과 함께 이용됩니다. 또한 디자이너는 다양한 목적을 위해 드롭다운을 사용하는데 예를 들어 폼(form) 채워 넣기에 활용하면 유저가 입력란에 입력할 옵션을 선택할 수 있습니다.
셀렉트(드롭다운) 메뉴사람들이 폼을 채워 넣기 싫어한다는 건 잘 알려진 사실입니다. 그리고 그 과정이 더 길거나 복잡해 보일수록, 유저는 더 생각하지 않으려는 경향이 있습니다. 특히 인풋이 부정확하게 들어가는 작은 스크린의 경우 더 그렇습니다. 그리고 이 과정을 더 나쁘게 만드는 요소가 ‘셀렉트 메뉴’입니다.
셀렉트 메뉴와 옵션의 개수
어떤 때는 옵션이 2개뿐인 셀렉트 메뉴를 볼 때도 있고, 또 어떤 때는 옵션이 20개가 넘는 셀렉트 메뉴를 볼 때도 있습니다. 두 가지 경우 모두 셀렉트 메뉴가 잘못 이용된 경우입니다.
옵션이 너무 많은 경우
셀렉트 메뉴에 옵션이 15개 이상 많아지면, 훑어보거나 찾기 어려워집니다. 긴 드롭다운 리스트는 유저에겐 정말 악몽과 같을 수 있습니다. 옵션 부분을 리스트에 넣어서 스크린에서 안 보이게 숨겼기 때문에 리스트 내에서 스크롤을 내려야 하기 때문에 고통스러운 사용자 경험을 만들어내고 전반적인 프로세스를 느리게 만듭니다.
여기에 적합한 사례가 100개 이상의 옵션이 나오는 국가 선택 메뉴입니다. 유저가 이런 메뉴를 개괄적으로 잘 보는 건 완전 불가능하며, 자신이 찾는 옵션을 쉽고 빠르게 찾을 수 있는 방법은 없습니다. 저는 보통 미국(United States)을 선택할 때 고생을 하곤 하는데, ‘인기 순’으로 해서 미국이 국가 리스트 상단에 있을 때도 있지만, 알파벳 순서로 해서 아프가니스탄이 제일 상단에 나오고 미국은 리스트에서 한참 아래로 내려와 아랍에미레이트 연합국(United Arab Emirates) 바로 뒤에 나올 때도 있기 때문입니다. 때문에 보통 제가 제일 먼저 해야 할 일은 어떤 논리로 순서가 정해졌는지 이해하는 것입니다.
유저가 자신이 찾는 것을 알고 있을 때는 셀렉트 메뉴 대신에 자동 완성형 기능이 있는 텍스트 필드 사용을 고려해 보시기를 바랍니다. 국가 선택 메뉴의 경우엔 이것이 좋은 해결책이 될 수 있습니다. 또한, 프로그램 관점에서 자동으로 위치를 인식할 수 있는지 시도해보고 그것을 기반으로 최대한 잘 추측해봐야 합니다.
“United”를 국가 이름 자동 완성 입력란에 넣으면 다음과 같은 리스트를 보여준다.정리: 옵션이 15개가 넘는다면 텍스트 입력란(일반형 또는 자동 완성형)을 고려해본다.
옵션이 너무 적은 경우
셀렉트 메뉴에 옵션이 7개 이하인 경우엔 뜨는 정보가 너무 적어서 문제가 생깁니다. 유저는 적절한 옵션을 보기 해서 먼저 메뉴를 클릭해야만 합니다.
위와 같은 경우에는 라디오 버튼을 사용해야 합니다. 유저가 얼마나 많은 옵션이 있는지, 각 옵션이 어떤 것인지 정보를 알아내기 위해 클릭(혹은 타이핑)을 하지 않고도 즉시 파악할 수 있어야 합니다.
정리: 만일 리스트에 옵션이 7개 이하라면, 라디오 버튼을 고려해보자.
셀렉트 메뉴와 레이블
다른 폼 인풋과 마찬가지로, 셀렉트 메뉴도 언제나 입력란 옆에 레이블을 붙여야 합니다(W3C 표준). 하지만, 셀렉트 메뉴 안에 ‘정확이 무엇을 선택하는 것인지’ 유저에게 말해주는 의미 있는 레이블(“None”이나 “Please Select”같은 포괄적인 것 말고)을 이용하는 것도 중요합니다. 레이블은 옵션 그룹을 완전히 설명할 수 있도록 명확하고 뚜렷해야 합니다.
레이블을 셀렉트 메뉴 안과 밖에 추가하면 유저가 혼란 없이 액션을 취할 수 있습니다.셀렉트 메뉴와 디폴트 옵션
디폴트 값을 주는 것도 정말 많은 비율의 유저(90% 정도)가 특정 값을 선택한다고 믿는 게 아니라면 피해야 합니다. 특히 필수 입력란 일 경우엔 더 그렇습니다.
왜 그럴까요? 사람들은 폼을 빠르게 입력하기 때문에 디폴트 값을 주면 문제가 생길 수 있습니다. 유저가 시간을 들여서 모든 선택지를 차근차근 볼 것이라고 가정하지 마시길 바랍니다. 이미 값이 입력되어 있는 건 실수로 지나칠 수도 있습니다. 대부분의 경우는 잘못된 옵션을 선택해서 폼을 제출하게 하는 것보다 입력하지 않은 란이 있다는 오류 메시지를 보여주는 것이 유저에게 더 안전합니다.
셀렉트 메뉴와 모바일 기기
셀렉트 메뉴는 데스크탑 브라우저에선 완전히 나쁜 요소가 아니지만, 모바일에서는 더 고통이 많아지고, 맥락과 관련된 관계는 더 희미해집니다.
모바일 디바이스는 매우 제한된 스크린 공간을 가지고 있는데 이는 곧 유저가 스크롤링을 할 수 있는 공간도 더 적고 찾고 있던 옵션을 찾는 데도 더 오래 걸린다는 뜻입니다. 그런데도 여전히 디자이너들은 모바일에서 폼에 입력을 하는 데 더 간단하고 적절한 컨트롤을 쓸 수 있는데도 셀렉트 메뉴를 자주 사용하고 있습니다.
왼쪽: 거의 모든 질문에 드롭다운 메뉴를 활용한 폼. 오른쪽: 각 질문에 가장 적합한 인풋 컨트롤을 이용한 폼.
문제 #1. 액션의 수
모바일과 데스크탑에서 셀렉트 메뉴와 인터랙팅하는 것은 단계가 많은 프로세스로 보통 필요 이상의 노력을 요구합니다. 다음은 바로 앞에서 봤던 드롭다운 메뉴를 이용한 폼에서 폼을 완성하는 데 필요한 액션의 수입니다.
먼저 컨트롤을 탭 하고, 스크롤을 내려서(보통 한 번 이상), 타깃을 찾고 선택한다. Imagecredits: lukew
문제 #2. 스크린 공간 활용
셀렉트 메뉴 UI 인터랙션은 모바일 기기의 스크린을 제대로 활용하지 못합니다. iOS9이 설치된 아이폰의 경우 셀렉트 메뉴가 거의 스크린 공간의 50%를 차지하게 되며, 이는 동시에 제스처 공간이 똑같이 50%밖에 안 된다는 뜻이기도 합니다.
거의 7개의선택 옵션을 보여주어 전체 스크린의 절반 가까이 차지하고 있습니다.해결책
모든 정보가 첫 번째 섹션에서 나오는 경우에는 드롭다운 메뉴 대신 다음과 같은 컨트롤을 이용할 수 있습니다.
라디오 그룹(radiogroup)또는 세그먼티드 컨트롤(segmented control)
라디오 그룹(radiogroup)또는 세그먼티드 컨트롤(segmented control)은 상호 배타적이지만 밀접한 관련이 있는 선택지 세트(예: 지역 선택)입니다.
세그먼티드 컨트롤(segmented control)스테퍼(steppers)
스테퍼(steppers)는 정수 값을 올리거나 내리는 식으로 이용되며 조정하는 양이 적을 때(예: 승객수) 적합합니다.
스테퍼스위치(switch)
스위치(switch)는 간단하면서 180도 다른 두 개의 선택지에 이용합니다.
스위치슬라이더(slider)
슬라이더(slider)는 주어진 범위 내에서 값을 미세하게 조절할 수 있게 해줍니다.
드롭다운 메뉴가 많은 폼을 가지고 시작할 때는, 각 질문을 먼저 살펴보고 위에서 언급한 컨트롤 중에 그 질문의 답을 얻는 데 더 적합한 방법이 없는지 살펴봅니다.
Image credits: lukew하지만 가장 중요한 것은 불필요한 인풋을 모두 제거하여 폼을 간소화하려고 해야 한다는 것입니다. 어떤 경우에는 여러 셀렉트 메뉴를 하나의 인풋 컨트롤로 압축할 수도 있습니다. 이 솔루션은 유저의 인지 부하를 상당히 줄여줄 겁니다.
결론
셀렉트 메뉴는 많은 문제를 가지고 있습니다. 원하는 것을 찾기 어렵고, 자연스럽게 옵션을 숨기기도 어렵고, 선택 값을 편집하지 못하게 합니다. 하지만 그렇다고 해서 유저 인터페이스 디자인에서 절대 셀렉트 메뉴를 이용하면 안 된다는 뜻은 아닙니다. 보통 디자이너가 이를 언제 어떻게 써야 할지 모를 때 나쁜 사용자 경험이 만들어집니다.
잘못 디자인된 폼과 잘 디자인된 폼의 가장 큰 차이는 무엇일까요? 잘 디자인 된 폼은 각각의 질문에 가장 적합한 인풋 컨트롤 이용합니다. 때로는 라디오 그룹이 될 수도 있고, 자동완성형 입력란이 될 수도 있고, 혹은 셀렉트 메뉴가 될 수도 있습니다.
12,000명 브런치 구독자를 위한 특별한 혜택!!!!!
라이브 클래스 PM VOD 패키지(리서치/분석/기획/전략/설계) 추천
300시간 이상 UX 강좌, PM을 위한 180여개 UX 강좌 묵음 패키지
브런치 구독자에 한해 정가 대비 90% 할인 쿠폰 증정합니다.
쿠폰 코드: 20241231
상세 정보 확인하기
