it-swarm-eu.dev

Der beste Weg, um eine Teilmenge von Elementen in einer langen Liste auszuwählen

Einer unserer Kunden möchte, dass wir eine Webanwendung erstellen, um Informationen über die von ihm veröffentlichten Magazine auszutauschen. Jede Ausgabe eines Magazins enthält eine variable Anzahl von Werbetreibenden. Diese Werbetreibenden stammen aus einem zentralen Pool von Werbetreibenden. Dieser Pool enthält (derzeit) ca. 150 Werbetreibende. Jede Ausgabe eines Magazins enthält eine Teilmenge (ca. 70-80) dieser Werbetreibenden.

Unser Kunde möchte, dass wir ihm die Möglichkeit geben, 70 bis 80 Werbetreibende aus dieser Liste von 150 zu einer Ausgabe eines Magazins hinzuzufügen. Es muss so schnell wie möglich, so einfach wie möglich und so intuitiv wie möglich sein.

Was wäre hier eine ideale Lösung? Ich habe über etwas in den Zeilen des Bildes unten nachgedacht.

  1. Liste der verfügbaren Werbetreibenden.
  2. Liste ausgewählter Werbetreibender. Werbetreibende haben eine Schaltfläche zum Löschen.
  3. Textfeld mit automatischem Vorschlag für Werbetreibende in der Liste links. <Eingabe> entfernt den Werbetreibenden aus der linken Liste und fügt ihn der rechten hinzu. Das Textfeld wird gelöscht und bleibt fokussiert.

Meine Kollegen schlugen Drag & Drop oder nur eine Liste mit einem Kontrollkästchen für jeden Werbetreibenden vor, aber diese Ansätze zwingen den Benutzer dazu, viel zu suchen und zu klicken. Mit meinem Ansatz kann der Benutzer einfach weiter tippen.

Irgendwelche anderen Vorschläge für diese Situation?

My idea to transfer items between lists

36
Kristof Claes

Dein Design Kristof ist schon ziemlich gut. Sie haben sehr wichtige Dinge wie das Stoppen dieser Maus- und Tastatur-Back-and-Fourth-Aktion festgenagelt - das wird die Erfahrung ruinieren. Und ich bin mit dir auf dem Drag-and-Drop - yuk!

Ich habe Ihre Idee gerade ein wenig verfeinert:

alt text

  • Offensichtlich werden sie durch Mausklicks auf die linken Elemente rechts hinzugefügt.
  • Sie möchten, dass der Textfilter Google Style ist - dh. Multi-Word, teilweise Übereinstimmung. Wie in der Sucheingabe würde "rce bm" mit dem dritten im Diagramm gezeigten Element übereinstimmen. Dies ist einfach und bietet dem Benutzer eine leistungsstarke, intuitive Möglichkeit, nach Namen zu suchen. Eine zweitklassige Filterung (wie der Beginn eines Strings) frustriert die Benutzer nur und hält sie davon ab, sie erneut zu verwenden. Da die Filterung für die Schnittstelle so wichtig ist, funktioniert sie besser.
  • Eine andere Möglichkeit, Zeit für den Benutzer zu sparen (wie von jemand anderem vorgeschlagen), wäre eine teilweise ausgefüllte Liste auf der Seite "Ausgewählte Werbetreibende". Wenn Sie der Meinung sind, dass es eine gute Chance gibt, dass die "Top 10 der am häufigsten verwendeten" Werbetreibenden einen Treffer von 70% oder mehr erzielen, können Sie sie beim Laden genauso gut in die rechte Liste aufnehmen, oder? Im schlimmsten Fall muss der Benutzer ein oder zwei (jeweils 1 Mausklick) der Top 10 löschen, und die verbleibenden 7 gewünschten Elemente haben sie bei der Suche nach ihnen gespeichert. Passen Sie die Zahlen in dieser Idee an, um den Benutzer von mehr Arbeit zu entlasten.

Denken Sie daran: Je mehr Arbeit Sie für den Benutzer erledigen können; Um das Klicken, Schauen und Suchen zu reduzieren, ist Ihre Benutzeroberfläche umso schneller, einfacher und sympathischer.

34
cottsak

Ich arbeite für ein Unternehmen, das Zeitschriften herausgibt, daher bin ich mit Ihrer Domain ein wenig vertraut.

Ich stelle mir vor, dass sich die Liste der Werbetreibenden von Ausgabe zu Ausgabe nicht wesentlich ändert. Daher würde ich die Werbetreibenden aus der vorherigen Ausgabe standardmäßig auswählen.

Da Sie nur 150 Werbetreibende haben und etwa die Hälfte davon ausgewählt wird, würde ich mich nicht um eine Suche kümmern. Ich würde mit einer einfachen Checkbox-Liste beginnen und sehen, wie gut das funktioniert. Stellen Sie sicher, dass die ausgewählten Elemente visuell unterschiedlich sind (z. B. fett gedruckt), damit das Scannen einfach ist.

7

Mein erster Beitrag, also sei bitte sanft und ich mache das gleiche :-)

Obwohl es hier einige gute Ideen gibt, denke ich, dass keine von ihnen den Anforderungen des Originalplakats entspricht:

"Unser Kunde möchte, dass wir ihm die Möglichkeit geben, 70-80Werbetreibende aus dieser Liste von 150 hinzuzufügen"- Kristof Claes.

Ich stimme sicherlich vielen der raffinierten Ideen zu, mit denen Benutzer Ergebnisse filtern und zur Liste der ausgewählten Werbetreibendenhinzufügen können. Wir brauchen noch einen Weg zu Bulk Addungefähr70 Werbetreibendezur Auswahl. Obwohl die Filterideen recht gut sind, würde dies lediglich zu einer Anwendung führen, ähnlich wie bei jeder E-Mail-Anwendung, bei der der Benutzer die Empfänger im Feld "an" angibt. Stellen Sie sich vor, Sie müssen 70 Empfänger von Hand hinzufügen!

Im Idealfall möchten wir nicht den folgenden Workflow:

  1. Art der zu suchenden Phrase
  2. (Ergebnisse erscheinen)
  3. Drücken Sie entweder die Eingabetaste für das automatisch vervollständigte Element oder wählen Sie ein oder mehrere Elemente aus der angezeigten Liste aus
  4. Wiederholen Sie die Schritte 1 bis 3, bis ungefähr 70 Werbetreibende hinzugefügt wurden

Ich sehe hier einige gute Beiträge von vielen Leuten, die sich wirklich auskennen, aber ich denke, einige sind vielleicht nicht zum Thema geworden und konzentrieren sich eher auf Implementierungstechnologien als auf die Psychologie eines guten "Benutzeroberflächendesigns".

Mein letzter Gedanke zu diesem Thread ist - vielleicht eine Art Mechanismus, um der Auswahl "Gruppen" hinzuzufügen, da dies sicherlich die 70-fache Wiederholung desselben Workflows reduzieren würde. Einige Software, die ich gesehen habe, wählt Werbetreibende in einem "Round-Robin" -Ansatz aus. Dies könnte sicherlich bei einigen Auswahlen hilfreich sein. Darüber hinaus könnten Sie vordefinierte Gruppen haben, die Sie möglicherweise immer hinzufügen möchten, z. B. eine Liste Ihrer bestbezahlten Werbetreibenden oder Anzeigen für Produkte, die "neu" sind.

Und jetzt zu etwas, das etwas vom Thema abweicht ...

Matty, ich sehe dich erwähnt Apple und insbesondere das iPhone -

... wir können vom iPhone lernen ... Der Schlüssel liegt darin, vernünftige Annahmen zu treffen, die sich aus Entscheidungen ergeben, die für den Benutzer getroffen werden ...

Ich bin mir nicht ganz sicher, was du damit meinst, nachdem wir uns neulich unterhalten haben. Touch-Geräte sind nicht nur möglicherweise weniger benutzerfreundlich, sondern Apple hat im Allgemeinen bereits Software entwickelt, bei der Sie sich fragen, was sie wirklich von ihrer Benutzerbasis halten. Ein Paradebeispiel - wenn Sie umbenennen möchten Wenn Sie Ihr iPad-Gerät verwenden, müssen Sie es zuerst an einen Computer anschließen, der zusätzlich überiTunesSoftware verfügt. Warum um alles in der Welt kann ich nicht einfach in die AllgemeineEinstellungen des iPad sind jedermanns Sache.

Die besten Benutzeroberflächen haben den Stil "induktives Benutzeroberflächendesign" im Gegensatz zu "deduktivem Benutzeroberflächendesign" oder mit anderen Worten "Versuch und Irrtum". Touch-Geräte fallen in die letztere Kategorie. Lassen Sie mich erklären:

Wenn überhaupt, berühren Sie Geräte, die durch Apple wie imiTouch, iPhoneund jetzt impopulär gemacht wurden iPadhaben, wenn überhaupt, die Benutzerfreundlichkeit von Software in die Steinzeit der "deduktiven Benutzeroberflächen" zurückgeworfen. Wie eine sehr schlecht gestaltete Glyphe auf einer Schaltfläche, die den Benutzer zum Nachdenken bringt - "Meine Güte, was bedeutet das?"Wenn Sie auf den Bildschirm eines Touch-Geräts starren, ist nicht sofort ersichtlich, dass der Benutzer mit zwei Fingern hinein- oder herauszoomen kann, oder mein Favorit - das Halten Ihres Fingers Nach unten und ein Symbol für etwa zwei Sekunden versetzt das Gerät in den "Löschmodus".

Genauso wie ein schlecht gestaltetes Symbol in die Kategorie - "fällt, weiß ich nicht, was das bedeutet, aber nachdem ich es zum ersten Mal verwendet habe, werde ich mich normalerweise daran erinnern, was es tut", viele Touch-Geräte fallen in die Kategorie der deduktiven Benutzeroberflächen, weil der Benutzer ableiten muss, was das Programm tatsächlich tun kann, indem er"damit spielt"daher seine unmittelbare Verwendbarkeit zu reduzieren.

Weiter so!

MickyDs zufällige Gedanken

6
MickyD

Die gesamte Liste der Werbetreibenden sollte über eine Filterung verfügen ( im Grunde genommen setzen Sie Ihre "3" auf Ihre "1" und "3" wirkt sich dynamisch auf den Inhalt von "1" aus):

  • Suche (im laufenden Betrieb wird die Liste eingegrenzt)
  • Gruppen ("Zuletzt verwendet", "Mode", "Elektronik" usw.)

Hinweis - Wenn Ihre Suche leistungsfähig genug ist, können Sie nur ein Steuerelement verwenden. Wenn Sie also nach "Mode" suchen, werden alle Werbetreibenden zurückgegeben, deren Name "Mode" enthält oder die zur Kategorie "Mode" gehören.
Das "Zuletzt verwendete" kann ein Kontrollkästchen sein.

Hauptvorteil :
Wenn Sie die Liste im laufenden Betrieb eingrenzen, können Sie alle relevanten Elemente zusammen auswählen und verschieben.

Beispiel: Sie geben "Elektronik" ein, erhalten eine Liste aller werbebezogenen Werbetreibenden, wählen sie alle aus (mit der Maus, Strg + A oder einer anderen Methode) und verschieben sie sofort in die richtige Liste.

4
Dan Barak

Ich habe diese Benutzeroberfläche, die relevant sein könnte.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
Es könnte nützlich sein, wenn die Werbetreibenden irgendwie in Kategorien organisiert wären und der Benutzer wüsste, in welcher Kategorie sich jede befindet.
Es handelt sich um eine reine Maus-Benutzeroberfläche, die einen einzigen Klick pro Werbetreibendem erfordert.
Es kann mit der Tastatur bedient werden, aber das Menü wird geschlossen und muss für jede Auswahl erneut erweitert werden. Dies kann behoben werden, indem das Menü bei der Eingabe nicht geschlossen wird.

3
Juan Lanus

Ich muss zustimmen mit Micky Duncan : Ich denke, Suchen/Gruppieren/Filtern sind für diese Aufgabe überhaupt nicht geeignet.

Sie möchten nicht einige Elemente aus einer großen Liste suchen und auswählen. Sie möchten ungefähr die Hälfte aller Elemente in der Liste auswählen. Wenn der Benutzer die Hälfte der Elemente auswählen muss, möchte er sicherstellen, dass er alle Kandidaten ausgewählt hat und niemanden verpasst hat. Der Workflow ähnelt also eher dem folgenden:

Stellen Sie sich vor, Sie haben die Liste der 150 Werbetreibenden auf Papier. Sie würden die Liste von oben nach unten durchgehen und für jeden "Will ich diesen Werbetreibenden?" entscheiden und ihm dann ein Häkchen oder einen Strich geben -durch und am Ende sind Sie sicher, dass Sie alle bewertet haben.

Das Design sollte also so aussehen:

Selector mockup

Der Fokus liegt auf dem obersten Element in der mittleren Liste, und der Benutzer kann die Pfeiltasten links und rechts verwenden, um das Element entweder zu verwerfen oder in die ausgewählte Liste aufzunehmen. So kann er die gesamte Liste schnell durcharbeiten, indem er je nach Werbetreibendem nach links oder rechts drückt, und ist sicher, dass er sich Gedanken gemacht hat und keine verpasst hat.

2
Falco

Ihre Lösung scheint ziemlich gut zu sein. Ich würde die linke Liste entfernen, da sie keine Informationen hinzufügt (es ist nur eine lange Liste, und es wird schwer zu sagen sein, dass etwas nach dem Drücken der Eingabetaste gerade daraus verdunstet ist) und einfach ein Suchfeld mit automatischer Vervollständigung anbieten ( Obwohl in diesem Feld ein Dropdown-Menü angezeigt werden sollte, damit die Benutzer weiterhin sehen können, welche Optionen verfügbar sind, fügen Sie eine große Schaltfläche "Werbetreibenden zur Liste hinzufügen" hinzu, falls Ihre Benutzer nicht wissen, dass sie die Eingabetaste drücken sollen.

Bringen Sie dies so schnell wie möglich zum Prototypenstadium (unter Verwendung von Scheindaten) und demonstrieren Sie es dann mit Ihrem Client und lassen Sie ihn durchlaufen. Es ist wichtig, dass sie so schnell wie möglich ihr Feedback erhalten, da sie es häufig verwenden und sich daher wohl fühlen müssen.

1
Rahul

Ich stimme den von MickyD und Patrick angesprochenen Punkten zu. Es hängt alles davon ab, wie die Auswahl der Werbetreibenden getroffen wird. Verwendet der Kunde die Benutzeroberfläche, um die Werbetreibenden auszuwählen, die sich in einem bestimmten Problem befinden sollen, oder hat der Kunde bereits eine Liste mit den Werbetreibenden in dem bestimmten Problem? Ich denke nicht, dass Filtern in beiden Fällen die beste Lösung ist.

Wenn der Client die Benutzeroberfläche verwendet, um die Werbetreibenden auszuwählen, sollte es viel besser funktionieren, nur eine Liste mit einem aktivierten/nicht aktivierten Status anzuzeigen. Wie Patrick schrieb, ist es eine gute Idee, den ausgewählten Staat hervorzuheben. Es ist auch möglich, den nicht ausgewählten Status heller erscheinen zu lassen, anstatt nur den ausgewählten Status zu fetten. Der Client bewegt sich in der Liste mit dem Schlüssel nach oben/unten und dem Aktivieren/Deaktivieren mit Leerzeichen (oder einem ähnlichen Schlüssel).

Wenn der Kunde eine Liste mit den Werbetreibenden hat, die in der spezifischen Ausgabe erscheinen, sollte zunächst geprüft werden, ob diese Liste in digitaler Form empfangen und automatisch importiert werden kann. Wenn dies nicht möglich ist, wird die Liste möglicherweise auf irgendeine Weise sortiert, und die Benutzeroberfläche sollte die Werbetreibenden auf die gleiche Weise sortieren.

Die dritte Option besteht darin, dass der Kunde entweder das Problem bei der Suche nach Werbetreibenden durchsucht oder eine unsortierte Liste hat. In diesem Fall ist eine Filterfunktion sinnvoll.

Der Punkt ist, dass es ohne Kenntnis des Ziels und der Umstände der Aufgabe sehr schwierig sein kann, eine gute Lösung zu finden.

0
Robert Höglund

Ich würde zwei Listen und zwei Schaltflächen verwenden. Der Benutzer kann einzelne Elemente in der linken Liste mit einem Mausklick markieren. Durch Doppelklick wird das Element in die rechte Liste verschoben.

Er kann bei gedrückter Umschalttaste klicken, einen Bereich markieren und mit der Schaltfläche [>] alle markierten Elemente nach rechts übertragen. Mit Strg kann ein einzelnes Element vom markierten in den nicht markierten Zustand und wieder zurück geschaltet werden.

Strg-a würde alle Elemente markieren. Alles ist aus anderen Programmschnittstellen bekannt.

Alphabetisch sortierte Elemente würden das Auffinden eines Eintrags erleichtern. Das erste Zeichen könnte als Hotkey verwendet werden, um zu diesem Eintrag zu navigieren, wenn ein Bildlauf erforderlich ist.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a, d, e, f} foo ist jetzt links markiert. Mit [>] verschiebt der Benutzer sie nach rechts.

Solche Schnittstellen sind ziemlich schnell, einfach zu bedienen und leicht zu verstehen. Möglicherweise können Sie Tooltiptext hinzufügen oder die Schaltflächen "Zur Liste ausgewählter Elemente verschieben" und "Aus Liste ausgewählter Elemente entfernen" benennen.

Nach dem Wechsel zu einer anderen Liste muss diese Liste neu sortiert werden.

0
user unknown