Auf Mastodon ansehen
Im Büro habe ich mit der Arbeit an einer neuen internen Anwendung begonnen, bei der es um die Verwaltung von Pfarrstellen geht. Das wurde bisher mit einem Excel-Sheet gemacht, bei dem keiner mehr durchblickt. Ein Teil der Spezifikation ist auch der UI-Entwurf, damit einerseits die Auftraggeberin (Fachabteilung) eine Idee von der Gestaltung der Benutzeroberfläche bekommt und mitreden kann, und andererseits das Entwicklungsteam sieht, wie das User Interface so ungefähr aussehen soll.
In früheren Projekten habe ich dafür das Werkzeug Pencil verwendet, in dem man die UI als Wireframe "malt". Da ich ein Freund von deklarativen Grafiken bin, wollte ich dieses Mal etwas anderes ausprobieren. Beim Erstellen von deklarativen Grafiken, malt man nicht, sondern beschreibt mit Text (Pseudo-Code), was gemalt werden soll. Ich habe bereits mehrere Artikel dazu geschrieben. Das Stichwort heisst PlantUML mit dem dazugehörigen Editor, in dem man das ausprobieren kann. Wie der Name "PlantUML" vermuten lässt, handelt es sich überwiegend um Grafiken der Unified Modeling Language. Doch PlantUML unterstützt wesentlich mehr Formate als nur UML-Diagramme.
Eines davon heisst Salt und dient dem Erstellen von UI-Wireframes. Obwohl es auf der Webseite viele Beispiele gibt, ist das Anlegen eines vollständigen Fensterentwurfs nicht offensichtlich. Deshalb nutze ich die Gelegenheit, in diesem Artikel ein Beispiel zu entwickeln. Leider bietet Salt nicht alle UI-Elemente, die man sich wünscht, aber man kann sich etwas "zurecht frickeln".
Los geht’s. Ziel ist es, den UI-Entwurf eines typischen Anwendungsfensters zu bauen. Die nun gezeigten Beispiele habe ich alle mit dem PlantUML-Editor online erstellt.
Auf der linken Seite seht ihr den beschreibenden Text und rechts das grafische Ergebnis. Ein Salt-Diagramm beginnt immer mit @startsalt und endet mit @endsalt. Dazwischen könnt ihr mit den geschweiften Klammern Hierarchieebenen der UI-Elemente erzeugen. Die Angabe von scale vergrössert die grafische Darstellung und title ist selbsterklärend. Das Pluszeichen nach der ersten Klammer zeichnet einen Rahmen um die in den Klammern enthaltenen Elemente.
Nun füge ich eine Kopf- und Fusszeile hinzu und erweitere den inneren Bereich.
Das sieht doch schon mehr nach einem Anwendungsfenster aus. Wenn eine Klammer mit einem Stern beginnt, erzeugt man eine Menüleiste. Eine solche habe ich auch für die Fusszeile missbraucht. Schreibt man die Klammerblöcke untereinander, werden sie auch in der Grafik untereinander angeordnet. Trennt man die Klammerebenen mit einem Pipe-Symbol (|), werden die Blöcke nebeneinander gezeichnet.
Im nächsten Beispiel füge ich weitere UI-Elemente hinzu.
Den Navigationsbereich habe ich um eine Treeview ergänzt und ein Element (mit ==) fett gemacht, um den ausgewählten Navigationspunkt hervorzuheben. Im Filter gibt es jetzt ein paar Widgets und darunter befindet sich eine Tabelle. Nach der öffnenden Klammer eines Blocks, kann man angeben, worum es in dem Block gehen soll: + Rahmen, * Menü, T Treeview, # Tabelle, und weitere.
Der von mir verwendete Editor wird beim automatischen Update der Grafik umso langsamer, je mehr Inhalte man hat. Alternativ könnt ihr auch PlantText verwenden, der ist schneller und rendert auf Knopfdruck anstatt automatisch.
Ich baue das Beispiel nicht weiter aus; es sollte genügen, um das Prinzip verstehen zu können.
Fazit
Mir gefällt Salt als deklarative Sprache für UI-Mockups gut. Die gerenderte Grafik lässt sich in verschiedenen Formaten (z. B. SVG) exportieren und leicht in Spezifikationsdokumente einbinden. Wenn man den Code einmal verstanden hat, geht das Erstellen von UI-Entwürfen viel schneller von der Hand, als wenn man sie von Hand zeichnen kann. Ausserdem kann man den Code für weitere UI-Entwürfe wiederverwenden und schnell anpassen. Auch die Versionierung (Git) des Codes ist einfacher als bei einer gemalten Grafik.
Titelbild: https://pixabay.com/photos/ux-design-webdesign-app-mobile-787980/
Quellen: stehen alle im Text
