Przykłady dobrego interfejsu użytkownika do wybierania wielu rekordów

Question

W tej chwili przeglądam obszar mojego oprogramowania opartego na systemie Windows i analizuję zmianę relacji z 1-> M na M-> M. W rezultacie muszę dostosować interfejs, aby móc wybrać wiele powiązanych rekordów.

Istnieje wiele sposobów na poradzenie sobie z tym, które są powszechne, ale zazwyczaj dość niezgrabne. Przykłady obejmują dwupanelową listę wszystkich pozycji i listę wybranych elementów lub listę wszystkich rekordów i pole wyboru obok każdego z nich, które ma zastosowanie.

W moim przypadku może być wiele (w dziesiątkach tysięcy) rekordów, które mogą być powiązane, więc prawdopodobnie będę musiał uwzględnić mechanizm wyszukiwania.

Nie szukam na twardej i szybkiej odpowiedzi - mogę zaimplementować coś całkiem łatwo to funkcjonalny, szukam, aby zobaczyć, czy ktoś tutaj ma pochodzić z (lub widział) każdy robi wielkie interfejsy dla tego rodzaju rzeczy, bez względu na to, czy są oparte na sieci, Windows, Mac, Unix, cokolwiek.

Obrazy lub linki do nich będą mile widziane!

Edycja: tutaj jest przykładem tego, co mam pod uwagę:

Answer 1

Lubię sposób StackOverflow dotyczy wielu tagi z wielu pytań:

alt text http://img11.imageshack.us/img11/7062/imagen9n.png

_{przedmioty są wyświetlane jako typów użytkowników}

1. Zaczynasz oczywiście z rekordem chcesz skojarzyć wiele elementów z.

2. Podczas wpisywania wyszukiwania wyświetla mecze (nie trzeba naciskać „Szukaj”)

3. Użytkownik wybrać żądany rekord (segregacja byłoby miło. SO używa „trafność tag”. Na przykład wpisując „a” przynosi Java zamiast asp ponieważ Java ma więcej pytań niż ASP, w danym przypadku znaczenie może być nazwa użytkownika)

4. System tworzy relację (w pamięci)

5. Jeśli liczba rekordów (5+) wypełniają pole wejściowe, są przenoszone do formatu Obszar semi-regid (nie jest to problem tak dlatego, że ma tylko 5 tag withing pojedynczy pytanie, ale w twoim przypadku coś jak „interesujących tagów” ​​funkcja byłaby potrzebna)

alt text http://img7.imageshack.us/img7/8753/imagen12p.png

_{Powiązane tematy zostały przeniesione do „sztywnej” obszar}

oczywiście w sposób uporządkowany (przy użyciu tabeli)

• W końcu, gdy użytkownik zakończy połączenie, kliknie przycisk ZAPISZ lub ANULUJ.

Podejście to ma większą skuteczność, ponieważ użytkownik nie musi naciskać przycisku "szukaj" lub "dodaj innego", co odciąga ich od tego, co robią. Mówi się, że przerywa to jego myśl.

Ponadto, jeśli sprawiają, że użytkownik złapać myszy na coś podczas ich wpisywania UI jest mniej wydajna (myślę, że jest coś o nazwie Hick's law o tym, ale szczerze mogę się mylić)

Jak widzisz to podejście jest już prawie tym, co masz na myśli, ale dodaje pewne udogodnienia, aby uczynić użytkownika szczęśliwszym (niebezpieczeństwo byłoby, gdyby użytkownik uwielbia to podejście i chce go w innych częściach systemu)

Answer 2

Funkcja wyszukiwania, który filtruje rekordy w czasie rzeczywistym podczas wpisywania prawdopodobnie byłby to dobry pomysł, aby dołączyć. Kolejną będzie możliwość sortowania rekordów.

Ponieważ może być dużo rekordów, najlepszym wyborem w tym przypadku jest prawdopodobnie wydzielenie obszaru, który wyświetla to, co już zostało wybrane, aby użytkownik nie musiał przewijać obszarów wyboru, aby znaleźć co już mają.

Answer 3

Myślę, że to, co wyśmialiście, jest całkiem dobrym sposobem na zrobienie tego. Kiedy myślisz o relacji tag-to-posts na blogu (lub na SO nawet), to jest wiele-do-wielu i jest zwykle realizowane bardzo podobnie: dla jednego postu, szukasz (lub, ponieważ są one proste ciągi, wprowadź bezpośrednio) jako wiele znaczników, które chcesz powiązać z nim. Nie mogę myśleć o wielu relacjach wiele do wielu, z którymi często się spotykam, chociaż wiem, że prawdopodobnie jest ich wiele ...

Answer 4

Zalecam, aby nie trzeba było klikać , aby móc wyszukiwać, dodaj więcej. Ostrzeżenie po prawej stronie jest miłe, ale IMHO powinno tylko powiedzieć, że wyszukiwanie wyświetla wyniki, gdy użytkownik pisze.

Sortowanie kolumny (być może wraz z wyszukiwaniem) również byłoby przyjemną funkcją. Sugeruję, aby to zrobić, klikając nagłówek tabeli, z ikoną wskazującą, czy sortowanie jest rosnąco, czy malejące.

Proponuję również wyszukiwanie, aby wykonać approximate string matching w przypadku braku lub niewielkiej liczby wyników. To jest tak denerwujące, że nie potrafię znaleźć czegoś, czego nie pamiętasz dokładnie.

Na koniec, aby przetestować pierwsze wrażenie (ale nie samą funkcjonalność), proponuję przesłanie go do 5 second test i zobaczyć, co otrzymasz.

Answer 5

self-explanatory GUI http://img25.imageshack.us/img25/8568/28666917.png

Link do original image

Inną rzeczą jest to, że moim zdaniem problem nie jest o wybranie wielu rekordów, ale filtrowanie te dziesiątki tysięcy rekordów.Powiązanie M-> M może być implementowane w różny sposób, ale trudnym zadaniem jest zapewnienie wygodnego i logicznego sposobu przeglądania/wyszukiwania ogromnej ilości danych.

Answer 6

To interesujący i dość powszechny problem z interfejsem użytkownika, który pozwala efektywnie wybierać elementy. Zakładam, że masz zamiar najpierw wybrać użytkownika z jednego elementu, a mechanizm, który cię interesuje, to wybór innych elementów związanych z tym pierwszym pojedynczym przedmiotem.

Istnieje wiele różnych metod. Z punktu widzenia użyteczności lepiej byłoby zastosować JEDEN metodę dla każdego scenariusza. Wtedy, gdy użytkownik to zobaczy, będzie wiedział, co robić.

różne techniki selekcji:

1. lista rozwijana - oczywiste dla pojedynczych wybiera.
2. otwarta lista wielu wybierz - np wielowierszowego pola tekstowego, który pokazuje 10 lub 20 linii i posiada pasek przewijania
3. listy rozwijanej, gdzie można wybrać następnie uderzyć i link „dodaj” lub przycisk, aby dodać wiele Wybiera
4. listy poruszającego - tam, gdzie masz dwie otwarte listy, z wszystkimi opcjami dostępnymi na lewej liście, wybierasz kilka, następnie klikasz przycisk, aby przenieść swój wybór na prawą listę.
5. Pola wyboru - dobre tylko dla kilku opcji wielokrotnego wyboru.
6. Lista przedmiotów, każdy z „dodaj” przycisk obok nich - dobry dla krótkich listach

Mówiłeś, że będziesz mieć tysiące możliwych wyborów, dzięki czemu eliminuje 1 do 5. Naprawdę , tysiące wyeliminują je wszystkie, ponieważ użyteczność nie skaluje się dobrze z więcej niż setkami na liście.

Jeśli możesz liczyć na filtrowanie listy przez użytkownika, tak jak w twoim przykładzie, 6 może być odpowiednie. Jeśli myślisz o tym, jak działa tagowanie zdjęć na Facebooku, to uważam, że jest dość wydajny w przypadku długich list: tło: tagowanie obrazów na Facebooku to mechanizm, który pozwala ci przypisać jedną lub więcej osób do części obrazu - np. "Oznacz je".

Po wybraniu obrazu do oznaczenia (np. "Pojedynczego przedmiotu") i chcesz powiązać z nim inne elementy (osoby), Pojawi się okno dialogowe. Zawiera sześć najczęściej używanych nazw w przeszłości oraz pole tekstowe, w którym możesz wpisać imię i nazwisko osoby, z której chcesz skorzystać. Podczas pisania lista dynamicznie się zmienia, aby zmniejszyć liczbę osób do tych, którzy zawierają sekwencję liter, którą wpisałeś. Działa to bardzo dobrze w przypadku dużych list, ale jest zależne od tego, czy użytkownik wpisuje dane do filtrowania. Będzie również polegać na użyciu skryptów, aby inteligentnie zmniejszyć listę w oparciu o dane wejściowe użytkownika.

Dla Twojej aplikacji będzie polegać na tym, że użytkownik wykona ten krok raz dla każdego skojarzenia, ponieważ zakładam, że pozostałe elementy nie będą miały podobnych nazw!

Oto obraz stosowania znakowania Facebooku: http://screencast.com/t/9MPlpJQJzBQ

Answer 7

Istnieje szereg ważnych pytań do rozważenia - ile rekordów będzie zazwyczaj stosowany (w przeciwieństwie do dostępnych dla związku)? Czy po jednej stronie skojarzenia będzie duża liczba rekordów (biorąc pod uwagę zmianę z 1-> M, wydaje się prawdopodobne)?

Jeśli jedna z ilości rekordów jest zwykle bardzo mała (< 10, powiedziałbym), nazwij to LHS (ponieważ zwykle jest), to najlepszym sposobem na powiązanie może być umożliwienie wyszukiwania LHS i LHS. Elementy RHS, a następnie przeciągnij i upuść je na listę - elementy LHS na właściwej liście; Elementy RHS do istniejących elementów LHS. W ten sposób można intuicyjnie określić relację między przedmiotami. Można również dodać inne opcje, takie jak "skojarzyć ze wszystkimi", lub pióro grupujące, aby można było przypisać kilka rekordów do kilku innych rekordów - nic nie jest nudne, jak wykonywanie 15 przeciągnięć i spadków tego samego rekordu.

Uważam, że jest to najważniejszy element dowolnego projektu M-> M UI - zminimalizuj liczbę powtórzeń. Robiąc to samo, na 100s z nagrań (pamiętaj, że jeśli "nikt nigdy nie będzie ...", tak będzie), to nie działa, szczególnie jeśli jest skomplikowany. Wiem, że wydaje się to sprzeczne z moją wcześniejszą radą, ale nie sądzę, żeby tak było - zaprojektuj dla typowego przypadku użycia, ale upewnij się, że te nietypowe nie sprawiają, że program jest bezużyteczny.