Struktur einzelner GUI-Seiten mit Wireframes entwerfen

Struktur einzelner GUI-Seiten mit Wireframes entwerfen

https://bildung.social/@oerinformatik/113465953349540853

https://oer-informatik.de/wireframe-tools

tl/dr; (ca. 8 min Lesezeit): Im Design-Prozess einer GUI nutzen wir Wireframes für den Entwurf der Struktur und Gliederung und Mockups, um erste visuelle Eindrücke zu erhalten. In diesem Artikel wird die Rolle von Wireframes und Mockups beschrieben und einige Tools vorgestellt, mithilfe derer Wireframes und Mockups erstellt werden können. (Zuletzt geändert am 11.11.2024)

Nachdem für ein Frontend die Anforderungen geklärt, die Geschäftsprozesse analysiert und die GUI-Masken als Zustände modelliert sind, kann begonnen werden, sich über deren innere Struktur Gedanken zu machen.

Es steht bereits fest, welche Seiten/Masken benötigt werden (jeder Zustand im Zustandsdiagramm entspricht einer zu realisierenden Seite). In unserem Beispiel der Kongress-App wurden bei der Modellierung 14 Zustände (also: Seiten) identifiziert:

Für jede dieser 14 Seiten muss nun die Struktur der Seiten erstellt werden, die Usern alles bereitstellt, was zur Erfüllung des jeweiligen Anwendungsfälle (siehe Use Case-Diagramm und Anforderungsdokumentation) erforderlich ist. Darüber hinaus muss die geplante Navigation und Benutzerführung eingebaut werden (siehe UML-Zustandsdiagramm).

Entwurfsschritte für GUI-Seiten

Eine erste Skizze: Wireframes

Im ersten Schritt geht es noch nicht um das Look-and-Feel. Farben, Effekte, Icons, Schriften und Corporate Design werden bewusst ausgeklammert. Zunächst geht es nur darum, zu entscheiden, welche UI-Elemente auf den einzelnen Seiten der GUI genutzt werden sollen und wie sind sie grob angeordnet werden.

Was wir erstellen wollen, ist eine recht glanzlose Skizze unserer Seite(n), wie sie feinmotorisch semibegabte Entwickler*innen zu Papier bringen. Als Begriff dafür hat sich Wireframe etabliert: wir bauen also im übertragenen Sinne ein Drahtmodell unserer Seite, auf der zwar die Umrisse und der räumliche Aufbau erkennbar ist, aber noch keinerlei Texturen auf das Modell gespannt wurden. Meist hält man diese Skizze bewusst in schwarz/weiß.

Auswahl der UI-Elemente (Widgets / Komponenten)

Abhängig von der Zielplattform stehen bestimmte UI-Elemente zur Verfügung, aus denen sich die Seiten zusammensetzen können. Nicht immer bieten Wireframe-Tools alle Elemente als Vorlage an, daher ist es wichtig, sich im Vorfeld Gedanken zu machen, welche Elemente man nutzen will:

• statische Inhalte werden mit Textblöcken, Label, Tabellen oder Bildern eingefügt,

• Formulardaten über Textboxen, Dropdownmenüs (oder mit Freitext: Combobox), Auswahllisten, Radiobuttons (Alternative Auswahl), Checkboxen (individuelle Auswahl), Date-Picker (kleine Kalender zur Datums-Auswahl), Buttons mit Vorgabewerten oder zum Absenden der Daten,

• Navigation über ein Menü (oben, seitlich, als Hamburger-Menü komprimiert), Buttons, Registerkarten (Tabs), Breadcrumps, Links, Suche, Baumdiagramm.

Reduzierung der Wireframes auf das Wesentliche

Durch das stark reduzierte Konzept eines Wireframes konzentrieren wir uns zunächst auf das Struktur. Es wird die Grundlage der Nutzererfahrung (User Experience (UX)) gelegt: welche Informationen und Interaktionsmöglichkeiten benötigt der Nutzer? In welcher Reihenfolge werden sie abgefragt? Welche UI-Elemente sollen dafür genutzt werden?

Mischwesen: UML-Zustandsdiagramm / Wireframe

Einige Tools bieten die Möglichkeit, auch die Navigation zwischen den einzelnen Seiten darzustellen, in dem sie Miniaturseiten und deren mögliche Übergänge als Flussdiagramm darstellen. Ich halte es für besser, im Vorfeld die Navigation mit Trigger, Guard und Effekt sauber als UML-Zustandsdiagramm zu modellieren. Wenn dies nicht geschehen ist und die Anzahl der Seiten überschaubar ist, dann mag auch so eine Übersicht helfen:

Erst, wenn eine gute Benutzerführung durch diese isolierte Betrachtung zufriedenstellend gelöst wurde, kann der nächste Schritt des GUI-Entwurfs angegangen werden:

Erweiterung des GUI-Entwurfs um visuelle Details: das Mockup

Viele Tools zum Entwurf der Struktur einer GUI gehen einen Schritt weiter als reine Wireframes: sie bieten direkt fertige Templates und farbige Komponenten an, teilweise können sogar vorhandene Styles (CSS Stylesheets) importiert werden. Die mit diesen Tools erstellten Entwürfe geben bereits einen relativ guten ersten visuellen Eindruck der GUI wieder. Man nennt diese Entwürfe Mockups (also Attrappe / Nachbildung / Vorführmodell).

Nachteile von Mockups in frühen Entwicklungsphasen

Die Verlockung ist groß, bereits zu Beginn den Entwurf visuell ansprechend zu gestalten und die Fülle der Möglichkeiten der Tools auszunutzen. Dabei gibt es aber zwei Risiken:

• Häufig fällt es schwer, den Fokus auf die Struktur der GUI zu legen, wenn schon viele weitere Details vorhanden sind. Schnell entstehen zu früh Diskussionen über Farben, Schriftarten, Icons, Bilder. Es besteht die Gefahr, sich zu verzetteln und das große Ganze aus dem Auge zu verlieren.

• Wenn den Kund*innen die Entwürfe gezeigt werden, verstehen diese bei sehr realitätsnahen Darstellungen oft nicht, dass das Produkt sich noch in einem sehr frühen Stadium befindet. Es kann Unzufriedenheit hervorrufen, dass sie noch so lange auf das Ergebnis warten müssen. Darüber hinaus kommen auch hier Gespräche über Details auf, die zeitlich noch gar nicht anstehen.

Es ist also stets ein Abwägen, wie weit man das Design (künstlich) reduziert.

Navigation live erleben: Clickdummy / Prototyp

Einige Mockup- oder Wireframe-Tools bieten auch an, dass man die Nutzererfahrung der Navigation durch unterschiedliche Seiten / Masken bereits ausprobieren kann: Buttons, Registertabs oder Textlinks werden mit Verweisen auf die anderen Masken/Layer/Seiten versehen. Auf diesem Weg lässt sich sehr bereits in einer sehr frühen Phase ausprobieren, ob die Navigation schlüssig, intuitiv und einheitlich ist.

Da die eignetliche Funktionalität bei diesen Simulationen noch fehlt, spricht man hier von einem Klickdummy oder visuellen Prototyp.

Die eigentliche User Experience (UX) lässt sich mit diesen Clickdummies bereits relativ gut untersuchen und auswerten - gerade dann, wenn sie auf Wireframes aufbauen und keine visuellen Ablenkungen vom eigentlich untersuchten Thema abweichen.

Tool-Übersicht

Es gibt eine Vielzahl an Wireframe-Tools, nur einen kleinen Teil habe ich mir bereits angeschaut Aktualisierungen / Verbesserungen mitzuteilen!

• Plantuml / Salt: siehe unten

• Figma: siehe unten

• Balsamiq: siehe unten

• Moqups.com: siehe unten

• Pencil: OpenSource Desktop App, weiterentwickelt in Vietnam

• Mockflow: Webapp von A Produle Systems Pvt Limited aus Indien

• Mockplus

• MarvelApp.com

• excalidraw mit “ecommece mobile ui” oder “HTML Input elements” Library

• FluidUI (nervt mit Cookie-Zustimmung, bevor irgendwelche Infos angezeigt werden, keine Testversion)

• Invision (Es findet sich kein schneller Weg, das auszuprobieren… daher sei es hier nur genannt.)

• Adobe XD (eingestellt seit 2023)

Figma

Die kostenlose Version ist begrenzt auf ein Projekt, drei Dateien und 30 Tage Historie. Darüber hinaus gibt es eine kostenlose Bildungsversion, die mit Uni- und Schulkonten genutzt werden kann.

Figma bietet viele Vorlagen und weitere Plugins (In-App-Käufe). Zum Erstellen von Mockups eignet sich Figma mit den vielen Templates sehr gut - für ein losgelöstes Wireframe und ein kleines Projekt ist die Einarbeitungszeit aber relativ groß - zu Beginn werden nur einfache Formen und Texte geboten. Dateien können auch kollaborativ gemeinsam bearbeitet werden.

Basics

• Autor / Hersteller: Figma Inc (von Adobe aufgekauft)
• Art: WebApp / DesktopApp
• Link/Download: Figma
• Video-Tutorial: Butter Academy: Free Figma Tutorial: Designing Wireframes with Figma (1:00 h)
• Getting Started: Figma Blog: How to wireframe (Toni Gemayel)
• zuletzt aktualisiert: Webapp, aktuell
• Lizenz / Kosten: Abomodell, 0€ (Trial) - 144€/Jahr
• Testversion: 30 Tage, Education-Version kostenlos
• Dateiformat: proprietär (*.fig), Export als PDF & PNG
• Import: *.sketch

Eigenschaften

PlantUML / Salt

Das Diagram-As-Code-Tool Plantuml bietet mit Salt eine Möglichkeit, einfache Wireframe zum groben Strukturentwurf zu fertigen. Es bietet die interessante Möglichkeit für kleinere Projekte, die einzelnen Masken direkt wie im UML-Zustandsdiagramm miteinander zu verlinken. Da die Plattform weder WYSIWYG anbietet, noch Klickdummies und nur sehr einfache GUIs zulässt, ist sie wohl nur für einen beschränkten Einsatzzweck geeignet.

Die größten Vorteile sind: die Open-Source-Software ist versionierbar und kann direkt in die Dokumentation integriert werden, da viele Git-Hoster ein direktes Rendering von PlantUML ermöglichen.

Basics

• Autor / Hersteller:
• Art: Webapp / Integration als Plugin in IDEs, Github, etc.
• Link/Download: Plantuml / Salt
• zuletzt aktualisiert: aktuell
• Lizenz / Kosten: MIT, GPL
• Dateiformat: Textdateien

Eigenschaften

Quelltext-Beispiel einer PlantUML/Salt-Seite:

@startsalt
{^"Login"
.
  {
  <&person> Login |  "meine@mailadresse   "
  <&key> Password |  "****                "
  [X] Logindaten speichern
  [Cancel <&circle-x>] | [Login <&account-login>]
  }
{<u><color:Blue>Passwort vergessen?</u>     <u><color:Blue>Registrieren</u>}

.
.  
Login per SSO mit
{[office365]|[gitlab]}
.
}
@endsalt

Balsamiq

Leider gibt es nur einen 30-Tage Testzeitraum, danach wird es recht teuer (144 €/a). Der Funktionsumfang ist mit vielen Vorlagen für Wireframes gut geeignet: Icons, UI-Elemente, Templates helfen dabei, relativ schnell ein Wireframe zu erstellen. Das Layout im handgeschriebenen Format unterstreicht den vorläufigen Charakter von Wireframes.

Basics

• Autor / Hersteller:
• Art: WebApp / DesktopApp
• Link/Download: Balsamiq
• zuletzt aktualisiert: aktuell
• Lizenz / Kosten: Abomodell: 144 €/a - 216 €/a
• Testversion: 30 Tage
• Dateiformat: SQLite Export

Eigenschaften

Moqups.com

Moqups lässt sich angenehm einfach per Drag & Drop bedienen, zwei Projekte sind mit der kostenlosen Version umsetzbar. Für ein einmaliges kurzes Reinschnuppern in die Welt der Wireframes reicht der Free-Account allemal. Auch UML-Diagramme lassen sich damit zeichnen - jedenfalls ist das für alle interessant, die sich das Tool ohnehin gekauft haben.

Basics

• Autor / Hersteller: S.C. Evercoder Software S.R.L., Rumänien
• Art: Webapp
• Link/Download: Mockups.com
• zuletzt aktualisiert:
• Lizenz / Kosten: 0€ (Free, 2 Projekte) / 9€ (Solo) und weitere
• Dateiformat: ab “Solo”: PNG & PDF Export

Eigenschaften

Hinweis zur Nachnutzung als Open Educational Resource (OER)

Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Struktur einzelner GUI-Seiten mit Wireframes entwerfen” von oer-informatik.de (H. Stein), Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/wireframe-tools veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/frontend. Stand: 11.11.2024.

[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]