it-swarm-ko.com

많은 옵션으로 선택을 처리하는 방법은 무엇입니까?

웹 응용 프로그램에서 사용자가 선택할 수있는 옵션 목록이 있다고 가정 해 봅시다. 적절한 수의 옵션이있는 경우 일반적 으로이 경우 드롭 다운을 사용하지만 50 개의 옵션이있는 경우 어떻게 다르게 접근해야합니까? 또는 100? 또는 1000?

10
GSto

아마도 두 개의 창 접근법을 검색과 결합합니까?

Django admin multiselect

검색 창에 입력하면 UI가 클라이언트 측에서 동적으로 필터링됩니다. 모든 옵션이 무엇인지 알 수 있기 때문에 검색 만하는 것이 좋습니다.

보너스 포인트의 경우 일반 선택/여러 컨트롤에서 즉석에서 생성 을 수행 할 수 있습니다.

11
Chase Seibert

몇 가지 아이디어 :

  1. 콤보 박스 (또는 자동 완성을 이용한 검색)
  2. 옵션을 그룹으로 나누고 사용자가 먼저 그룹을 선택한 다음 목록에서이 경우 더 작은 옵션을 선택하십시오.
5
Kostya

사용자가 1000 가지 옵션 중에서 선택할 수있는 앱이 있다면 첫 번째 응답은 무언가 잘못 설계 한 것입니다. 많은 옵션으로 이어지는 정보 아키텍처를 축소하고 고려하여 그에 대한 조치를 확인하십시오. 사용자는 실제로 모든 선택이 필요합니까? 그녀를 위해 몇 가지를 없애거나 합리적인 기본값을 선택할 수 있습니까? 선택의 역설 문제를 어떻게 처리합니까?

그러나보다 실용적인 용어로 정보를 범주로 나누고 그러한 방식으로 제시하십시오. 어떤 정보를 디자인하고 있는지 알면 도움이 될 수 있습니다. 정보가 사용 가능한 시각화 또는 컨트롤의 종류에 영향을주기 때문입니다.

시간대를 고려하십시오. 당신은 정말 구체적이고 각 개별 시간대를 제공 할 수 있으며, 사용자가 소화 할 수있게하기 위해 하드 코어 작업을해야하는 큰 목록으로 이어집니다. 또는 대부분의 장소에서 가장 가까운 시간대 만 선택할 수 있으며, 이로 인해 일부 예외적 인 사용자는 제외 될 수 있지만 99 %를 커버 할 수 있습니다.

이벤트 시간을 선택하는 것과 같습니다. 구체적이라는 것은 사용자가 분 단위로 선택할 수 있음을 의미합니다. 60 개의 아이템 드롭 다운 메뉴? 또는 시간을 5 분씩 분류 할 수 있습니다. 갑자기 사용자는 12 가지 옵션 중 하나만 선택하면되며 사용 사례에 따라 충분히 구체적입니다.

3
Rahul

많은 옵션을 위해 모든 유형의 다중 선택은 성가시다. 한 번의 잘못된 클릭과 30 분이지나 갔다고 생각하십시오.

이와 같은 화살표가있는 2 개의 상자를 사용해야합니다alt text

몇 줄의 JS로하기가 너무 어렵지 않습니다.

1
Sruly
  1. 모든 요소를 ​​논리적으로 정렬 한 드롭 다운을 사용하십시오.
    예를 들어, 시간대 목록은 오프셋에 따라 정렬되며 국가 목록은 알파벳순으로 표시됩니다.
    또한 사용자가 값을 입력 할 수 있어야하며 올바른 값으로 자동 제안/점프됩니다.

  2. 논리적으로 그룹화하십시오. 이름 만있는 경우 먼저 첫 번째 문자를 선택한 다음 적합한 항목의 하위 집합을 가질 수 있습니다. 항목을 논리적으로 분류 할 수 있다면 (예 : 부서, 지역 등에 잘 맞는 조직의 사람들) 더 좋습니다.
    여러 레벨을 가질 수도 있습니다.

0
Dan Barak