Nachdem im ersten Teil der Serie ein Überblick über Tools für die Produktentwicklung von Internet- und Mobilapplikationen und der Ansatz des Paper-Prototyping vorgestellt wurde, ging es im zweiten Teil um die verschiedenen Tools für digitales Wireframing in der Produktentwicklung.
Im dritten und letzten Teil der Serie geht es nun um die Verbindung von Paper-Prototyping mit digitalen Wireframing-Tools.
Produktentwicklung: Verbindung von Paper-Prototyping mit digitalen Wireframing-Tools
Interessant wird es, wenn das Paper-Prototyping nun mit digitalen Wireframing-Tools verknüpft wird. Damit lassen sich die Vorteile beider Methoden miteinander verbinden: einerseits die Geschwindigkeit und stilistische Freiheit des Paper-Prototyping, andererseits die schnelle Veränderbarkeit und Reproduzierbarkeit sowie die Möglichkeit, die Ergebnisse elektronisch mit anderen zu teilen.
Dies wird beispielhaft im Folgenden an Hand der kostenlosen iPhone App PoP (iTunes-Link zur „Prototyping on Paper“-App) dargestellt. Nach Download der App (erhältlich für iOS und Android – Link zu google Play) ist der Ablauf wie folgt:
- Skizzieren der Papier-Prototypen (Wireframes)
- Fotografieren der Wireframes mit der in der App eingebauten Kamerafunktion
- Simulation der Workflows durch Festlegen von clickbaren Flächen und Definition des Ablaufs durch die einzelnen Wireframes (Click-Dummy)
- Sharing des erstellten Prototyps und Einholen von Feedback
Interessant ist die PoP-App vor allem deshalb, weil sie die Möglichkeiten von Paper-Prototyping mit den digitalen Wireframing-Tools verbinden kann. Neben dem Aufnehmen von Photos besteht nämlich auch die Möglichkeit, Screenshots oder Bilder aus der iPhone Camera-Roll in die PoP-App hochzuladen. Somit lassen sich die folgenden Elemente miteinander in einem funktionierenden Click-Dummy kombinieren.
Das Vorgehen ist dabei wie folgt:
- Zeichnungen auf Papier (Papier-Prototypen)
- Screenshots von bestehenden Apps (wenn z.B. Teile des User Interface gleich bleiben sollen)
- Wireframes aus bereits vorhandenen Tools als JPEG oder PNG
Dazu müssen alle diese Visuals lokal auf dem iPhone vorhanden sein, um dann aus der PoP-App heraus den Click-Dummy zu gestalten und zu sharen – vom PC können größere Dateimengen komfortabel mittels Transfer Apps für iOS wie WiFi-Transfer (AppStore Link) oder der Pics2Phone App (AppStore Link) von DSP-Partners in das Photoalbum des iPhone heruntergeladen werden.
Beispiel: Produktentwicklung mit Paper-Prototyping und digitalen Wireframing-Tools
Am Beispiel der Entwicklung der Pics2Phone-App von DSP-Partners wird die Verbindung von Paper-Prototyping und digitalen Tools in der PoP-App deutlich.
- Im ersten Schritt wird der Prototyp der App mit den wesentlichen Screens auf das iPhone Template gezeichnet
- Jeder einzelne Screen wird mit der PoP-App abfotografiert, oder bestehende Screenshots in die App hochgeladen
- Die Screens werden in der PoP-App miteinander zu einem Screenflow verlinkt
- Der Click-Dummy kann nun per eMail, facebook etc. geshared werden
Das Beispiel zeigt, dass es die PoP-App auch ermöglicht, fertige Screenshots in den Click-Dummy zu integrieren. Dies ist dann hilfreich, wenn z.B. externe Screens von nativen iOS-Apps wie eMail oder Dropbox verwendet werden sollen. Interessant ist der Mix aus handschriftlich gescribbelten und bestehenden Screens auch bei der Weiterentwicklung bestehender Apps, da hier ganz gezielt einige Screens neu erstellt und zum Testen in den Ablauf der bestehenden Screens integriert werden können. Natürlich lassen sich auf diese Weise auch von Designern erstellte Screens (z.B. aus Photoshop) oder mit Wire-Framing Tools (siehe vorne) erstellte Mock-ups integrieren.
Mit der integrierten Sharing-Funktionalität können die erzeugten Click-dummies von Kunden und Kollegen im Browser betrachtet, benutzt und kommentiert werden.
Fazit
Es lohnt sich, das Thema (Paper)-Prototyping systematisch anzugehen. Dabei sollten zum einen die eigenen Produktentwicklungsprozesse und persönlichen Arbeitsweisen der Teammitglieder berücksichtigt und zum anderen die verfügbaren Tools und Methoden dagegen abgeglichen werden. Ein Ausprobieren verschiedener Tools ist sehr empfehlenswert. Der richtige Mix aus Prozessen und Tools, abgestimmt auf die Arbeitsweisen der Teammitglieder kann dabei sowohl das Produktergebnis deutlich verbessern als auch hohe Effizienzgewinne erzielen.
Dies ist der letzte Artikel der dreiteiligen Serie zum Thema Paper-Prototyping in der Produktentwicklung.
1. Teil – Einführung und Paper Prototyping
2. Teil – Digitale Wireframing-Tools
3. Teil – Verbindung von Paper-Prototyping mit digitalen Wireframing-Tools, Fazit
Kommentar hinterlassen