Das Dokument behandelt Methoden zur Erstellung von Produktkonzepten in der Produktentwicklung für Web und Mobile, indem es visuelle und textbasierte Ansätze vergleicht. Es stellt Vor- und Nachteile von Paper-Prototyping, digitalen Wireframing-Tools und Standardgrafikprogrammen vor und bietet eine Übersicht über verfügbare Tools und deren Preismodelle. Die Analyse zielt darauf ab, die Effizienz bei der Konzeption und Zusammenarbeit in Teams zu steigern.

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