Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)

EXPERIENCE

AGILE

Renate Pinggera ditact shortcuts 13_11 Salzburg

8./9. Nov. 2013

USER

Hello World

DI(FH) Renate Pinggera FH Salzburg-Absolventin (MMA 1999) Web Projektmanagerin, User Interface Designerin Gründerin und GF der Agentur gizmocraft, design and technology seit 2005, Wien – gizmocraft.com Aktuell Gründerin von Digital Friends Energy Data renate.pinggera@gizmocraft.com � @renatepinggera 2

Welche Ziele möchten Sie erreichen?

3

Stellen Sie sich bitte kurz vor, erzählen Sie Ihren Hintergrund und nennen Sie 2 Ziele, was Sie nach diesem Workshop können wollen.

4

Wir erfinden und entwickeln eine Web App

oder Mobile App.

5

Anstatt zu programmieren werden wir scribbeln und einen Papier-Prototypen erstellen.

Desktop Web zum Vergleich http://skinnyties.com

6

Inhalte

7

Was ist Agile Software-

Entwicklung? Wie fließt User

Experience ein?

Kanban im Detail

Scrum im Detail

Übung #1a Ideen sammeln

Übung #1b Entscheidungsfindung

Ihre Idee in einem Satz

Übung #2 User Stories

Übung #3 Sprint Planning

Übung #4 Sprint durchführen:

Ablaufdiagramm Scribbles

Grundregeln zur Ideenfindung, konvergentes

und divergentes Denken,

Mobile Design Inspiration

User Experience, Design Thinking

User Interviews

Übung #5 Interviews

durchführen

Übung #6 Kanban-Board

[Scrum] beruht auf der Erfahrung, dass die meisten modernen Entwicklungsprojekte zu komplex sind,

um durchgängig planvoll umgesetzt zu werden und

auf der Erkenntnis, dass allein ständig verfügbares Feedback den Erfolg sichert. Damit wird vermieden, die anfänglich gegebene Komplexität durch einen

komplexeren Plan zu steigern.“

8 – Wikipedia

“ Warum Agile?

LITERATUR 9

Making Things Happen „Mastering Project Management“ by Scott Bercun, O‘Reilly 2008

http://shop.oreilly.com/product/9780596517717.do 10

Getting Real by Jason Fried, David Heinemeier Hansson von 37signals.com:

Das Free PDF gibt‘s hier: http://gettingreal.37signals.com/, das Buch auf Amazon 11

The Lean Startup “How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses“

by Eric Ries: http://www.amazon.de/The-Lean-Startup-Entrepreneurs-Continuous/dp/0307887898 12

Lean UX “Lean UX“ by Jeff Gothelf, O‘Reilly 2013

www.leanuxbook.com 13

Design Thinking Tim Brows von IDEO gilt als einer der Begründer des „Design Thinking“:

„Change by Design“: http://www.amazon.de/buecher/dp/0061766089 14

Prototyping: A Practitioner’s Guide by Todd Zaki Warfel: http://rosenfeldmedia.com/books/prototyping/

15

Designing for Emotion by Aarron Walter, A Book Apart. Siehe auch: http://aarronwalter.com/design-personas/

Alle Bücher auf http://www.abookapart.com/ 16

ENTWICKLUNG SOFTWARE AGILE

17

Wasserfall-Modell von 1956 Dieser Prozess wurde aus der Fertigungstechnik übernommen und erstmals 1956 von Herbert D.

Benington auf die Software-Entwicklung übertragen. Quelle: http://de.wikipedia.org/wiki/Wasserfallmodell

18

Nach- und Vorteile

•  Jede Phase ist über Meilensteine klar abgegrenzt. In der SW-Entwicklung sind die Phasen jedoch fließend.

•  Rückschritte sind nicht vorgesehen, ebenso keine Änderungen an den zu Beginn festgehaltenen Anforderungen.

•  Lange Durchlaufzeit bis zur Inbetriebnahme. •  à Spätes Erkennen von Fehlern, sehr aufwändige

Fehlerbehebung. •  Vorteile: Bei stabilen Anforderungen ist eine

Kostenschätzung und Planung gut möglich. 19

Wasserfall vs. Agile Quelle: Desiree Sy, Lynn Miller “Adapting Usability Investigations for Agile User-centered Design” in

the Journal of Usability Studies (http://www.upassoc.org/upa_publications/jus/2007may/agile-ucd. Pdf), Mai 2007

20

Agilemanifesto.org von 2001 Die „Agilen Werte“ wurden 2001 von 17 Erstunterzeichnern als „Agiles Manifest“

niedergeschrieben. 21

Das Agile Manifest „Wir zeigen bessere Wege auf, Software zu entwickeln, indem wir es selbst tun und anderen dabei helfen, es zu tun. Durch unsere Arbeit sind wir zu folgender Erkenntnis gekommen:

1.  Menschen und Interaktionen sind wichtiger als Prozesse und Werkzeuge.

2.  Funktionierende Software ist wichtiger als umfassende Dokumentation.

3.  Zusammenarbeit mit dem Kunden ist wichtiger als die ursprünglich formulierten Leistungsbeschreibungen.

4.  Eingehen auf Veränderungen ist wichtiger als Festhalten an einem Plan.

22

Agile Methoden (Auszug)

Folgende Methoden lernen wir heute kennen: 1.  Scrum

Unter der Leitung eines Scrum-Masters arbeitet ein Team in Sprints von fixer Dauer die im Backlog definierten User Stories ab.

2.  Kanban Alle Tasks werden auf einem Kanban-Board visualisiert und durchlaufen die notwendigen Arbeitsschritte, wobei die Anzahl der Tasks pro Station begrenzt ist. Ziel ist eine kurze Durchlaufzeit.

3.  Lean Bei der „schlanken Entwicklung“ werden kleinstmögliche Abschnitte (MVPs) erstellt, die Ergebnisse gemessen und danach verbessert. Dadurch werden überflüssige Schritte (Waste) eliminiert. 23

Striktes Regelwerk

Sehr frei

Inkl. Business-Aspekten

Beispiel: Der Scrum Prozess Alle Anforderungen werden im Produkt-Backlog erfasst und priorisiert. Vom Umsetzungsteam werden

die ersten Tasks ins Sprint-Backlog übernommen und in 1-4 Wochenzyklen abgearbeitet. Quelle: Wikipedia 24

Wann wird definiert, was als Anforderung eingekippt wird?

25

... hier kommt User Experience ins Spiel.

Gestaffelte Zyklen von 2007 Sog. „Staggered sprints“ stellen separate Iterationen für Recherche, Design und Development bereit.

Quelle: Desiree Sy, Lynn Miller “Adapting Usability Investigations for Agile User-centered Design” in the Journal of Usability Studies (http://www.upassoc.org/upa_publications/jus/2007may/agile-ucd.

Pdf), Mai 2007 26

Agile + UX 1 In unserem Beispiel wird ein Projekt (Theme) in 3 Zyklen (Sprints) zu jeweils 2 Wochen

programmiert. Quelle der Grafiken: „Lean UX“ by Jeff Gothelf, O‘Reilly 2013 27

Agile+ UX 2 Um zu definieren, WAS programmiert werden soll, ergänzen wir einen grünen UX-Block „Sketching/

Ideation“ vor jedem Sprint. Zu Beginn ist dieser Block zeitlich am umfangreichsten. 28

Agile+ UX 3 Für die Programmierung ergänzen wir vor Start jedes 2 Wochen-Sprints das Scrum-typische „Iteration

Planning Meeeting“, um eine Auswahl der wichtigsten Anforderungen zu treffen. 29

Prinzipien von Agile UX

1.  Interdisziplinäre Teams Developer, Produktmanager, UX Designer, Grafiker, Content Strategie, Qualitätsmanagement, ...

2.  Kleine Teams, projektbezogen, am selben Ort Max. 10 Personen, das führt zu besserer Kommunikation, Fokus und Teamgeist. Keine „Helden“ und „Rockstars“ im Team!

3.  Ziel ist das Lösen von Problemen, nicht das Abarbeiten von Feature-Listen

4.  Die Arbeit erfolgt User-zentriert, in Iterationen, wird gemessen und dann überarbeitet.

5.  Ideen umsetzen und messen, nicht debattieren. 6.  Fehler müssen erlaubt sein.

30

IDEENFINDUNG 31

Der Designprozess

32

User-StoriesIdeen-Findung User-InterviewAblaufdiagramm Scribble/Storyboard

Ideenfindung: Das richtige Umfeld

Für ein konstruktives Brainstorming muss die Anzahl der Teilnehmer und die Art des Meetings auf das jeweilige Ziel abgestimmt sein: 1.  Interaktives Meeting (Brainstorming, Design-

Meetings, ...): nur möglich mit 3 bis 8 Personen 2.  Reporting-Meeting mit kurzen Diskussionen:

10 bis 20 Personen 3.  Status-Meeting oder Projekt-Präsentation:

bis 100 Personen 33

Interaktives Meeting Wenige Teilnehmer, sichtbar protokolliert, Arbeit an konkreten Aufgabenstellungen.

34

Meeting-Grundregeln

1.  Fixe Zeitdauer festlegen. Wenn die Zeit abgelaufen ist, ist das Meeting vorbei. Für Brainstormings ausreichend Zeit und einen gemütlichen Raum einplanen!

2.  So wenige Personen wie möglich einladen. 3.  Agenda vorbereiten und aussenden. 4.  Das, worüber gesprochen wird, für alle sichtbar

machen. Für Laptop, WLAN, Beamer, Whiteboard etc. sorgen, nie „theoretisch“ diskutieren.

5.  Meeting mit dem wichtigsten Problem beginnen. 6.  Lösungen, Todos und Zuständigkeiten am Ende

festhalten.

35

Rollenverteilung Konstruktive Meetings verfügen IMMER über einen Moderater und einen Schreiber,

in kleinen Meetings in Personalunion. 36

1 ModeratorIn (Facilitator)

1 SchreiberIn (Recorder)

n TeilnehmerInnen

0-n Führungs-personen

Rollenverteilung Konstruktive Meetings verfügen IMMER über einen Moderater und einen Schreiber.

37

1 ModeratorIn (Facilitator)

1 SchreiberIn (Recorder)

n TeilnehmerInnen

0-n Führungs-personen

•  Absolut neutral •  Bringt keine Ideen ein •  Bewertet Ideen nicht •  Koordiniert den Prozess

Rollenverteilung Konstruktive Meetings verfügen IMMER über einen Moderater und einen Schreiber.

38

1 ModeratorIn (Facilitator)

1 SchreiberIn (Recorder)

n TeilnehmerInnen

0-n Führungs-personen

•  Protokolliert sichtbar für alle •  Beteiligt sich nicht an Gesprächen •  Fragt klärend nach •  Schickt Protokoll nach Meeting

aus

Rollenverteilung Konstruktive Meetings verfügen IMMER über einen Moderater und einen Schreiber.

39

1 ModeratorIn (Facilitator)

1 SchreiberIn (Recorder)

n TeilnehmerInnen

0-n Führungs-personen

•  Bringt Ideen ein. •  Ist positiv gestimmt. •  Verhält sich nicht defensiv. •  Hilft mit, das Meeting konstruktiv

zu halten.

Rollenverteilung Konstruktive Meetings verfügen IMMER über einen Moderater und einen Schreiber.

40

1 Moderator (Facilitator)

1 Schreiber (Recorder)

n Teilnehmer

0-n Führungs-personen

•  Oft: Fordert das Meeting •  Oft: Definiert die Teilnehmer •  Trifft Entscheidungen zu Zielen. •  Wichtig: Muss sich während des

Meetings als Teilnehmer verhalten.

Protokoll sichtbar für alle Mitschrift entweder auf Whiteboard, Flipchart, oder direkt am Beamer (zB. beim gemeinsamen

Erstellen von Todo-Listen oder Brainstormen) 41

Divergentes Denken: Zerstreuung Im ersten Schritt für die neue Aufgabe Ideen sammeln: Schnell viele Ideen generieren. Nicht

beurteilen. Viele verschiedene Sichtweisen finden. Frei diskutieren. Quelle: frei nach Kevin M. Hoffman, UXLX 2013 42

Neue Aufgabe

Gedanke

Gedanke

Gedanke

Gedanke

Idee

Idee

Idee

Idee

Idee

Idee

WTF?

Idee

WTF?

WTF?

WTF?

WTF?

WTF?

WTF?

Entscheidungen treffen Aus „Rework“, Jason Fried, David Heinemeier Hansson von 37signals.com, Crown Business 2010

43

Konvergentes Denken: Zus.führung Im 2. Schritt: Ideen sortieren, gruppieren, priorisieren. Entscheidungen treffen.

Quelle: frei nach Kevin M. Hoffman, UXLX 2013 44

Neue Aufgabe

Gedanke

Gedanke

Gedanke

Gedanke

Idee

Idee

Idee

Idee

Idee

Idee

Idee

Gute Idee

Gute Idee

Gute Idee

Entscheidung

Divergent

•  Generieren Sie eine Liste von Ideen

•  Freie, offene Diskussionen

•  Suche Sie nach verschiedenen Sichtweisen

•  Lassen Sie keine Beurteilungen zu

•  Sortieren Sie die Ideen in Gruppen

•  Bewerten Sie die Ideen •  Wenden Sie Methoden

zur Entscheidungs-findung an

•  Prozess endet mit einer klaren Entscheidung

Konvergent

Übung #1: Ideenfindung

4-6 Personen, 15 min

1.  Losen Sie Ihre Rollen aus: Wer ist ModeratorIn? Wer SchreiberIn?

2.  Entscheiden Sie: Wollen Sie ein Kundenprojekt simulieren (dann 1-2 „Kunden“ als Rollen definieren) oder wollen Sie ein eigenes Produkt als „Start-Up“ kreieren?

3.  Sammeln Sie Ideen mithilfe der folgenden Anregungen.

4.  Protokollieren Sie diese Ideen (Papier, Post-Its, Whiteboard, ...)

Übung #1a: Ideenfindung Erfinden Sie eine neue Web App oder Mobile App, indem Sie Objekte mit einer bestehenden Applikation kombinieren:

Applikation

Basecamp Evernote/Simplenote Foursquare Google Maps Youtube Microsoft Office or Google Docs Mint Twitter Yahoo Answers or Quora Flickr/Instagram Facebook

+ Objekte

Tiere (Haustiere/Zoo) Autos (gebraucht/neu) Bankkonten Kleidung Sammlerstücke Essen/Rezepte/Restaurants Häuser/Wohnungen zu verkaufen/vermieten Geheimnisse Videospiele Wetter

Ergebnis #1a: Ideenfindung

Tragen Sie Ihre Ideen hier ein: Idee 1

Idee 2

Idee 3

Idee 4

Übung #1b: Entscheidung treffen

4-6 Personen, 15 min 1.  Ändern Sie Ihre Rollenverteilung (ModeratorIn, ...)!

2.  Gruppieren Sie Ihre Ideen.

3.  Bewerten Sie Ihre Ideen und entscheiden Sie sich für eine:

1.  Jede Person hat gesamt 8 Punkte zu vergeben.

2.  Jede verteilt seine Punkte auf die von ihr favorisierten Ideen. Sprechen Sie sich nicht vorher ab!

3.  Diskutieren Sie im Anschluss Ihre Wahl und treffen Sie die finale Entscheidung.

4.  Formulieren Sie die Idee in einem einzigen Satz lt. Vorlage.

Übung #1b: Beispiel-Bewertung

Bewerten Sie Ihre Ideen nach dem Punktesystem: Idee 1

Idee 3

Idee 3

Idee 4

Wir sind überzeugt, dass ____________________ (Kunde) das

Problem hat/haben ____________________________ (Problem).

___________________ (Name der App) löst dieses Problem

durch _________________________________ (Aspekt 1) und

________________________________ (Aspekt 2).

Übung #1b: Ihre Idee in einem Satz

EXPERIENCE USER

52

User Experience (kurz: UX)

Der Begriff User Experience (deutsch wörtlich: Nutzererfahrung, besser: Nutzererlebnis oder

Nutzungserlebnis, Anwendererlebnis) umschreibt alle Aspekte der Erfahrungen eines Nutzers bei der

Interaktion mit einem Produkt, Dienst, einer Umgebung oder Einrichtung.

- nach Wikipedia

53

UX bedeutet Emotion Ziel ist, der Erwartungshaltung des Users zu entsprechen bzw. diese zu übertreffen („Design for

Delight“). Zu beachten: Die UX entwickelt sich über einen längeren Zeitraum über mehrere Berührungspunkte hinweg. 54

Quelle: thejordanrules.com 55

Neu: Traditional – Lean – Agile Traditionell wurde UX auf Research und Usability beschränkt, neu wird mit „Agile UX“ die

Arbeitsweise neue definiert und mit „Lean UX“ versucht zu messen, ob das Ergebnis für den Markt richtig ist. Quelle: @andersramsay 56

Wie? User Interviews,

Usability Test, Ethnographie

Wie? Interdisziplinäre Teams, schnelle

Iterationen

Wie? Annahmen treffen,

Experiment durchführen,

validieren, überarbeiten

„Design Thinking“ ist ein Prozess Der UX Designer analysiert die Arbeitsweise der Benutzer, produziert einen Prototypen, holt Feedback

ein und startet die nächste Überarbeitungsrunde. 57

58

Jared M. Spool definiert 5 Stile „Anatomy of a Design Decision“, An Event Apart San Diego 2010

http://aneventapart.com/news/post/anatomy-of-a-design-decision-jared-spool- live-at-an-event-apart-video 59

Die Reihung von 1-5 ergibt sich daraus, wie viel Recherche das Design-Team in sein Projekt

investieren kann, darf oder will.

5 Stile für UX-Design

60

Jared M. Spool: Experte für Usability und intuitives Design. http://www.uie.com/

Unintended Design

(Unbeabsichtigt)

Self Design (Design für den

Eigenbedarf)

Experten-Design (Erfahrung durch

Wiederholung)

Activity-Focused Design

User-Focused Design (Service-

Design)

1. 2. 3. 4. 5.

Die Pyramide des Wissens In der Design-Synthese arbeitet sich ein Designer durch verschiedene Methoden

in der DIKW-Pyramide nach oben. 61

Gesammelte Daten ordnen und priorisieren

Einfühlungs-vermögen entwickeln

Konzept und Ideen entwickeln

Das heißt: Sie können vieles nicht wissen. Aber

das macht nichts. Design ist ein Lernprozess.

62

“

Übung #2: User-Stories definieren

Jeweils zu zweit, 15 min 1.  Wer ist Ihr User? (Name, Alter, Beruf) 2.  In welcher Situation befindet er/sie sich? 3.  Welche Aufgabe will er/sie mit Hilfe der App

erfüllen? 4.  Wählen Sie den kleinstmöglichen Ausschnitt

und halten Sie die Aufgabe so einfach wie möglich.

5.  Schreiben Sie 2 User-Szenarios auf.

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________ .

Ergebnis #2: 2 User-Stories pro 2er-Team

User-Story 1:

User-Story 2:

Hilfestellung: Als User (Wer?) möchte ich diese Funktionalität (Was?), damit ich folgenden Nutzen habe (Wozu?) 64

User-Stories: Beispiele

1.  Krankenschwester Maria steht vor dem Bett eines Patienten und muss 5 mal täglich dessen Temperatur festhalten.

2.  Ein Teenager hat eine Softdrink-Flasche mit Gewinncode vor sich und möchte am Gewinnspiel teilnehmen.

3.  Ein TV-App-User möchte „Breaking Bad“ finden und die Serie dann zu seiner Favoritenliste hinzufügen.

65

Verwandt mit: Use-Cases, User-Szenarios

SCRUM 66

Product Owner definiert Anforderungen Festlegen von Vision, gewünschten Eigenschaften, Prioritäten, Abnahme der fertigen Version.

67

Product Owner trägt strategische

Produktverantwortung. Er trägt Anforderungen

in Form von User-Stories ins Produkt-Backlog ein

und reiht diese nach Priorität.

Entwicklungsteam verpflichtet sich ... Auswahl der User-Stories, Umsetzung dann verbindlich! Das Team muss interdisziplinär aufgestellt

sein, dass des die Tasks eigenständig umsetzen kann. 68

Entwicklungsteam (5-9 Pers.) wählt im Sprint Planning Meeting aus,

wie viele User-Stories in das Spring-Backlog für den kommenden Sprint

zur Umsetzung übernommen werden.

Scrum Master moderiert und unterstützt Einführen des Scrum Prozesses, Moderieren der Meetings

69

Scrum Master moderiert alle Meetings, sorgt für Einhaltung der Scrum-Regeln,

räumt Hindernisse aus dem Weg.

Erweitertes Team Der User muss im laufenden Prozess immer eingebunden werden, der Kunde nach jedem Sprint

(entspricht das Zwischenergebnis seinen Vorstellungen?), Management nur bei Bedarf. 70

Kunde Person, die der Product Owner begeistern muss

(intern oder extern), dazu ist enger Austausch

zwischen den beiden notwendig.

User Benutzer des Systems

(das muss nicht unbedingt der Kunde

sein!). Sollte sowohl beim Sprint Planning als auch

bei der Review hinzugezogen werden.

Management Sorgt für

Rahmenbedingungen (Räumlichkeiten,

personelle Besetzung). Kontaktperson ist meist

der Scrum Master.

Scrum-Meetings 1/2

1.  Sprint Planning Meeting 1: vor Beginn des Sprints Produkt Owner stellt dem Entwicklungsteam die User Stories aus dem Backlog vor, Details und Abnahmebedingungen werden gemeinsam geklärt. Entwicklungsteam legt selbständig, aber verbindlich fest, wie viele User Stories es erledigen wird.

2.  Sprint Planning Meeting 2: direkt danach Entwicklungsteam klärt intern das "Wie" der Umsetzung und unterteilt die User-Stories in einzelne Tasks für die Pinnwand.

3.  Daily Scrum (auch: Standup-Meeting) Tägliche 15-minütige Besprechung des Scrum-Teams. Was habe ich seit gestern erreicht? Was möchte ich bis morgen erreichen? Was behindert mich? Scrum-Master nimmt alle Punkte mit, die den 15-Min-Rahmen sprengen, Hindernisse versucht er auszuräumen.

71

Scrum-Meetings 2/2

4.  Sprint Review: am Ende des Sprints Entwicklungsteam präsentiert Ergebnisse, Produkt Owner führt Abnahme durch oder lässt die User Story zurück ins Backlog wandern. Oft mit Usern.

5.  Retrospektive: nach Review, vor neuem Sprint Reflektieren und Verbesserungsmöglichkeiten identifizieren.

Alle Meetings werden vom Scrum-Master einberufen und moderiert.

72

FRAGEN? 73

Zur Erinnerung: Scrum + UX Nach der Ideensammlung starten wir nun das erste Sprint Planning Meeting

74

Übung #3: Sprint Planning

4-6 Personen, 20 min 1.  Definieren Sie Ihre Scrum-Rollen.

2.  Der Product-Owner priorisiert die bestehenden User-Stories des Teams und erstellt das Produkt-Backlog.

3.  Das Entwicklungsteam definiert, wie viele User Stories sie im kommenden Sprint abarbeiten werden.

1.  Info zur Aufwandsschätzung: Inhaltlich ist anstatt zu programmieren pro User Story ein Ablaufdiagramm und ein Scribble für das Interface zu erstellen.

2.  Info: Ihr Sprint dauert 1 Stunde (statt 2 Wochen)

4.  Das Entwicklungsteam schreibt das Sprint-Backlog.

(BenutzerIn) ______________________________

soll _____________________ sehen/klicken/eingeben können,

um _________________________ zu _____________________.

Übung #3a: Scrum User Stories

1)  _____________________________________________________

2)  _____________________________________________________

3)  _____________________________________________________

4)  _____________________________________________________

5)  _____________________________________________________

6)  _____________________________________________________

7)  _____________________________________________________

8)  _____________________________________________________

Ergebnis #3b: Sprint Planning Produkt-Backlog:

1)  _____________________________________________________

2)  _____________________________________________________

3)  _____________________________________________________

Sprint-Backlog:

Der Designprozess

78

User-StoriesIdeen-Findung User-InterviewAblaufdiagramm Scribble/Storyboard

Ablaufdiagramme

Ziel: Zuerst definieren, was die Applikation tun soll, danach erst festlegen, wie sie aussieht. 1.  Welche Objekte (Elemente aus Sicht des Users) gibt

es? 2.  Welche Aktionen können mit welchem Objekt

durchgeführt werden? 3.  Über welche Eigenschaften verfügt das jeweilige

Objekt?

79

Verwandt mit: Konzeptionelles Modell, Scenario Flow Diagram

Quelle: Jon Kolko, Workshop „Design Synthesis“, UXLX 2013 80

Quelle: Jon Kolko, Workshop „Design Synthesis“, UXLX 2013 81

Beispiel: Das Ablaufdiagramm meines Teams in Jon Kolkos Workshop „Design Synthesis“, UXLX 2013

82

Wireframes und Storyboards

Wireframes sind die schematische Darstellung jeder Ansicht einer Applikation und ihrer Funktionen. Sie sind statisch und können daher keine multiplen Zustände darstellen. Storyboards sind grafisch ausgearbeitete Darstellungen jeder „Seite“ und haben ihren Ursprung in der Filmindustrie. Storyboards sind ebenfalls statisch.

83

auch: Mock-Up, Scribble, Skizze, Blue Print, Seitenschema

Beispiel Wireframes Storyboards sind die schematische Darstellung jeder Ansicht einer Applikation und ihrer Funktionen.

Sie werden für einzelne User-Stories entwickelt. 84

Wireframes liefern Antworten

1.  Welche Elemente werden angezeigt? 2.  Welche Funktionen sind in dieser Ansicht verfügbar? 3.  Welche Prioritäten haben die dargestellten Elemente?

Was ist das Haupt-Element? 4.  Welche Regeln gelten für die Anzeige der Elemente? 5.  Durch welche Aktionen kann diese Ansicht verändert

werden?

85

Der Designprozess

Template für Wireframes

Template: http://interactivelogic.net

Design ≠ Gestaltung Design = Problemlösung

87

Web Design und Responsive Design Responsives Design stellt Inhalte Device-übergreifend zur Verfügung. In der Umsetzung sind Technik

und Gestaltung eng verschränkt, was Agile Methoden unumgänglich macht. 88

Sensoren ermöglichen neue Wege Touch, Audio, GPS, Kamera, Lichtdetektoren, Geschwindigkeitsmessung, Kompass uvm.

Quelle: Josh Clark „Beyond Mobile“, SXSW 2013 89

Adaptive Design Responsive Design passt sich an unsere Devices an, Adapative Design passt sich an die Situation

an, in der wir uns gerade befinden. Datenschutz wird hier wichtige denn je. 90

Pattern Libraries Patterns werden in Pattern Libraries gesammelt und stehen als „kollektives Wissen“

Designern und Entwicklern zur Verfügung. Beispiel patterntap.com, mobile-patterns.com 91

Prinzip Content First, Navigation Second Negativbsp.: Die Flickr Mobile Website fokussiert auf die Navigation (links).

Positivbsp.: Bei der Flickr iPhone App steht der Content im Vordergrund (rechts). 92

Redesign LinkedIn App „In the new app, we present relevant content up-front and instantly notify users of new invitations and

messages. […] we remove the friction of a dashboard and provide immediate value on app launch.“ 93

Inhalte schrittweise entfalten Die Apple Mail App nutzt das sog. „Nested Doll Pattern“

Tap für Tap wird mehr Inhalt sichtbar 94

Inhalte schrittweise entfalten 2 Beispiel: dcovery iPhone App

95

Bento Box (One-Pager) Die App Currency Calculator und die iPhone Wetter App bestehen aus einem einzigen Screen, dessen Inhalt sich durch Touch eines der Elemente ändert, ohne dass eine explizite Navigation

verfügbar ist. 96

Filter-Ansichten Die vertikale Icon-Navigation bietet eine Möglichkeit, viele Filter für diese Flugsuche

schrittweise darzustellen. 97

Bottom Bar (li.), Toggle Menu (re.) Die Kickstarter iPhone App präsentiert 2 Varianten für mobile Navigation.

98

Off Canvas Beispiel: dcovery iPhone App.

Off Canvas „schiebt den Content-Screen zur Seite“, ähnelt optisch oft einem Toggle Menu. 99

Mobile Web E-Commerce http://skinnyties.com

Durch dieses Mobile Design konnte Skinnyties den Umsatz via iPhone um 377% steigern. 100

Übung #4: Sprint durchführen

Im Scrum-Team, 60 min, Basis ist Ihr Sprint Backlog

1.  Unterteilen Sie dafür die User-Stories zuvor in einzelne Tasks, heften Sie diese an eine Pinnwand und definieren Sie die Zuständigen.

2.  Erstellen Sie für die User-Stories des Sprint Backlog jeweils ein Ablaufdiagramm.

3.  Erstellen Sie für die User-Stories des Sprint Backlog jeweils die wichtigsten User Interfaces in Form von Scribbles.

4.  Führen Sie nach jeweils 20 Minuten (also 2x) ein „Daily Scrum Meeting“ durch. Der Scrum Master wird dieses moderieren.

Übung #4a: Ablaufdiagramm

Im Rahmen des Scrum-Sprints 1.  Listen Sie alle Objekte/Personen (Hauptworte) und

Aktionen (Verben) des Ablaufs pro User-Story. 2.  Definieren Sie Anfangs- und Endpunkt des Ablaufs. 3.  Welche sind die wichtigsten Aktionen, um den

Endpunkt zu erreichen? 4.  Gibt es Dinge, die gezählt werden müssen, gibt es

Ja/Nein-Entscheidungen?

5.  Erstellen Sie die Ablaufdiagramm mit Post-Its und Pfeilen auf einem Zettel oder am Whiteboard.

Übung #4b: Scribbles

Im Rahmen des Scrum-Sprints 1.  Wie sieht der Startscreen der App für die User-Story

aus? (Content First!) 2.  Welche Elemente werden angezeigt? 3.  Welche Funktion ist hier die wichtigste?

4.  Welche Aktionen verändert diese Ansicht? 5.  Wie kommt man wieder „Zurück“?

Ergebnis #4b: Scribbles

Template: http://interactivelogic.net

FEEDBACK USER

105

… Then you ship your product. You feel great. Then comes the feedback. This is when it really hurts. Pick up the user feedback and get hurt. The feedback is not only harsh, but they are right. This is why it hurts so much.”

106 – nach Oliver Reichenstein, UXLX Lisbon, 2013

“

Zur Erinnerung: Scrum + UX 4 Entweder während des Sprints oder nach Ende eines Sprints holen wir User Feedback ein.

107

User Interviews

User Interviews helfen, die Usability zu verbessern, den Fokus zu schärfen oder neue Ideen zu finden. 1.  Verstehen die Personen, was Ihre App tut bzw. anbietet?

2.  Verstehen sie den Mehrwert, der ihnen geboten wird?

3.  Verstehen die Personen, wie sie die App benutzen sollen?

4.  Welche Inhalte sind zentrale Berührungspunkte?

5.  Wird die Gestaltung gut angenommen?

6.  Sind die Texte verständlich?

7.  Welche Ideen hat die Person für Verbesserungen?

108

“Pick up the user feedback and get hurt”

Interview-Grundregeln

•  Neutrales Gesicht (unparteiisch, vorurteilsfrei) •  Vermeiden Sie „führende“ Fragen, die die Antwort

bereits vorgeben. •  Vermeiden Sie geschlossene ja/nein-Fragen. •  Stellt offene Fragen, lasst eure Interview-Partner in

ganzen Absätzen sprechen. •  Sagt nie, dass die Person etwas richtig oder falsch

macht. •  „Don‘t make friends.“

109

“Pick up the user feedback and get hurt”

Beispiel-Sätze •  Kannst du mir zeigen, wie du einen Kuchen backen würdest?

•  Kannst du mir zeigen wie ich einen Kuchen backen kann?

•  Zeig mir, wie du einen Kuchen bäckst!

•  Glaubst du, machen es andere Bäcker auch so?

•  Wie glaubst du, wird es in 5 Jahren sein?

•  Du hast das Wort Küchenmaschine erwähnt ...

•  Ich habe gesehen, dass du zuerst Eier getrennt hast ...

•  Aufbauend auf dem, was du zuvor gesagt hast, ...

110

“Pick up the user feedback and get hurt”

Listening is all. Versucht, euch selbst so stark wie möglich in den Hintergrund zu rücken und zuzuhören. Euer

Interview-Partner soll sich wohlfühlen, wie die Lady mit den Kartoffelchips-Tieren. Quelle: http://www.youtube.com/watch?feature=player_embedded&v=yuH1PhzOVR4 111

Übung #5a: Interview durchführen

Zu zweit, 40 min, mit Ihren Scribbles 1.  Identifizieren Sie die Personen, die Sie befragen

wollen 2.  Welche Rollen spielen diese für Ihre App? 3.  Definieren Sie mind. 3 Fragen, die Sie den

Personen zu den Scribbles stellen werden (Frage-Regeln beachten!)

4.  Führen Sie mind. 2 Interviews durch. 5.  Schreiben Sie Ihre Insights auf.

Ergebnis #5a: Interview-Insights

Tragen Sie die Erkenntnisse Ihrer Interviews hier ein: Insight 1

Insight 2

Insight 3

Insight 4

Übung #5b: Bewertung

Zu zweit, 10 min, mit den Interview-Insights 1.  In Summe sollten Sie mindestens 8 Insights vor

sich haben. 2.  Jede Person hat gesamt 8 Punkte zu vergeben. 3.  Jede verteilt ihre Punkte auf die von ihr

favorisierten Ideen. Sprechen Sie sich nicht vorher ab!

4.  Diskutieren Sie im Anschluss Ihre Wahl und treffen Sie die finalen Entscheidungen, was im nächsten Sprint realisiert wird!

Übung #6: Sprint Planning (Yes, again)

4-6 Personen, 20 min 1.  Definieren Sie Ihre Scrum-Rollen.

2.  Der Product-Owner priorisiert die bestehenden User-Stories des Teams und schreibt das Produkt-Backlog.

3.  Das Entwicklungsteam definiert, wie viele User Stories sie im kommenden Sprint abarbeiten werden.

1.  Info: Inhaltlich ist anstatt zu programmieren pro User Story ein Ablaufdiagramm und ein Scribble für das Interface zu erstellen

2.  Info: Ihr Sprint dauert 1 Stunde (statt 2 Wochen)

4.  Das Entwicklungsteam schreibt das Sprint-Backlog.

Übung #6: Sprint Planning (Yes, again)

4-6 Personen, 20 min 1.  Definieren Sie Ihre Scrum-Rollen.

2.  Der Product-Owner priorisiert die bestehenden User-Stories des Teams und schreibt das Produkt-Backlog.

3.  Das Entwicklungsteam definiert, wie viele User Stories sie im kommenden Sprint abarbeiten werden.

1.  Info: Inhaltlich ist anstatt zu programmieren pro User Story ein Ablaufdiagramm und ein Scribble für das Interface zu erstellen

2.  Info: Ihr Sprint dauert 1 Stunde (statt 2 Wochen)

4.  Das Entwicklungsteam schreibt das Sprint-Backlog.

Übung #6: Kanban-Board

4-6 Personen, 30 min 1.  Beschriften Sie die einzelnen Arbeitsschritte der Stationen Ihres

Kanban-Boards.

2.  Erstellen Sie aus den neuen Anforderungen Tickets (es steht frei, ob dies User-Stories, Tasks oder Features sind).

3.  Definieren Sie, wie viele Karten maximal in den einzelnen Stationen parallel bearbeitet werden dürfen.

4.  Definieren Sie die Regeln selbst: Wer zieht, wann zieht man, wie wählt man das nächste zu ziehende Ticket aus der Menge der vorhandenen Tickets?

5.  Starten Sie die Bearbeitung und beobachten Sie, wo Engpässe entstehen.

Struktur eines IT Kanban Boards „Backlog“ und „User Stories“ von Scrum übernommen.

Zu beachten: Der Abschnitt „Emergency Fixes“ 118

Prinzipien von Kanban

1.  Ziel ist das Visualisieren des Arbeitsprozesses: jeder Task durchläuft einzelne Stationen.

2.  Die angefangene Arbeit wird begrenzt, zB. Nicht mehr als 3 Tasks dürfen gleichzeitig in der Station "Development" liegen. Tasks werden nicht geschoben, sondern proaktiv geholt.

3.  Blockaden in der Abwicklung werden schnell erkannt, so kann die Durchlaufzeit optimiert werden.

4.  Ideal zum effizienten Abarbeiten von Tasks, Gefahr besteht jedoch darin, die sinnvolle Priorisierung aus den Augen zu verlieren.

5.  Kann gut mit anderen Methodologien wie Scrum kombiniert werden. 119

Kanban-Board in der Praxis Whiteboards und mehrfarbige Post-Its als typisches Kanban-Arbeitsmaterial.

120

Thank you.

“That's the nature of interaction design: You do the best you can, you learn as much as you can, you put it out there and

then people don't know how to use it anyway.“ – Jeffrey Zeldman