1. Quelle: Steve Mulder http://www.
muldermedia.com/

2. Von der Idee zum Prototyp
Lorem ipsum dolor
sit amet,
consectetuer
adipiscing elit.
Aenean commodo
ligula eget dolor.
Aenean massa. Cum
sociis natoque
penatibus et magnis
dis parturient
montes, nascetur
ridiculus mu
User
Research
Persona
Szenario
(Nutzungs-
oder
Kontext-
szenario)
Produkt/Service -Vision
Goals und Doings
Wireframes
Prototyp
Storyboard Journey map

3. Eine ”Customer Journey ”
(Kundenreise) bezeichnet eine
chronologische Darstellung eines
Dienstleistungsprozesses aus
Sicht des Kunden.
Nutzen:
Die systematische Darstellung der
Nutzer-Erfahrungen, die die Nutzer
bei einer bestimmten Aufgabe haben,
zeigen Unterstützungsbedarfe auf und
machen so Verbesserungspotentiale
sichtbar. Diese „Pain-Points“ helfen
uns, die richtigen
Designentscheidungen zu treffen.

4. Journey map - Wie geht das?
Grundlage für die Erstellung sind die bei der „explorativen Recherche“
gesammelten Beobachtungen und Erkenntnisse. Es sollte für jede ”
Persona” eine Journey Map erstellt werden.
Vorraussetzungen:
Personas, Focus-Gruppe (echte Nutzer),
eine Auswahl von typischen Tätigkeiten der Nutzer,
Bildmaterial, Beschreibungen der Tätigkeiten (Tagebuchnotizen)
Aufgabe

5. Journey map - Wie geht das?
Schritt 1 - Persona auswählen - Aufgabe auswählen
Schritt 2 - Template anlegen
Der Ablauf wird in mehre Phasen unterteilt. So gibt es einen Zeitraum vor, während und nachdem
der Nutzer sein Vorhaben ausführt.
Schritt 3 - Jeden Schritt der Aufgabe benennen, eintragen
Schritt 4 - Touchpoints eintragen,
Berührungspunkte an denen sich Dienstleistungen manifestieren. Touchpoints sind alle Momente
während des Prozesses, an denen der Nutzer in direktem Kontakt mit technischen Hilfsmitteln,
menschlicher Unterstützung (Kollegen, Freunde), selbst gebauten Hilfsmitteln in Berührung kommt.
Dazu zählen z. B. Interrnetseiten, Software, jegliche Art von Benutzer- bzw. Bedien- oder
Kommunikations- und Informationsumgebungen.
Schritt 5 - Analyse der Touchpoints
Nun wird analysiert mit welchen ”Touch Points” die „Persona“ zufrieden war bzw. wo ihre
Erwartungen enttäuscht wurden. Die jeweilige emotionale Befindlichkeit wird anschließend
eingetragen. Diese Darstellungsform wird auch ”Customer Emotional Map” genannt. Die so
ermittelten Probleme, die sogenannten ”Painpoints”, bilden Ansatzpunkte für Optimierungen.

6. Prototyping
low fidelity, high fidelity

7. Prototyping im HCD-Process

8. Warum Prototyping?
Was Menschen sagen, denken oder glauben
zu tun, ist oft sehr verschieden.
User-Brain Designer-
Brain

9. Vor dem Prototyping
An welcher Stelle hilft uns ein Prototyp im
Entwicklungsprozess?
In welchem Kontext helfen sie uns?
(Task-Analysis, Content-Modell, Information-Architecture)
Mit welchen Mitteln sollte der Prototyp gebaut
werden?
(Low fidelity, High fidelity)

10. Was ist ein Prototyp?
Pashley Guvnor bicycle
Ein Prototyp ist eine Produktskizze, die uns hilft, die Form und Funktion einer
Gestaltungslösung zu zeigen und zu prü fen.
Prototypen sind nicht perfekt, denn ihr Zweck ist pragmatisch, sie dienen der Kommunikation.

11. Vorteile
● Konsistenz - Gleiche Information wird innerhalb der
Anwendung entsprechend den Erwartungen des
Nutzers stets auf die gleiche Art dargestellt.
● Erkennbarkeit, Kommunikation, Verständlichkeit
● Die Bedeutung der Elemente und Funktionen ist
leicht verständlich, eindeutig interpretierbar und
erkennbar.

12. Prototyping-Tools - Cooper.com

13. Lo-fi --> Hi-fi

14. Prototyping Methoden
● low tech
● low costs
● quick
----------------------
UX Designer
Costumer
User, Stakeholder
● high tech
● high costs
● time-consumingg
----------------------
UX Designer
Programmierer
IT-Fachleute
Hi-FiLo-Fi
Je schöner und ausgefeilter der Prototyp ist, desto
oberflächlicher ist das Feedback der User.

15. Warum lo-fi, warum hi-fi?
Hi-FiLo-Fi
andeutend, erforschend
explorativ
Frage
Vorschlag
provozieren
vorläufig
unverbindlich
beschreibend
verfeinernd, definierend
Antwort
Test
lösen
spezifisch
darstellend
From Sketching User Experiences by Bill Buxton (p. 140)

16. Prototyping-Tools/ Methoden
Paper Prototyping
Storyboards
Sketches
Konzeptvideos
Wireframes
MockUps
-----------------------
Visio, OmniGraffle
Powerpoint, Word
Indesign, usw.
proto.io
Axure
Protoshare
Easel
Justinmind
Fluid
-------------------
Balsamic
Powerpoint, Indesign
-------------------
im Browser HTML/CSS
(http://www.protonotes.com/)
Hi-FiLo-Fi

17. Sketching User Experiences by Bill Buxton
Sketch
Prototype

18. Paper Prototyping
Beim Paper
Prototyping ist
darauf zu achten,
dass diese „dreckig“
aussehen.
Herbert Meyer

19. Warum Paper Prototyping?
Mit Papier und Schere kann jeder
Mensch umgehen.
Es ermöglicht jedem Teammitglied,
ohne Spezialkenntnisse am
Gestaltungsprozess teilzunehmen.
Paperprototyping hilft in einem frü hen
Stadium des Projektes, Lösungen zu
prü fen und ohne Aufwand zu ändern.
Mit geringem Budget, in kurzer Zeit
können Gestaltungslösungen kreiert
werden.
Es ist eine einfache und gute
Dokumentationsmethode.

20. Rollen beim Paper Prototyping
Computer
Input exakt
verarbeiten,
schweigen, bei
Problemen auf die
Zeit achten.
Protokollant
protokolliert was fehlt,
sorgt für
Diskussionen nach
dem Walkthrough
Testleiter
leitet die Sitzung,
achtet auf die Zeit,
Übung für spätere
Nutzungstests
User
soll laut denken, sich
wie ein Experte
verhalten, keine Fehler
absichtlich machen
Schritt 1 - Bau eines Papierprototypen
Schritt 2 - Interner Walkthrough mit Iteration
Schritt 3 - Paper Prototype Testing

21. Anleitung zum Paper Prototyping
1. Auswahl und festlegen des
use case, welches dargestellt
und getestet werden soll.
2. Skizzieren einer möglichen
Darstellungslösung.
3. Festlegen der Rollen im
Team.
4. Liste aller benötigten
Interface-Elemente
(Typ+Anzahl)
5. Zusammenfü gen der
Elemente im festgelegten
Format.
Using Origami To Mock Up Ingenious Gestural Interfaces

22. Aussage zu:
Konzepten und Terminologie
Navigation / workflow.
Content
Layout
Funktionalität
-------------------------------------------------
Keine Aussage zu:
Technische Machbarkeit
Download-Zeit oder andere Reaktionszeiten
Scrolling
Colors and fonts
Für was eignet sich Paper Prototyping, für was nicht?
Quelle: http://www.snyderconsulting.net/article_paperprototyping.htm