it-swarm.com.de

Was ist eine intuitive Oberfläche zum Herstellen von Verbindungen zwischen UI-Elementen?

Ich habe gerade eine Web-App veröffentlicht, mit der Sie Notizen erstellen und verbinden können: http://www.noodl.in .

Eine Reihe von Benutzern hatte jedoch Probleme beim Erstellen von Verbindungen. Ich bin mir nicht ganz sicher, welche Probleme sie haben, meistens sagen sie nur, dass sie "nicht konnten".

Momentan unterstützt meine App zwei Möglichkeiten, Verbindungen herzustellen:

  1. klicken Sie auf den Rand und dann auf eine andere Notiz
  2. klicken und ziehen Sie vom Rand zu einer anderen Notiz

Gibt es eine intuitivere Möglichkeit, Verbindungen herzustellen? Oder dass ich es im Tutorial präsentieren könnte?

5
kristina

Verwenden Sie eine Symbolleiste mit Formen und Verbindungen. Ich denke, Sie müssen mehr recherchieren, um bessere Ideen zu erhalten. Hier sind einige Links zur Inspiration.

Klare Diagramme: https://www.lucidchart.com/

Cacoo: https://cacoo.com/

Gliffy: https://www.gliffy.com/

Diagram.ly: http://www.diagram.ly/

Hinweis: Ich war mit Ihrer Benutzeroberfläche nicht zufrieden. Bitte überdenken Sie sie. Übrigens gefällt mir das Löschen von Notizen :-)

1

Ich habe nicht herausgefunden, wie ich eine Verbindung zwischen Notizen herstellen kann, bis ich auch Ihre Antwort gelesen habe.

Ein Problem bei (insbesondere) Ihrer zweiten Interaktionsoption (Ziehen vom Rand einer Notiz zu einer anderen Notiz) besteht darin, dass am rechten Rand einer Notiz auch das Verhalten "Horizontal ändern" angebracht ist. Das heißt, ich nehme die dynamische Grenze, die Sie zeigen, als zu diesem Zweck existierend wahr. Selbst wenn ich herausgefunden habe, dass ich Linien aus diesem Bereich ziehen kann, wird die Breite des Zielbereichs verringert, bei dem die Größe der Notiz nicht geändert wird . Da das Größenänderungsverhalten einen anderen Cursor verwendet, gehe ich davon aus, dass es kein verstecktes Verhalten gibt, wenn sich der Cursor nicht zwischen Rahmen und Inhalt ändert.

Um dies zu beheben, würde ich Anker implementieren, deren einziger Zweck darin besteht, mir das Ziehen einer Verbindung zwischen Elementen zu ermöglichen. Diese Anker können ausgeblendet werden, bis eine Notiz fokussiert oder eine Verbindung in die Nähe gezogen wird. OmniGraffle nennt diese "Magnete" und präsentiert sie so (beachten Sie, dass der ausgewählte Knoten - Artikel veröffentlichen - alle vier Magnete anzeigt, aber wenn der Cursor in Richtung des Knotens "Artikel bearbeiten" gezogen wird, wird sein nächster Magnet dynamisch angezeigt):

A screenshot from OmniGraffle 5 showings its "magnet" behaviour
Bild von Erste Schritte mit OmniGraffle 5

1
Kit Grose