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

8. Übersicht Digitale Wireframing-Tools
Client-basiert
Penultimate
Browser-basiert
Omnigraffle
Quelle: Firmen-Websites, DSP-Partners Analyse
Flairbuilder
iPhonemockup

9. Digitale Wireframing-Clients
Tool
Plattformen
Preis-Modell
Kosten [US$]
Adobe Fireworks
Mac, Windows
Subscription
49,99
Axure
Mac, Windows
Lizenz
289 - 589
Linux, Mac,
Windows
Lizenz od.
Subscription
79
einmalig od.
www.balsamiq.com
Subscription 12$/M
Flairbuilder
Mac, Windows
Lizenz
99
einmalig
www.flairbuilder.com
Omnigraffle
iPad, Mac
Lizenz
49,99
einmalig
www.omnigroup.com/omnigraffle
Pencil Project
Mac, Windows
Open source
kostenlos
-
http://pencil.evolus.vn
Penultimate
iPad, Mac
Lizenz
kostenlos
zzgl. in-App
Purchase ab 0,99 $
http://evernote.com/penultimate
Balsamiq Mockups
Bemerkungen
Website
pro Monat
www.adobe.com/products/fireworks
einmalig
www.axure.com
für URL bitte auf die Logos klicken
Quelle: Firmen-Websites, DSP-Partners Analyse

10. Webbasierte Wireframing-Tools
Bemerkungen
Website
kostenlos - 99$
pro Monat
http://cacoo.com
Subscription
kostenlos
pro Monat
http://framebox.org
Web-based
Subscription
kostenlos - 8,29
pro Monat
www.gliffy.com
Hotgloo
Web-based
(Flash)
Subscription
14 - 54
pro Monat
www.hotgloo.com
iPhoneMockup
Web-based
Subscription
kostenlos
pro Monat
http://iphonemockup.lkmc.ch
iPlotz
Web-based
(Flash)
Subscription
kostenlos - 495$
pro Monat
http://iplotz.com
Justinmind
Web-based
Subscription
19 - 29
pro Monat
www.justinmind.com
Justproto I UXPin
Web-based
Subscription
14,99
pro Monat
www.justproto.com
Mockflow
Web-based
Subscription
kostenlos - 99
pro Jahr
www.mockflow.com
Mockingbird
Web-based
Subscription
9 - 85
pro Monat
http://gomockingbird.com
Pidoco
Web-based
Subscription
9 - 59
pro Monat
http://pidoco.com
Protoshare
Web-based
Subscription
29 - 59
pro Monat
www.protoshare.com
Tool
Plattformen
Preis-Modell
Kosten [US$]
Cacoo
Web-based
Subscription
Framebox
Web-based
Gliffy
Quelle: Firmen-Websites, DSP-Partners Analyse
für URL bitte auf die Logos klicken

11. Stefan Behrendt
Founder I Managing Partner
DSP-Partners
stefan.behrendt@dsp-partners.com
www.dsp-partners.com
www.twitter.com/stbe