Funktionieren Screendesign oder die Interaktion in der App? Solche Fragen sollten möglichst früh innerhalb der Entwicklung beantwortet werden. Je früher Änderungen vorgenommen werden, desto einfacher sind sie noch möglich. Um den Bedarf festzustellen, gibt es Prototypen - diese decken Schwachpunkte gleich zu Projektbeginn auf. Verbesserungen und Tests in diesem Stadium verschieben den eigentlichen Programmierungsstart natürlich etwas nach hinten, sie sind jedoch "hinten heraus" Gold wert. Beispielsweise lassen sich Nutzertests leicht und kostengünstig bewerkstelligen: Das Feedback von Kunden und Kollegen einzuholen, solange es noch etwas wert ist, hat durchaus Charme und kann einem UI (User Interface) nur zum Vorteil gereichen.

Drahtgitter oder Simulation?

Es gibt viele Möglichkeiten fürs Prototyping - im Prinzip reichen Skizzen auf Papier, die erahnen lassen, wo Bilder, Texte und Buttons später stehen. Es gibt aber auch Prototypen, die sich kaum vom finalen Produkt unterscheiden - es fehlt vielleicht nur noch die Datenbank dahinter. Die erste Frage nach der Entscheidung pro Protopyen: Welcher Ansatz ist der richtige? Die Antwort lautet einmal mehr: "Kommt ganz darauf an".

Wie hoch der Aufwand beim Erstellen des Prototypen ist, wird mit oft mit dem Fachbegriff "Fidelity" beschrieben. Fidelity beschreibt den Realitätsgrad des Entwurfs und kann in verschiedenen Bereichen variieren.

• Visuell: Möglich ist eine schlanke Drahtgitterskizze - es geht hin bis zu Farben, echten Bedienelementen und Fotos - also kompletten Screens im finalen Erscheinungsbild.

• Funktional: Von statischen Screens, völlig ohne Interaktivität, bis hin zu funktionierenden Prototypen, die auf Eingaben reagieren.

• Inhaltlich: Von Blindtexten oder Platzhaltern, die Text skizzieren, bis hin

• zu echten Inhalten.

Den richtigen Realitätsgrad zu nutzen ist wichtig für die Effizienz beim Prototyping. Manchmal kann die Skizze perfekt sein, an anderer Stelle ist sie so abstrakt, dass nur ein Prototyp mit Funktion eine Vorstellung davon geben kann, wie sich die Anwendung später anfühlen könnte. Daher gibt es keine pauschale Empfehlung zum Einsatz der verschiedenen Methoden. Eine Unterscheidung zwischen Skizze und Simulation ist genauso wenig nötig - es lässt sich durchaus dem Ziel entsprechend variieren. Einzige Bedingung sollte sein, den Aufwand so gering wie möglich zu halten. Eine Standard-Benutzerregistrierung braucht sicher nicht ausgetestet zu werden - eine Funktion, die es so noch kaum gegeben hat, hingegen schon.

Moderne Prototyping-Software hilft den Aufwand gering zu halten. Einige Lösungen zeichnen Drahtgittermodelle, die als Grundlage für ein späteres HTML-Dokument dienen. Andere erlauben das Entwerfen von Klappmenüs, die sich exportieren lassen und als Grafiken in der fertiggestellten App dienen. Es lohnt sich, einen Blick auf die vorgestellten Prototyping-Programme zu werfen.

Balsamiq Mockups: Schnell und simpel

Wer simple, effiziente Software ohne Schnickschnack und Ballast mag, ist hier genau richtig. Mockups begeistert mit seiner einsteigerfreundlichen und intuitiven Oberfläche, die sofort dazu einlädt, eine Idee in die Tat umzusetzen. Fast alles beim "Zeichnen" lässt sich mit Tastaturbefehlen erledigen. Mit einer "Quick Add"-Funktion ist die Software schneller als Stift und Papier. In Sekunden sind die fertigen Interface-Elemente wie Buttons oder Layout-Elemente auf die Zeichenfläche eingefügt, angepasst und an den richtigen Platz gerückt. Alles bleibt editierbar, was eine spätere Weiterentwicklung jederzeit einfach macht.

Neben der Geschwindigkeit ist die Flexibilität ein Bonus: Die schlanke App auf Basis von Adobe Air läuft entweder direkt im Browser oder offline als Desktop-Programm. Beides kann kostenlos ausprobiert, und anschließend gemietet oder per Download gekauft werden. Details gibt es unter http://www.balsamiq.com/buy. Die Download-Vollversion erreicht mit 79 Dollar längst nicht das Preisniveau einer üblichen Enterprise-Software und ist auch für kleine Firmen erschwinglich.

Fazit: Für den schnellen Entwurf ist Balsamiq Mockups unschlagbar. Wer mehr braucht, sollte aber zu etwas anderem greifen.

Axure RP: Guter Allrounder von Low- bis High-Fidelity

Ein Klassiker für Konzeption und Wireframing ist Axure RP. Die Lösung ist der Allrounder für Drahtgitterkonzepte und bietet rundherum viele weitere Möglichkeiten für Websites und Apps.

Anwender klicken sich per Drag-and-drop mit simplen Kästen und Platzhaltern ihre Modelle zusammen. Sie lassen sich je nach Bedarf aufpolieren - jeder Platzhalter lässt sich mit Farben, Verläufen, Bildern oder halbtransparenten Füllungen stufenweise verfeinern. Die Handhabung ist ziemlich frei - es gibt keinen vordefinierten Weg. Wer will, fügt bereits dem Prototypen Interaktivität, Animation und bedingungsabhängige Applikationslogik bei. Alles lässt sich beispielsweise in HTML exportieren und im späteren Live-Projekt weiterverwenden. So geht keine Arbeit verloren.

Fazit: Axure RP lässt kaum Wünsche offen und deckt Prototypen in jedem Realitätsgrad und für jeden Anwendungsfall ab. Ein weiterer Vorteil ist, dass Axure schon weit verbreitet ist - das hilft in der Zusammenarbeit mit externen Konzeptern und anderen Teammitgliedern.

Proto.io: Mobile Prototypen direkt im Browser

Proto.io konzentriert sich komplett auf mobile Applikationen und läuft direkt im Webbrowser. Beim Anlegen eines Projekts lässt sich das Endgerät auswählen - unterstützt werden alle gängigen Devices wie iPhone, iPad, Android-Smartphones, Tablets, Windows-8-Geräte sowie praktisch jedes Gerät mit einem Screen wie beispielsweise Smart-TVs. Vorgefertigte, angepasste UI-Komponenten wie unter anderem Werkzeugleisten lassen sich per Drag-and-Drop einfügen. Ebenso einfach gelingt das Testen, sogar wenn Kunden und verteilte Teams im Spiel sind. Prototypen können auf dem Gerät getestet werden, indem der Entwickler einfach eine Prototypen-URL verschickt, die die Teammitglieder dann im mobilen Browser auf ihren Geräten aufrufen. Proto.io gibt es als Browsersoftware nur als Webdienst. Kostenlos ist er nur für Einzelnutzer, Team zahlen ab 24 Dollar im Monat. Alle Abos gibt es für 15 Tage auch als Gratis-Demos.

Fazit: Mit Proto.io lässt sich volle Funktionalität für Prototypen in kurzer Zeit erreichen. Zwar ist die Software auf mobile Apps beschränkt, für diesen Zweck aber sehr empfehlenswert, da es auch Tests auf den tatsächlichen Endgeräten erlaubt.

Microsoft Sketchflow: Prototypen mit Flussdiagramm

Schon 2009 wurde SketchFlow als Teil von Microsoft Expression 3 vorgestellt, um damit Multimedia-Applikationen zu entwerfen. Zwei Arten von SketchFlow-Projekten gibt es: Client-basierte Applikationen, genannt WPF (Windows Presentation Foundation) und Silverlight Apps, die direkt im Browser mit dem gleichnamigen Plug-in laufen. Beide bieten die gleichen Prototyping-Funktionen, aber verschiedene Asset-Bibliotheken.

Das "Application Flow"-Bedienfeld hilft dabei, ein visuelles Flussdiagramm der Anwendung zu skizzieren. Hier wird einfach die Abfolge der Applikation gezeigt, also zum Beispiel "Log-In" und dann "Registrierung". Jeder Kasten zeigt einen Screen; durch das Ziehen von Pfeilen lassen sich interaktive Elemente einfügen und später mit Behaviours verfeinern. Das Testen läuft im SketchFlow-Player im Browser. Ein fertiger Prototyp kann damit Kollegen gezeigt oder auch mit einem Word-Export, der die Screens und ein Storyboard automatisch erzeugt, auch weniger technisch versierten Kunden dargestellt werden.

Fazit: Sketchflow ist ein sehr gutes, professionelles Prototyping-Tool. Leider ist es in seinen Einsatzmöglichkeiten begrenzt, da es nur unter Windows läuft und auf das Silverlight-Plug-in aufbaut.

Adobe Edge Reflow: Perfekt für Responsive Webdesign

Heutiges Prototyping stellt spezielle Anforderungen, die vor einigen Jahren noch kaum beachtet wurden. Beim Layouten einer Website geht es nicht mehr nur darum, wie Elemente sich auf einem großen Screen arrangieren. Die Frage ist auch, wie sie darauf reagieren, wenn er kleiner wird - zum Beispiel die gleiche Seite auf einem Smartphone oder Tablet angezeigt wird. Adobe hat für Responsive Webdesign ein komplett neues Programm entwickelt. Mit Edge Reflow CC gelingt es sehr schnell, die Layoutbereiche zunächst als simple Boxen zu skizzieren. Es lassen sich verschiedene "Breakpoints" (Pixelbreiten) definieren, ab denen die Inhalte reagieren, sich also neu anordnen. Beispielsweise geht es darum, dass Logos und Textboxen auf dem Smartphone unter- statt nebeneinander erscheinen. Wer möchte, kann seine Layouts komplett mit Typografie, Grafiken etc. stylen und im Browser testen. Edge Reflow ist derzeit noch im Beta-Status, dürfte aber bald final erscheinen und kann im Rahmen eines Creative-Cloud-Abos gemietet werden.

Fazit: Edge Reflow ist die richtige Antwort auf Responsive Design, das in letzter Zeit die Aufmerksamkeit bekommt, die es verdient. Damit dürfte es eine wichtige Rolle im Reigen der Prototyping-Tools übernehmen. (sh)