English version
The presentation provides an overview of paper-prototyping and digital wireframing tools for the development of webservices and Apps. It compares the different tools and lists pros and cons.
-> Learn more about DSP-Partners publications on Product Management at:
http://bit.ly/DSP-PM
Deutsche Version
Diese Präsentation gibt einen Überblick über Tools für Paper-Prototyping und Digital Wireframing in der Entwicklung von Webservices und Smartphone-Apps und stellt die Vor- und Nachteile der verschiedenen Methoden gegenüber.
-> Weitere Publikationen von DSP-Partners zum Thema Produktmanagement unter: http://bit.ly/DSP-PM
1. Tools für Paper-Prototyping und Wireframing
in der Produktentwicklung für Web & Mobile
Stefan Behrendt, DSP-Partners
Oktober 2013
Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
2. Inhalt
Methoden zur Erstellung von Produktkonzepten
- Visuelle vs. textbasierte Ansätze
- Vor- und Nachteile
Paper Prototyping Tools
Standard Grafik-Programme vs. Wireframing-Tools
- Vor- und Nachteile
Digitale Wireframing-Tools
- Übersicht
- Produkte und Preise
3. Erstellung von Produktkonzepten .1
Visuelle Ansätze
+
Vorteile
Paper-Prototyping
Textbasierte Ansätze
Digitale Wireframing-Tools
Schnelle, kostengünstige Erstellung
von Ideenskizzen
Visueller Ansatz der die Produkte
anfassbar macht
Schnelle Feedbackzyklen im Team
und Kunden
Hilft es, dem Kunden, der
Geschäftsführung, dem Marketing
etc. die Produktidee visuell zu
vermitteln
Haptischer Ansatz, der den
Bedürfnissen von kreativen
Produktmanagern und Designern
entgegenkommt
Einfachere Zusammenarbeit für
Teams an einem Ort
Fördert die Interaktion mit den
Kunden
Verlinkungen in den Tools erlauben
es, ganze Workflows zu simulieren
Erlaubt es, die Ergebnisse
elektronisch zu verbreiten und
Feedback einzuholen – auch bei
der Arbeit in verteilten Teams
Keine Einarbeitung in neue Tools
nötig
Hohe Geschwindigkeit bei
Änderungen
z.T. automatische Überführung der
Ergebnisse in HTML, Javascript
Keine Beschränkungen aus der
Software oder dem Tool heraus (UIElemente etc.)
Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
Nutzt bestehende
Vorgehensweisen und ITProgramme, primär Word oder
anderen Texteditor
Erfordern vom Produktmanager
keine Grafik-, Design- oder
Layoutkenntnisse
Gute Kommunizierbarkeit in
Richtung IT-Abteilungen
Erlaubt es, die Ergebnisse
elektronisch zu verbreiten und
Feedback einzuholen – auch bei
der Arbeit in verteilten Teams
4. Erstellung von Produktkonzepten .2
Visuelle Ansätze
-
Nachteile
Paper-Prototyping
Schwierig, wenn Teams verteilt
arbeiten
Textbasierte Ansätze
Digitale Wireframing-Tools
Langsam, sobald viele
Veränderungen eingearbeitet
werden müssen
Sehr abstrakte Beschreibung
Kunde kann dazu schwer befragt
werden
Interne Kommunikation mit
Bereichen wie Geschäftsführung,
Marketing schwierig
Kann Begeisterung für das Produkt
nicht vermitteln
bzw
Kauf und Einarbeitung in neue
Tools erforderlich (z.B. Photoshop,
Balsamiq, …)
Nicht optimal für die
Kommunikation mit
Geschäftsführung oder Marketing
und Vertrieb
Nutzung von etablierten Tools
(PowerPoint, Excel), die nicht 100%
für diese Anwendung geschaffen
wurden
Hang zum Perfektionismus („pixel
perfect“), damit hoher Zeitaufwand
z.T. keine plattformübergreifenden
Tools
Kein elektronisches Sharen und
keine Workflows abbildbar
Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
5. Paper-Prototyping Tools .1
Prototyping Notizblöcke
Diese Notizblöcke enthalten vorgefertigte Geräte-Umrisse (Browser, iPhone, iPad, etc. ), die
die Seitenverhältnisse festlegen, und einzelne Interface-Elemente wie Buttons etc. enthalten
Beispiele für diese Produktkategorie sind
UXPin - kostenpflichtig
Sketchbook – kostenpflichtig
Behance Dot Grid Book – kostenpflichtig
Prototyping-Templates zum Ausdrucken
Die elektronischen Templates liegen üblicherweise in Datenformaten wie PDF, Power-Point
oder Photoshop vor – hier zwei Beispiele
Konigi Graph Paper – kostenlos, Spenden gewünscht
MBTI Sketching Paper for Ideation – kostenlos
6. Paper-Prototyping Tools .2
Weitere Hilfsmittel
Neben den Templates und Notizblöcken gibt es zwei weitere interessante „Hardware“-Tools
für das Paper Prototyping
Phone Doo – beschreibbare Magnettafeln in Form eines iPhone (kostenpflichtig)
UI-Stencils – eine Metall-Schablone mit UI-Elementen (kostenpflichtig)
7. Standard Grafik-Programme vs. Wireframing-Tools
Standard Grafik-Programme
Powerpoint, Visio, Photoshop, Word, Excel,
Indesign, Illustrator
+
Vorteile
Wireframing-Tools
Balsamiq, Axure, Mock-Flow, … (siehe unten)
Bedienung ist meist gelernt, daher hohe Produktivität
in der Erstellung von Wireframes
Spezialisiert für den Einsatz beim Wireframing mit
Tools für Verlinkungen etc.
Software ist auf vielen Rechnern vorinstalliert bzw. es
sind Viewer verfügbar
Grafik- und Designelemente für iPhone, Browser etc.
meist vorhanden
Wireframes können weiter verfeinert und direkt als
Sharing und Collaboration meist integriert
Grafiken für das UI verwendet werden
Keine Zusatzkosten wenn Software bereits
vorhanden ist
Dienstleister wie Entwickler oder Designagenturen
nutzen u.U. andere Tools
Hohe Performance da native Applikationen, meist
PC/Mac-gestützt
Zusätzliche Lizenz- oder Subscription-Kosten
Templates und UI Elemente, die nicht im Tool
Nachteile
-
Tools sind nicht auf Wireframing spezialisiert, z.B.
Verlinkungen, Sharing, Collaboration, …
zeitraubend, wenn nicht mit fertigen Templates
gearbeitet wird
angelegt sind, können oftmals nicht manuell erstellt
werden, z.B. bei Umstieg von iOS6 auf iOS7
Teilweise Insellösungen ohne Exportfunktion oder
mit proprietären Formaten
Quelle: Foto http://www.flickr.com/photos/35237095805@N01/4724099848; Al Abut