11
e: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74 ols für Paper-Prototyping und Wirefram der Produktentwicklung für Web & Mobi fan Behrendt, DSP-Partners ober 2013

Paper Prototyping in der Produktentwicklung

Embed Size (px)

DESCRIPTION

Diese Präsentation gibt einen Überblick über Tools für Paper-Prototyping und Digital Wireframing und stellt die Vor- und Nachteile dieser Methoden gegenüber. Mehr Informationen im Artikel auf mobile zeitgeist http://www.mobile-zeitgeist.com/2013/10/28/mal-dir-eine-app-produktentwicklung-mit-paper-prototyping-teil-1

Citation preview

Page 1: Paper Prototyping in der Produktentwicklung

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

Page 2: Paper Prototyping in der Produktentwicklung

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

Page 3: Paper Prototyping in der Produktentwicklung

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

Page 4: Paper Prototyping in der Produktentwicklung

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

Page 5: Paper Prototyping in der Produktentwicklung

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

Page 6: Paper Prototyping in der Produktentwicklung

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)

Page 7: Paper Prototyping in der Produktentwicklung

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

+

-

Page 8: Paper Prototyping in der Produktentwicklung

Übersicht Digitale Wireframing-Tools

Client-basiert Browser-basiert

OmnigrafflePenultimate Flairbuilder iPhonemockup

Quelle: Firmen-Websites, DSP-Partners Analyse

Page 9: Paper Prototyping in der Produktentwicklung

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

Page 10: Paper Prototyping in der Produktentwicklung

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

Page 11: Paper Prototyping in der Produktentwicklung

Stefan BehrendtFounder I Managing PartnerDSP-Partners

[email protected] www.twitter.com/stbe