그렇다면 콤보박스, 다중 선택, 목록박스, 드롭다운의 차이점은 무엇인가요? 이러한 모든 UI 구성 요소는 유사해 보이지만 서로 다른 용도로 사용됩니다. 선택은 종종 사용 가능한 옵션의 수와 가시성에 따라 결정됩니다. 서로 어떻게 다른지, 어떤 목적을 제공하는지, 그리고 올바른 것을 선택하는 방법을 살펴보겠습니다. 그 과정에서 오해와 잘못된 기대를 피하세요.
모든 목록 패턴이 동일한 것은 아닙니다 위에 강조 표시된 모든 UI 구성 요소에는 정확히 한 가지 공통점이 있습니다. 즉, 목록과 사용자의 상호 작용을 지원한다는 것입니다. 그러나 그들은 약간 다르게 행동합니다. 각각을 하나씩 살펴보겠습니다.
드롭다운 → 목록은 트리거될 때까지 숨겨집니다. 콤보박스 → 필터 입력 + 옵션 1개 선택 다중 선택 → 필터링할 입력 + 여러 옵션 선택 목록 상자 → 기본적으로 모든 목록 옵션이 표시됩니다(+ 스크롤). 이중 목록 상자 → 2개의 목록 상자 간에 항목을 이동합니다.
즉, 콤보박스는 텍스트 입력 필드를 드롭다운 목록과 결합하므로 사용자는 입력하여 단일 옵션을 필터링하고 선택할 수 있습니다. Multiselect를 사용하면 사용자는 다양한 옵션(보통 알약이나 칩으로 표시됨)을 선택할 수 있습니다. 목록 상자에는 기본적으로 표시되는 모든 목록 옵션이 표시되며, 스크롤을 사용하는 경우가 많습니다. 사용자가 사용 가능한 모든 선택 사항을 즉시 확인해야 할 때 유용합니다. 이중 목록 상자(전송 목록이라고도 함)는 일반적으로 대량 선택을 위해 사용자가 두 목록 상자(왼쪽 ← 오른쪽) 간에 항목을 이동할 수 있도록 하는 목록 상자의 변형입니다. 자주 사용하는 옵션을 숨기지 마세요 위에서 언급한 것처럼 올바른 UI 구성 요소를 선택하는 것은 두 가지 요소, 즉 사용 가능한 목록 옵션 수와 기본적으로 이러한 모든 옵션을 표시해야 하는지 여부에 따라 달라집니다. 모든 목록에는 트리 구조, 중첩 및 그룹 선택도 포함될 수 있습니다.
모든 UI 구성 요소에 대해 제가 수년 동안 따라온 한 가지 원칙이 있습니다. 자주 사용하는 옵션을 숨기지 마십시오. 사용자가 특정 선택 항목에 자주 의존하는 경우 해당 항목을 숨겨도 아무런 가치가 없습니다. 미리 선택하도록 만들거나 (자주 사용하는 옵션이 2~3개만 있는 경우) 칩이나 버튼으로 표시한 다음 상호 작용 시 목록의 나머지 부분을 표시할 수 있습니다. 일반적으로 UI가 복잡해지더라도 항상 인기 있는 옵션을 표시하는 것이 좋습니다. 어느 것을 선택하는 방법? 모든 목록에 복잡한 선택 방법이 필요한 것은 아닙니다. 항목이 5개 미만인 목록의 경우 일반적으로 간단한 라디오 버튼이나 확인란이 가장 잘 작동합니다. 그러나 사용자가 큰 옵션 목록(예: 200개 이상의 항목)에서 선택해야 하는 경우 더 빠른 필터링(예: 국가 선택)으로 인해 콤보 상자 + 다중 선택이 유용합니다.
목록 상자는 사람들이 한 번에 많은 옵션에 액세스해야 할 때, 특히 해당 목록에서도 많은 옵션을 선택해야 하는 경우에 유용합니다. 자주 사용되는 필터에 도움이 될 수 있습니다.
이중 목록 상자는 종종 간과되고 무시됩니다. 그러나 이는 대량 선택이나 역할, 작업, 책임 할당과 같은 복잡한 작업에 매우 도움이 될 수 있습니다. 사용자가 커밋하기 전에 전체 선택 목록을 소스 목록과 나란히 검토할 수 있는 유일한 UI 구성 요소입니다("전송 목록"이라고도 함). 실제로 이중 목록 상자는 끌어서 놓기보다 더 빠르고 정확하며 액세스하기 쉬운 경우가 많습니다. 유용성 고려 사항 명심해야 할 중요한 사항 중 하나는 모든 목록 유형이 접근성을 위해 키보드 탐색(예: ↑/↓ 화살표 키)을 지원해야 한다는 것입니다. 어떤 사람들은 입력을 시작한 후 거의 항상 키보드를 사용하여 옵션을 선택합니다.
그 너머:
7개 이상의 옵션이 있는 목록의 경우 "모두 선택" 및 "모두 지우기" 기능을 추가하여 사용자 상호 작용을 간소화하는 것이 좋습니다. 콤보박스가 포함된 긴 목록의 경우 클릭/탭 시 사용자에게 모든 옵션을 표시합니다. 그렇지 않으면 표시되지 않을 수 있습니다. 가장 중요한 점은 혼란을 피하기 위해 비대화형 요소를 버튼으로 표시하지 말고, 대화형 요소를 정적 레이블로 표시하지 않는다는 것입니다.
마무리: 모든 것이 드롭다운인 것은 아닙니다. 이름이 중요합니다. 옵션의 수직 목록은 일반적으로 "드롭다운"으로 설명되지만 의미를 부여하기에는 너무 일반적인 경우가 많습니다. “드롭다운”은 목록이 기본적으로 숨겨져 있음을 암시합니다. "다중 선택"은 목록 내에서 다중 선택(체크박스)을 의미합니다. "콤보박스"는 텍스트 입력을 의미합니다. 그리고 "목록 상자"는 항상 표시되는 선택 가능한 항목의 목록입니다. 목표는 위의 정의와 일치하지 않는 것입니다. 그러나 의도를 일치시키기보다는 이러한 UI 구성 요소를 결정, 디자인, 구축 및 사용할 때 동일한 언어를 사용하십시오. 그것은 작동해야합니다정적 레이블이 대화형 버튼처럼 보이지 않고 라디오 버튼이 체크박스처럼 작동하지 않는 한 디자이너, 엔지니어, 최종 사용자 등 모든 사람이 사용할 수 있습니다. “AI 인터페이스를 위한 디자인 패턴”을 만나보세요 실제 제품의 실제 사례를 포함하는 Vitaly의 새로운 비디오 코스인 AI 인터페이스를 위한 디자인 패턴을 만나보세요. 라이브 UX 교육도 곧 진행됩니다. 무료 미리보기로 이동하세요. 인터페이스 디자인 및 UX에 대한 Vitaly의 비디오 코스인 AI 인터페이스를 위한 디자인 패턴을 만나보세요.
비디오 + UX 교육비디오 전용비디오 + UX 교육$ 450.00 $ 799.00
비디오 + UX 교육 받기30개의 비디오 강의(10시간) + 실시간 UX 교육.100일 환불 보장.비디오만$ 275.00$ 395.00
비디오 코스를 받으세요. 30개의 비디오 레슨(10시간). 매년 업데이트됩니다. 3개의 비디오 코스가 포함된 UX 번들로도 제공됩니다.
유용한 리소스
자동 완성: UX 지침(Vitaly Friedman 작성) eBay의 콤보박스 👍 Elastic의 콤보박스 콤보박스(Elisa 제작) MongoDB의 콤보박스 👍 Visa의 콤보박스 👍 Combobox, Watson 제공(Docplanner) 콤보박스(Wikimedia 제공) Zendesk의 콤보박스 MongoDB의 다중 선택(MongoDB 콤보박스 디자인 문서) 👍 다중 선택 조회(Wikimedia 제공) Vaadin의 다중 선택 콤보 상자 Visa별 다중 선택 전송(목록 상자 예), 작성자: Ant Design 목록 상자, Hopper 제작 Vaadin의 목록 상자 목록 상자, Visa 제공 Red Hat(PatternFly)의 이중 목록 선택기 Salesforce(Lightning Design System)의 듀얼 목록 상자 Mantine의 이적 목록 Dashlite의 듀얼 리스트박스 배지 vs. 알약 vs. 칩 vs. 태그, 작성자: Vitaly Friedman 목록 상자와 드롭다운 목록(Anna Kaley 작성)(NN/g)
