Drahtgitter, Flussdiagramm, High Fidelity

Die besten Prototyping-Tools für Websites und Apps

Prototypen helfen Ideen auszuprobieren und ohne Aufwand zu verbessern, bevor die Programmierarbeit losgeht. Natürlich würden Papier und Bleistift reichen, doch noch einfacher geht es mit speziellen Programmen und Webservices. Wir stellen die wichtigsten vor.

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.