Webseiten-Werkzeuge

Benutzer-Werkzeuge


Vorschau neue Benutzeroberfläche (1)

Die folgenden paar Seiten sollen einen ersten Eindruck von der neuen Benutzeroberfläche vermitteln, die wir mit der Version 4.0 von print2forms freigeben werden. Der Arbeitsname dieser Oberfläche ist p2fSimply.

Die gezeigten Bilder sind noch nicht wirklich final, weil wir noch immer Möglichkeiten für Detailverbesserungen erkennen, und diese dann auch realisieren und austesten werden.

Die entscheidenden Vorteile der neuen Benutzeroberfläche sind mit statischen Bildern leider nur bedingt zu vermitteln, weil der eigentliche Editiervorgang am Endprodukt nicht direkt erkennbar ist. Wir haben aber für den Teilbereich der Mustererkennung einen Prototypen eines p2fSimply-Editors realisiert, der auch in einem Browserfenster lauffähig ist.

Nachdem der erste optische Eindruck vielleicht Interesse geweckt hat, kann mit der Mustererkennung auch das Gefühl für die Handhabung gewonnen werden. Der Editor ist in einem eigenen Kapitel Tutorial Mustererkennung beschrieben und kann im Anschluss ausprobiert werden.

Formular Briefumschlag

Als erstes Beispiel soll das Formular Briefumschlag aus der Beispielinstallation von print2forms gezeigt werden. Das Formular wurde ausgewählt, weil es schon eine gewisse Komplexität hat, denn es besteht aus zwei Unterformularen, vier Textfeldern und einem Suchfeld.



Zur Verdeutlichung des Unterschieds ist die bisherige Darstellung des Formulars als Baum hier rechts abgebildet. Hier wird wirklich deutlich, dass die Nutzung der zweiten Dimension die Übersicht erhöht. Selbst bei dieser Verkleinerung ist die Baumdarstellung nicht ohne Scrollen mit einem Blick zu erfassen.

Startelement für die graphische Darstellung des Formulars ist der grosse bräunliche Block, der als Andockstelle für die optionalen Formularbestandteile dient. Die beiden hier benötigten Unterformulare werden durch die dunkelblauen Blöcke dargestellt. Die vier Textfelder sind die blassblauen Blöcke. Das Suchfeld ist ockerfarben und hat eine eigene Andockstelle, weil es anders gehandhabt wird als die Text-, Barcode- und Ressourcenfelder.

Deutlich zu erkennen ist, dass auf den jeweiligen Blöcken Eingabefelder angeordnet sind. Es sind dies die etwas helleren Bereiche. Eingabefelder können zum einen Textfelder sein, in denen via Tastatur Texte eingetippt werden können, oder Auswahllisten mit vorgegebenen Auswahlen. Referenzen auf andere print2forms-Objekte werden hier immer als Auswahllisten dargestellt.

An den Blöcken für die Textfelder (blassblau) sind Bedingungen in Form eines weiteren ockerfarbenen Blocks angedockt. Die Farbe signalisiert die funktionale Verwandtschaft zum Suchfeld.

Ebenso angedockt sind grüne Blöcke, die das Feld erst zu einem Textfeld machen. Der grüne Block könnte auch ein Barcode-Block sein, der dann das gesamte Gebilde zu einem Barcodefeld macht.

Um die Andockstellen für den jeweiligen Block besser identifizieren zu können, wurden in die unmittelbare Nähe der Andockstelle kleine Icons platziert. In den meisten Fällen sind die Icons auf beiden Seiten gleich - einzige Ausnahme, die grünen Blöcke. Aber auch hier ist aufgrund des generischen grünen Icons schnell der richtige Block gefunden.

Aus der Gegenüberstellung der Darstellung in p2fSimply und der Baumdarstellung kann sofort erkannt werden, welche Formularelemente zueinander gehören. Es ist leicht, die jeweiligen Entsprechungen auszumachen.

Von daher ist geplant, zunächst beide Darstellungen im Administrationsprogramm anzubieten. Erfahrene Benutzer können sich also auch weiterhin im Baum bewegen - gelegentliche Benutzer nutzen lieber p2fSimply.

Weitere Formular-Beispiele

Hinweis

Ein Klick in die Bilder selbst folgt einem Link in die Medienverwaltung des Wikis. Dort werden die Bilder grösser dargestellt.

In den Fällen, in denen sie selbst dort noch verkleinert angezeigt werden, führt ein weiterer Klick auf die Seite zur Bildanzeige des Browsers, in der dann in die 1:1 Darstellung gezoomt werden wird.

print2forms/simply/vorschau_teil_1.txt · Zuletzt geändert: 2018-02-21 15:10 (Externe Bearbeitung)