it-swarm-eu.dev

UI-Paradigma für verschachtelten Layout-Editor

Ich habe eine Anwendung mit einem Layout-Editor, der dem WinForms-Editor in Visual Studio etwas ähnlich ist - mit Drag-and-Drop-Widget-Platzierung, einem Eigenschaftenfenster usw.

Ich füge die Option hinzu, verschachtelte Layouts zu haben, wobei ein platziertes "NestedLayout" -Widget (Layout B im Bild) ein ganz anderes Layout darstellen kann.

Sketch of nested layout editor

Welche Art von Benutzeroberfläche würden Sie empfehlen, damit der Benutzer diese verschachtelten Layouts bearbeiten kann? Das direkte Arbeiten im vorhandenen Frame wäre zu umständlich, da ein Großteil der Bildschirmfläche bereits vom Rest des Layouts der obersten Ebene genutzt würde.

Zu den Möglichkeiten gehören das Laden, um das verschachtelte Layout im oberen Editor zu maximieren (möglicherweise mit einer Art Zoomübergang), das Aufrufen eines neuen Editors oben usw.

Haben Sie Beispiele für Editoranwendungen gesehen, die diese Art von Szenario effektiv handhaben?

6
kpozin

Mein erster Reflex bei der Darstellung des obigen Bildschirms wäre, auf das verschachtelte Layout zu doppelklicken, um es zu bearbeiten. Ich stimme Ihnen zu, dass es nicht die richtige Lösung ist, wenn der Benutzer das verschachtelte Layout im vorhandenen Frame bearbeitet, und dies kann für Ihre Benutzer ziemlich verwirrend werden.

Ich würde das verschachtelte Layout, vollständig gerendert, in einem grauen oder ausgeblendeten Zustand präsentieren und eine Meldung mit der Maus darüber anzeigen, die erklärt, wie es bearbeitet wird (z. B. "Doppelklicken zum Bearbeiten"). Ich würde auch einen zweiten Editor über dem ersten öffnen, anstatt das verschachtelte Layout mit einem Zoomeffekt zu maximieren. Ich finde, dass der Zoomeffekt, obwohl er ziemlich clever ist, einige Benutzer leicht verwirren kann - Sie müssen sehr vorsichtig mit der Benutzeroberfläche sein, damit sie sich nicht fragen, was gerade passiert ist und warum all ihre Widgets plötzlich verschwunden sind.

3
Tania Gobeil

Haben Sie sich angesehen, wie WYSIWYG-Webdesign-Tools mit Iframes umgehen? Normalerweise wird der Iframe (oder ein anderes eingebettetes Objekt) als nicht interaktives Objekt beschrieben, auf das man doppelklicken oder auf andere Weise aktivieren muss, um den Editor für dieses bestimmte Objekt aufzurufen. Im Fall von Iframes erinnere ich mich an Tools wie Dreamweaver, die einen Eigenschaftenbereich geöffnet haben, über den Sie von dort aus auf die Quellseite des Iframes zugreifen können.

Es ist möglicherweise nicht die beste Benutzerfreundlichkeit, aber je nach Zielgruppe ist es möglicherweise ein guter Aufruf, die WYSIWYG-Konventionen zu befolgen.

Sie werden wahrscheinlich auch Erwartungen festlegen, je nachdem, wie Sie NestedLayout in Ihrem übergeordneten Steuerelement rendern. Wenn es vollständig gerendert ist, können Benutzer erwarten, mit ihm interagieren zu können. Wenn es sich jedoch nur um einen Rahmen mit einem Symbol handelt, das seinen Status als "Widget" oder eingebettetes Objekt darstellt, kann dies einen anderen Effekt haben. Testen Sie beide in einem interaktiven High-Fidelity-Modell, um zu sehen, was die Leute tun. Dies wäre großartig, um mit einem Remote-Usability-Test zu testen, der auf einem bestimmten Testszenario wie "Interact with the NestedLayout" oder so basiert!

2
Rahul

Schauen Sie sich die IntelliJ IDEA Java IDE) an. Sie verfügt über einen sehr netten Editor für GUI-Formulare mit verschachtelten Layouts, der eine recht benutzerfreundliche Drag-and-Drop-Bearbeitung unterstützt.

1
extropy

Erwägen Sie die Wiederverwendung von wiederverwendbaren * Steuerelement * s. Sie würden also das zweite Layout als ganz neues Layout bearbeiten, jedoch in einer anderen Registerkarte/einem anderen Fenster des Designers, z. B. einem user control in Visual Studio. Wenn der Benutzer nicht so viel Platz benötigt, kümmert er sich nicht um kleinere Bildschirmflächen (möglicherweise enthält er ohnehin nur ein paar Schaltflächen).

0
Camilo Martin

Zuerst wollte ich eine Antwort hinzufügen, die einigen der oben genannten ähnlich ist. Flash blendet beispielsweise aus und sperrt den umschließenden Kontext, wenn Sie auf ein zusammengesetztes Objekt doppelklicken. Aber dann wurde mir klar, dass Sie es in Bezug auf das Design je nach Anwendung möglicherweise nicht zu einfach machen möchten, "Layout B" zu bearbeiten. Wenn Sie in Ihrem Beispiel das zeigen, was normalerweise in einem GUI-Editor ausgeführt wird, bedeutet dies, dass sich alles, was wir auf dem Bildschirm sehen, in einem Objekt befindet. Durch das einfache Bearbeiten verschachtelter Layouts wird diesem einen Objekt immer mehr Funktionalität hinzugefügt, sodass Layout A alle Widgets enthält.

Das Aufstellen einer sanften Barriere für das Bearbeiten verschachtelter Layouts führt letztendlich dazu, dass der Benutzer die Implementierung auseinanderbricht und daher besser gekapselte Objekte erstellt, die einfacher zu handhaben sind.

Z.B. Mit dem Qt Designer können Sie den Inhalt jeder Registerkarte eines Fensters im GUI-Editor bearbeiten. Wenn Sie nicht vorsichtig sind, erhalten Sie eine Implementierung eines Fensters, das die Arbeit aller Registerkarten erledigt. Welches ist wirklich keine gute Sache.

0

Adobe Flash

Sie können Kompositionen (in Flash Symbole genannt) haben, mit denen Sie interagieren können. Innerhalb dieser Kompositionen können Sie Ebenen und andere Kompositionen haben. Die Erfahrung ist etwas schlecht, weil Flash so langsam zu bearbeiten ist und eine übermäßig komplizierte Benutzeroberfläche mit Schaltflächen an den falschen Stellen und fehlenden Verknüpfungen hat. Aber es ist ein guter Ausgangspunkt für Inspiration.

Eine Mischung aus Interface Builder, World Craft und Adobe Flash würde für die Bearbeitung verschachtelter Kompositionen rocken.

0
neoneye