Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Paper Prototyping in der Produktentwicklung

1,211 views

Published on

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

Published in: Technology
  • Be the first to comment

Paper Prototyping in der Produktentwicklung

  1. 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. 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. 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. 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. 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. 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. 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. 8. Übersicht Digitale Wireframing-Tools Client-basiert Penultimate Browser-basiert Omnigraffle Quelle: Firmen-Websites, DSP-Partners Analyse Flairbuilder iPhonemockup
  9. 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. 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. 11. Stefan Behrendt Founder I Managing Partner DSP-Partners stefan.behrendt@dsp-partners.com www.dsp-partners.com www.twitter.com/stbe

×