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

Von der Idee zum Prototyp

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mu

User Research

PersonaSzenario(Nutzungs- oder Kontext- szenario)

Produkt/Service -Vision

Goals und Doings

WireframesPrototyp

Storyboard Journey map

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.

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

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.

Prototypinglow fidelity, high fidelity

Prototyping im HCD-Process

Warum Prototyping?

Was Menschen sagen, denken oder glauben zu tun, ist oft sehr verschieden.

User-Brain Designer-Brain

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)

Was ist ein Prototyp?

Pashley Guvnor bicycle

Ein Prototyp ist eine Produktskizze, die uns hilft, die Form und Funktion einerGestaltungslösung zu zeigen und zu prufen.

Prototypen sind nicht perfekt, denn ihr Zweck ist pragmatisch, sie dienen der Kommunikation.

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.

Prototyping-Tools - Cooper.com

Lo-fi --> Hi-fi

Prototyping Methoden

● low tech● low costs● quick----------------------UX DesignerCostumerUser, Stakeholder

● high tech● high costs● time-consumingg----------------------UX DesignerProgrammiererIT-Fachleute

Hi-FiLo-Fi

Je schöner und ausgefeilter der Prototyp ist, desto oberflächlicher ist das Feedback der User.

Warum lo-fi, warum hi-fi?

Hi-FiLo-Fi

andeutend, erforschendexplorativFrageVorschlagprovozierenvorläufigunverbindlich

beschreibendverfeinernd, definierendAntwortTestlösenspezifischdarstellend

From Sketching User Experiences by Bill Buxton (p. 140)

Prototyping-Tools/ Methoden

Paper PrototypingStoryboardsSketchesKonzeptvideosWireframesMockUps-----------------------Visio, OmniGrafflePowerpoint, WordIndesign, usw.

proto.ioAxureProtoshareEaselJustinmindFluid-------------------BalsamicPowerpoint, Indesign-------------------im Browser HTML/CSS(http://www.protonotes.com/)

Hi-FiLo-Fi

Sketching User Experiences by Bill Buxton

SketchPrototype

Paper Prototyping

Beim Paper Prototyping ist

darauf zu achten, dass diese „dreckig“

aussehen.

Herbert Meyer

Warum Paper Prototyping?

Mit Papier und Schere kann jederMensch umgehen.Es ermöglicht jedem Teammitglied,ohne Spezialkenntnisse amGestaltungsprozess teilzunehmen.Paperprototyping hilft in einem fruhenStadium des Projektes, Lösungen zuprufen und ohne Aufwand zu ändern.Mit geringem Budget, in kurzer Zeitkönnen Gestaltungslösungen kreiertwerden.Es ist eine einfache und guteDokumentationsmethode.

Rollen beim Paper Prototyping

ComputerInput exakt verarbeiten, schweigen, bei Problemen auf die Zeit achten.

Protokollantprotokolliert was fehlt, sorgt für Diskussionen nach dem Walkthrough

Testleiterleitet die Sitzung, achtet auf die Zeit, Übung für spätere Nutzungstests

Usersoll 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

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. Zusammenfugen der Elemente im festgelegten Format.

Using Origami To Mock Up Ingenious Gestural Interfaces

Aussage zu:Konzepten und TerminologieNavigation / workflow.ContentLayoutFunktionalität-------------------------------------------------Keine Aussage zu:Technische MachbarkeitDownload-Zeit oder andere ReaktionszeitenScrollingColors and fonts

Für was eignet sich Paper Prototyping, für was nicht?

Quelle: http://www.snyderconsulting.net/article_paperprototyping.htm