Beispiele für gute Benutzeroberfläche für die Auswahl mehrerer Datensätze

Ich bin derzeit ein Wiederaufgreifen einer Fläche von meinem Windows-basierte software und Blick auf die Veränderung der Beziehung von 1->M-zu-M - >M. Als Ergebnis, ich brauche Sie zum anpassen der Benutzeroberfläche, um Platz für die Auswahl mehrere Verwandte Datensätze.

Es gibt eine Menge von Möglichkeiten, dies zu behandeln, die üblich sind, aber in der Regel ziemlich klobig. Beispiele HIERFÜR sind die zwei-Fenster-Liste aller Elemente, und die Liste der ausgewählten Elemente oder eine Liste der Datensätze und eine checkbox neben jedem ein, dass gilt.

In meinem Fall, kann es eine Menge (in den tausenden) von Datensätzen assoziiert werden kann, also werde ich wahrscheinlich müssen einige Art von search Mechanismus.

Ich bin nicht auf der Suche für eine harte und schnelle Antwort - ich kann etwas umzusetzen ist ziemlich leicht, das ist funktional, ich bin auf der Suche, um zu sehen, wenn sich hier jemand ausgedacht hat (oder gesehen) keine großen UIs für diese Art der Sache, ob es ist web-basiert, Windows -, Mac -, Unix -, was auch immer.

Bilder oder links wären sehr willkommen!

Edit: hier ein Beispiel von dem, was ich überlege:

Beispiele für gute Benutzeroberfläche für die Auswahl mehrerer Datensätze

  • Wollen Sie die Anlage Bearbeiten, was zurückgegeben wird? (Nur Kontrolle; scheint unwahrscheinlich, aber Auswirkungen auf das design).
  • Nein, es ist nur eine Auswahl-Methode. In meinem Beispiel oben den link nehmen konnte, Sie zu dieser person aufnehmen, um es zu Bearbeiten, wenn es erforderlich ist, oder ein pop-up-Liste von Optionen, einschließlich "löschen", "Bearbeiten" und so weiter.
  • Was ist die Durchschnittliche/maximale Anzahl der verbundenen Personen für eine? Es ist wichtig für die UI-design-Prozess.
  • Nicht Durchschnitt, aber die häufigste Anzahl der zugeordneten Datensätze wäre 1 oder 2, aber es wäre nicht ungewöhnlich, dass 30 oder 40.
  • Wenn möglich, siehe meine Antwort. Grüße
  • COMIC SANS!!! NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!!
  • Das ist nur die schriftart von Balsamiq Mockup. 🙂

InformationsquelleAutor |
  1. 5

    Ich mag die Art, wie StackOverflow betrifft viele tags mit vielen Fragen:

    Beispiele für gute Benutzeroberfläche für die Auswahl mehrerer Datensätze

    Elemente angezeigt, die als Benutzer-Typen

    1. Starten Sie offensichtlich mit dem Datensatz, den Sie verknüpfen möchten mehrere Artikel mit.

    2. Wird, geben Sie die Suche zeigt die Spiele ( keine Notwendigkeit, drücken Sie auf "Suche" )

    3. Den Benutzer wählen Sie den gewünschten Datensatz ( Sortierung wäre schön. SO verwendet "tag Relevanz". Zum Beispiel die Eingabe 'a' bringt Java eher als asp-denn Java hat mehr Fragen als asp, in Ihrem Fall Relevanz kann der Benutzer name )

    4. Erstellt das system die Beziehung ( in der Erinnerung )

    5. Wenn Sie eine Anzahl von Datensätzen ( 5+ ) sind, füllen Sie das Eingabefeld, Sie sind umgezogen in einen semi-Registrierungs-id-Bereich ( nicht SO ein problem, weil es nur 5 tag innerhalb einer einzigen Frage, aber in deinem Fall so etwas wie die "interessante " tags" - Funktion nötig wäre )

    Beispiele für gute Benutzeroberfläche für die Auswahl mehrerer Datensätze

    Verbundenen Elemente verschoben werden, um eine "starre" Bereich

    Natürlich in einer geordneten Art und Weise ( mit einer Tabelle )

    • Schließlich, wenn der Benutzer am Ende mit dem Verein klickt er auf SPEICHERN oder ABBRECHEN-Schaltflächen.

    Dieser Ansatz hat mehr Effizienz, indem Sie nicht benötigen, um die Benutzer drücken Sie auf "suchen" oder "hinzufügen " andere", lenkt Sie von dem, was Sie tun, es wird gesagt, er unterbricht seinen Gedankengang.

    Auch, wenn Sie dem Benutzer das greifen der Maus, klicken Sie auf etwas, während Sie Tippen die Benutzeroberfläche ist weniger effizient ( ich denke, es ist etwas genannt die Hick ' s law darüber, aber ganz ehrlich gesagt, ich kann falsch sein )

    Als Sie sehen, dieser Ansatz ist ziemlich viel bereits, was Sie im Sinn haben, aber das hinzufügen einige der Einrichtungen, um die user glücklicher zu werden ( Die Gefahr wäre, wenn der Benutzer mag diesen Ansatz und will es auch in anderen teilen des Systems )

    • Tolles Beispiel, ich noch nie gedacht!
    • Sullivan: heheh und es ist vor uns jeden Tag, nicht wahr? Das ist ein Merkmal einer guten Benutzeroberfläche, die Sie nicht darüber nachdenken. Sonst haben Sie immer das schlechte Gefühl, dass verdammt Schnittstelle, macht Sie Ihre Zeit verschwenden .....
    • Danke!!!! Ich hoffe Sie haben großen Erfolg mit der Umsetzung, buchen Sie eine Bildschirm-Aufnahme, wenn Sie fertig sind, würden Sie?
    • Aber dennoch, Sie müssen auf "hinzufügen" klicken, so müssen Sie bewegen Sie Ihre hand auf der Maus. Oder ist es nur mich, das drücken der enter funktioniert hier nicht? (Safari 4 für Windows). Eine andere Sache, die (noch wichtiger wie ich finde) ist, dass diese Lösung funktioniert nur für Daten, die dargestellt werden können, in einer kompakten Art und Weise, und nicht zu Komplex (wie tag - nur ein einziges Wort). Wenn Sie sich mit komplizierter Daten mit mehreren Attributen oder komplexe Beziehungen mit anderen Organisationen, bietet ein ordentliches browser, das Ihnen erlaubt die Suche von Daten in einer Vielzahl von Möglichkeiten, die in einem modalen dialog ist viel mehr klare Lösung. Noch - arbeiten hier.
    • Und als Oscar gewünscht - es wäre toll, wenn du die endgültigen Ergebnisse mit uns:)
    • Dies ist nicht unbedingt für eine web-Anwendung. Dies könnte ein Windows-oder Mac-Anwendung, oder eine iPhone-Applikation oder eine web-Anwendung. Wie es funktioniert ist SO einfach mit der Tatsache zu tun, es ist eine web-app, aber die Allgemeinen Konzepte angewendet werden könnte anderswo. Und ich werde erzählen, was ich am Ende tun, wenn es fertig ist, aber es könnte einige Zeit Weg. 🙂

    InformationsquelleAutor
  2. 3

    Es ist eine interessante und ziemlich Häufig UI-problem, wie effizient Elemente auswählen. Ich gehe davon aus, dass Sie die Absicht haben, dass der Benutzer zuerst wählen Sie ein einzelnes Element ist, und dass der Mechanismus, der Sie interessiert, ist, wie zu wählen, andere Artikel, im Zusammenhang mit dieser ersten single-Element.

    Dort ares verschiedenen Methoden auswählen. Aus usability-Sicht wäre es besser, nur EINE Methode für jedes Szenario. Dann, wenn der Benutzer sieht, werden Sie wissen, was zu tun ist.

    verschiedene Techniken:

    1. dropdown-Liste - offensichtlich für einzelne wählt.
    2. offene Liste-multi-select - eg: eine multiline-textbox, die zeigt, dass 10 oder 20 Gewinnlinien und verfügt über eine Bildlaufleiste
    3. dropdown-Liste, wo Sie auswählen, dann drücken und "hinzufügen" - link oder button zum hinzufügen mehrerer wählt
    4. Liste verschieben - wo Sie zwei offenen Listen, mit all den verfügbaren Auswahlmöglichkeiten in der Liste Links, wählen Sie ein paar, dann klicken Sie auf eine Taste, um Ihre Auswahl in der rechten Liste.
    5. Check-Boxen, die sich gut für nur ein paar Möglichkeiten von mehrfach-Auswahl-Möglichkeiten.
    6. Liste der Elemente, jedes mit einem "hinzufügen" - button neben Sie - gut für kurze Listen

    Haben Sie gesagt, dass Sie Tausende von Möglichkeiten, damit entfällt 1 und 5. Wirklich, Tausende zu beseitigen, alle von Ihnen, wie die usability nicht skalieren gut mit mehr als ein paar hundert in der Liste.

    Wenn Sie zählen können die Benutzer die Liste filtern, so wie in deinem Beispiel, dann 6 geeignet sein. Wenn Sie daran denken, wie Facebook Bild-tagging funktioniert, ich denke, dass es ziemlich effizient für lange Listen: hintergrund: Facebook Foto-tagging ist ein Mechanismus, der ermöglicht Ihnen die Zuordnung von einer oder mehreren Personen, die sich auf Teile eines Bildes - ie 'tag' Sie.

    Wenn Sie wählen Sie ein Bild-tag (D. H. der 'single-item') und der Wunsch, einen Bezug zu anderen Elementen(Personen) zu, Ein Dialogfeld öffnet sich. Es enthält den top 6 oder so Namen, die Sie in der Vergangenheit verwendet habe, und ein Textfeld, wo Sie können beginnen, geben Sie den Namen der person ein, die Sie verwenden möchten. Während Sie Tippen, wird die Liste dynamisch änderungen reduzieren die Anzahl der Menschen, die nur diejenigen, die den Buchstaben Sequenz, die Sie eingegeben haben. Dies funktioniert sehr gut für große Listen, aber es funktioniert verlassen sich auf die Benutzer-Eingabe zu filtern. Es wird auch verlassen sich auf die Verwendung von Skript-intelligent reduzieren die Liste auf der Grundlage der Eingabe des Benutzers.

    Für Ihre Anwendung sich darauf verlassen, dass der Benutzer, der diesen Schritt einmal für jeden Verein, da gehe ich davon aus, dass die anderen Elemente nicht alle haben ähnliche Namen!

    Hier ist ein Bild von der Facebook-tagging-Anwendung: http://screencast.com/t/9MPlpJQJzBQ

    • Ich mag die Facebook-tagging-Methode. Unter "Aktuelles" oder vielleicht "gebräuchlichsten Optionen basierend auf den Kontext" ist wirklich toll.
    InformationsquelleAutor
  3. 2

    Eine Suchfunktion, filtern von Datensätzen in Echtzeit, wie Sie geben, wäre wahrscheinlich eine gute Idee, um. Ein weiterer wäre die Möglichkeit, die Datensätze Sortieren.

    Da kann es eine Menge von Aufzeichnungen, die beste Wahl in diesem Fall wohl um einen separaten Bereich, die zeigt, was Sie bereits gewählt haben, so dass der user nicht scrollen müssen, um der Auswahl Bereiche zu finden, was Sie bereits haben.

    InformationsquelleAutor
  4. 2

    selbsterklärende GUI http://img25.imageshack.us/img25/8568/28666917.png

    Link zu der original Bild

    Andere Sache ist, dass meiner Meinung nach dein problem ist nicht über die Auswahl mehrerer Datensätze, sondern filtern diejenigen, die Zehntausende von Datensätzen. M->M Verein umgesetzt werden können, in vielfältiger Weise, aber der schwierige Teil ist, um eine bequeme und logische Weise zu durchsuchen, die riesige Menge von Daten.

    • In das Suchfeld in der modalen Dialogfeld Filter die Datensätze sofort, wie Sie geben - im iTunes-Stil.
    InformationsquelleAutor
  5. 1

    Ich würde vorschlagen, dass Sie nicht mit auf mehr hinzufügen gesucht werden kann. Die Warnung auf der rechten Seite ist nett, aber IMHO sollte es nur sagen, die Suche zeigt die Ergebnisse, wie der Benutzer eingibt.

    Sortieren einer Spalte (vielleicht zusammen mit der Suche) wäre auch eine gute Funktionalität. Ich würde sagen, dass dies getan wird, indem Sie auf die Kopfzeile der Tabelle, mit einigen Symbol, der angibt, ob die Sortierung aufsteigend oder absteigend.

    Ich würde auch vorschlagen, die Suche zu tun, ein Ungefähre string-matching in Fall gibt es keine oder nur wenige Ergebnisse. Es ist so ärgerlich, die nicht in der Lage, etwas zu finden, weiß Sie nicht genau.

    Schließlich für die Prüfung der erste Eindruck (wenn auch nicht die Funktion selbst), würde ich vorschlagen, hochladen auf den 5-Sekunden-test und sehen, was Sie bekommen.

    • Die "Warnung" ist nur eine Notiz, damit Sie wissen, was ich Rede, es ist nicht Teil des UI. 🙂 Auch, was ich Suche, ist nicht eine Kritik dessen, was ich geschrieben, sondern vielmehr Beispiele von bereits bestehenden apps oder empfohlene Modelle mit alternativen UIs.
    • dazu noch eine Anregung für den ersten Eindruck Abruf
    InformationsquelleAutor
  6. 0

    Ich denke, dass das, was Sie verspottet-up ist ein ziemlich guter Weg, es zu tun. Wenn Sie denken, um die tags zu posten-Beziehung auf einem blog (oder auf SO auch), dass viele-zu-viele-und es ist üblicherweise sehr ähnlich: für ein post, den Sie suchen (oder, da Sie einfache Zeichenfolgen, geben Sie direkt) so viele tags wie Sie wollen zu verbinden. Ich kann mir nicht wirklich vorstellen, dass es eine viele-zu-viele-Beziehungen begegne ich oft, obwohl ich weiß, es gibt wahrscheinlich viele...

    • Es gibt Unmengen von Beispielen. Ein treffen könnte, haben viele Menschen, eine person konnte viele Gespräche. Dies kann noch verstärkt werden, wenn Sie mehrere Ressourcen, die an einen Datensatz angehängt. Zum Beispiel, ein treffen könnte, haben viele Menschen und viele Teile der Ausrüstung. Ist dies nicht angegeben, Voraussetzung für meine ursprüngliche Frage, aber es ist etwas, was ich zu tun haben in vielen Fällen, die software, die ich gearbeitet habe.
    InformationsquelleAutor
  7. 0

    Gibt es eine Reihe von wichtigen Fragen, um zu prüfen, wie viele Datensätze werden in der Regel verwendet werden (im Gegensatz zu den für die Zuordnung zur Verfügung)? Wird es eine große Anzahl von Datensätzen auf eine Seite des Vereins (angesichts der Schalter von 1->M, dies scheint wahrscheinlicher)?

    Wenn man die Anzahl der Datensätze ist in der Regel sehr klein (<10 ist, würde ich sagen), nennen wir das die LS (weil es normalerweise der Fall ist), dann ist der beste Weg zu assoziieren sein kann, um zu ermöglichen, sucht die LHS-und RHS-Elementen, dann drag-and-drop auf eine Liste, die LHS-Elemente auf die richtige Liste; RHS-Elemente in die vorhandenen LS-Elemente. So, es ist intuitiv festzulegen, die eine Beziehung zwischen Elementen. Sie könnten auch andere Optionen wie "verknüpfen mit allen", oder eine Gruppierung-Stift, so dass Sie zuordnen können mehrere Datensätze auf viele andere Datensätze - nichts ist mühsam, wie mit 15 drags-und-Tropfen von den gleichen Datensatz.

    In der Tat, ich denke, das ist das wichtigste bit jedes M->M-UI-design - Wiederholungen. Tun die gleiche Sache über und über 100te von Schallplatten (Sie erinnern sich, dass, wenn "niemand...", Sie) ist unfun, vor allem, wenn es Komplex. Ich weiß, dies scheint dem zu widersprechen, meine früheren Ratschläge, aber ich glaube nicht, dass es das tut - design für den typischen Anwendungsfall, aber stellen Sie sicher, dass die atypischen diejenigen nicht, machen das Programm unbrauchbar.

    • Ich möchte hinzufügen, ein mockup oder eine Referenz zu einem bestehenden Antrag wenn ich war nicht gut bei Prototypen oder wenn konnte ich mich Recht erinnere (es ist 5 UHR) alle Anwendungen, die diesen verwenden. Sorry!
    InformationsquelleAutor
Schreibe einen Kommentar