43
Paper Prototyping Mit Schere, Stift & Papier zur Website Created by Angelo Maron / Stefan Bauckmeier / Marko Hielscher

Paper Prototyping Workshop auf der SMWHH 2014

  • Upload
    marko

  • View
    110

  • Download
    7

Embed Size (px)

DESCRIPTION

Vortrag und Workshop auf der SMWHH 2014 über Paper Prototyping

Citation preview

Page 1: Paper Prototyping Workshop auf der SMWHH 2014

PaperPrototyping

Mit Schere, Stift & Papier zurWebsite

Created by Angelo Maron / Stefan Bauckmeier / Marko Hielscher

Page 2: Paper Prototyping Workshop auf der SMWHH 2014

Wer sind wir?

Stefan Bauckmeier Angelo Maron Marko Hielscher@emrox @MrRaffnix @MarkoHiel

Page 3: Paper Prototyping Workshop auf der SMWHH 2014

Wo arbeiten wir?

wir betreuen Hamburger Traditionsunternehmen, internationalenKonzerne, Internet-Portale, Agenturen und StartupsKonzeption, Entwicklung, Implementierung und Betrieb vonhochinteraktiven Webapplikationen mit Ruby on Rails

Page 4: Paper Prototyping Workshop auf der SMWHH 2014

Wer von euch hat schon mal eine Website programmiert oder waram Erschaffen einer Website beteiligt?

Quelle: http://netzakrobat.wordpress.com/2012/12/12/mediensozialisation-aufwachsen-im-medienzeitalter/fragezeichen-maennchen-line

Page 5: Paper Prototyping Workshop auf der SMWHH 2014

Prototyping(Softwareentwicklung)

Prototyping bzw. Prototypenbau ist eine Methode derSoftwareentwicklung, die schnell zu ersten Ergebnissen führt undfrühzeitiges Feedback bezüglich der Eignung einesLösungsansatzes ermöglicht.Dadurch ist es möglich, Probleme und Änderungswünschefrühzeitig zu erkennen und mit weniger Aufwand zu beheben, alses nach der kompletten Fertigstellung möglich gewesen wäre.

Quelle: https://de.wikipedia.org/wiki/Prototyping_(Softwareentwicklung)

Page 6: Paper Prototyping Workshop auf der SMWHH 2014

Prototypen Kategorien

Page 7: Paper Prototyping Workshop auf der SMWHH 2014

Grob testen ob etwas funktionieren kann.

Beispiel: Kann man am Armgelenk den Puls elektronisch messen?

Proof of Concept

Page 8: Paper Prototyping Workshop auf der SMWHH 2014

Das Aussehen des Produktes umgesetzt. Eignet sich fürMarktstudien, Nutzerfeedback, Vorabwerbung.

Beispiel: Lebensechte 3D Darstellung der neuen Uhr

Visueller Prototyp

Page 9: Paper Prototyping Workshop auf der SMWHH 2014

Funktioniert etwas in der geplanten Größe oder im Aussehen ohnedas es funktional sein muss.

Beispiel: Sitzt der Uhr gut am Arm?

Formstudie

Page 10: Paper Prototyping Workshop auf der SMWHH 2014

Umsetzen der Funktionen des Produktes.

Beispiel: Zeigt mir die Uhr meinen richtigen Puls an?

Funktionaler Prototyp

Page 11: Paper Prototyping Workshop auf der SMWHH 2014

In geringen Stückzahlen produziertes funktionierendes Exemplarzum Sammeln erster Erfahrungen.

Testexemplar

Page 12: Paper Prototyping Workshop auf der SMWHH 2014

in der Software-EntwicklungArten von Prototypen

Page 13: Paper Prototyping Workshop auf der SMWHH 2014

Grafischer Prototyp+ Grafisch ansprechende Umsetzung- es lassen sich evtl. nicht alle Wüsche umsetzen- Änderungen schnell sehr kompliziert- Nur durch Grafiker erstellbar

Page 14: Paper Prototyping Workshop auf der SMWHH 2014

Programmierter Prototyp+ Interaktiv+ Kann Gefühl vermitteln, Anwendung ist kurz vor Fertigstellung- Teuer zu entwickeln- Änderungen schnell sehr kompliziert- Kann endgültiges Programm zu früh festlegen- Nur durch Programmierer erstellbar

Page 15: Paper Prototyping Workshop auf der SMWHH 2014

Powerpoint / Keynote/ Prototyping-Tool

+ Je nach Tool mehr oder weniger flexibel+ einfache Interaktivität- Abstrakt- nur durch Einzelperson erstellbar- Einarbeitung in Tool erforderlich

Page 16: Paper Prototyping Workshop auf der SMWHH 2014

Paperprototype+ Schnell zu erstellen+ kann im Team erstellt werden+ Jeder kann mitmachen- Abstrakt / kein Design

Page 17: Paper Prototyping Workshop auf der SMWHH 2014

Fehlproduktionenvermeiden

Warum Prototyping wichtig ist ...

Page 18: Paper Prototyping Workshop auf der SMWHH 2014

Quelle: http://volksbetrugpunktnet.files.wordpress.com/2013/06/euro-tasse.jpg

Page 19: Paper Prototyping Workshop auf der SMWHH 2014

Quelle: http://mein-fun.com/data/media/5/bridge_construction_fail.jpg

Page 20: Paper Prototyping Workshop auf der SMWHH 2014

Quelle: http://what-the-fail.com/wp-content/uploads/2011/03/emergency-exit-design-fail.jpg

Page 21: Paper Prototyping Workshop auf der SMWHH 2014

Quelle: http://p5.focus.de/img/fotos/crop382473/4442719464-w1200-h627-o-q75-p5/c5.jpg

Page 22: Paper Prototyping Workshop auf der SMWHH 2014

Beispiele im Web??zu kleine Linkszu viel Textfehlende Suche

Page 23: Paper Prototyping Workshop auf der SMWHH 2014

Komplette Fehlschläge vermeiden durch Prototyping

Page 24: Paper Prototyping Workshop auf der SMWHH 2014

PrototypingWie machen es andere Branchen?

FlugzeugbauAutobauArchitektur

Page 25: Paper Prototyping Workshop auf der SMWHH 2014

FlugzeugbauExperimentalflugzeuge / Forschungsflugzeuge: Werden dazueingesetzt, neue Dinge zu erforschen(Antriebe, Bauweisen etc.)

Quelle: http://commons.wikimedia.org/wiki/File:Vought_V.173.jpg

Page 26: Paper Prototyping Workshop auf der SMWHH 2014

Autobau1. Digitale Prototyping (am Computer)2. Concept Cars (für "Proof of Concept")

Page 27: Paper Prototyping Workshop auf der SMWHH 2014

Architektur1. Physische Modelle (in genauem Maßstab 1:2000 - 1:1) - aus z.B.

Holz, Pappen, Kunststoff2. Computermodelle (CAAD/CAAM)

Hier lässt sich viel simulieren (z.B. Physik, Beleuchtung, Thermik)

Quelle: http://de.wikipedia.org/wiki/Modell_(Architektur)

Page 28: Paper Prototyping Workshop auf der SMWHH 2014

Workshop

Page 29: Paper Prototyping Workshop auf der SMWHH 2014

Best PracticesTimeboxNur einer redetFarben für Actions festlegenNicht zu detailliert

Page 30: Paper Prototyping Workshop auf der SMWHH 2014

App-Idee und Workshop

Ein Kunde kommt und sagt:"Ich brauche eine iPhone-App, bei der Männer ihre Klamotten

kaufen können."

"Also eigentlich ein Zalando - aber nur für Männer."

"JA GENAU!"

Page 31: Paper Prototyping Workshop auf der SMWHH 2014

Schritte nach dem Prototyping

weitere PrototypenBusinesslogik entwickelnDesign entwickelnEntwürfe implementierenBedienabläufe definieren

Page 32: Paper Prototyping Workshop auf der SMWHH 2014

Online-Tools

https://gomockingbird.com/mockingbird/http://iphonemockup.lkmc.ch/http://www.mockflow.com/http://balsamiq.comhttp://www.invisionapp.com/App: POP

Page 33: Paper Prototyping Workshop auf der SMWHH 2014

Fragen?Created by Angelo Maron / Stefan Bauckmeier / Marko

Hielscher

Page 34: Paper Prototyping Workshop auf der SMWHH 2014

Ergebnisse der Workshop-Gruppen

Page 35: Paper Prototyping Workshop auf der SMWHH 2014
Page 36: Paper Prototyping Workshop auf der SMWHH 2014
Page 37: Paper Prototyping Workshop auf der SMWHH 2014
Page 38: Paper Prototyping Workshop auf der SMWHH 2014
Page 39: Paper Prototyping Workshop auf der SMWHH 2014
Page 40: Paper Prototyping Workshop auf der SMWHH 2014
Page 41: Paper Prototyping Workshop auf der SMWHH 2014
Page 42: Paper Prototyping Workshop auf der SMWHH 2014
Page 43: Paper Prototyping Workshop auf der SMWHH 2014