18. Jul 2022
Lesedauer 17 Min.
Digitale Vorführmodelle
Die große Auswahl bei UI-Mocking- und Wireframe-Tools
Tools zum Erstellen von UI-Mockups und Wireframes sollen helfen, die Entwicklung von User Interfaces zu vereinfachen. Der Artikel gibt eine Einführung und stellt verschiedene Werkzeuge vor.
dotnetpro
F rüher oder später kommt man in den meisten Projekten an den Punkt, an dem es um das User Interface geht, egal ob Web, Desktop oder Mobile. Projekte, die sich ausschließlich auf das Backend fokussieren, gibt es sicherlich, Auswirkungen auf das UI sind aber in der Regel unausweichlich und müssen mitgedacht werden.Das dient mehreren Zwecken auf einmal. Zum einen der internen Planung, um festzustellen, was eine Benutzeroberfläche enthalten muss und wie sie zur Erfüllung der geplanten Funktionalitäten aufgebaut sein sollte. Das ist bereits ein wichtiger Punkt und hilft der internen Entwicklungsabteilung weiter. Auch bei der Kommunikation mit Externen sind diese geplanten User Interfaces wichtig. Die Kommunikation mit dem Kunden ist ebenfalls ein wichtiger Aspekt. Hier dienen Mockups nicht nur der Absprache, wie das UI grundsätzlich aussehen soll, sondern auch zur Kommunikation über dessen grobe Funktionsweise.Mockups werden daher recht allgemein in der frühen Entwicklungsphase von Projekten zur Präsentation und Qualitätskontrolle eingesetzt. Sie dienen dazu, Vorstellungen und Anforderungen an die Benutzeroberfläche bezüglich Grundfunktionen, Navigation, Inhaltsarchitektur und Design abzustimmen. Nicht selten wird aufgrund der Mockups über eine endgültige Auftragsvergabe entschieden. Des Weiteren ermöglichen Mockups Usability-Tests, ohne dass vorher ein großer Programmieraufwand nötig wäre. Vor der Erstellung des Prototyps werden dadurch eventuell auftretende Probleme frühzeitig erkannt und das Risiko verringert, dass ein Konzept mitten in der Entwicklungsphase komplett überarbeitet werden muss. Insgesamt können Mockups somit zu Zeit- und Kostenersparnis innerhalb eines Online-Projekts beitragen.Es gibt eine praktisch unüberschaubare Menge an verschiedenen Tools und Plattformen, mit denen sich Mockups und vieles weitere in diesem Umfeld erstellen lassen. Manche Werkzeuge bieten eine einfache Möglichkeit, abstrakte UI-Komponenten zu platzieren, andere ermöglichen es, Klick-Prototypen oder vollständig lauffähige Projekte zu erstellen. Dazwischen ist alles möglich, und die Bandbreite bleibt nicht nur riesig, sondern gefühlt erscheinen wöchentlich weitere Werkzeuge auf der Bildfläche.Dieser Artikel gibt eine kurze Einführung in das Thema. Vorgestellt werden unterschiedliche Kategorien von Tools, der grundsätzliche Funktionsumfang, nach dem sich die Werkzeuge aufteilen lassen, und natürlich viele Beispiele für Werkzeuge und Plattformen, mit denen sich unterschiedliche Anforderungen umsetzen lassen.
Was ist ein Wireframe?
Die Begriffe Mockup, Wireframe und (Klick-)Prototyp werden in der Praxis häufig synonym verwendet. Alle drei Begriffe beschreiben auch Entwurfsdarstellungen und meinen sich überschneidende Dinge, es handelt sich aber trotzdem um verschiedene Arten mit unterschiedlichen Ausprägungen. Ein Wireframe stellt die einfachste Form einer Vorlage dar und ist als sehr einfache Skizze aufgebaut. Entweder per Hand, in der Praxis aber wahrscheinlich mit digitaler Tool-Unterstützung. Ein Wireframe besitzt keinerlei Funktionalität und keine künstlerische Darstellung im Sinne von Farben, Typografien, Bildern und Grafiken.
Die Herausforderungen und mögliche Lösungen
Wie bereits angesprochen, dienen Mockups der Absprache von UI-Anforderungen. Aussehen, Aufbau, Funktionsweise und Co. lassen sich damit visualisieren. Dadurch können Personenkreise in die Diskussion mit eingebunden werden, die ansonsten außen vor bleiben müssten. So weit zumindest die Theorie. In der Praxis gibt es die unterschiedlichsten Herausforderungen bei diesem Vorgehen.Was der Artikel komplett außen vor lässt, sind Papierprototypen, zum Beispiel in Form handgezeichneter oder ausgedruckter Skizzen, um schnell händische Benutzertests durchführen zu können, mit denen sich die Gestaltung von Oberflächen und Interaktionsabläufe testen lassen. Papierprototypen sind noch immer beliebt und nützlich, der Artikel fokussiert sich aber auf die digitalen Varianten.Ein wichtiger Punkt ist dabei die richtige Auswahl der Abstraktionsstufe. Was soll ein Mockup zeigen? Reichen der Aufbau, die Position und Anordnung einiger UI-Elemente aus? Welche Aussage soll damit transportiert werden? Ein bekanntes Phänomen ist: Wenn die genutzten UI-Komponenten zu realistisch erscheinen, fühlen sich Kunden animiert, direkt etwas zum Aussehen zu sagen, dass zum Beispiel eine Schaltfläche doch eher grün statt rot sein sollte. Das mögen auch valide Gründe sein, Mockups zu erstellen, in der Regel geht es aber eher um den allgemeinen Aufbau und darum, was passieren soll, wenn auf eine angedeutete Schaltfläche geklickt wird. Das ist Kunden nicht immer einfach zu vermitteln. Daher müssen die visuellen Komponenten zum Abstraktionslevel passen, das durch die Mockups transportiert werden soll. Das Tool Balsamiq, das später im Artikel vorgestellt wird, macht das beispielsweise sehr gut.Ein anderer Knackpunkt sind Mockups, die schon keine reinen UI-Mockups mehr sind. Damit ist gemeint, dass diese bereits etwas Funktionalität besitzen, um einen Eindruck von Workflows und generellen Funktionsabläufen der Domänenlogik zu vermitteln. Das geht in Richtung eines Klick-Prototyps, bei dem Elemente der Oberfläche angeklickt werden können, um zum Beispiel eine weitere, statische Mockup-Seite zu öffnen, einen fiktiven Dialog einzubinden oder andere, dynamische Inhalte zu laden und anzuzeigen. Das vermittelt ein deutlich besseres Gefühl dafür, wie etwas funktionieren soll. Hier besteht das gleiche Problem der richtigen Abstraktionsstufe wie schon weiter oben angesprochen: Ein Klick-Prototyp vermittelt schnell den Eindruck, dass schon alles funktioniert und „praktisch fertig“ ist. Hier dem Kunden zu erläutern, wie viel Aufwand noch bis zur fertigen Implementierung notwendig ist, kann schwierig sein.Die letzte Evolutionsstufe haben No- und Low-Code-Tools aufgetan. Damit lassen sich nicht nur einfache Mockups, Prototypen und Klick-Demos erstellen, sondern auch vollständige Anwendungen, die sich ausliefern beziehungsweise hosten lassen. Diese Variante ist in den letzten Jahren immer beliebter geworden, hat aber nur am Rande etwas mit den bekannten Mocking- und Wireframe-Tools zu tun.Die Lösung für die genannten Probleme besteht in der Auswahl der richtigen Werkzeuge sowie der korrekten Kommunikation mit den beteiligten Personenkreisen. Letzteres ist bereits schwer genug, aber auch die Auswahl eines geeigneten Tools ist nicht unbedingt einfach. Die Menge an Tools, Plattformen und Angeboten ist kaum zu überblicken. Der Artikel gibt daher einen Einblick in bestimmte Kategorien von Tools und zeigt einige Beispiele daraus.Was ist ein Mockup?
Ein Mockup kann als Weiterentwicklung eines Wireframes angesehen werden. Wenn ein Wireframe das grundsätzliche Konzept und die Umsetzbarkeit dargelegt hat, nutzt ein Mockup Farben, Typografien, Bilder und Grafiken, um das Wireframe zu verbessern. Diese Anpassungen verschieben ein solches Mockup deutlich stärker in Richtung endgültiges Design. Bei einem klassischen Mockup wird der statische Entwurf dargestellt. Mittlerweile verschiebt sich das aber immer mehr in Richtung Prototyping, da Mockups immer mehr Dynamik hinzugefügt wird. Mehrteilige Mockups dienen somit häufig als Basis für Prototypen, die zwischen Middle- bis High-Fidelity-Entwürfen alles abbilden können.
Kategorien und Funktionsumfang
Die vorgestellten Tools lassen sich grob in verschiedene Kategorien einsortieren. Oft schränkt das die Auswahl bereits sehr stark ein, manchmal ist es aber nicht so einfach, weil zum Beispiel ein Tool oder eine Plattform unterschiedliche Möglichkeiten bieten. Klassische Mockups-Tools werden als Desktop-Anwendung angeboten. Mittlerweile scheint die dominierende Form eine Web-App zu sein, zu der bei Bedarf eine native Anwendung für den Desktop angeboten wird. Reine mobile Apps existieren auch, insbesondere in Richtung Tablets und Smartphone gedacht. Auf Tablets wird sicherlich an Mockups gearbeitet, während Smartphones eher als Anzeige- oder Testgeräte dienen. Zudem gibt es wie üblich kostenfreie und kostenpflichtige Werkzeuge und alles dazwischen. Vor allem im Webumfeld haben sich Tools etabliert, die bis zu einem gewissen Punkt kostenfrei sind, in kollaborativen Szenarien dann aber schnell kostenpflichtig werden.Der Funktionsumfang variiert stark. Manche sind darauf spezialisiert, Desktop-Anwendungen oder Apps für das Web oder mobile Szenarien zu konzipieren. In der Regel lässt sich aber jede Art von Anwendung konzipieren. Die Frage ist, ob die notwendigen Assets wie Komponenten und Grafiken oder Icons zur Verfügung stehen. In manchen Fällen befinden sich spezielle Asset-Klassen hinter einer Paywall. Vorher einen Blick auf den Funktionsumfang und die Kosten zu werfen ist demnach ein notwendiger Schritt.Was sind Prototypen/Klick-Dummies?
Die Grenze zwischen Prototypen und Klick-Dummies ist schwer zu ziehen. Ein Klick-Dummy ist ein mindestens teilweise interaktionsfähiger Prototyp, beispielsweise einer Anwendung oder Website. Dieser Prototyp enthält bereits relevante Merkmale des fertigen Produkts und verdeutlicht Interaktionsabläufe und Funktionalitäten über die Möglichkeit, Komponenten anzuklicken, um zum Beispiel Feedback zu enthalten. Ein Klick-Dummy lässt sich zudem sinnvoll nutzen, um Informationen von der Zielgruppe zu erhalten. Interaktionen und Abläufe stellen sich ähnlich dem fertigen Produkt dar und sind deutlich dynamischer als bei Wireframes oder Mockups.
Pencil: Ein sinnvoller Einstieg
Pencil [1] macht den Anfang bei der Vorstellung der Werkzeuge und Plattformen. Das Tool ist Open Source und schon eine ganze Weile verfügbar. Es ist eine der wenigen reinen Desktop-Anwendungen, die zudem kostenfrei sind. Der Code ist auf GitHub [2] verfügbar und steht unter der GPL-2.0-Lizenz. Ein Update gab es für die Anwendung leider schon länger nicht mehr. Beim Schreiben dieses Artikels ist Version 3.1.0 vom Oktober 2019 die immer noch aktuelle.Das Programm ist lizenzfrei nutzbar und enthält alle wichtigen Funktionen, die zum Erstellen eines professionellen Mockups notwendig sind (siehe Bild 1). Auch bei Pencil gibt es eine riesige Auswahl an Vorlagen; insgesamt sind es über 300 vorgefertigte Formen. Auf der Website der Entwickler stehen bei Bedarf noch weitere zur Verfügung. Neben vielen Formen, Diagramm-Elementen und vektorbasierten Clipart-Icons gibt es die Möglichkeit, Diagramme und Ablaufschemata direkt im Programmfenster zu erstellen. Trotz des großen Funktionsumfangs findet man sich in der übersichtlichen Bedienoberfläche schnell zurecht. Der intuitive Aufbau und ein praktischer Drag-and-drop-Editor erlauben einen schnellen Einstieg. Die Vorlage bietet Steuerelemente mit einem Aussehen für Windows XP und diverse iOS-Varianten.
Ein Mockup-BeispielinPencil aufWindows(Bild 1)
Autor
Pencil ist wie erwähnt kostenfrei und Open Source, aufgrund der fehlenden Weiterentwicklung lässt sich aber schwer abschätzen, ob ein Einsatz in der Zukunft lohnend ist. Wenn Vorlagen für moderne Betriebssystem-Varianten fehlen, ist das auf Dauer ein Problem. Unter Windows 10 funktioniert die Desktop-Anwendung weiterhin problemlos. Wie lange das noch so sein wird, ist ebenfalls kaum vorhersehbar.
Adobe XD: Der Platzhirsch
Adobe hat auch im Bereich Mockups beziehungsweise Wireframes einiges investiert und mit Adobe XD [3] ein Produkt geschaffen, das seit seinem Release im Jahr 2016 eine breit aufgestellte Community hinter sich hat. Mit Adobe XD können wir Wireframes erstellen, mit dem Team zusammenarbeiten, Sitemaps, Flussdiagramme und Storyboards erstellen und interaktive Prototypen entwickeln. Das bedeutet, dass wir nicht nur die Wireframes an sich erstellen können, sondern auch den Arbeitsablauf zwischen den einzelnen Seiten, inklusive Übersichten wie Sitemaps. Mit dem Feature der interaktiven Prototypen sind Klick-Dummies gemeint, die sich ebenfalls mit Adobe XD umsetzen lassen.Ein Vorteil ist, dass es sich bei Adobe XD um ein All-in-one-Werkzeug für Wireframing und Prototyping handelt, das sich auch noch hervorragend für die Zusammenarbeit eignet (siehe Bild 2). Wer eine solche Kombi-Lösung sucht, wird hier fündig. Adobe XD enthält Werkzeuge für beispielsweise eine schnelle Skizze bis zu einem hochkomplexen Wireframe. Und das mit Optionen zur Erstellung von Interaktionen, damit sich der Benutzerfluss imitieren lässt. Das Werkzeug verfügt zudem über eine automatische Animationsfunktion und erleichtert das Überlagern von Bildern in 3D.
Die Oberflächevon Adobe XD(Bild 2)
Autor
Allerdings wird auch immer über den Preis diskutiert. Adobe XD ist nur eine Woche lang kostenlos. In dieser Zeit muss es gut evaluiert werden, weil danach keine Möglichkeit mehr besteht. Egal ob wir die Vollversion herunterladen oder zunächst die Testversion kostenlos ausprobieren, in jedem Fall ist ein Adobe-Cloud-Abonnement nötig, um alle Funktionen nutzen zu können. Das stößt vielen auf, da ein solcher Cloud-Zwang nicht für alle Anwendungsfälle geeignet ist.
Balsamiq: Bereits lange bekannt
Balsamiq ist ebenfalls schon eine ganze Weile verfügbar und hat sich schnell zu einem der beliebtesten Werkzeuge gemausert. Unter den Prototyping-Werkzeugen ist es bekannt wie ein bunter Hund und fokussiert sich auf Wireframing. Balsamiq stellt eine breite Palette an Basiselementen, Navigationselementen, Videobereichen, Formularen und weiteren Komponenten zur Verfügung. Diese werden simpel per Drag-and-drop auf die Zeichenfläche gezogen, um ein Wireframe umzusetzen. Eine Formatierung mit Farbe und Größe ist möglich, ebenso wie die Option, eigene Komponenten zu erstellen.Eine Kommentarfunktion ermöglicht Erläuterungen zu den einzelnen Elementen. Balsamiq gilt als einfach zu bedienen und punktet mit einer übersichtlichen Oberfläche und verständlicher Kategorisierung der einzelnen Komponenten (siehe Bild 3). Die Möglichkeiten, Interaktionen im Prototyp einzubauen, sind allerdings stark beschränkt. Mehrere Tabs miteinander zu verlinken ist bereits das Höchste an technischen Möglichkeiten. Das schlichte Design von Balsamiq wirkt wie von Hand gezeichnet. Es entsteht eine gute Übersicht ohne überflüssige Details und damit eine bestens geeignete Lösung für frühe Entwicklungsphasen. Es ist eine der Lösungen, die ein hohes Abstraktionslevel ermöglichen, damit es in Diskussionen eher um Aufbau und Workflow geht und nicht darum, ob die Schaltfläche jetzt rot oder blau sein soll.
Ein Mockupin Balsamiq(Bild 3)
Autor
Die Entwicklerfirma Balsamiq Studios bietet zwei Versionen des Tools an. Zum einen eine Desktop-Anwendung namens Balsamiq Wireframes for Desktop in Version 4.4.7 von Ende Februar 2022; das Tool steht als Download für Windows, Mac und Linux zur Verfügung. Daneben existiert eine cloudbasierte Webapplikation mit dem Namen BalsamiqCloud [4]. Nach einer Registrierung steht Nutzern zunächst für 30 Tage ein kostenfreier Test-Account zur Verfügung, danach werden Lizenzgebühren fällig, die je nach Anzahl der Nutzer und Projekte steigen. Mittlerweile existieren weitere Integrationen wie Balsamiq Wireframes für Google Drive, Confluence und Jira. Bei Balsamiq Wireframes für Jira [5] ist es möglich, Wireframes zu Atlassian-Jira-Issues hinzuzufügen. Zusätzlich zum Balsamiq-Wireframes-Editor bietet das Tool eine enge Integration mit Jira. Über die Schaltfläche Balsamiq Quick Add können wir direkt ein Mockup in einem Jira-Issue erstellen. Das Balsamiq-Projekt wird als Anhang zu einem Jira-Problem gespeichert und ist über das interaktive Problem-Panel leicht zu sehen und zu bearbeiten.
Moqups: Der (Fast-)Alleskönner
Moqups [6] ist ebenfalls eines der bekannteren Tools zum Erstellen von Mockups. Im Angebot ist eine reine Webanwendung mit einer schnellen und effektiven Möglichkeit, die genannten Mockups online im Browser zu erstellen. Die HTML5-Anwendung ist klar strukturiert und übersichtlich aufgebaut. Eine klare Struktur und ein einfach zu nutzender Drag-and-drop-Editor ermöglichen einen schnellen und unkomplizierten Start.Das Tool bietet des Weiteren eine breite Palette vorgefertigter Templates für UI-Komponenten an, die zudem individuell gestaltet werden können, Zusatzfunktionen und Designoptionen inbegriffen. Die Palette an vorhandenen Templates ist zwar kleiner als bei anderen Tools, die Anpassbarkeit macht das aber mehr als wett. Moqups unterstützt es, mehrere Seiten parallel zu erstellen und untereinander zu verlinken. Damit ist das Tool nicht nur zur Erstellung einfacher Mockups geeignet, sondern unterstützt auch Klick-Dummies. Bild 4 zeigt verschiedene Möglichkeiten des Tools.
Die Oberflächevon Moqups mit einem komplexeren Beispiel(Bild 4)
Autor
In der kostenlosen Version müssen wir einige Abstriche in Kauf nehmen. Eine fehlende Exportfunktion ist wohl die größte Einschränkung und gleichzeitig dringend notwendig, um mit einem Mockup-Tool produktiv arbeiten zu können. Um Mockups als PDF- oder JPG-Datei speichern zu können, ist ein Wechsel zur kostenpflichtigen Variante unumgänglich. Im Angebot sind drei verschiedene kostenpflichtige Pakete, wobei das Basispaket zehn Projekte erlaubt und insgesamt ein Gigabyte Speicherplatz bereitstellt.
Lucidchart: Mockups als Diagrammtyp
Die Plattform Lucidchart [7] ist nicht primär als Mocking- oder Wireframe-Tool an den Start gegangen. Es handelt sich vielmehr um eine Webanwendung, mit der sich verschiedene Diagramm-Typen unkompliziert und schnell erstellen lassen. Die cloudbasierte Plattform bietet eine intuitive Oberfläche an, mit der die unterschiedlichen Diagramme erstellt werden können. Integriert sind viele Vorlagen und Templates für ebendiese Diagramm-Typen und umfassende Möglichkeiten, um als Team gemeinsam an Diagrammen zu arbeiten. Des Weiteren sind viele Integrationen vorhanden, zum Beispiel in Produkte von Atlassian, Microsoft Office oder Slack.Was das mit Mockups zu tun hat? Lucidchart bietet Mockups als eigenen Diagramm-Typ an, sodass wir diese Form der Visualisierung im Online-Editor ebenso erstellen können wie zum Beispiel UML-Diagramme, Entity-Relationship-Modelle und Entscheidungsbäume. Was auf den ersten Blick seltsam erscheint, funktioniert in der Praxis erstaunlich gut. Wir öffnen ein neues Dokument oder eine der vielen vorgefertigten Mockup-Vorlagen. Anschließend wählen wir eine Bibliothek für die UI-Komponenten aus, beispielsweise für iOS, Android oder andere. Diese Features stehen allerdings nur Pro-, Team- und Enterprise-Accounts zur Verfügung. Wir haben demnach wieder eine Paywall für bestimmte Funktionen in der Plattform integriert. Wir können aber selbst Elemente erstellen und eigene Formen und Bilder importieren. Bild 5 zeigt ein Beispiel für verschiedene Mockups mit einem Workflow dazwischen. Diese Features haben erfreulicherweise alle Nutzer. In der kostenfreien Version können wir insgesamt drei Dokumente editieren, haben die Auswahl zwischen 100 Vorlagen und können Basisfunktionen bei der Teamzusammenarbeit und den Integrationen in andere Anwendungen nutzen.
Die Oberflächevon Lucidchart(Bild 5)
Autor
Axure: Mockup plus Klick-Prototyping
Das Tool Axure [8] bietet eine funktionale Mischung, wir können von einem einfachen Wireframe bis hin zu komplexen Prototypen vieles umsetzen. Dazu ist ein großer Funktionsumfang im Tool notwendig, was unweigerlich zu einer größeren Komplexität führt. Das Tool eignet sich dadurch eher für einen Enterprise-Einsatz und vielleicht nicht unbedingt für ein Hobby-Projekt. Eine gewisse Einarbeitungszeit ist sicherlich notwendig, um produktiv mit Axure arbeiten zu können.Axure bietet eine große Auswahl an vorgefertigten Elementen und die Möglichkeit, diese individuell zu konfigurieren. Außerdem lassen sich einfache Aktionen einbauen, beispielsweise Tooltipps oder eine Flyout-Navigation. Damit ist Axure eine gute Alternative zum sogenannten Klick-Dummy, der primär für frühe Usability-Tests zum Einsatz kommt. Zusätzlich sind eine Kommentarfunktion und viele Exportmöglichkeiten enthalten. Neben dem erstellten Mockup lassen sich die Kommentare, Fußnoten und sonstigen Erläuterungen zum Beispiel als PDF exportieren. Das ist eine gute Basis für Diskussionen über Mockups und deren Bestandteile (siehe Bild 6). Axure ermöglicht es darüber hinaus, dass mehrere Nutzer zeitgleich an einem Mockup arbeiten, ohne dass die Änderungen der anderen überschrieben werden.
Ein Beispiel-Mockupin Axure(Bild 6)
Autor
Bei Axure steht eine 30-tägige kostenfreie Testversion zur Verfügung. Kostenpflichtige Angebote existieren in verschiedenen Abstufungen. Erfreulich ist, dass die Nutzung von Axure für Studierende kostenlos ist.
Wireframe.cc: Das minimalistische Tool
Viele der bisher vorgestellten Werkzeuge und Plattformen sind recht komplex, da sie viele Funktionen unter einen Hut bringen möchten. Balsamiq ist dabei eine bekannte Ausnahme. Wireframe.cc bildet eine weitere Ausnahme in puncto Komplexität, wenn wir bei den Tools für Wireframes bleiben. Denn genau darauf liegt der Fokus.Wer die Website [9] des Tools öffnet, bemerkt sofort, warum es ein minimalistisches Werkzeug ist, insbesondere im Vergleich mit anderen Mockup- oder Wireframe-Tools. Bild 7 zeigt einen Screenshot der Oberfläche. Wireframe.cc ist für einen schnellen und unkomplizierten Einstieg geeignet. Wir können damit in kurzer Zeit klare und fokussierte Layouts erstellen. Das funktioniert, auch wenn das Tool keine große Auswahl an vorgefertigten Komponenten bietet. Diese einfache Erlernbarkeit wird mit einem geringen Funktionsumfang erkauft. Wer viele Templates oder komplexe UI-Komponenten erwartet, wird bei Wirerame.cc nicht fündig.
Ein Mockup-Beispiel, erstellt im minimalistischen Editor von Wireframe.cc(Bild 7)
Autor
Wenn wir ein Element erstellen möchten, ziehen wir auf dem Canvas einfach ein kleines Fenster auf. Darauf erscheint ein Kontextmenü, das es uns erlaubt, den Typ des Elements festzulegen, zum Beispiel ein Textfeld, ein Bildelement oder eine Aufzählung. Das ist unkompliziert und geht schnell. Über die Größe des Canvas können wir steuern, ob ein Wireframe für eine Desktop-Anwendung oder für mobile Endgeräte erstellt wird. Wireframe.cc ist gut geeignet, um Wireframes mit einem hohen Abstraktionsgrad zu erstellen. Keine unnötigen Ablenkungen, keine fancy Einstellungen, sondern ein Fenster mit einigen wenigen Elementen.Wireframe.cc steht in der Basisversion kostenlos zur Verfügung. In der Premiumversion gibt es einige Zusatzfeatures zu Interaktion, Protokoll, Arbeitsverläufen und einen Export. Die Testphase beträgt sieben Tage mit Paketpreisen, die mit der Nutzeranzahl und den benötigten Kapazitäten ansteigen.
Bubble: Funktionale Prototypen
Bubble.io [10] ist bereits seit 2012 auf dem Markt und hat in dieser Zeit eine bemerkenswerte Plattform geschaffen. Mit der Low-/No-Code-Plattform ist man in der Lage, auch komplexe Anwendungen zu erstellen, ohne eine Zeile Code zu schreiben. Neben kostenpflichtigen Paketen ist auch eine kostenfreie Version im Angebot, sodass wir die Features ausprobieren können. Mit Bubble lassen sich sowohl Web- als auch responsive mobile Apps erstellen. Die Plattform unterstützt dabei dynamische Inhalte, sodass es sich um vom Benutzer erstellte Inhalte oder Daten aus APIs handeln kann. Es bietet unter anderem anpassbare Logik, Benutzerverwaltung, wiederkehrende Aktionen und benutzerdefinierte Abfragen. Darüber hinaus stellt die Plattform viele verschiedene Integrationen, Datenexporte und Sicherheitsfunktionen bereit. Mit Bubble sind somit nicht nur Wegwerf-Prototypen, sondern vollständig funktionsfähige Anwendungen realisierbar.Bild 8 zeigt ein Beispiel der Oberfläche in einem Landingpage-Template. Der Editor ist über die Jahre sehr mächtig geworden, was aber auch eine gewisse Komplexität mit sich bringt. Die Lernkurve ist trotz des eingebauten und rundum erneuerten Assistenten nicht zu vernachlässigen. Wer einige wenige Wireframes oder Mockups bauen möchte und die dynamischen Funktionen dabei nicht braucht, ist mit anderen Tools wahrscheinlich schneller unterwegs.
Der recht umfangreicheund komplexe Editor von Bubble.io (Bild 8)
Autor
Tipps zur Auswahl des richtigen Werkzeugs
Eine wichtige Bedingung bei der Auswahl eines Tools für Wireframes, Mockups oder Prototypen ist, dass dieses Werkzeug eine deutliche Zeitersparnis mit sich bringt. Verständlicherweise nach dem Abzug der Einarbeitungszeit, aber wenn das genutzte Tool zu komplex ist, ist die Wahrscheinlichkeit hoch, dass im Lauf des Projekts keine oder nur wenige Wireframes beziehungsweise Mockups erstellt werden.Die angebotenen Features entscheiden ebenfalls über eine Auswahl. Online-Tools und Plattformen unterscheiden sich in vielerlei Hinsicht voneinander, zum Beispiel in Bezug auf Sperr-/Freigabefunktionen, Kompatibilität, Funktionen, Nutzung, Lernkurve und dergleichen. Wichtiges Kriterium für die Auswahl des passendsten Mockup-Tools ist eine Kombination aus Treue, Kosten und Komfort. Treue in dem Sinne, dass ein solches Tool vom Designer häufig genutzt werden muss, und das über verschiedene Stufen hinweg. Diese Personengruppe sollte demnach ein großes Mitspracherecht haben. Die Kosten sind verständlicherweise ebenfalls wichtig. Möchten wir nur ein paar Wireframes oder Mockups erstellen, muss es nicht das vollständige Cloud-Paket mit allen Funktionen sein. Beim Komfort entscheiden auch die vorgefertigten Vorlagen und intelligenten Funktionen mit, ob sich ein Tool gut den eigenen Bedürfnissen anpasst.Fazit
Es gibt eine praktisch unendliche Auswahl von Werkzeugen für Wireframes, Mockups und Klick-Dummies und alles dazwischen. Teilweise grenzen sich die Tools und Plattformen voneinander ab, indem nur einige dieser Themen unterstützt werden. Manche erlauben es explizit, alles damit umzusetzen und zwischen den Varianten fast beliebig zu wechseln.Vor dem Einsatz eines Tools oder einer Plattform ist es gut zu überlegen, was wir damit erreichen möchten. Wer nur ein paar Wireframes für zwischendurch braucht, muss nicht die kostenpflichtige Plattform wählen, und wer weiß, dass das Projekt über Jahre läuft und nicht nur Wireframes benötigt, ist vielleicht mit einem der größeren Anbieter besser bedient.Weitere erwähnenswerte Tools und Plattformen – neben den hier vorgestellten – sind Draw.io, UX Pin, Figma, Miro, MockFlow und Creately. UX Pin geht beispielsweise in die Richtung von Bubble, und Figma ist bei Designern sehr beliebt. Wer noch unentschlossen ist, sollte auch diese Tools in die Auswahl mit einbeziehen.Meine persönliche Empfehlung ist Balsamiq oder Adobe XD. Beide Tools setzen die notwendigen Funktionen sehr gut um und lassen sich in unterschiedlich umfangreichen und komplexen Projekten einsetzen. In beiden Fällen habe ich sehr gute Erfahrungen damit gemacht.Fussnoten
- Die Website zu Pencil, http://pencil.evolus.vn/
- Das Repository zu Pencil auf GitHub, https://github.com/evolus/pencil
- Die Website zu Adobe XD, http://www.adobe.com/products/xd.html
- Die Website zu Balsamiq, https://balsamiq.com/wireframes/cloud/
- Die Jira-Integration von Balsamiq, https://balsamiq.com/wireframes/jira/
- Die Website zu Moqups, https://moqups.com/de/
- Die Website zu Mockups bei Lucidchart, http://www.lucidchart.com/pages/de/produkt
- Die Website zu Mockups bei Axure, http://www.axure.com/a/ui-mockup-tool
- Die Website zu Wireframe.cc, https://wireframe.cc
- Die Website zu bubble.io, https://bubble.io
