Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
Tools für Paper-Prototyping und Wireframingin der Produktentwicklung für Web & Mobile
Stefan Behrendt, DSP-PartnersOktober 2013
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
Erstellung von Produktkonzepten .1
Visuelle Ansätze Textbasierte Ansätze
Schnelle, kostengünstige Erstellung von Ideenskizzen
Schnelle Feedbackzyklen im Team und Kunden
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
Keine Einarbeitung in neue Tools nötig
Keine Beschränkungen aus der Software oder dem Tool heraus (UI-Elemente etc.)
Visueller Ansatz der die Produkte anfassbar macht
Hilft es, dem Kunden, der Geschäftsführung, dem Marketing etc. die Produktidee visuell zu vermitteln
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
Hohe Geschwindigkeit bei Änderungen
z.T. automatische Überführung der Ergebnisse in HTML, Javascript
Nutzt bestehende Vorgehensweisen und IT-Programme, 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
Paper-Prototyping Digitale Wireframing-Tools
+Vorteile
Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
Erstellung von Produktkonzepten .2
Visuelle Ansätze Textbasierte Ansätze
Schwierig, wenn Teams verteilt arbeiten
Langsam, sobald viele Veränderungen eingearbeitet werden müssen
Nicht optimal für die Kommunikation mit Geschäftsführung oder Marketing und Vertrieb
Kein elektronisches Sharen und keine Workflows abbildbar
Kauf und Einarbeitung in neue Tools erforderlich (z.B. Photoshop, Balsamiq, …)
bzw
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
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
Paper-Prototyping Digitale Wireframing-Tools
-Nachteile
Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
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
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)
Standard Grafik-Programme vs. Wireframing-Tools
Standard Grafik-Programme Wireframing-Tools
Bedienung ist meist gelernt, daher hohe Produktivität in der Erstellung von Wireframes
Software ist auf vielen Rechnern vorinstalliert bzw. es sind Viewer verfügbar
Wireframes können weiter verfeinert und direkt als Grafiken für das UI verwendet werden
Keine Zusatzkosten wenn Software bereits vorhanden ist
Hohe Performance da native Applikationen, meist PC/Mac-gestützt
Spezialisiert für den Einsatz beim Wireframing mit Tools für Verlinkungen etc.
Grafik- und Designelemente für iPhone, Browser etc. meist vorhanden
Sharing und Collaboration meist integriert
Powerpoint, Visio, Photoshop, Word, Excel, Indesign, Illustrator
Vorteile
Quelle: Foto http://www.flickr.com/photos/35237095805@N01/4724099848; Al Abut
Nachteile
Balsamiq, Axure, Mock-Flow, … (siehe unten)
Dienstleister wie Entwickler oder Designagenturen nutzen u.U. andere Tools
Zusätzliche Lizenz- oder Subscription-Kosten
Templates und UI Elemente, die nicht im Tool 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
Tools sind nicht auf Wireframing spezialisiert, z.B. Verlinkungen, Sharing, Collaboration, …
zeitraubend, wenn nicht mit fertigen Templates gearbeitet wird
+
-
Übersicht Digitale Wireframing-Tools
Client-basiert Browser-basiert
OmnigrafflePenultimate Flairbuilder iPhonemockup
Quelle: Firmen-Websites, DSP-Partners Analyse
Digitale Wireframing-Clients
Quelle: Firmen-Websites, DSP-Partners Analyse
Tool Plattformen Preis-Modell Kosten [US$] Bemerkungen Website
Adobe Fireworks Mac, Windows Subscription 49,99 pro Monat www.adobe.com/products/fireworks
Axure Mac, Windows Lizenz 289 - 589 einmalig www.axure.com
Balsamiq MockupsLinux, Mac, Windows
Lizenz od. Subscription
79einmalig od. Subscription 12$/M
www.balsamiq.com
Flairbuilder Mac, Windows Lizenz 99 einmalig www.flairbuilder.com
Omnigraffl e iPad, Mac Lizenz 49,99 einmalig www.omnigroup.com/omnigraffl e
Pencil Project Mac, Windows Open source kostenlos - http://pencil.evolus.vn
Penultimate iPad, Mac Lizenz kostenloszzgl. in-App Purchase ab 0,99 $
http://evernote.com/penultimate
für URL bitte auf die Logos klicken
Quelle: Firmen-Websites, DSP-Partners Analyse
Webbasierte Wireframing-Tools
Tool Plattformen Preis-Modell Kosten [US$] Bemerkungen Website
Cacoo Web-based Subscription kostenlos - 99$ pro Monat http://cacoo.com
Framebox Web-based Subscription kostenlos pro Monat http://framebox.org
Gliffy Web-based Subscription kostenlos - 8,29 pro Monat www.gliffy.com
HotglooWeb-based
(Flash)Subscription 14 - 54 pro Monat www.hotgloo.com
iPhoneMockup Web-based Subscription kostenlos pro Monat http://iphonemockup.lkmc.ch
iPlotzWeb-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
für URL bitte auf die Logos klicken