Lecture held at Institut für Finanzdienstleistungen Zug IFZ in the Context of their CAS "Digital Banking"

1. Digital Banking. UX.
Simplicity. Namics.
CAS DIGITAL BANKING
INSTITUT FÜR FINANZDIENSTLEISTUNGEN ZUG IFZ
ZUG, 23. JUNI 2017
Jürg Stuker. Partner.

2. Was ist User Experience?

3. Namics.3
User Experience ist schnell gesagt…
- Experience heisst Erlebnis
- Was beeinflusst Erlebnisse (bei Digital Banking)?
- es geht nicht (nur) um Design
- es geht nicht (nur) um Interaktion
- ...
- es geht auch um das Produkt!
- Erlebnisse sind abhängig von Pfad und Kontext
- Erlebnisse sind subjektiv

4. Namics.
Unser Verständnis der Welt
VERHALTEN
ANGEBOT
UNTER-
NEHMEN
Die digitale Transformation verändert
Erwartungen, Ansprüche, Bedürfnisse und
Verhalten von Menschen.
Aufgrund veränderter Erwartungshaltungen
müssen Geschäftsmodelle, Produkte und
Dienstleistungen weiter oder gar neu
entwickelt werden.
Der Kern eines Unternehmens verändert
sich: in Bezug auf Abläufe, Organisation,
Mitarbeiter und Kultur.

5. Namics.5
Ziel dieses Beitrags
- Umfassendes Verständnis für UX schaffen
- Meine Überzeugung zur Diskussion stellen
- Ausgewählte Modelle und Methoden zeigen
- Dialog ermöglichen und fördern

6. Agenda.
ERSTENS Worum geht es bei UX?
ZWEITENS Nutzerzentrierte Konzeption
- Strategie
- Research
- Informationsarchitektur
- Interaktionsdesign
DRITTENS Abschluss

7. Worum geht es bei UX?
ERSTENS

8. Namics.8
Understanding the Job
- https://www.youtube.com/watch?v=f84LymEs67Y

9. Namics.
Unser Verständnis der Welt
VERHALTEN
ANGEBOT
UNTER-
NEHMEN
Die digitale Transformation verändert
Erwartungen, Ansprüche, Bedürfnisse und
Verhalten von Menschen.
Aufgrund veränderter Erwartungshaltungen
müssen Geschäftsmodelle, Produkte und
Dienstleistungen weiter oder gar neu
entwickelt werden.
Der Kern eines Unternehmens verändert
sich: in Bezug auf Abläufe, Organisation,
Mitarbeiter und Kultur.

10. Namics.10
Übung 1: Frage
- Was braucht ihre 20-jährige Tochter von ihrer Bank?

11. Namics.11
Übung 1: Meine Antwort
- Kreditkarte für Online
- Debitkarte um Bargeld zu beziehen
- Konto für Lohn (was ist das?)
- Sie meint kein mobile Banking zu brauchen:
Rechnungen (egal in welchem Format) will sie nicht
verstehen, Sie kauft online
- Desktop ist noch viel weiter entfernt. Verreist sie drei
Monate lässt sie den Laptop zu Hause (den sie sonst
auch nicht braucht)

12. Der wichtigste Kundenkontakt
ist ein unbegleiteter Dialog

13. Namics.13
Was ist also wichtig?
- Vor der Konzeption
- Kunden verstehen
- Kundenbedürfnisse verstehen
- Verhalten antizipieren (um z.B. Fehler zu verhindern)
- Erfolgsfaktoren (KPIs) definieren
- Nutzerzentriert konzipieren und umsetzen
- testen, testen, testen
- Betrieb überwachen
- im Dialog (Helpline/Chat, Methoden der Marktforschung)
- technisch (Analytics, Prozesse, Monitoring inkl. Prozesse)

14. Nutzerzentrierte
Konzeption
ZWEITENS

15. Namics.15
Dimensionen der Konzeption
Strategie
Informations-
architektur
Research
Interaction
Design
machendenken
abstrakt
real

16. Namics.16
“The Elements of User Experience”
Elemente der (Web) User Experience
nach Garrett (2012)
KAPITEL 2 DIE ELEMENTE22
Auf jeder Ebene werden die Entscheidungen, die wir treffen müssen,
etwas spezifischer und detaillierter.
abstrakt
konkret
LE07
9
konkret
abstrakt
Realisierung
Konzeption
JesseJamesGarrethttp://jjg.net/elements/

17. Namics.
Elemente der Entwicklung von Benutzerschnittstellen Jesse James Garrett
jjg@jjg.net
Informations-Architektur: Strukturierte
Gestaltung des Informationsraumes zur
Vereinfachung des intuitiven Zugangs
der Benutzer zu den Inhalten
Interaktions-Gestaltung: Gestaltung des
Anwendungsflüsse zur erleichterten
Wahrnehmung von Benutzer-Anforderungen
und die Definition des Umganges
mit den Funktionen
Navigations-Gestaltung: Gestaltung der
Schnittstellen-Elemente zur Erleichterung der
Navigation durch die Informations-Architektur
Informationsgestaltung: Im Tuft'schen Sinn:
Informationsgestaltung zur Erleichterung
des Verständnisses
Spezifizierung der Funktionen: „feature set“:
Detaillierte Beschreibung der Funktionalität
der Site um die Benutzeranforderungen zu
befriedigen
Inhaltliche Anforderungen: Definition der
notwendigen Inhaltselemente der Site zur
Befriedigung der Benutzerbedürnisse
Schnittstellen Gestaltung: Wie in der
klassischen Mensch-Computer-Beziehung:
Gestaltung der Schnittstellen-Elemente zur
Erleichterung der Handhabung der Funktionen
Informationsgestaltung: Im Tuft'schen Sinn:
Informationsgestaltung zur Erleichterung
des Verständnisses
Das Web als Software-Schnittstelle Das Web als Hypertext-System
Visuelle Gestaltung: Grafische Bearbeitung
der Schnittstellen-Elemente
(the „look“ in „look at feel“)
Visuelle Gestaltung: Grafische Bearbeitung
von Text, grafischen Elementen und
Navigationskomponenten
Zeit
Allgemein Konzeption
Konkret Realisierung
Spezifizierung
der Funktionen
Inhaltliche
Anforderungen
Interaktions-
Gestaltung
Informations-
Architektur
Visuelle Gestaltung
Informationsgestaltung
Schnittstellen
Gestaltung
Navigations-
Gestaltung
Inhaltsziele
Benutzer-Bedürfnisse
Benutzer-Bedürfnisse: Von aussen abgeleitete
Site-Zielsetzungen, welche durch Benutzforschung
erhoben werden (ethno-, techno-, psychografisch
etc.)
Inhaltsziele: Interne Zielsetzungen der Site,
wie etwa Business, künstlerische oder andere
aufgabenorientiert informationsorientiert
März 30, 2000
Deutsche Übersetzung
durch
Andreas Lutz
Benutzer-Bedürfnisse: Von aussen abgeleitete
Site-Zielsetzungen, welche durch Benutzforschung
erhoben werden (ethno-, techno-, psychografisch
etc.)
Inhaltsziele: Interne Zielsetzungen der Site,
wie etwa Business, künstlerische oder andere
Eine grundlegende Dualität: Das Web wurde ursprünglich als hypertextueller Informationsraum konzipiert. Die Entwicklung
zunehmend ausgeklügelter Front- und Backend-Technologien hat seine Verwendung als entfernte Software-Schnittstelle gefördert.
Diese Zwiespältigkeit hat zu manchen Verwirrungen geführt, bis es Entwicklern für benutzerbezogene Oberflächen gelang, die
Terminologie der neuen Realität des Web anzupassen. Ziel dieses Dokuments ist es, einige dieser Begriffe innerhalb ihres
passenden Kontextes zu erläutern und die zugrundeliegenden Beziehungen zwischen den verschiedenen Elementen zu klären.
17
“The Elements of User Experience”
JesseJamesGarrethttp://jjg.net/elements/

18. Namics.18
PDCA Quality Cycle (Demingkreis)
Von Walter A. Shewart (1939), https://de.wikipedia.org/wiki/Demingkreis
Umsetzen
(Do)
Überprüfen
(Check)
Handeln
(Act)
Planen
(Plan)

19. Namics.19
Adieu Wasserfall (oder zumindest ein
iteratives Vorgehen)
- Vorherige Entscheide
können / müssen in Frage
gestellt werden…
- Lange Durchlaufzeit bedeutet
Entfernung von Bedürfnissen
- Welt verändert sich
- Feedback kommt zu spät
- “Fail Early, Fail Often”
- “If fail, please early”
Garrett: (Web) UI Design Vorgehen
aus Garrett (2012) "Die Elemente der User Experience"
Gutes Web & GUI Design ist kein Wasserfall Prozess
Nicht: Strategie->Umfang->Struktur->Raster->Oberfläche
Sondern Iterativ = Vorherige Entscheide werden überprüft
und können in Frage gestellt werden
weiter unten gelegenen Ebenen erfordern. Auf jeder Ebene treffen wir
Entscheidungen aufgrund der Aktivitäten unserer Wettbewerber, der
branchenüblichen Vorgehensweise, unserer Kenntnisse über unsere
Nutzer und aufgrund des gesunden Menschenverstandes. Diese Ent-
scheidungen können in beide Richtungen ausstrahlen.
Aufwand
Zeit
Aufwand
Zeit
Wenn Sie zunächst jede Ebene für sich abschließen, ehe Sie Entschei-
sind
edi-
Ar-
en
los-
bevor
hsten
tzt
nsatz
an
tig
or
er
e
LE07
11
aus Garrett (2012) "Die Elemente der User Experience"
Gutes Web & GUI Design ist kein Wasserfall Prozess
Nicht: Strategie->Umfang->Struktur->Raster->Oberfläche
Sondern Iterativ = Vorherige Entscheide werden überprüft
und können in Frage gestellt werden
weiter unten gelegenen Ebenen erfordern. Auf jeder Ebene treffen wir
Entscheidungen aufgrund der Aktivitäten unserer Wettbewerber, der
branchenüblichen Vorgehensweise, unserer Kenntnisse über unsere
Nutzer und aufgrund des gesunden Menschenverstandes. Diese Ent-
scheidungen können in beide Richtungen ausstrahlen.
Aufwand
Zeit
Aufwand
Zeit
Wenn Sie zunächst jede Ebene für sich abschließen, ehe Sie Entschei-
dungen auf höher gelegenen Ebenen treffen, werden Sie so gut wie
sind
di-
Ar-
n
os-
bevor
sten
zt
satz
an
ig
r
r
11

20. Ein gutes Interface?

21. Ein gutes Interface?

22. Namics.22
Was ist gute User Experience?
http://ux.namics.com

23. Übung 2:
Willkommen zur Duck Challenge

24. Namics.
Übung 2: Aufgabe der Duck Challenge
- Setup
- 1 Person baut die Ente
- 1 Person beobachtet
- Aufgabe
- Sie haben eine Minute Zeit
- Bauen Sie aus den sechs ausgeteilten Lego-Stücken eine
Ente für die Person, die links von Ihnen sitzt

25. Übung 2: Worum geht es?

26. Strategie
NUTZERZENTRIERTE KONZEPTION

28. Namics.28
Strategy should bring clarity…
- …it should be a signpost for showing
people where you, as their leader, are
taking them—and what they need to
do to get there…
- People need to have a visceral
understanding—an image in their
minds—of why you've chosen a
certain strategy and what you're
attempting to create with it…
Tim Brown
CEO and President, IDEO
http://www.fastcompany.com/52795/strategy-design

29. Namics.29
Strategie greifbar darstellen

30. Namics.30
Beispiel: Am POS bezahlen (nie umgesetzt)
1 – Elvetino Railbar seller
Client-side detection using the nearby
feature (Beacon).
2 – Chestnuts salesman
Typicalremote POS situation with low-
tech infrastructure (QR).
3 – Waiter at Tibits restaurant
Fast and seamless payment with NFC
for medium or large merchants.
4 – Wine bar barkeeper
Temporary personnelusing its own
mobile device (BYOD). Adding tip…
5 – Donations
Handling of donations within the P2M
process.

31. Namics.31
Beispiel: Am POS bezahlen (nie umgesetzt)

32. Namics.32
Beispiel: Am POS bezahlen (nie umgesetzt)

33. User vs. Stakeholder

34. Namics.
User = Benutzer-Bedürfnisse
- Niedrige Kosten
- Zufriedenstellendes Resultat in
wenig Zeit
- Die Qual der Wahl
- Einfach und verständlich
- Kurz und knapp
- Motivierend und unterhaltsam
- ...
Gegensätzlich und doch unzertrennlich
Stakeholder = Inhaltsziele
- Gewinn maximieren
- Hohe Qualität der Resultate
- Konkurrenzkampf
- Fachliche Korrektheit
- Komplett und umfassend
- Stabil und sicher
- …
34

35. Namics.35
Zwischenhalt Strategie
- Es geht nicht “nur” um die Online-Strategie, aber die
Strategie einer Unternehmung in einer Digitalen Welt
- Hauptproblem ist deren Operationalisierung – die
Strategie muss Teil des Prozesses werden

36. Research
NUTZERZENTRIERTE KONZEPTION

37. Namics.37
Sehen und Betrachten

38. Namics.38
Grundlagen isolieren (z.B. mit 5 x Warum)
Problemstellung: Das Fahrzeug startet nicht.
1. Warum startet das Fahrzeug nicht?
Die Starterbatterie ist leer.
2. Warum ist die Starterbatterie leer?
Die Lichtmaschine funktioniert nicht.
3. Warum funktioniert die Lichtmaschine nicht?
Der Treibriemen ist gerissen.
4. Warum ist der Treibriemen gerissen?
Der Treibriemen wurde nie ausgewechselt.
5. Warum wurde der Treibriemen nie ausgewechselt?
Das Fahrzeug wurde bisher nie gewartet.

39. Namics.39
Analyse der User Journey, IST-Zustand
Kanäle
Emotionen
Chancen
Journey

40. Namics.40
Illustration Interviews als Methode
Abfolgen, Artefakte
und Zitate
Profil
+ Videoaufzeichnungen auf wiki

41. Namics.41
Beispiel: Onboarding-Studie
- Wir haben bei 14 Banken ein Konto eröffnet und
dazu eine Kreditkarte bestellt
- Unsere Ziele als Kunde
- Wenn immer möglich, haben wir den digitalen Kanal
gewählt
https://www.namics.com/news/2016/bankkunde-werden-huerden-in-digitalen-zeiten/

42. Namics.42
Beispiel: Onboarding-Studie (Bank in DE)

43. Namics.43
Beispiel: Onboarding-Studie (Bank in DE)

44. Namics.44
Beispiel: Onboarding-Studie (Bank in DE)

45. Namics.
Ich bin verwirrt: „Falls sie noch keine neue Pin-
Mitteilung erhalten haben gilt für die Adlercard die
vierstellige Geheimzahl Ihrer bisherigen
SparkassenCard.“
Ich bin Neukunden, welche bisherige Geheimzahl?“
Zitat aus dem Erlebnisbericht der Konto-Eröffnung”

46. Namics.
Bei den Erstzugangsdaten für das Online Banking
wird ein TAN-Generator erwähnt. Wir hatten das
Mobile TAN-Verfahren ausgewählt. Brauchen wir
den und kommt der noch?“
Zitat aus dem Erlebnisbericht der Konto-Eröffnung”

47. Namics.
Wollen die mich nicht als Kunde ihrer Kreditkarte?
Warum höre ich nichts? Wo stehen wir denn jetzt
damit?“
Ich erhalte den Hinweis: Wir benötigen eine Kopie
Ihres Arbeitsvertrages.“
Zitat aus dem Erlebnisbericht der Konto-Eröffnung
”

48. Namics.48
Lass uns Interviews machen!
Was können Interviews NICHT leisten?
- Aus den Aussagen der Nutzer lässt sich keine konkrete
Produktbeschreibung ableiten
- Interviews sind ein qualitatives, kein quantitatives Verfahren
- Interviews können zukünftiges Nutzerverhalten nicht
vorhersagen, alle Aussagen zur Zukunft sind nur Hinweise auf
aktuelle mentale Modelle, die in der Zukunft nicht mehr
unbedingt Gültigkeit haben müssen
- Achtung: die Interviewsituation ist keine natürliche Situation

49. Namics.49
Zwischenhalt Research
- Outside-in versus Inside-out: Der User entscheidet
- Es gibt viele Methoden, sie müssen richtig
angewendet werden
- Beobachtung ist einfach und sehr wertvoll
- Emotionale Dokumentation erlaubt einfacheren
Zugang und damit auch Qualitässicherung
- Machbarkeit kommt später

50. Informationsarchitektur
NUTZERZENTRIERTE KONZEPTION

51. Namics.
Übung 3: Analyse von diesem Screen

52. Namics.52
Übung 3: Meine Fragen
- Orientierung
- Wo bin ich?
- Wo komme ich her?
- Wohin kann ich?
- Funktion
- Was kann ich tun? (Was wird hier angeboten)
- Wo kann ich es tun?
- Was soll ich tun? (Best Next Action)

53. Namics.53
Elemente eines Layouts
Information Ordnung Gestalt
I II III

54. Namics.54
Beispiel einer Informationsarchitektur
Information
I

55. Namics.
Ordnung
II
55
Beispiel einer Binnengliederung
- Ästhetische, funktionale
Aufteilung der Gestaltungsfläche
- Navigations-, Funktionsbereiche
- Inhaltsbereich (Informationen)
- „Weissraum“
- Definition durch ein
Rastersystem

56. Namics.56
Tipp: Treejack Test
- Task-basierte Tests
(ex post)
- Testuser lösen Aufgaben
anhand der erarbeiteten
IA
https://www.optimalworkshop.com/treejack

57. Namics.57
Zwischenhalt Informationsarchitektur
- Ihr wisst schon wie (oder eigener Slot)
- Auf Prozesse / Journeys achten
- Wichtig
- nachträglich validieren
- mit Analytics prüfen, ob die IA (noch immer) funktioniert

58. Interaktionsdesign
NUTZERZENTRIERTE KONZEPTION

59. Zusammenarbeit mit Designer

60. Namics.60
Prototyping zur Interdisziplinären
Zusammenarbeit
Anforderungen
Technische Rahmenbedingungen
Prozesse Design
IxD
Prototyp

61. Testen, testen, testen

62. Namics.62
Von Low- zu High-Fidelity
Low-Fidelity
Hand sketchings, mockups
Mid-Fidelity
Wireframes, clickable
High-Fidelity
Visual design prototypes

63. Namics.63
Beispiel eines Low-Fi Prototypen

64. Namics.64
Beispiel eines Mid-Fi Prototypen

65. Namics.65
Während der Arbeit an den Prototypen

66. Namics.66
Ziele von Prototypen / Prototyping
1. Gemeinsame Kommunikation schaffen
…und Fehlinterpretationen verringern
2. Verschiedene Designs erarbeiten
3. Ideen verkaufen
4. Usability testen
5. Technische Machbarkeit, den Aufwand
und dessen Wert abschätzen

67. Generator & Validator

68. Namics.68
Pair Design
- Consultant + UX Designer
- Requirements + UI Konzept
- Analysieren + Visualisieren
- Geschichte erzählen + Bilder dazu malen
- Vorteile
- generativer Prozess <> Evaluation gegenüber Projektzielen
- Rollenverteilung als Befreiung von „Denkgrenzen“

69. Namics.69
Design und Kritik
Generator
Validator

70. Namics.70
Zwischenhalt Interaktionsdesign
- Design ist Arbeit (keine Eingebung)
- Design folgt bekannten Prinzipien
- Interdisziplinäre Zusammenarbeit als Schlüssel zum
Erfolg

71. Abschluss
ERSTENS

72. Namics.
Und jetzt?

73. Namics.73
Weiterführende Informationen
UX Intensive Eine Schulung/Veranstaltung von Adaptive Path
http://ux-intensive.com/
5-S Modell Jesse James Garret
http://jjg.net/elements/
IA mit Mentalen Modellen Indi Young
http://rosenfeldmedia.com/books/mental-models/
Prototyping Todd Zaki Warfel
http://rosenfeldmedia.com/books/prototyping
Featurematrix Konstantin Weiss
http://uxzentrisch.de/szenarien-und-featurematrix-als-
evaluationsmethode-im-user-centered-design/
Persona, Tangible future,
Prototyping
Adaptive Path
Design Principles http://www.amazon.com/Universal-Principles-Design-William-Lidwell

74. Danke. Namics.
© N A M I C S A G 2 0 1 7
juerg.stuker@namics.com
079 / 252 67 91