Wenn aus einem kleinen Konzept hundert Wireframes werden und die wiederum schnell noch zum Prototyp, stellt sich manchmal zu spät die Frage: Welches Tool wäre das richtige gewesen? Im Arbeitsalltag prüfen wir häufig, mit welchen Werkzeugen wir Konzepte erstellen. Das hängt natürlich (wie immer) von vielen Faktoren ab; wir entscheiden daher nicht in jedem Projekt anhand der gleichen Kriterien. Zum einen entscheidet der Kontext: Wird das Konzept zum Beispiel direkt umgesetzt? Werden Spezifikationen geschrieben? Gestalten wir das Konzept visuell oder übergeben wir es direkt zum Kunden? Entscheidend kann auch sein, ob ein Klick-Prototyp gebaut werden soll, ein Usability Test stattfindet oder animierte Übergänge zwischen den einzelnen Wireframes/Screens für das Projekt von Anfang an hoch priorisiert sind. Zum anderen haben Kunden auch Vorlieben für Tools die sie selbst nutzen.
Unterm Strich gibt es also keine generelle Empfehlung für ein bestimmtes Tool. Ich möchte aber aufschlüsseln, welche Vor- und Nachteile ich persönlich in einigen der gängigen Tools sehe, um anderen Designern ihre Entscheidung zu erleichtern.
In den meisten meiner Projekte ist es mir am wichtigsten, schnell Konzepte zu erstellen, die ein konkretes Nutzungsszenario abbilden und dabei den generellen Aufbau der Software, das Navigations- und Interaktionskonzept zeigen – und nicht die visuelle Gestaltung. Unsere Erfahrung zeigt, dass Kunden bei zu realistischen Wireframes häufig mit einer falschen Erwartungshaltung in die Diskussion gehen – dann diskutieren wir in Reviews über die Schriftart/-größe oder die Hintergrundfarbe statt über den Interaktionsfluss durch das Nutzungsszenario. In dieser Hinsicht hat das gute alte Balsamiq aus meiner Sicht immer noch einen großen Pluspunkt durch den handgezeichneten Stil des Standard-UI-Kits.
Dienste in der Cloud wollen manche Unternehmen aus datenschutzrechtlichen Gründen nicht nutzen, so dass Tools, die ohne Cloud auskommen, besondere Bedeutung zufällt. Daher betrachte ich neben dem klassischen Scribbeln auf Papier oder am Whiteboard die Programme Balsamiq Mockups, Adobe XD und PowerPoint. Außen vor gelassen habe ich unter anderem Sketch, weil es MacOS-exklusiv ist, ich aber auf Windows arbeite. Zudem beschränke ich mich auf die Konzeptionsphase zu Beginn eines Projekts und klammere die spätere Zusammenarbeit mit visuellen Designern zunächst aus – je nach Projekt ist aber ein Tool sinnvoll, das es erlaubt, die Ergebnisse aus der Konzeptphase als Assets weiter zu verwenden.
Pro Tool werde ich ein Beispiel-Konzept zeigen. Für eine gewisse Vergleichbarkeit verwende ich jeweils die selbe User Story:
Immer wenn Paula, die Schichtleiterin, einen Wartungsbericht per Mail erhält, möchte sie diesen zentral bereitstellen, damit sich ihre Kollegen in der nächsten Schicht über den aktuellen Stand informieren können.
Dieses begrenzte „Datei hochladen“-Szenario, soll nicht vom eigentlichen Fokus – der Wahl des Werkzeugs – ablenken. Los gehts!
Stift und Papier
Nein! Wirklich? Ja, gerade zu Beginn der Konzeptphase finde ich es wirklich sinnvoll, mich selbst zu begrenzen indem ich von allen fancy Tools Abstand nehme. In Workshops geht nichts über ein Whiteboard, aber auch in der nächsten Phase der ersten Reinzeichnung bietet sich diese Methode an, um grobe Denkfehler aufzudecken und beispielsweise ein übergreifendes Navigationskonzept und die generelle Platzaufteilung zu prüfen. Schwieriger und ineffizienter werden Stift und Papier, wenn es ins Detail geht und kleine und größere Änderungen auf ganzen Papierstapeln nachgezogen werden müssten.
Die Umsetzung von Paulas User Story mit Stift und Papier kann zu Beginn beispielsweise so aussehen:
Vorteile (mehr dazu im Blogartikel meines Kollegen Jonas Laux):
• Geschwindigkeit: schnell Ideen kommunizieren.
• Grobkonzepte sofort durchdenken und ihre Sinnhaftigkeit prüfen.
• Einfache Werkzeuge wie Stift und Papier fördern durch ihre Zugänglichkeit Zusammenarbeit in gemeinsamen Besprechungen.
• Low-Fi-Charakter: Als Konzepterin komme ich nicht in Versuchung, detailgetreue Screens abzuliefern; die Kundin kommt nicht auf die Idee, Schriftart oder Abstände zu kritisieren und kann sich voll auf den User Flow konzentrieren.
Nachteile:
• Für detaillierte Konzepte sind Papierskizzen nicht sinnvoll, da Änderungen recht aufwendig sind.
• Der Teufel steckt im Detail: Viele Probleme eines Interaktionskonzepts werden erst beim detaillierten Ausarbeiten sichtbar, das beim Skizzieren eher ausgeklammert wird.
Balsamiq Mockups
Balsamiq habe ich in den letzten Jahren für die meisten Projekte verwendet. Mit dem Programm lassen sich schnell Wireflows – also eine Abfolge von Wireframes – bauen, die ein gutes Gefühl für Größenverhältnisse, Platzbedarf und die Interaktion im fertigen Interface geben. Probleme macht Balsamiq jedoch bei komplexen Szenarien und bei nachträglichen Änderungen – je nachdem wie oder ob man Master angelegt hat, sind Änderungen schnell eingepflegt oder bedeuten doch wieder manuellen Aufwand auf jedem einzelnen Wireframe, selbst wenn man Master verwendet. Der Wireflow durch die User Story ist relativ schnell erstellt:
Vorteile:
• Handgezeichneter Stil – der Wireframe ist als solcher gut erkennbar.
• Grundlayouts lassen sich schnell und fokussiert erstellen.
• Control- und Icon-Bibliothek: Mit ein bisschen Erfahrung können per Shortcut und mit Eingabe eines Keywords innerhalb von Sekunden ein passendes UI-Element oder ein sprechendes (Platzhalter-)Symbol eingefügt werden.
• Master lassen sich anlegen und einzeln editieren.
Nachteile:
• Die Übersichtlichkeit und Geschwindigkeit leidet bei vielen Wireframes in einer Datei spürbar.
• Spezifizieren ist nicht möglich, Notizen liegen auf dem Wireframe „im Weg rum“.
• Balsamiq exportiert nur Bilder, Texte im PDF sind nicht durchsuchbar.
• Früher oder später muss bei den Mastern getrickst werden (z.B. Bereiche „ausblenden“ indem man sie mit weißen Flächen überdeckt), weil sie nicht sehr flexibel sind.
PowerPoint
Es klingt eher wie eine Methode aus den 90ern, aber tatsächlich hat PowerPoint für das Erstellen von Konzepten mittlerweile einiges zu bieten. Ich habe damit in jüngster Zeit in zwei Projekten gearbeitet und kann sagen: Es gibt böse Nachteile, aber auch sehr nette Vorteile, die mich milde stimmen. UI-Kits mit gängigen Controls und Icons sind durch Zukauf erhältlich. Die normalen Folienmaster können sehr gut für das Grundlayout eingesetzt werden, sodass sich Änderungen, die alle Screens betreffen, recht gut verwalten lassen. Formen und Gestaltungsformen sind im Großen und Ganzen schlicht und verlocken nicht, sich in Details zu verlieren:
Vorteile:
• Master in einem separaten Modus anzupassen und genau zu wissen, wo sie welche Auswirkungen haben, ist beruhigend angenehm. Wer es von Beginn an richtig angeht, kann mit wenigen Klicks Änderungen auf vielen Screens nachziehen.
• Wunderschöne Animationen brauchen kaum Animationskenntnisse – PowerPoint übernimmt die Arbeit mit dem Folienübergang „Morph“, sobald man verstanden hat, wie man ihn einsetzt. Dadurch können Übergänge zwischen UI-Zuständen schon in einer frühen Konzeptphase verdeutlicht werden, um z.B. die Aufmerksamkeit des Nutzers zu lenken.
• Jeder kennt PowerPoint – auch Kunden können die Dateien ohne Probleme öffnen, kollaboratives Arbeiten ist möglich.
• Notizen lassen sich gut im Notizfeld unterbringen und können später als „Notizenseiten“-PDF für die Konzept-Spezifikation genutzt werden.
Nachteile:
• Das Programm ist nicht primär für das Konzepten ausgelegt, das spürt man immer wieder schmerzlich, z.B. bei Shortcuts und beim Verlinken von Seiten (möglich, aber sehr umständlich).
• Animationen von Seitenübergängen sollten eher exemplarisch eingesetzt werden, da Änderungen viel Aufwand mit sich bringen.
• Gesamte Screen-Übergänge können nur animiert werden, wenn sie nicht auf Mastern beruhen.
• Auch bei PowerPoint lässt die Übersichtlichkeit in Konzepten mit vielen Wireframes zu wünschen übrig. Immerhin helfen Abschnittsüberschriften um Inhalte zu gliedern und aus-/einzublenden.
Adobe XD
Adobe XD habe ich erst vor kurzem das erste Mal verwendet und daher noch wenig Erfahrungswerte. Eine ausführlichere Betrachtung von Adobe XD aus der Sicht eines visuellen Designers hat mein Kollege Roger Towae vorgenommen. Mein erster Eindruck: das Tool ist noch etwas unfertig, gerade für reine Konzeptarbeit. Einiges ist sehr schön umgesetzt, allem voran die Prototyping-Funktionalität. Größtes Manko ist aber, dass sich viele Funktionen nur nutzen lassen, wenn die Daten in der Cloud gespeichert/veröffentlicht werden – das ist in vielen unserer Kundenprojekte nicht möglich. Die Anmutung der Screens kann der von PowerPoint entsprechen, allerdings gibt es viel mehr Möglichkeiten der freien Gestaltung, die für die Konzeptphase nicht relevant sind, aber bei der Weiterverwendung der Datei im visuellen Design von Vorteil sein können:Vorteile:
• Das Programm hilft bei der Ausrichtung von Elementen und dem Anlegen von Wiederholungsmustern, so dass Wireframes schnell ordentlich gebaut sind.
• Wireframes lassen sich schnell und angenehm miteinander verlinken, Prototypen sind im Handumdrehen erstellt.
• Der Arbeitsbereich kann übersichtlich eingerichtet werden, indem verwandte Wireframes nahe beieinander und andere Konzepte weiter entfernt platziert werden, zum Beispiel in unterschiedlichen Spalten:
Nachteile:
• Wichtige Funktionen fehlen noch. Master lassen sich zwar anlegen, aber nicht praktikabel verwenden. Soll der Button mal etwas kleiner sein, ist er sofort überall kleiner – noch nicht einmal die Farbe lässt sich individuell an einer Stelle ändern. Sicherlich aber etwas, was in künftigen Releases kommen wird.
• Es gibt weder Standard-UI-Kits noch Icon-Bibliotheken. Stattdessen kann man XD-Dateien mit solchen Elementen herunterladen und sie in die eigene Datei kopieren – das ist aber mühselig und zeitaufwendig. Diese Dateien lassen sich auch nicht per Stichwort durchsuchen.
• Die bereits angesprochene Cloud-Anbindung führt dazu, dass wir viele Funktionen nicht in Kundenprojekten nutzen können.
Fazit
Wie eingangs bereits erwähnt, hängt das passende Werkzeug immer von der Aufgabe ab. Für die Ideenfindung und ein erstes Durchdenken eignen sich Stift und Papier. Sollen Wireframes entstehen, die einen Ablauf (statisch) zeigen, so würde ich nach wie vor Balsamiq als geeignetes Tool empfehlen. Geht es mehr um Screen-Übergänge, kollaboratives Arbeiten mit dem Kunden und die Möglichkeit, alle Designentscheidungen festzuhalten, ist PowerPoint sinnvoll. Adobe XD ist vielversprechend, die Prototypenerstellung macht hier richtig Spaß. Auch komplexe Konzepte können relativ übersichtlich dargestellt werden. Essentielle Funktionen für das Erstellen eines „Low Fi Konzepts“ werden hoffentlich bald folgen – wenn dem so ist, sehe ich in Adobe XD großes Potential, nicht zuletzt auch, weil die Weiterentwicklung vom Konzept zum visuellen Design im selben Tool stattfinden könnte. Es bleibt also spannend im Tool-Universum für Konzepter.
Wir haben Ihr Interesse geweckt? Schauen Sie sich unsere Leistungen an!