it-swarm.com.de

Der beste Weg, dem Benutzer zwei Steuerelemente (Erweitern und Auswählen) für ein einzelnes Objekt zuzuweisen

Wir arbeiten an einer Organisationsbaumvisualisierung. Für jeden Knoten (Kreis) im Baum hat der Benutzer zwei Optionen: Erweitern Sie den Knoten, um seine untergeordneten Knoten anzuzeigen OR Wählen Sie den Knoten aus

Im Allgemeinen besteht die primäre (häufigste) Aktion darin, den Baum zu erweitern/zu navigieren. Benutzer führen häufig mindestens 2-3 Baumzweigerweiterungen durch, bevor sie einen bestimmten Knoten auswählen.

Ich habe Probleme damit, dem Benutzer diese beiden unterschiedlichen Steuerelemente am besten zu präsentieren. Hier sind einige Optionen:

  • A) Einzelklick zum Erweitern, Doppelklick zum Auswählen -> sehr einfach und verwendbar, sobald Sie die Anwendung kennen, aber Benutzertests haben gezeigt, dass sie nicht sehr auffindbar ist (was sinnvoll ist, da Doppelklick sehr selten ist Webinteraktion). Außerdem benötigen wir eine Mehrfachauswahlfunktion, die mit einem Doppelklick-Steuerelement nicht sehr intuitiv ist.
  • B) Klicken Sie auf den Kreis, um ihn auszuwählen. Die Erweiterung ist ein separates Steuerelement neben jeder Blase.
  • C) Klicken Sie auf den Kreis, um ihn zu erweitern. Die Auswahl ist ein separates Steuerelement neben jeder Blase.
  • D) noch etwas?

Option B gibt das Modell an : enter image description here
* Es ist schwierig, dies nur anhand eines statischen Modells zu kommunizieren, aber als wir Option B mit Benutzern getestet haben, haben wir festgestellt, dass die Benutzer den Cursor immer zuerst auf die Blase und erst dann auf das Erweiterungssymbol verschoben haben. Da die Erweiterung (Baumnavigation) der primäre Arbeitsablauf war, stellte sich heraus, dass dies ziemlich frustrierend war und die Navigationsgeschwindigkeit verlangsamte (dies trat sogar bei größeren Symbolen zum Erweitern auf).

Option C gibt das Modell an : Das Auswahlsteuerelement wird angezeigt, wenn Sie mit der Maus über den Kreis fahren, und wird bei Auswahl klebrig. enter image description here * Bei diesem Design haben Benutzer, selbst nachdem sie die Auswahl-/Erweiterungsinteraktion verstanden hatten, wiederholt Fehler gemacht, indem sie auf die Blase (die die untergeordneten Elemente erweitert hat) geklickt haben, als sie die Blase tatsächlich auswählen wollten - mit anderen Worten, das Kontrollkästchen zur Auswahl Obwohl intuitiv, schien es keine natürliche Kontrolle zu sein.

Mehrfachauswahl Wir haben auch zukünftige Funktionen geplant, um Mehrfachauswahl zu ermöglichen. Daher denke ich auch an das Design. Hier ist das Mehrfachauswahlmodell mit Option C: enter image description here

Ich habe unten auch einen vollständigen Zustandsfluss für Option C eingefügt, um die visuellen Zustände klar zu demonstrieren: enter image description here

Derzeit bin ich zwischen Option B und C aufgeteilt - jede scheint Vor-/Nachteile zu haben, wie oben beschrieben. Ich hatte gehofft, ein Feedback zu bekommen und zu sehen, ob jemand andere Vorschläge hat.

7
M.A.X

Ein paar Dinge, die hinzugefügt werden müssen, um das zu berücksichtigen, was bereits in den anderen Optionen gesagt wurde.

Ich denke, Option B ist die stärkste der Optionen, obwohl ich die folgenden Unterschiede vorschlagen würde:

  1. Kombinieren Sie in Option A zu Ihrer Lösung (umgekehrt zu dem, was Sie beschrieben haben). Bedeutet Doppelklick zum Erweitern/Reduzieren (wenn Sie auf den Kreis anstelle des + - klicken). Obwohl Doppelklicks in Webanwendungen für viele Benutzer immer noch erkennbar sind, emulieren sie ihre Desktop-Apps, z. B. Outlook, wo sie durch Klicken auf den Ordnernamen ausgewählt und durch Doppelklicken erweitert und ausgewählt werden. Das Wichtigste dabei ist, dass Benutzer häufig ihr mentales Modell einbringen. Wenn Erwartungen nicht gemeint sind, hören Sie auf, diesem Modell zu folgen. Wenn sie diese Doppelklick-Optionen nicht haben, die sie möglicherweise nur aus Gewohnheit ausprobieren, hören sie mit dem Doppelklick auf, um Aktionen auszuführen. Wenn sie dort sind, werden sie sie immer häufiger verwenden, auch wenn sie sich nicht aktiv entscheiden. Ich doppelklicke (als primäres Mittel), um mein Ziel zu erreichen. Dies kann zu Problemen führen, bei denen eine Aktion wie Öffnen am effizientesten durch Doppelklicken ausgeführt wird, anstatt auszuwählen und dann eine Schaltfläche mit der Aufschrift Öffnen zu finden. Eine Sache, die Sie bei Ihren Benutzer-Testergebnissen berücksichtigen sollten, ist, dass sie Ihnen den Hinweis gibt, dass dies möglicherweise nicht ganz offensichtlich ist, aber dies kann der Grund dafür sein, dass es das Gegenteil des mentalen Modells der meisten Menschen ist (Einzelklick-Auswahl, Doppelklick auf) erweitern) und weisen darauf hin, dass dies nicht der einzige Weg sein sollte, um diese Aktion durchzuführen (daher Option B)

  2. Setzen Sie das + auf die linke Seite, wo es dem mentalen Modell des Benutzers genauer folgt. Ich denke, wenn Sie B getestet haben, werden Sie feststellen, dass Benutzer anfangs verwirrt sind, es aber ohne zusätzliche Hilfe von Ihnen durcharbeiten können. Ich wage jedoch zu vermuten, dass das Platzieren auf der linken Seite, wie bei den meisten Schnittstellen, ihrem mentalen Modell folgt und ihnen hilft, das Ziel schneller und mit weniger Verwirrung zu erreichen.

Nebenbei bemerkt, einige Dinge zu beachten:

Wenn Sie sich die Benutzeroberfläche ansehen, würde ich Sie bitten, über die Skalierbarkeit der Lösung nachzudenken. Die gewichteten Kreise, die auf der Anzahl der Objekte in ihnen basieren, sind eine nette Geste der Datenvisualisierung, aber was ist Ihr Plan, wenn ein großer Kunde Ihr Produkt verwendet und sie 1000 auf der gleichen Ebene haben und einige mit nur 2. Auch dies scheint nur zu sein 2 Ebenen gut unterstützen, was ist mit Kunden mit sehr komplexen oder flachen Organisationen?

Ich würde fragen, letztendlich ist mir die Datenvisualisierung wichtig, um meine Arbeit zu erledigen. Sie geben mir bereits eine physische Zählung. Wenn das Ziel darin besteht, mir die Auswahl von Dingen zu ermöglichen, kann diese Datenvisualisierung zu dem Problem eines gewissen Bildlaufs führen.

Wenn Sie bei Ihrer Multiselect-Implementierung keine Kontrollkästchen verwenden und der Benutzer direkt auf die Objekte klicken lässt (was ich persönlich bevorzuge (nicht, dass das wichtig ist :-))), stellen Sie sicher, dass Sie es so unterstützen, wie es verwendet wird, dh Shift oder Strg + Klick (obwohl die Shift-Mentalität möglicherweise leicht geändert werden muss, um einen Bereich in Ihrer Benutzeroberfläche auszuwählen, in dem Sie in mehreren Bäumen auswählen können)

Auf diese Weise kann jemand einfach sagen: Wie würden Sie mehrere Dateien im Explorer auswählen? Dies führt entweder dazu, dass sie die Umschalt- oder Strg-Taste verwenden oder ziehen und erwarten, dass sie wie auf ihrem Desktop ausgewählt werden (was unter Berücksichtigung der Benutzeroberfläche auch eine gute Lösung für Sie sein kann).

Hoffentlich war mindestens ein Leckerbissen davon nützlich ...

3
Chris Janssen

Ich stimme Ben vollkommen zu. Option B ist bei weitem die beste Option. Warum? Lassen Sie mich die Frage anders formulieren: Warum sollten Sie versuchen, Benutzer neu zu schulen, die bereits daran gewöhnt sind, dass Dinge auf eine bestimmte Art und Weise funktionieren und ein bestimmtes Aussehen haben?

Jeder, der mit einem Windows-Betriebssystem vertraut ist, selbst ein gelegentlicher Benutzer wie ich, weiß, was das Erweiterungssymbol bewirkt. Es ist sehr vertraut. Wenn Sie Probleme mit dem zu kleinen Klickziel des Symbols haben und dies ein berechtigtes Problem ist, vergrößern Sie einfach den Klickzielbereich und/oder das Symbol selbst.

Das Klicken auf Elemente, um sie auszuwählen, ist eine weitere äußerst häufige und allgegenwärtige Benutzerinteraktion. In diesem Fall würde ich erwarten, dass Einzelklick und Doppelklick dieselbe Aktion ausführen, da es sich um Aktionen handelt, die so leicht zu verwechseln sind.

Versuchen Sie im Allgemeinen nicht, das Rad zu erfinden, wenn Sie über solche Designprobleme nachdenken. Verwenden Sie Standardangebote und Interaktionsmodelle, wann immer Sie können.

2