긴 목록에서 항목의 하위 집합을 선택하는 가장 좋은 방법
고객 중 한 명이 자신이 발행 한 잡지에 대한 정보를 공유 할 웹 응용 프로그램을 구축하기를 원합니다. 매거진의 각 에디션에는 다양한 광고주가 포함되어 있습니다. 이 광고주는 중앙 광고주 풀에서 온 것입니다. 이 풀에는 현재 약 150 명의 광고주가 있습니다. 잡지의 각 버전에는 이러한 광고주의 하위 세트 (약 70-80)가 포함되어 있습니다.
고객은이 목록 150에서 70-80 명의 광고주를 잡지에 추가 할 수있는 방법을 제안했습니다. 가능한 한 빠르고 쉽고 직관적이어야합니다.
이상적인 솔루션은 무엇입니까? 아래 이미지 라인에서 무언가를 생각하고있었습니다.
- 사용 가능한 광고주 목록.
- 선택된 광고주 목록 광고주는 삭제 버튼이 있습니다.
- 왼쪽 목록에서 광고주에게 자동 제안 텍스트 상자. <Enter>는 왼쪽 목록에서 광고주를 제거하고 오른쪽 목록에 추가합니다. 텍스트 상자가 지워지고 초점이 유지됩니다.
내 동료는 끌어다 놓기 또는 각 광고주에 대한 확인란이있는 하나의 목록 만 제안했지만 이러한 접근 방식으로 인해 사용자는 많은 검색과 클릭을 수행해야합니다. 내 접근 방식으로 사용자는 계속 입력 할 수 있습니다.
이 상황에 대한 다른 제안?
당신의 디자인 Kristof는 이미 꽤 좋습니다. 이 마우스와 키보드를 4, 4 번 째로 멈추는 것과 같은 매우 중요한 일을 해냈습니다. 그리고 나는 당신과 함께 드래그 앤 드롭-yuk!
방금 아이디어를 조금 수정했습니다.
- 왼쪽 항목을 마우스로 클릭하면 오른쪽에 추가됩니다.
- 텍스트 필터를 Google 스타일로 사용하려고합니다 (예 : 다중 워드, 부분 매칭. 검색 입력에서와 같이 "rce bm"은 다이어그램에 표시된 세 번째 항목과 일치합니다. 이것은 사용하기 쉽고 사용자에게 이름을 찾는 강력하고 직관적 인 방법을 제공합니다. 2 차 필터링 (문자열 시작과 같은)은 사용자를 실망시키고 다시 사용하지 못하게합니다. 필터링은 인터페이스에 매우 중요하므로 잘 작동합니다.
- 다른 사람이 제안한대로 사용자의 시간을 절약하는 또 다른 방법은 "선택한 광고주"측에 부분적으로 완성 된 목록을 갖는 것입니다. "가장 많이 사용되는 10 대"광고주가 70 % 이상 히트 할 가능성이 높다고 생각되면로드 오른쪽의 오른쪽 목록에 해당 광고를 버릴 수 있습니까? 최악의 경우 사용자는 상위 10 개 중 하나 또는 두 개 (마우스 클릭 1 개)를 삭제해야하며 나머지 7 개 항목은 검색을 위해 저장했습니다. 이 아이디어에서 숫자를 조정하여 더 많은 작업의 사용자를 구하십시오.
기억하십시오 : 더 많은 일을 yo 할 수 있습니다; 클릭,보기 및 검색을 줄이면 인터페이스가 더 빠르고 쉽고 편리해집니다.
저는 잡지를 출판하는 회사에서 일하고 있으므로 도메인에 대해 잘 알고 있습니다.
광고주 목록이 문제마다 크게 바뀌지 않는다고 생각하므로 이전 문제의 광고주를 기본적으로 선택해야합니다.
광고주가 150 명에 불과하고 그 중 절반이 선택되므로 검색에 신경 쓰지 않습니다. 간단한 확인란 목록으로 시작하여 그것이 얼마나 잘 작동하는지 봅니다. 선택한 항목을 시각적으로 구분하여 (예 : 굵게 표시) 스캔하기 쉽도록하십시오.
내 첫 번째 게시물이므로 조심하십시오. 나는 똑같이 할 것입니다 :-)
여기에는 좋은 아이디어가 있지만 원래 포스터의 요구 사항을 충족시키는 아이디어는 없다고 생각합니다.
"고객이이 목록에서 70-8 광고주를 추가 할 수있는 방법을 제시하고자합니다"-Kristof Claes.
사용자가 결과를 필터링하여 선택한 광고주 목록에 추가 할 수있는 멋진 아이디어에 동의합니다. 대량 추가70 광고주 선택. 필터링 아이디어는 상당히 좋지만 사용자가 "받는 사람"필드에서받는 사람을 지정하는 전자 메일 응용 프로그램과 매우 유사한 응용 프로그램으로 이어질뿐입니다. 70 명의 수신자를 직접 추가해야한다고 상상해보십시오.
이상적으로는 다음과 같은 워크 플로를 원하지 않습니다.
- 검색 할 문구 유형
- (결과가 나타남)
- 자동 완성 항목에 대해 enter를 누르거나 나타나는 목록에서 하나 이상의 항목을 선택하십시오.
- 약 70 명의 광고주가 추가 될 때까지 1 ~ 3 단계를 반복하십시오.
나는 실제로 자신의 것을 아는 많은 사람들로부터 훌륭한 게시물을 보았지만, 일부는 아마도 주제를 벗어 났으며 좋은 "사용자 인터페이스 디자인"의 심리학보다는 구현 기술에 다소 집중되어 있다고 생각합니다.
이 스레드에 대한 나의 마지막 생각은 아마도 선택에 "그룹"을 추가하는 일종의 메커니즘 일 것입니다. 이는 동일한 워크 플로우의 70 배 반복을 확실히 감소시킬 것입니다. 내가 본 일부 소프트웨어는 "라운드 로빈"방식으로 광고주를 선택합니다. 확실히 이것은 일부 선택에 도움이 될 수 있습니다. 또한 항상 추가하고 싶은 미리 정의 된 그룹 (최고의 유료 광고주 또는 "새로운"제품에 대한 광고 목록)이있을 수 있습니다.
그리고 지금 약간 벗어난 주제가 있습니다 ...
Matty, 당신이 Apple, 특히 iPhone을 언급 한 것을 보았습니다)
... 우리는 iPhone에서 배울 수 있습니다 ... 키는 사용자에 대한 결정에 따라 합리적인 가정을 만드는 것에 관한 것입니다 ...
우리가 다른 날 이야기를 한 후에 그 말이 무엇을 의미하는지 잘 모르겠습니다. 터치 장치뿐만 아니라 덜 사용 가능할뿐만 아니라 Apple는 일반적으로 사용자 기반에 대해 실제로 생각하는 것을 궁금하게하는 소프트웨어를 만든 역사를 가지고 있습니다. iTunes 소프트웨어가있는 컴퓨터에 연결해야합니다. 왜 지구상에서 아이 패드의 General 설정으로 들어 가지 못합니까? 추측.
최상의 사용자 인터페이스는 "유도 사용자 인터페이스 디자인"과 달리 "유도 사용자 인터페이스 디자인"또는 "시도 및 오류"와 같은 스타일입니다. 터치 장치는 후자의 범주에 속합니다. 설명하겠습니다 :
iTouch, iPhone에서와 같이 Apple, 그리고 iPad 에서처럼 인기있는 터치 장치가 있다면 Stone에 소프트웨어 유용성을 다시 던져 넣은 경우 "유연한 사용자 인터페이스"의 시대 버튼에 매우 잘못 디자인 된 글리프처럼 사용자가 터치 장치의 화면을 응시하는 "나의 장점, 그게 무슨 뜻입니까?", 두 손가락을 사용하면 사용자가 확대 또는 축소 할 수 있으며, 내가 좋아하는 것 – 손가락과 아이콘을 2 초간 누르고 있으면 장치가 "삭제 모드"가됩니다.
잘못 디자인 된 아이콘이 "무엇을 의미하는지 모르지만 처음으로 사용한 후에는 보통 그 기능을 기억합니다"범주에 속합니다. 많은 터치 장치는 사용자가 "재생"을 통해 프로그램이 실제로 수행 할 수있는 작업을 추론해야하기 때문에 즉각적인 유용성을 감소시켜야하기 때문에 연역적 인 사용자 인터페이스 범주에 속합니다.
훌륭한 일을 유지하십시오!
전체 광고주 목록은 그 위에 필터링 (해야하며 기본적으로 "3"을 "1"위에 놓고 "3"은 "1"의 내용에 동적으로 영향을 미칩니다 ) :
- 검색 (즉시 목록을 좁 힙니다)
- Groups ( "마지막 사용", "패션", "전자 제품"등)
참고-검색이 충분히 강력하면 하나의 컨트롤 만 사용할 수 있으므로 "fashion"을 검색하면 이름에 "fashion"이 있거나 "fashion"카테고리에 속하는 것으로 태그가 지정된 모든 광고주가 반환됩니다.
"마지막 사용"은 확인란 일 수 있습니다.
주요 이점 :
즉시 목록을 좁 히면 모든 관련 항목을 함께 선택하고 이동할 수 있습니다.
예 : "electronics"를 입력하고 모든 전자 관련 광고주 목록을 가져 와서 마우스, Ctrl + A 또는 기타 방법을 사용하여 모두 선택하고 즉시 올바른 목록으로 옮깁니다.
관련이있을 수있는이 UI가 있습니다.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
어떻게 광고주가 카테고리로 구성되어 있고 사용자가 어느 카테고리가 각 카테고리인지 알고 있다면 사용할 수 있습니다.
마우스 전용 UI이므로 광고 주당 한 번의 클릭이 필요합니다.
키보드로 조작 할 수 있지만 메뉴가 닫히고 선택마다 다시 확장되어야합니다. 입력시 메뉴를 닫지 않으면 문제를 해결할 수 있습니다.
Micky Duncan 에 동의해야합니다. 검색/그룹화/필터링이이 작업에 전혀 적합하지 않다고 생각합니다.
큰 목록에서 몇 가지 항목을 검색하고 선택하고 싶지 않습니다. 목록에있는 모든 항목 중 약 half을 선택하려고합니다. 사용자가 항목의 절반을 선택해야하는 경우 사용자는 모든 후보자를 선택하고 다른 사람을 놓치지 않도록해야합니다. 따라서 워크 플로는 다음과 더 유사합니다.
종이에 150 명의 광고주 목록이 있다고 가정합니다. 목록을 위에서 아래로 이동하고 각각 "이 광고주를 원합니까?"결정 그런 다음 체크 표시 또는 취소 선을 표시하고 마지막에 그들 모두를 평가했습니다.
따라서 디자인은 다음과 같아야합니다.
초점은 중간 목록의 맨 위 항목에 있으며 사용자는 왼쪽 및 오른쪽 화살표 키를 사용하여 항목을 삭제하거나 선택한 목록에 넣을 수 있습니다. 따라서 광고주에 따라 왼쪽 또는 오른쪽을 눌러 전체 목록을 신속하게 처리 할 수 있으며 각각의 생각을 잃지 않았 음을 확신 할 수 있습니다.
솔루션이 꽤 좋은 것 같습니다. 왼쪽 목록은 실제로 정보를 추가하지 않기 때문에 제거하고 싶습니다 (긴 목록 일뿐이며 Enter 키를 누른 후 증발 된 것이 무엇인지 말하기가 어렵습니다). 자동 완성 기능이있는 검색 필드를 제공하십시오 ( 해당 입력란에 드롭 다운 메뉴가 있어도 사용자가 사용할 수있는 옵션을 계속 볼 수 있음) 사용자가 Enter 키를 모르는 경우 큰 "광고주를 목록에 추가"버튼을 추가하십시오.
이 작업을 프로토 타입 단계에서 최대한 빨리 (모의 데이터 사용) 얻은 다음 클라이언트와 함께 데모하여 실행하십시오. 피드백을 자주 사용하는 사람들이므로 피드백을 최대한 빨리받는 것이 중요하므로 편안하게 사용해야합니다.
MickyD 및 Patrick 에 의해 제기 된 사항에 동의합니다. 그것은 모두 광고주의 선택 방법에 달려 있습니다. 고객이 UI를 사용하여 특정 문제에 속해야하는 광고주를 선택하거나 고객에게 특정 문제에 대한 광고주 목록이 이미 있습니까? 두 경우 모두 필터링이 최상의 솔루션이라고 생각하지 않습니다.
고객이 UI를 사용하여 광고주를 선택하는 경우 하나의 목록을 선택/확인되지 않은 상태로 표시하는 것이 훨씬 좋습니다. 패트릭은 썼다시피 선택된 국가를 돋보이게하는 것이 좋습니다. 선택한 상태를 굵게 표시하지 않고 선택하지 않은 상태를 더 밝게 표시 할 수도 있습니다. 클라이언트는 키 업/키 다운 및 스페이스 (또는 유사한 키)를 사용하여 체크/체크 해제를 사용하여 목록에서 이동합니다.
고객에게 특정 문제에 표시되는 광고주 목록이있는 경우 첫 번째 방법은 해당 목록을 디지털 형식으로 받아 자동으로 가져올 수 있는지 확인하는 것입니다. 이것이 가능하지 않은 경우 목록이 어떤 방식으로 정렬되고 UI가 광고주를 동일한 방식으로 정렬해야합니다.
세 번째 옵션은 고객이 광고주 검색 문제를 살펴 보거나 분류되지 않은 목록을 가지고 있다는 것입니다. 이 경우 필터 기능을 갖는 것이 좋습니다.
요점은 목표와 작업 주변 환경을 알지 못하면 좋은 솔루션을 제공하기가 실제로 어려울 수 있다는 것입니다.
두 개의 목록과 두 개의 버튼을 사용합니다. 사용자는 마우스 클릭으로 왼쪽 목록의 단일 요소를 표시 할 수 있습니다. 두 번 클릭하면 요소가 오른쪽 목록으로 이동합니다.
그는 Shift 키를 누른 채 클릭하여 범위를 표시하고 [>] 버튼을 사용하여 표시된 모든 요소를 오른쪽으로 전송할 수 있습니다. Ctrl을 사용하면 단일 요소를 표시에서 표시 해제 상태로 전환했다가 다시 되돌릴 수 있습니다.
Ctrl-a는 모든 요소를 표시합니다. 모두 다른 프로그램 인터페이스에서 알려져 있습니다.
알파벳순으로 정렬 된 요소를 사용하면 항목을 쉽게 찾을 수 있으며 첫 번째 문자는 스크롤이 필요한 경우 해당 항목을 탐색하는 단축키로 사용될 수 있습니다.
> afoo ifoo
bfoo jfoo
cfoo kfoo
> dfoo lfoo
> efoo mfoo
> ffoo
gfoo
hfoo
[ < ] [ > ]
{a, d, e, f} foo가 이제 왼쪽에 표시됩니다. [>]를 사용하면 사용자가 오른쪽으로 이동합니다.
이러한 인터페이스는 매우 빠르고 사용하기 쉽고 이해하기 쉽습니다. 툴팁 텍스트를 추가하거나 '선택한 항목 목록으로 이동'및 '선택한 항목 목록에서 제거'버튼의 이름을 지정할 수 있습니다.
다른 목록으로 이동 한 후에는이 목록을 사용해야합니다.