Drahtgitter, Flussdiagramm, High Fidelity
Die besten Prototyping-Tools für Websites und Apps
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
In Sekunden baut man mit Tastatur, dem „Quick Add“-Menü und vorgefertigten Elementen Prototypen mit Mockups - schneller als auf Papier. - Axure RP
Axure RP lässt sich sehr einfach mit Drag-and-Drop bedienen. Es ist aber auch möglich, Applikationslogik und Interaktivität einzubauen. - Axure RP
Axure RP kommt mit einer Testumgebung für voll funktionsfähige Prototypen, die realistisch im Endgerät oder im Webbrowser dargestellt werden. Sehr anschaulich ist dies zum Beispiel für die Kunden. - Proto.io
Der proto.io Editor läuft direkt im Webbrowser, was einige Vorteile bringt. - Microsoft Sketchflow
Sketchflow kann Flussdiagramme von Applikationen zeichnen... - Microsoft Sketchflow
... und in testfähige Prototypen umwandeln, die mit Silverlight-Plug-in weitergereicht werden. - Adobe Edge Reflow
In Edge Reflow lassen sich Breakpoints für verschiedene Bildschirmgrößen definieren. - Adobe Edge Reflow
Wie sich der Inhalt neu arrangiert, kann direkt im Programm getestet werden.
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.