it-swarm.com.de

Wie lassen sich Top-Down-Zerlegungsdaten (hierarchisch) am besten mit Ortsbearbeitung und untergeordneter Hinzufügung anzeigen?

Wir haben eine HTML/CSS-Benutzeroberfläche, in der ein oberstes Element (root) vorhanden ist. Klicken Sie darauf, dass Sie ein Textfeld erhalten, in das Sie Inhalte eingeben und speichern können. Es wird als eingerücktes/gestyltes Kind des Elternteils angezeigt. Grundsätzlich sehen die Elemente wie eine Liste aus und die Hintergründe werden gemäß der 'Ebene' des Knotens gestaltet.

Es ist also nur eine typische geordnete Liste, die so aussieht:

  • Wurzel
    • Stufe 1 Punkt 1
    • Stufe 1 Punkt 2
      • Stufe 1.1 Punkt 1
      • Stufe 1.1 Punkt 2
        • Stufe 1.1.1 Punkt 1
    • Stufe 1 Punkt 3

Und so weiter...

Ich habe mir einige Beiträge im Forum angesehen, bevor ich diese Frage gestellt habe, und es scheint, dass es einige Überschneidungen gibt. Aber hier sind die "widersprüchlichen Kräfte", die ich ausgleichen möchte, und ich suche nach dem besten "Weg", um dies zu erreichen, d. H. Vom Design-Standpunkt aus und nicht vom Code.

Also hier sind die Kräfte :

  1. Bearbeitbar - Wenn Sie auf einen Knoten klicken, kann der darin enthaltene Text bearbeitet werden (wahrscheinlich durch Klicken auf ein Bearbeitungssymbol, wenn Sie mit der Maus über den Knoten fahren?)
  2. Hinzufügen eines Kindes - so einfach wie das Klicken auf "Hinzufügen" oder ähnliches, um ein Kind hinzuzufügen
  3. Das Layout sollte "baumartig" sein - dies ist der schwierige Teil. Die Stakeholder bevorzugen eine Top-Down-Visualisierung auf Baumbasis.

Konflikte:

  1. Der größte Konflikt ist die Visualisierung gegenüber der Dateneingabe. Es ist einfach, die Eingabe als Liste zu verwenden (wie oben), den Benutzer auf eine Schaltfläche klicken zu lassen und die Daten wie einen Baum darzustellen. Dies ist jedoch eine schreibgeschützte Visualisierung (ich konnte kein Javascript-basiertes Visualisierungs-Framework finden, das eine direkte Bearbeitung ermöglicht). Die Analyse muss in der Lage sein, die Analyse mit der Visualisierung vor sich durchzuführen, anstatt die Visualisierung "Klicken, um sie zu sehen"
  2. Bildschirmfläche: Wenn ich es irgendwie schaffe, eine reine baumartige Top-Down-Erfassung/Anzeige zu erzielen, kann dies auf einem typischen Monitor zu viel horizontalem Scrollen führen.
  3. Zeigen Sie den Baum von links nach rechts (Wurzel links, Blätter rechts). Ähnliche Probleme wie 2, aber meiner Meinung nach ziemlich schwierig auf einer Webseite zu implementieren.

Mein Anliegen ist es, den Bedarf an Visualisierung und Dateneingabe/-änderung am besten auszugleichen, ohne zu viel hin und her zu wechseln. Was wäre ein gutes Design, um solche Daten gleichzeitig zu bearbeiten/erfassen und zu visualisieren?

Was ist ein besserer Weg, wenn dies nicht die beste Lösung zu sein scheint?

Grund: Das Tool soll für die Top-Down-Zerlegungsanalyse verwendet werden, und die Anforderung besteht darin, erfassen zu können, was auf einem Whiteboard effektiv möglich ist. Die maximale Zeichenlänge jedes 'Knotens' beträgt 50 Zeichen.

Irgendwelche Ideen? Hinweise auf einige Tools/Artikel/Frameworks usw. wären ebenfalls hilfreich. Ich habe mir einige Javascript-Visualisierungs-Toolkits (Infovis, arbor.js, Raphael.js usw.) angesehen, aber immer noch vergebens.

(HINWEIS: Die typische Dateisystem-ähnliche Baumansicht wurde von den Stakeholdern ausdrücklich als inakzeptabel angegeben.)

PDATE : Hier ist ein Screenshot von der Stammbaum-Erstellungssoftware von geni.com. Es ist in Flash (ich bevorzuge Javascript), aber die Benutzeroberfläche ist ein bisschen intuitiv und möchte etwas Ähnliches erreichen:

enter image description here

1
PhD

Für Ideen könnten Sie Mind- und Concept-Mapping-Tools in Betracht ziehen. Mind Maps dienen dazu, hierarchische Informationen schnell und intuitiv anzuzeigen und zu bearbeiten. Mind Manager ist ein beliebter bezahlter. Freemind ist eine gute Open Source Version. Wikipedia-Listen viele , einschließlich Nur-Online-Versionen.

Wenn Sie Code schreiben möchten, suchen Sie nach beliebten JavaScript-Framework-Plugins. Hier ist zum Beispiel ein Artikel mit 10 In-Place-Bearbeitungs-Plugins für jQuery .

Hmm. Beschränkt auf zwei Hyperlinks, da dies mein erster UX-bezogener Beitrag ist. Mind Manager ist bei mindjet.com. Freemind ist bei freemind.sourceforge.net.

2
Adam

Ich bin mir nicht sicher, ob ich Ihre Frage verstehe. Soweit ich weiß, klickt der Benutzer auf einen Knoten, gibt den Inhalt eines untergeordneten Elements ein und dieses untergeordnete Element wird darunter angezeigt.

Wenn der Benutzer sowohl Knoten hinzufügen als auch bearbeiten muss, führt dies von Anfang an zu Problemen. Die Idee eines Bearbeitungsmodus ist kein Anfänger: Teile Ihrer Benutzeroberfläche werden unter verschiedenen Umständen auf radikal unterschiedliche Weise funktionieren. In einem Modus wird durch Klicken ein untergeordnetes Element hinzugefügt, in einem anderen durch Klicken wird das übergeordnete Element geändert. Benutzer finden "modale" Schnittstellen oft unhandlich und verwirrend, da viele modale Schnittstellen schlecht erklären, in welchem ​​Modus sich der Benutzer befindet und wie dies geändert werden kann. Die Tatsache, dass Benutzer sich nicht auf konsistente visuelle Zeichen verlassen können, erschwert ihnen auch das Lernen.

Um Kinder hinzuzufügen, sollten Sie eine Schaltfläche "Hinzufügen" oder einen ausgegrauten untergeordneten Knoten "Kind hinzufügen" in Betracht ziehen. Das sind die typischsten Muster.

Das andere Problem mit Ihrer Benutzeroberfläche ist, dass sie, wie Sie erkennen, für große Listen oder Taxonomien nicht funktioniert, da Sie viel Bildschirmfläche verbrauchen. Die Lösung? Nun, es hängt davon ab, wie Ihre Benutzer die Daten anzeigen und behandeln. Wenn sie nur einzelne 'Familien' von Elementen gleichzeitig sehen müssen, könnte eine zusammenklappbare Struktur die Antwort sein (wenn Sie jemals viele XML-Editoren verwendet haben, haben Sie dieses Verhalten gesehen). Wenn Benutzer verschiedene Familien vergleichen müssen, können Sie eine Benutzeroberfläche mit mehreren Fenstern in Betracht ziehen, über die Benutzer verschiedene Abschnitte der Daten direkt vergleichen können (obwohl es für Benutzer schwieriger sein kann, diese zu erklären). Ich empfehle keine Links-Rechts-Visualisierung - ja, Sie werden den Bildschirmbereich effizient nutzen, aber Benutzer lesen gerne einen linken Rand in einem F-förmigen Muster ab, und die vertikale Reihenfolge mit Einrückung von Kindern ist ein häufiges Muster, das Benutzer verwenden wird leicht erkennen.

Wenn das Problem mit einer langen Liste eher die Navigation als der Vergleich ist, dann ist das ein etwas anderes Problem. Zu den Lösungen gehört ein linker Bereich mit Elementen der ersten Ebene oder Miller-Spalten.

Was ist der tatsächliche Kontext für die Anwendung? Wenn ich die Umstände kenne, kann ich Ihnen möglicherweise genauer helfen.

1