Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Digital Banking. UX.
Simplicity. Namics.
CAS DIGITAL BANKING
INSTITUT FÜR FINANZDIENSTLEISTUNGEN ZUG IFZ
ZUG, 23. JUNI 201...
Was ist User Experience?
Namics.3
User Experience ist schnell gesagt…
- Experience heisst Erlebnis
- Was beeinflusst Erlebnisse (bei Digital Bankin...
Namics.
Unser Verständnis der Welt
VERHALTEN
ANGEBOT
UNTER-
NEHMEN
Die digitale Transformation verändert
Erwartungen, Ansp...
Namics.5
Ziel dieses Beitrags
- Umfassendes Verständnis für UX schaffen
- Meine Überzeugung zur Diskussion stellen
- Ausge...
Agenda.
ERSTENS Worum geht es bei UX?
ZWEITENS Nutzerzentrierte Konzeption
- Strategie
- Research
- Informationsarchitektu...
Worum geht es bei UX?
ERSTENS
Namics.8
Understanding the Job
- https://www.youtube.com/watch?v=f84LymEs67Y
Namics.
Unser Verständnis der Welt
VERHALTEN
ANGEBOT
UNTER-
NEHMEN
Die digitale Transformation verändert
Erwartungen, Ansp...
Namics.10
Übung 1: Frage
- Was braucht ihre 20-jährige Tochter von ihrer Bank?
Namics.11
Übung 1: Meine Antwort
- Kreditkarte für Online
- Debitkarte um Bargeld zu beziehen
- Konto für Lohn (was ist da...
Der wichtigste Kundenkontakt
ist ein unbegleiteter Dialog
Namics.13
Was ist also wichtig?
- Vor der Konzeption
- Kunden verstehen
- Kundenbedürfnisse verstehen
- Verhalten antizipi...
Nutzerzentrierte
Konzeption
ZWEITENS
Namics.15
Dimensionen der Konzeption
Strategie
Informations-
architektur
Research
Interaction
Design
machendenken
abstrakt...
Namics.16
“The Elements of User Experience”
Elemente der (Web) User Experience
nach Garrett (2012)
KAPITEL 2 DIE ELEMENTE2...
Namics.
Elemente der Entwicklung von Benutzerschnittstellen Jesse James Garrett
jjg@jjg.net
Informations-Architektur: Stru...
Namics.18
PDCA Quality Cycle (Demingkreis)
Von Walter A. Shewart (1939), https://de.wikipedia.org/wiki/Demingkreis
Umsetze...
Namics.19
Adieu Wasserfall (oder zumindest ein
iteratives Vorgehen)
- Vorherige Entscheide
können / müssen in Frage
gestel...
Ein gutes Interface?
Ein gutes Interface?
Namics.22
Was ist gute User Experience?
http://ux.namics.com
Übung 2:
Willkommen zur Duck Challenge
Namics.
Übung 2: Aufgabe der Duck Challenge
- Setup
- 1 Person baut die Ente
- 1 Person beobachtet
- Aufgabe
- Sie haben e...
Übung 2: Worum geht es?
Strategie
NUTZERZENTRIERTE KONZEPTION
Namics.28
Strategy should bring clarity…
- …it should be a signpost for showing
people where you, as their leader, are
tak...
Namics.29
Strategie greifbar darstellen
Namics.30
Beispiel: Am POS bezahlen (nie umgesetzt)
1 – Elvetino Railbar seller
Client-side detection using the nearby
fea...
Namics.31
Beispiel: Am POS bezahlen (nie umgesetzt)
Namics.32
Beispiel: Am POS bezahlen (nie umgesetzt)
User vs. Stakeholder
Namics.
User = Benutzer-Bedürfnisse
- Niedrige Kosten
- Zufriedenstellendes Resultat in
wenig Zeit
- Die Qual der Wahl
- E...
Namics.35
Zwischenhalt Strategie
- Es geht nicht “nur” um die Online-Strategie, aber die
Strategie einer Unternehmung in e...
Research
NUTZERZENTRIERTE KONZEPTION
Namics.37
Sehen und Betrachten
Namics.38
Grundlagen isolieren (z.B. mit 5 x Warum)
Problemstellung: Das Fahrzeug startet nicht.
1. Warum startet das Fahr...
Namics.39
Analyse der User Journey, IST-Zustand
Kanäle
Emotionen
Chancen
Journey
Namics.40
Illustration Interviews als Methode
Abfolgen, Artefakte
und Zitate
Profil
+ Videoaufzeichnungen auf wiki
Namics.41
Beispiel: Onboarding-Studie
- Wir haben bei 14 Banken ein Konto eröffnet und
dazu eine Kreditkarte bestellt
- Un...
Namics.42
Beispiel: Onboarding-Studie (Bank in DE)
Namics.43
Beispiel: Onboarding-Studie (Bank in DE)
Namics.44
Beispiel: Onboarding-Studie (Bank in DE)
Namics.
Ich bin verwirrt: „Falls sie noch keine neue Pin-
Mitteilung erhalten haben gilt für die Adlercard die
vierstellig...
Namics.
Bei den Erstzugangsdaten für das Online Banking
wird ein TAN-Generator erwähnt. Wir hatten das
Mobile TAN-Verfahre...
Namics.
Wollen die mich nicht als Kunde ihrer Kreditkarte?
Warum höre ich nichts? Wo stehen wir denn jetzt
damit?“
Ich erh...
Namics.48
Lass uns Interviews machen!
Was können Interviews NICHT leisten?
- Aus den Aussagen der Nutzer lässt sich keine ...
Namics.49
Zwischenhalt Research
- Outside-in versus Inside-out: Der User entscheidet
- Es gibt viele Methoden, sie müssen ...
Informationsarchitektur
NUTZERZENTRIERTE KONZEPTION
Namics.
Übung 3: Analyse von diesem Screen
Namics.52
Übung 3: Meine Fragen
- Orientierung
- Wo bin ich?
- Wo komme ich her?
- Wohin kann ich?
- Funktion
- Was kann i...
Namics.53
Elemente eines Layouts
Information Ordnung Gestalt
I II III
Namics.54
Beispiel einer Informationsarchitektur
Information
I
Namics.
Ordnung
II
55
Beispiel einer Binnengliederung
- Ästhetische, funktionale
Aufteilung der Gestaltungsfläche
- Naviga...
Namics.56
Tipp: Treejack Test
- Task-basierte Tests
(ex post)
- Testuser lösen Aufgaben
anhand der erarbeiteten
IA
https:/...
Namics.57
Zwischenhalt Informationsarchitektur
- Ihr wisst schon wie (oder eigener Slot)
- Auf Prozesse / Journeys achten
...
Interaktionsdesign
NUTZERZENTRIERTE KONZEPTION
Zusammenarbeit mit Designer
Namics.60
Prototyping zur Interdisziplinären
Zusammenarbeit
Anforderungen
Technische Rahmenbedingungen
Prozesse Design
IxD...
Testen, testen, testen
Namics.62
Von Low- zu High-Fidelity
Low-Fidelity
Hand sketchings, mockups
Mid-Fidelity
Wireframes, clickable
High-Fidelity...
Namics.63
Beispiel eines Low-Fi Prototypen
Namics.64
Beispiel eines Mid-Fi Prototypen
Namics.65
Während der Arbeit an den Prototypen
Namics.66
Ziele von Prototypen / Prototyping
1. Gemeinsame Kommunikation schaffen
…und Fehlinterpretationen verringern
2. ...
Generator & Validator
Namics.68
Pair Design
- Consultant + UX Designer
- Requirements + UI Konzept
- Analysieren + Visualisieren
- Geschichte er...
Namics.69
Design und Kritik
Generator
Validator
Namics.70
Zwischenhalt Interaktionsdesign
- Design ist Arbeit (keine Eingebung)
- Design folgt bekannten Prinzipien
- Inte...
Abschluss
ERSTENS
Namics.
Und jetzt?
Namics.73
Weiterführende Informationen
UX Intensive Eine Schulung/Veranstaltung von Adaptive Path
http://ux-intensive.com/...
Danke. Namics.
© N A M I C S A G 2 0 1 7
juerg.stuker@namics.com
079 / 252 67 91
Digital Banking: Simplicity and User Experience
Upcoming SlideShare
Loading in …5
×

Digital Banking: Simplicity and User Experience

439 views

Published on

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

Published in: Education
  • Be the first to comment

Digital Banking: Simplicity and User Experience

  1. 1. Digital Banking. UX. Simplicity. Namics. CAS DIGITAL BANKING INSTITUT FÜR FINANZDIENSTLEISTUNGEN ZUG IFZ ZUG, 23. JUNI 2017 Jürg Stuker. Partner.
  2. 2. Was ist User Experience?
  3. 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. 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. 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. 6. Agenda. ERSTENS Worum geht es bei UX? ZWEITENS Nutzerzentrierte Konzeption - Strategie - Research - Informationsarchitektur - Interaktionsdesign DRITTENS Abschluss
  7. 7. Worum geht es bei UX? ERSTENS
  8. 8. Namics.8 Understanding the Job - https://www.youtube.com/watch?v=f84LymEs67Y
  9. 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. 10. Namics.10 Übung 1: Frage - Was braucht ihre 20-jährige Tochter von ihrer Bank?
  11. 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. 12. Der wichtigste Kundenkontakt ist ein unbegleiteter Dialog
  13. 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. 14. Nutzerzentrierte Konzeption ZWEITENS
  15. 15. Namics.15 Dimensionen der Konzeption Strategie Informations- architektur Research Interaction Design machendenken abstrakt real
  16. 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. 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. 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. 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. 20. Ein gutes Interface?
  21. 21. Ein gutes Interface?
  22. 22. Namics.22 Was ist gute User Experience? http://ux.namics.com
  23. 23. Übung 2: Willkommen zur Duck Challenge
  24. 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. 25. Übung 2: Worum geht es?
  26. 26. Strategie NUTZERZENTRIERTE KONZEPTION
  27. 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. 28. Namics.29 Strategie greifbar darstellen
  29. 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. 30. Namics.31 Beispiel: Am POS bezahlen (nie umgesetzt)
  31. 31. Namics.32 Beispiel: Am POS bezahlen (nie umgesetzt)
  32. 32. User vs. Stakeholder
  33. 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. 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. 35. Research NUTZERZENTRIERTE KONZEPTION
  36. 36. Namics.37 Sehen und Betrachten
  37. 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. 38. Namics.39 Analyse der User Journey, IST-Zustand Kanäle Emotionen Chancen Journey
  39. 39. Namics.40 Illustration Interviews als Methode Abfolgen, Artefakte und Zitate Profil + Videoaufzeichnungen auf wiki
  40. 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. 41. Namics.42 Beispiel: Onboarding-Studie (Bank in DE)
  42. 42. Namics.43 Beispiel: Onboarding-Studie (Bank in DE)
  43. 43. Namics.44 Beispiel: Onboarding-Studie (Bank in DE)
  44. 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. 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. 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. 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. 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. 49. Informationsarchitektur NUTZERZENTRIERTE KONZEPTION
  50. 50. Namics. Übung 3: Analyse von diesem Screen
  51. 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. 52. Namics.53 Elemente eines Layouts Information Ordnung Gestalt I II III
  53. 53. Namics.54 Beispiel einer Informationsarchitektur Information I
  54. 54. Namics. Ordnung II 55 Beispiel einer Binnengliederung - Ästhetische, funktionale Aufteilung der Gestaltungsfläche - Navigations-, Funktionsbereiche - Inhaltsbereich (Informationen) - „Weissraum“ - Definition durch ein Rastersystem
  55. 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. 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. 57. Interaktionsdesign NUTZERZENTRIERTE KONZEPTION
  58. 58. Zusammenarbeit mit Designer
  59. 59. Namics.60 Prototyping zur Interdisziplinären Zusammenarbeit Anforderungen Technische Rahmenbedingungen Prozesse Design IxD Prototyp
  60. 60. Testen, testen, testen
  61. 61. Namics.62 Von Low- zu High-Fidelity Low-Fidelity Hand sketchings, mockups Mid-Fidelity Wireframes, clickable High-Fidelity Visual design prototypes
  62. 62. Namics.63 Beispiel eines Low-Fi Prototypen
  63. 63. Namics.64 Beispiel eines Mid-Fi Prototypen
  64. 64. Namics.65 Während der Arbeit an den Prototypen
  65. 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. 66. Generator & Validator
  67. 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. 68. Namics.69 Design und Kritik Generator Validator
  69. 69. Namics.70 Zwischenhalt Interaktionsdesign - Design ist Arbeit (keine Eingebung) - Design folgt bekannten Prinzipien - Interdisziplinäre Zusammenarbeit als Schlüssel zum Erfolg
  70. 70. Abschluss ERSTENS
  71. 71. Namics. Und jetzt?
  72. 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
  73. 73. Danke. Namics. © N A M I C S A G 2 0 1 7 juerg.stuker@namics.com 079 / 252 67 91

×