it-swarm.com.de

Wie gehen Sie mit Verboten innerhalb einer "Freiform" -Schnittstelle um?

Ich komme zu Ihnen mit einem Dilemma, das meiner Meinung nach am engsten mit "Benutzererfahrung" verbunden ist. Ich bin Wireframer einer Webanwendung, aber dieser Benutzerbereich "Freiform" hat einige interessante Herausforderungen aufgeworfen.

Ich entschuldige mich für eine so lange Frage.

Der Benutzerbereich "Freiform" ist eine leere Zeichenfläche, in der Benutzer "Knoten" erstellen können. Die erstellten Knoten sollten sich jedoch nicht überlappen dürfen ... was die Frage aufwirft: Wie wirken sich verbotene Überlappungen auf die UX der Knotenerstellung aus und welche Methoden sind am besten geeignet?

. . .

Edit : Single Click 'n Drag ist bereits mit dem Ziehen von canvas verbunden (denken Sie an Google Maps), sodass der nächste verfügbare Befehl ein "langer Klick" ist.

1.double click Methode und Problem:

node creation diagram

Meine ursprüngliche Idee war, dass ein double click - Ereignis die Knotenerstellung auslöst (Abb. 1). Das Problem, das ich bei dieser Methode sehe, ist oben beschrieben (Abb. 2) - ohne irgendeine Einschränkung wäre der Benutzer in der Lage zu double click in der Nähe bereits vorhandener Knoten ... was das Problem bei diesem Ansatz veranschaulicht.

. . .

2 :drag 'n drop Methode:

alternate node creation diagram

Eine alternative Methode, an die ich gedacht habe, wäre, ein source node In der Symbolleiste zu haben (nicht abgebildet). Der Benutzer würde dieses source node Aus der Symbolleiste nehmen und es auf canvas-- Berücksichtigung einer Farbänderung, wenn der Knoten an einer ungültigen Position gehalten wurde.

Das Problem bei diesem Ansatz ist eine Verringerung des UX-Werts - das Ziehen von der Symbolleiste jedes Mal, wenn Sie einen Knoten erstellen möchten, scheint nicht verfeinert zu sein ... also habe ich die beiden zusammengeführt:

:Doubleclick 'n drop:

alternate node creation diagram

So sehr ich diesen Ansatz mag, bin ich mir immer noch nicht sicher, ob ich alle Faktoren berücksichtige. Ich zögere ein wenig, den Abzug in eine Richtung zu drücken.

Ich frage mich, ob es am besten ist, zwei oder drei verschiedene Schnittstellen zu entwickeln und diese aufzuteilen. Hat jemand Ideen, wie er mit dem verbotenen Verhalten umgehen soll und insbesondere, welchen Ansatz er verfolgt (insbesondere solche, die ich nicht beschrieben habe)? hier) wird die beste UX beibehalten?

Anmerkungen : Der Benutzer erstellt zahlreiche Knoten (ab 20 pro Seite) und bearbeitet/verschiebt sie häufig. Diese Seite ist das Herzstück der Anwendung.

6
jlmakes

In vielen Fällen sind Editoren, die Sie daran hindern, Dinge zu tun, schwieriger zu verwenden als Editoren, die die Korrektur von 'Fehlern' und Flaggenproblemen ermöglichen. Eine Firma, die ich kenne, hat zwei Mannjahre damit verbracht, einen hoch entwickelten Editor zu schreiben, um Fehler zu vermeiden. Sie ersetzten es später aus Gründen der Benutzerfreundlichkeit durch einen Editor, der die Fehler kennzeichnete.

Wenn Sie dies in Ihren Knoteneditor übersetzen, können Sie zulassen, dass der Benutzer überlappende Knoten hat. Lassen Sie sie nur die Seite nicht verlassen und speichern Sie die Ergebnisse, bis sie die Probleme behoben haben. Wenn ein Knoten einen anderen überlappt, Sie können nicht wissen, ob der neue Knoten richtig und der alte falsch ist oder der alte richtig und der neue falsch ist. Überlassen Sie es ihnen zu entscheiden.

Das Ändern der Farbe der überlappenden Knoten und das Erhöhen der Dicke des Knotenrandes reicht aus, um zu kennzeichnen, wo sich die Problemüberlappungen befinden. Sie können die zu reparierenden Knoten ziehen. Zeigen Sie zur Vereinfachung auch eine Textnachricht mit einer Schaltfläche wie:

Nodes Overlap

Der Code hinter der Schaltfläche "Fixieren" kann einfach sein, z. Es kann das Diagramm von der Mitte aus vergrößern, ohne die Größe der Knoten zu vergrößern.

Es ist nicht intuitiv, aber das Ermöglichen, dass Benutzer einen ungültigen Zwischenzustand durchlaufen, kann die Benutzerfreundlichkeit dramatisch verbessern.

6
James Crook

Sie können das Doppelklickverhalten beibehalten, den Benutzer jedoch deutlich benachrichtigen, wenn sich die Maus zu nahe an einem anderen Knoten befindet, um eine Erstellung zu ermöglichen, und zwar mit einem visuellen Hinweis (z. B. Ändern des Cursors oder Hervorheben des nächstgelegenen Knotens).
Alternativ können Sie eine Methode implementieren, die den nächstgelegenen gültigen Speicherort findet, um einen neuen Knoten für einen beliebigen Bildschirmstandort hinzuzufügen. Auf diese Weise müssen Sie nichts verbieten: Alle Standorte sind gültige Doppelklick-Standorte. Sie können den Benutzer auch mithilfe eines visuellen Hinweises benachrichtigen, dass sich der erstellte Knoten nicht genau unter der Maus befindet. Um Verwirrung zu vermeiden, können Sie den Knoten an der Klickposition erstellen und in einer kurzen Animation an die gültige Position verschieben.

3
jeremy-george

Ich denke, die beste Lösung wäre, alle oben genannten Methoden zuzulassen: Ein Doppelklick wäre eine versteckte Funktion (nicht alle Benutzer würden daran denken, einen neuen Knoten wie diesen zu erstellen), während das Ziehen eines Knotens aus der Symbolleiste offensichtlicher wäre.

Können Sie nicht einfach die Funktion "Am Raster ausrichten" erzwingen? Schauen Sie sich zum Beispiel den OS X Finder an, in dem sich ein Element unabhängig davon, wo auf dem Bildschirm Sie es ziehen, selbst anpasst und an der nächsten verfügbaren Stelle neu positioniert ...

Auf diese Weise würde ein Doppelklick auf die Zeichenfläche einen neuen Knoten an der nächsten verfügbaren Stelle erstellen, ein Doppelklick auf einen Knoten würde ihn bearbeiten. Diese Funktionen können auch über Rechtsklick + Optionen aufgerufen werden ...

Durch das Erzwingen eines "Snap-to-Grid" würden Benutzer niemals befürchten, es richtig oder falsch zu machen, es wäre das System, das sich darum kümmert

2
Pedro

Wenn ein Benutzer einen Knoten an Punkt X platzieren möchte, lassen Sie ihn.

Versuchen Sie nicht, zu erraten, was sie erreichen wollen (weil Sie es nicht gut machen können), und machen Sie es ihnen nicht schwerer, ihr Ziel zu erreichen. Software sollte sich an den Benutzer anpassen, nicht umgekehrt.

Da Sie eine Regel haben, nach der sich Knoten nicht überlappen können, stellen Sie sicher, dass vorhandene Knoten dem neuen Knoten aus dem Weg gehen. Verschieben Sie sie mindestens so weit vom neuen Knoten entfernt, damit Platz für den neuen Knoten vorhanden ist. Ja, dies kann zu einer Kaskade kleiner Bewegungen führen, aber nur selten.

2
Bevan

Ein Doppelklick für die Knotenerstellung erscheint mir nicht intuitiv und erschwert die Knotenerstellung insbesondere bei anderen Eingabegeräten als der Maus (d. H. Touchscreens, Grafiktabletts). Warum nicht einfach einen einzigen Klick für die Knotenerstellung und -auswahl verwenden? Wenn Sie in der Nähe eines Knotens klicken, wird dieser ausgewählt. Wenn er weiter entfernt ist, wird ein neuer Knoten erstellt. Problem gelöst :-) Verbesserung: Verwenden Sie auch Click-Drag-Release, um Knoten mit einer fließenden Bewegung zu erstellen/auszuwählen und zu positionieren.

1

Ich würde nicht erwarten, auf ein Objekt zu klicken und die Leinwand zu verschieben. Sie haben Google Maps erwähnt. Wenn Sie auf eine Richtungspfadlinie klicken und diese ziehen, um Ihre Route zu ändern, bewegt sich die Leinwand nicht.

Ich bin alles der Einfachheit halber, aber zu oft konzentriert sich das Design zu sehr auf Anfänger und die Benutzer, die Erfahrungen sammeln werden. Tastaturbefehle sind möglicherweise nicht intuitiv, aber sobald Sie den Dreh raus haben, können Sie viel produktiver sein. Sie haben erwähnt, dass es 20 Knoten geben könnte. Dies scheint keine App zu sein, in der neue Benutzer einige Einträge vornehmen und die Website selten wieder verwenden.

So etwas wie ein Doppelklick würde die Erstellung neuer Knoten ziemlich effizient machen. Wenn jemand dies häufig verwendet, möchte er Verknüpfungen, die ein Anfänger nicht zu seinem Vorteil verwenden würde.

1
JeffO