드롭다운(dropdown) 메뉴 디자인 필수 가이드

illustration by Ouch.pics

 

사용자가 옵션을 선택할 수 있는 UI 컴포넌트는 많다. 체크박스, 라디오 박스, 토글, 스테퍼, 드롭다운 메뉴. 각각 고유한 장단점이 있으며, 사용자로부터 요구하는 입력의 성격에 따라 사용해야 한다.

이 글의 경우 드롭다운 메뉴에 초점을 맞추고 사용 사례, 유형, 상태 및 모범 사례에 대해 설명하겠다. 대부분의 정보는 Nielsen Norman Group과 Baymard Institute의 글을 읽는 데서 유래한다.

 

 

 

 

---

드롭다운 메뉴 구조

- Label

선택해야 할 항목을 사용자에게 알림

- Field Icon (선택사항)

필요한 정보의 유형을 표시하여 라벨을 지원

 

- Search Bar (선택사항)

20개 이상의 옵션으로 구성된 메뉴에 대해 사용자가 원하는 옵션을 쉽게 찾을 수 있도록 돕기 위해 사용

- 체크박스 (선택사항)

다중 선택 항목이 활성화된 경우

 

 

 

 

---

드롭다운 메뉴 타입

필요한 입력의 성격에 따라, 표시되는 다양한 유형의 정보를 처리하기 위해 여러 유형으로 설계될 수 있다. 드롭다운 메뉴를 설계할 때 사용성을 개선하고 다양한 입력 유형에 대응하기 용이한 유연성을 갖는 것이 중요하다.

 

 

 

 

---

드롭다운 메뉴 상태

UI 컴포넌트의 상태를 전달하기 위해, 사용자 상호작용을 기반으로 서로 다른 상태를 사용한다. 각 상태는 기본 구성 요소와 시각적으로 유사해야 하지만 사용자가 다른 상태와 구별할 수 있도록 명확한 차별화 요소가 있어야 한다.

드롭다운 메뉴에는 기본값, 활성, 호버, 비활성화, 포커스 및 오류의 상태가 포함될 수 있다.

 

 

 

 

---

실제 사례

 

 

긴 드롭다운 방지
드롭다운 메뉴가 그다지 타당하지 않고, 오히려 사용자 경험에 부정적인 영향을 미칠 수 있는 시나리오가 있다. 그러한 시나리오 중 하나는 사용자들에게 선택지가 압도적으로 많고, 탐색하기 어려운 15개 이상의 옵션이 있는 경우다.

또한 사용자가 마우스 커서를 드롭다운 상자 안에 두어야 하는 스크롤 문제가 있을 것이다. 그렇지 않을 경우 페이지를 아래로 스크롤하게 될 것이다. 이전에 이 문제를 경험한 사람들은 이 문제가 얼마나 짜증나는 일인지 예측 가능하다.

긴 드롭다운의 가장 전형적인 예는 일반적으로 100개 이상의 옵션이 있는 국가 선택 드롭다운 메뉴다. 일반적으로 알파벳 순서에 따라 정렬되지만 인기 국가가 상위권에 배치되는 경우도 있어서 헷갈릴 수 있다.

이 문제에 대한 두 가지 해결책이 있다.

- 1. 자동 완성 기능이 있는 텍스트 필드를 사용
- 2. 드롭다운 메뉴에 검색 필드를 통합

위의 내용을 극복하는 한 가지 방법은 드롭다운 메뉴에 검색 상자를 포함시켜 사용성을 향상시키는 것이다.

 

 

 

 

너무 적은 옵션

반면 옵션이 너무 적으면 단순히 노출될 수 있었던 정보를 숨김으로써 사용자 흐름에 불필요한 마찰을 불러일으키기 때문에 드롭다운 메뉴를 사용하지 않는 편이 좋다.

필요한 입력에 따라 추가 액션이나 마찰 없이 사용 가능한 옵션을 즉시 확인할 수 있는 다양한 대안이 있다. 선택할 수 있는 옵션이 많지 않은 경우 라디오 버튼, 토글 스위치 또는 탭 바가 좋은 대안이다.

 

 

 

 

회색으로 비활성화된 옵션
비활성화되거나 사용할 수 없는 옵션이 있는 경우 제거하지 않고 회색으로 표시해야 한다. 비활성화된 항목을 제거하면 인터페이스가 공간 일관성을 잃고 사용자가 학습하기 어려워진다. 즉, 인터페이스가 비활성화되었다는 이유만으로 특정 옵션을 찾을 수 없게 된다.

비활성화된 옵션을 제거하기보다는 회색으로 표시하여 "비활성화" 또는 "사용 불가" 상태를 표시하는 것이 좋다. 또한 해당 옵션이 비활성화된 이유를 나타내는 툴팁을 표시하는 것도 고려해 볼 수 있다.

 

 

 

 

논리적으로 옵션 정렬
옵션을 나열하는 가장 일반적인 방법은 사용자가 원하는 옵션을 쉽게 찾을 수 있도록 알파벳 순으로 또는 숫자로 표시하는 것이다. 대신 "예측 가능한 패턴"으로 나열할 수 있는 날짜 또는 월과 같은 특정 예외가 있다.

 

 

 

 

입력하는 것이 더 빠를 때는 피해라
실제로 입력하는 것이 드롭다운 메뉴를 사용하는 것보다 더 빠를 수 있는 특정한 상황이 있다. 대표적인 상황이 신용카드 유효기간 입력이다. 월과 년이라는 두 개의 드롭다운 메뉴에서 스크롤하는 것보다 확실히 mm/yyy를 입력하는 것이 훨씬 더 빠르다.

자유형 입력 필드를 사용하려면 어떤 형태의 데이터 검증이 필요하지만, 사용자와의 마찰을 줄이기 때문에 사용적합성 관점에서 더 나은 대안이 될 수 있다.

 

 

 

 

과도한 사용 방지
특정 데이터나 정보가 자동으로 도출될 수 있는 경우 사용자에게 입력 정보를 지속적으로 요청할 필요가 없다. 그러한 예로는 체크아웃 과정에서 사용되는 "카드 유형" 필드가 있다. 신용카드 번호의 처음 몇 개의 숫자를 기준으로 카드 유형을 결정할 수 있어 사용자가 직접 카드 유형을 선택하도록 요구하는 것은 추가 마찰이다.

 

 

 

 

해야할 동작 감소
드롭다운 메뉴 구성요소는 동작의 수를 줄이기 위해 필요한 정보를 기반으로 사용자 정의할 수 있다. 전형적인 예로는 "날짜 선택" 필드를 들 수 있다. 여기서 일반 목록 메뉴를 사용할 경우 사용자는 3개의 드롭다운 메뉴(월, 일, 년)가 필요하며, 이는 사용자에게 상당히 귀찮을 수 있다.

더 나은 대안은 사용자가 단일 드롭다운 메뉴만으로 입력을 선택할 수 있도록 메뉴 구성요소를 사용자 정의하는 것이다.

 

 

 

 

명확하고 간결한 레이블 사용
사용자는 라벨을 기반으로 메뉴 옵션을 선택하므로 정확하고 정보를 제공하는 것이 중요하다. 일반적으로 문장 케이스를 사용하고 선택 목적을 명확히 나타내는 간결한 라벨을 쓰는 것이 좋다. 아래는 좋은 라벨을 작성하기 위한 몇 가지 지침이다.

- 작업 메뉴 항목의 경우 동사를 사용하여 수행될 작업을 설명
- 링크의 경우 명사를 사용하여 사용자가 지시할 페이지를 식별
- 메뉴 항목의 글 제외; "delete page" 대신 "delete the page"를 사용
- 메뉴 항목을 텍스트 한 줄에 유지

또한 리스트를 논리적인 순서로 정렬하여 메뉴 항목을 구성하는 것이 중요하다. 즉, 가장 위에 있는 선택사항(알고 있는 경우)이다. 이것은 사용자 연구가 필요하며, 그 결과를 재평가하기 위해 시간이 지남에 따라 시험하고 다듬어야 한다.

 

 

 

 

드롭다운 메뉴는 올바르게 사용할 때 훌륭할 수 있다. 사용자가 선택 범위를 좁히고 화면 공간을 조정하며 잘못된 데이터 입력을 방지할 수 있다. 드롭다운 또는 다른 인터페이스 요소(라디오 버튼, 열린 텍스트 필드 등)를 사용하거나 사용하지 않을 경우 사용적합성 문제가 발생할 수 있으므로 언제 사용해야 하는지 아는 것이 중요하다.

 

 

 

 

-

저자 : Jeremiah Lam
원문 링크: https://uxdesign.cc/the-essential-guide-to-dropdown-menu-design-d0faac4cfd98