Prototyping Paper Prototyping Digital Prototyping References - PowerPoint PPT Presentation

Introduction Prototyping Paper Prototyping Digital Prototyping References Jörg Cassens SoSe 2019 Contextual Design of Interactive Systems SoSe 2019 Jörg Cassens – Prototyping 1 / 50

Introduction Fidelity Completeness Paper Prototyping Digital Introduction Prototyping References SoSe 2019 Jörg Cassens – Prototyping 2 / 50

Kommunikation Introduction Fidelity Ein Design zu kommunizieren ist schwierig Completeness Demos und Spezifikationen können keine Arbeitspraxis abbilden Paper Prototyping Der Kunde muß verstehen, wie das Produkt funktioniert und strukturiert ist Digital wie es in die eigene (nicht-artikulierte) Praxis paßt Prototyping und wie es besser sein könnte References Herausforderung: die “Experience”, die ein neues System anbietet, zu kommunizieren Modelle sind eine neue Sprache, die der Kunde erlernen muß Ansätze: Szenarien Use-Cases SoSe 2019 Jörg Cassens – Prototyping 3 / 50

Prototyping Problem: Introduction We can’t evaluate a design until it’s built Fidelity Completeness But... Paper Afer building, changes to the design are difficult Prototyping Digital Solution Prototyping Prototype! References Simulate the design in low-cost manner Make it fast. Make it cheap. Facilitate iterative design and evaluation Your first idea is rarely your best! Promote feedback Allow lots of flexibility for radically different designs Don’t kill crazy ideas! SoSe 2019 Jörg Cassens – Prototyping 4 / 50

How to Prototype Introduction Fidelity Completeness Paper Prototyping Digital Prototyping References Dell (2018) SoSe 2019 Jörg Cassens – Prototyping 5 / 50

Prototyp-Types Storyboard Sketches or screen shots illustrating key points in a usage narrative Introduction Paper Prototype Fidelity Completeness Fabricated devices with simulated controls or display elements Paper Prototyping Wizard of Oz Digital Workstation connected to invisible human assistant who simulates input, output, Prototyping and processing functionality not yet available References Video Prototype Video recording of persons enacting one or more envisioned tasks Computer Animation Screen transitions that illustrate a series of input and output events Scenario Machine Interactive system implementing a specific scenario’s event stream Rapid prototype Interactive system created with special purpose prototyping tools Partial Working System Executable version of a system with a subset of intended functionality SoSe 2019 Jörg Cassens – Prototyping 6 / 50

Prototyping Introduction Fidelity Completeness Ready Fire Aim Paper Prototyping Digital Prototyping References (Hix and Hartson, 1993) SoSe 2019 Jörg Cassens – Prototyping 7 / 50

Prototyping Introduction Fidelity Completeness Ready Fire Aim Paper Prototyping Digital Prototyping References Design Prototype Evaluate (Hix and Hartson, 1993) SoSe 2019 Jörg Cassens – Prototyping 7 / 50

Throw-Away vs. Evolution Throw-away prototyping means that a series of prototypes are constructed Introduction and then discarded Fidelity Completeness Typically higher and higher fidelity versions are developed Paper Prototyping Evolutionary prototype means that the same prototype evolves into higher Digital and higher fidelity and eventually becomes the system Prototyping References Throw-away prototyping can be difficult for design teams or management to accept because it seems as if the time spent developing the prototype is a waste Evolutionary prototyping is possible with sofware development, but there is a danger An early high-fidelity prototype might have been built to illustrate a design idea, but not designed to be extended Nevertheless evolutionary prototyping can be useful for eliciting more and more subtle design aspects SoSe 2019 Jörg Cassens – Prototyping 8 / 50

Introduction Fidelity Completeness Paper Prototyping Digital Fidelity Prototyping References SoSe 2019 Jörg Cassens – Prototyping 9 / 50

Low-Fidelity Prototypen Designskizze Introduction Frühe Skizzen auf Papier oder Tafel Fidelity Completeness Vermitteln Eindruck von Designideen Paper Diskussion der Skizzen kann gegenseitiges Verständnis von Gestalter und Prototyping Anwender fördern Digital Prototyping Fehler können frühzeitig erkannt werden References Beispiele wären ein Storyboard oder Comic Papierprototypen Bildschirminhalte werden durch Papierstreifen und Post-Its simuliert Austauschen und Manipulation dieser lassen das Verhalten der Benutzungsschnittstelle erkennen Diese Low-Fidelity-Prototypen können mit minimalen Kosten erstellt werden Der offensichtlich unfertige Charakter lädt zur Kritik und Manipulation ein Man kann grundlegende Beurteilungen konzeptioneller Modelle erhalten SoSe 2019 Jörg Cassens – Prototyping 10 / 50

Medium-Fidelity Prototypen Wizard of Oz Introduction Fidelity Sollen Nutzer einen realistischen Eindruck eines Systems bekommen, das noch Completeness nicht implementiert ist, bieten sich Simulationen an Paper Dem Benutzer wird die Benutzungsschnittstelle präsentiert Prototyping Ein menschlicher Operator (Wizard) beobachtet den Benutzer und seine Digital Prototyping Umgebung und steuert die Funktionen des Systems References Besonders nützlich, wenn vor der Implementierung Interaktionsdaten benötigt werden Ambiente System Sprachsteuerung Mock-Up Typischerweise mit Rapid Prototyping Werkzeugen erstellt Webseiten mit Screenshots Simuliert immer noch die funktionalen Teile des Systems Erlaubt typische Interaktionssequenzen SoSe 2019 Jörg Cassens – Prototyping 11 / 50

High-Fidelity Prototypes Introduction Simulation Fidelity Completeness In particular object-oriented simulations Paper Agents with particular goals, believes, intentions interact via simulated sensors Prototyping with the real sofware Digital Data and/or modelling necessary Prototyping References Proof-of-concepts Later versions of throw-away prototype Rudimentary and/or incomplete Implemented Application Later versions of evolutionary prototypes Large-scale implementations Long running systems Suitable for a field-study SoSe 2019 Jörg Cassens – Prototyping 12 / 50

“Mixed”-Fidelity Easy access to cameras makes it easy to blur the lines between lo-fi and hi-fi Introduction prototypes Fidelity Completeness Photos of hand-drawn prototypes can easily be captured and displayed on real Paper screens Prototyping Sequences of photos can also be animated to simulate interaction Digital Prototyping References Dell (2018) SoSe 2019 Jörg Cassens – Prototyping 13 / 50

Introduction Fidelity Completeness Paper Prototyping Digital Completeness Prototyping References SoSe 2019 Jörg Cassens – Prototyping 14 / 50

Breadth or Depth? Introduction Fidelity Completeness Partially working systems Paper Prototyping Horizontal prototype Digital Prototyping all the intended functionality, but only at the top level Example: initiate a shopping spree, but cannot actually order References Good for testing high level goals and action plans Vertical prototype only one or two tasks are implemented in detail Example: shop til you drop, but cannot see shipping information Good when only few tasks are seen as particularly complex or important SoSe 2019 Jörg Cassens – Prototyping 15 / 50

Horizontal vs. Vertical Prototype Introduction Fidelity Completeness Paper Prototyping Digital Prototyping References McCracken et al. (2004) SoSe 2019 Jörg Cassens – Prototyping 16 / 50

Global vs. Local Partially working systems Introduction Fidelity Global prototype Completeness model the complete system Paper Prototyping can address issues of completeness and consistency Digital Local prototype Prototyping only model a small portion of the system References can be used to resolve differences in opinion over design make a local prototype of the alternatives and evaluate them Partially working systems Chauffered prototype Considerable functionality, but little or no error detection How: A well trained assistant accepts and executes requests on behalf of the actual test user Orthogonal to other dimensions SoSe 2019 Jörg Cassens – Prototyping 17 / 50

Einbeziehen von Benutzern Introduction Fidelity Completeness Szenarien testen die Reaktion der Benutzer zu einer Geschichte Paper Prototyping Vorher: Lehrmeister Digital Jetzt: Co-Designer Prototyping References Dazu suchen wir uns neue Benutzer, die nicht Teil des Design-Teams waren Startpunkt: Initiales Systemdesign Designer und User verbessern dieses iterativ Iterationen sind schlecht für revolutionäre Änderungen, der initiale Prototyp sollte deshalb schon sehr gut sein, die richtigen Probleme anpacken SoSe 2019 Jörg Cassens – Prototyping 18 / 50

Introduction Paper Prototyping Digital Prototyping References Paper Prototyping SoSe 2019 Jörg Cassens – Prototyping 19 / 50

Beispiel Introduction Paper Prototyping Digital Prototyping References ☞ Bilder aus einem Video der Nielsen Norman Group SoSe 2019 Jörg Cassens – Prototyping 20 / 50