Digital Banking: Simplicity and User Experience

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

27. 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

28. Namics.29 Strategie greifbar darstellen

29. 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.

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

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

32. User vs. Stakeholder

33. 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

34. 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

35. Research NUTZERZENTRIERTE KONZEPTION

36. Namics.37 Sehen und Betrachten

37. 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.

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

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

40. 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/

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

44. 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”

45. 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”

46. 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 ”

47. 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

48. 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

49. Informationsarchitektur NUTZERZENTRIERTE KONZEPTION

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

51. 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)

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

53. Namics.54 Beispiel einer Informationsarchitektur Information I

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

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

56. 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

57. Interaktionsdesign NUTZERZENTRIERTE KONZEPTION

58. Zusammenarbeit mit Designer

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

60. Testen, testen, testen

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

62. Namics.63 Beispiel eines Low-Fi Prototypen

63. Namics.64 Beispiel eines Mid-Fi Prototypen

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

65. 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

66. Generator & Validator

67. 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“

68. Namics.69 Design und Kritik Generator Validator

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

70. Abschluss ERSTENS

71. Namics. Und jetzt?

72. 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