Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Prinzipien des nutzerzentrierten Designs

36 Aufrufe

Veröffentlicht am

Präsentation über die Anwendung der Prinzipien des nutzerzentrierten Gestaltungsprozess-Patterns in der Web- und Softwareentwicklung.

Veröffentlicht in: Präsentationen & Vorträge
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Prinzipien des nutzerzentrierten Designs

  1. 1. © anyMOTION GRAPHICS GmbH 2017 Raus aus der Innensicht ! Prinzipien des konsequenten User Centered Design Köln, 16.03.2017
  2. 2. © anyMOTION GRAPHICS GmbH 2017 2 100% Innovation kombiniert mit etablierten Standards, einfach „made in Germany“ Unser Stamm fester Mitarbeiter, zzgl. spezialisierter Netzwerkpartner Andreas Neumann und Sascha Sell. Inhabergeführt, ausschließlich dem Kunden verpflichtet Stetiges Wachstum, immer gesund: im Internetagentur-Ranking unter den Top-25 in NRW, bundesweit auf Rang 80 Pure Digital-Kompetenz anyMOTION - Kurz & Gut
  3. 3. © anyMOTION GRAPHICS GmbH 2017 3
  4. 4. © anyMOTION GRAPHICS GmbH 2017 81.500.000 Menschen in D* 900.000 Marken in Deutschland 10.000 Werbebotschaften pro Tag 28.000.000.000 € Werbeaufwendungen 2.800.000.000 € Online Werbung 80% der Deutschen sind online 10.000.000 aktive Adblocker *30.6.2015,Quelle:StatistischesBundesamt,DeutschesPatentamt,ARDOnlinestudie Es ist kompliziert !
  5. 5. © anyMOTION GRAPHICS GmbH 2017 5 ?
  6. 6. © anyMOTION GRAPHICS GmbH 2017 6 Paradigmenwechsel ist vollzogen: From Push to Pull
  7. 7. © anyMOTION GRAPHICS GmbH 2017 7 Kunden suchen keine Produkte, sondern Lösungen!
  8. 8. © anyMOTION GRAPHICS GmbH 2017 8
  9. 9. © anyMOTION GRAPHICS GmbH 2017 9 Da sein, wo unsere (potenziellen) Kunden sind ... Zuhören ... Verstehen ... Lösungen anbieten ... Und ...
  10. 10. © anyMOTION GRAPHICS GmbH 2017 10 ... authentisch, kompetent und glaubwürdig sein!
  11. 11. © anyMOTION GRAPHICS GmbH 2017 11 Was passiert, wenn Unternehmen nicht zuhören?
  12. 12. © anyMOTION GRAPHICS GmbH 2017 12 Kennen Sie die noch?
  13. 13. © anyMOTION GRAPHICS GmbH 2017 Fail-Trail KODAK 13 1888 1975 2012 Erste KODAK Kamera kommt auf den Markt Ein KODAK Mitarbeiter entwickelt die weltweit erste Digital-Kamera => Dieser Ansatz wird nicht weiter verfolgt! Insolvenz-Anmeldung 1986 KODAK verliert Rechtsstreit um Sofortbild-Kamera gegen Polaroid
  14. 14. © anyMOTION GRAPHICS GmbH 2017 Fail-Trail KODAK 14
  15. 15. © anyMOTION GRAPHICS GmbH 2017 15
  16. 16. © anyMOTION GRAPHICS GmbH 2017 16 Nutzerzentrierung zahlt sich aus
  17. 17. © anyMOTION GRAPHICS GmbH 2017 17 Nutzerzentrierung zahlt sich aus5 Erfolgsfaktoren: 1. Fokus auf Kundenzufriedenheit 2. Exzellenz in den „must haves“ und Kreativität für „nice to haves“ 3. Großartige Nutzererlebnisse implizieren Nutzenorientierung und Emotion 4. Kognitives Verstehen des Kundenverhaltens 5. Erkenntnis der essentiellen Relation zwischen zufriedenen Kunden und zufriedenen Mitarbeitern
  18. 18. © anyMOTION GRAPHICS GmbH 2017 User Centered Design
  19. 19. © anyMOTION GRAPHICS GmbH 2017
  20. 20. © anyMOTION GRAPHICS GmbH 2017 20 Usability ≠ User Experience
  21. 21. © anyMOTION GRAPHICS GmbH 2017 Definition Usability „Usability ist das Ausmaß, in dem ein interaktives System durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ • Usability = Gebrauchstauglichkeit, Bedienbarkeit, Nutzbarkeit • Die Bewertung, wie benutzbar etwas ist • Bezieht sich auf die Bearbeitung der Aufgabe 21 Usability effektiv effizient zufrieden- stellend
  22. 22. © anyMOTION GRAPHICS GmbH 2017 Definition User Experience „Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen oder erwarteten Benutzung eines interaktiven Systems resultieren. “ • User Experience = Nutzer Erfahrung • Was geht in einem Nutzer vor, bevor, während und nachdem er etwas benutzt. • Welche emotionale Bindung wird aufgebaut? 22
  23. 23. © anyMOTION GRAPHICS GmbH 2017 Unterschied User Experience vs. Usability 23 Vor der Nutzung Während der Nutzung Nach der Nutzung Vorstellung über die Nutzung des Produkts, ohne es tatsächlich genutzt zu haben. Effektive und effiziente Aufgabenerledigung. Keine Beeinträchtigungen. Verarbeitung der erlebten Nutzung. Emotionale Bindung zum Produkt (oder Distanzbildung ...). Usability User Experience
  24. 24. © anyMOTION GRAPHICS GmbH 2017 Unterschied User Experience vs. Usability 24 Vor der Nutzung Während der Nutzung Nach der Nutzung Usability User Experience
  25. 25. © anyMOTION GRAPHICS GmbH 2017 Ausgangspunkt: User Journey
  26. 26. © anyMOTION GRAPHICS GmbH 2017 26 Reach Involvement Consideration Conversion (Sale) Advocacy Loyalty Support
  27. 27. © anyMOTION GRAPHICS GmbH 2017 27 Reach Involvement Consideration Conversion (Sale) Advocacy Loyalty Support Social Corporate Site E-CommerceDrive-to-store Social SocialDiskussion Premium Content Diskussion Social Corporate Site Corporate Site Corporate Site Premium Content
  28. 28. © anyMOTION GRAPHICS GmbH 2017 28 Reach Involvement Consideration Conversion (Sale) Advocacy Loyalty Support Social Corporate Site E-CommerceDrive-to-store Social SocialDiskussion Premium Content Diskussion Social Corporate Site Corporate Site Corporate Site Premium Content User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg User Einstieg
  29. 29. © anyMOTION GRAPHICS GmbH 2017 29 Reach Involvement Consideration Conversion (Sale) Advocacy Loyalty Support Social Corporate Site E-CommerceDrive-to-store Social SocialDiskussion Premium Content Diskussion Social Corporate Site Corporate Site Corporate Site Premium Content Die User Journey ist nicht linear !
  30. 30. © anyMOTION GRAPHICS GmbH 2017 User zentrierter Gestaltungsprozess
  31. 31. © anyMOTION GRAPHICS GmbH 2017 Zertifizierung CPUX-F • Usability Zertifizierung „Certified Professional for Usability and User Experience – Foundation Level” (CPUX-F). • Abgelegte Prüfung bescheinigt qualifiziertes Know-How mit grundlegenden Methoden und Workflows aus dem Fachgebiet Usability und UX. • Alle UX Konzeptioner bei anyMOTION erfolgreich zertifiziert. • Mitgliedschaft Berufsverband German UPA, permanente Weiterbildung 31
  32. 32. © anyMOTION GRAPHICS GmbH 2017 User-zentrierter Gestaltungsprozess, ISO 9241-210 32 Verstehen Festlegen Evaluieren Gestalten
  33. 33. © anyMOTION GRAPHICS GmbH 2017 User-zentrierter Gestaltungsprozess, ISO 9241-210 33 Planen des menschzentrierten Gestaltungsprozesses Erarbeiten von Gestaltungslösungen zur Erfüllung der Nutzungsanfoderungen Evaluierung der Gestaltungslösungen anhand der Nutzungsanforderungen Gestaltungslösung erfüllt Nutzungsanforderungen Iteration soweit nötig Verstehen und Festlegen des Nutzungskontextes Festlegen der Nutzungsanforderungen Verstehen Festlegen Gestalten Evaluieren
  34. 34. © anyMOTION GRAPHICS GmbH 2017 User-zentrierter Gestaltungsprozess, ISO 9241-210 34 Planen des menschzentrierten Gestaltungsprozesses Erarbeiten von Gestaltungslösungen zur Erfüllung der Nutzungsanfoderungen Evaluierung der Gestaltungslösungen anhand der Nutzungsanforderungen Gestaltungslösung erfüllt Nutzungsanforderungen Iteration soweit nötig Verstehen und Festlegen des Nutzungskontextes Festlegen der Nutzungsanforderungen IST-Zustand SOLL-Zustand Umsetzung QM
  35. 35. © anyMOTION GRAPHICS GmbH 2017 In diesem Schritt werden die Zielgruppen bestimmt und analysiert. Es wird erforscht, wie sie ihre Interaktion mit dem Produkt durchführen. 35 Verstehen
  36. 36. © anyMOTION GRAPHICS GmbH 2017 Benutzergruppenprofil (Zielgruppenanalyse) 36 Nutzerbefragung
 Ergebnisse Ergebnisdokumentation der Nutzerbefragung für das Webportal des DLR 30. September 2015 i G Mili ® V t il i D t hl dmicrom Geo Milieus® – Verteilung in Deutschland Liberal-IntellektuelleTraditionelle (Milieuwahrscheinlichkeit) geringste weit unterdurchschnittliche unterdurchschnittliche leicht unterdurchschnittliche durchschnittliche leicht überdurchschnittliche überdurchschnittliche © microm 6microm Geo Milieus® weit überdurchschnittliche höchste Beispiel: DLR Jobs, Nutzerumfrage, Microm Geo Milieus, Limbic Map
  37. 37. © anyMOTION GRAPHICS GmbH 2017 Nutzungskontextbeschreibung 37 Beispiel: Studien (Cap Gemini Umfrage), HDL Recherche, DLR_next Relaunch Gerätenutzung
  38. 38. © anyMOTION GRAPHICS GmbH 2017 LimeSurvey, Open-Source Umfrage Tool 38
  39. 39. © anyMOTION GRAPHICS GmbH 2017 Fiktive Personen, die den typischen Anwender einer Zielgruppe repräsentieren. Verdeutlichen Eigenschaften der Zielgruppen und helfen bei Design- Entscheidungen: • Realistischer Name • Foto der Person • Demographische Informationen (Alter, Ausbildung, Familienstand,...) • Beruf und Hauptaufgaben • Ziele, Wünsche, Erwartungen, Bedürfnisse (an das eigene Produkt) • Vorlieben, Abneigungen und Hobbys • Mediennutzung Personas – Zielgruppen zum Leben erwecken
  40. 40. © anyMOTION GRAPHICS GmbH 2017 Nutzerzentrierung durch Schnittmengen Angebot: • Markenbotschaft • Informationen • Funktionen Bedürfnis: • Information • Dialog • Nutzen relevant nützlich Unternehmen/Plattform Persona
  41. 41. © anyMOTION GRAPHICS GmbH 2017 In diesem Schritt werden die Bedürfnisse (Erfordernisse) des Nutzers an das Produkt festgelegt und die letztendlichen Anforderungen definiert. 41 Festlegen
  42. 42. © anyMOTION GRAPHICS GmbH 2017 Erfordernisse (User need) Beispiel: Probefahrtformular Analyse: Studien haben ergeben, dass Autokäufer sich gerne beim Händler vor Ort das Auto ansehen. Erfordernis: Der Nutzer muss wissen, ob Händler in seiner Nähe das Auto anbieten, um es vor Ort testen zu können. 42
  43. 43. © anyMOTION GRAPHICS GmbH 2017 Nutzungsanforderungen (User requirement) Beispiel: Probefahrtformular Erfordernis: Der Nutzer muss wissen, ob Händler in seiner Nähe das Auto anbieten, um es vor Ort testen zu können. Nutzungsanforderung: Der Nutzer muss am Formular erkennen können, welche Händler es in seiner Nähe gibt. User Story: Persona + Funktion + Ziel 43
  44. 44. © anyMOTION GRAPHICS GmbH 2017 In diesem Schritt geht es um die spezifische Umsetzung des Produkts mit Hinblick auf die in der Analysephase gefundenen Erkenntnisse. 44 Gestalten
  45. 45. © anyMOTION GRAPHICS GmbH 2017 Nutzungsszenarien (Soll-Zustand) 45 Beispiel: Customer Journey Galderma A&C Peugeot Rent Webseite Userflow
  46. 46. © anyMOTION GRAPHICS GmbH 2017 46 Modellierung der Interaktionen von Personas mit den angebotenen Kanälen und Touchpoints, die möglichst alle Phasen des Produkt- oder Markenerlebnisses beinhalten (vom Aufmerksam-Werden auf Marke/Produkt bis zum Neuerwerb eines Produktes). Ergebnis: Prototypische User/Customer Journey Muster. Customer Journey Mapping
  47. 47. © anyMOTION GRAPHICS GmbH 2017 Wireframes 47 Beispiel: DLR Blogs
  48. 48. © anyMOTION GRAPHICS GmbH 2017 Prototype 48
  49. 49. © anyMOTION GRAPHICS GmbH 2017 Screendesign 49 Beispiel: DLR Blogs
  50. 50. © anyMOTION GRAPHICS GmbH 2017 Screendesign / Produktionsdatei 50 Beispiel: DLR Blogs
  51. 51. © anyMOTION GRAPHICS GmbH 2017 Styleguide Beispiel 51 Beispiel: MU by PEUGEOT
  52. 52. © anyMOTION GRAPHICS GmbH 2017 In diesem Schritt werden die bisherigen Arbeitsergebnisse evaluiert. Die Ergebnisse der Evaluation werden in Form einer Optimierungsliste festgehalten. 52 Evaluieren
  53. 53. © anyMOTION GRAPHICS GmbH 2017 Usability-Evaluierung 53 Beispiel: Rapidusertests, anyMOTION Testvideo
  54. 54. © anyMOTION GRAPHICS GmbH 2017 GOMS Modell, Keystroke-Level Model Operator Beschreibung Zeit (Sekunden) K Keystroke Tastendruck oder Mausklick. 0.2 Richtlinien: Profi Schreiber: 0.08 s, Guter Schreiber: 0.20 s Anfänger: 1.20 s, Zufällige Buchstaben: 0.50s Codes: 0.75s P Point Maus positionieren. 1.1 B Button Maustaste drücken oder loslassen (ein Klick besteht aus zwei B) 0.1 H Home Hand von der Tastatur zur Maus bewegen oder umgekehrt. 0.4 M Mental Denken/Überlegen was als nächstes zu tun ist. 1.35 R(t) Antwortzeit Unterschiedlich je nach System Wxt 54
  55. 55. © anyMOTION GRAPHICS GmbH 2017 GOMS Modell, Keystroke-Level Model Bearbeitungszeit: • M = 1,2 Sek • 5 K = 1 Sek • TAB = 0,2 Sek • M = 1,2 Sek • 5 K = 1 Sek • TAB = 0,2 Sek • M = 1,2 Sek • 9 K = 1,8 Sek • TAB = 0,2 Sek • M = 1,2 Sek • 2 K = 0,4 Sek • TAB = 0,2 Sek 55 = 17 Sekunden Vorname: Nachname: Strasse, Nr. PLZ,Ort: Hockenheim Klaus Meier Hauptstr. 31 68766 Senden Beispiel Operatoren: K = Keystroke, 0,2s / M = Mental, 1,35s / P = Point, 1,1s • M = 1,2 Sek • 5 K = 1 Sek • TAB = 0,2 Sek • M = 1,2 Sek • 10 K = 2 Sek • TAB = 0,2 Sek • M = 1,2 Sek • ENTER = 0,2 Sek
  56. 56. © anyMOTION GRAPHICS GmbH 2017 User Review (Usability) 56
  57. 57. © anyMOTION GRAPHICS GmbH 2017 57 Für jede digitale Kommunikationsmaßnahme sollte ein Ziel definiert werden, aus dem die konkreten Konversions-Kriterien in Form von User-Aktivitäten abgeleitet werden. Aus den intendierten User-Aktivitäten werden wiederum die KPI abgeleitet. Ziel Conversion Makroziele Mikroziele Aktivitäten KPIs KPIs als Basis der kontinuierlichen Evaluation
  58. 58. © anyMOTION GRAPHICS GmbH 2017 58 Makro- ziele Mikroziele Aktivitäten/Aktionen KPI KPI Pyramide
  59. 59. © anyMOTION GRAPHICS GmbH 2017 59 Sale Registrierung für Shop Anmeldung für Newsletter Warenkorb befüllt Registrierungsformular aufgerufen Produktdetailseite aufgerufen Keyvisual/Teaser angeklickt Relation Warenkörbe/Sales Relation Website Visits/Sales Relation Website Visits/Registrierungen Relation Visits/Werbemittel Kontakte Makroziel Mikroziele Aktivitäten KPIs Beispiel E-Shop KPIs als Indikatoren für Optimierungspotenziale in der Nutzerführung.
  60. 60. © anyMOTION GRAPHICS GmbH 2017 60 Evaluierung durch Web Tracking Visits Abbruchrate A/B Testing Wiederkehrende Besucher Seitenladedauer Anzahl besuchter Seiten Besuchsdauer Funnel Analyse Klickpfade
  61. 61. © anyMOTION GRAPHICS GmbH 2017 Fortlaufende Optimierungsprozesse 61 • Festlegung von Maßnahmen basierend auf Zielen (quantitativ, aber auch hinsichtlich der User Experience) • Konzeption • Definition der KPIs und Performance Erwartungen • Messung der KPIs • Analyse der Customer Journeys • Bewertung der Maßnahmen vor dem Hintergrund der Erwartungen • Setup und Umsetzung • Optimierung oder Beendigung der Maßnahmen
  62. 62. © anyMOTION GRAPHICS GmbH 2017 User-zentrierter Gestaltungsprozess, ISO 9241-210 62 Planen des menschzentrierten Gestaltungsprozesses Erarbeiten von Gestaltungslösungen zur Erfüllung der Nutzungsanfoderungen Evaluierung der Gestaltungslösungen anhand der Nutzungsanforderungen Gestaltungslösung erfüllt Nutzungsanforderungen Iteration soweit nötig Verstehen und Festlegen des Nutzungskontextes Festlegen der Nutzungsanforderungen Verstehen Festlegen Gestalten Evaluieren
  63. 63. © anyMOTION GRAPHICS GmbH 2017 Beispiel: CITROËN Click & Go Konfigurator
  64. 64. © anyMOTION GRAPHICS GmbH 2017 CITROËN – Click&Go Konfigurator 64 Vorhandener Standard-Konfigurator komplex und kleinteilig. Mobil kaum bedienbar. Hohe Abbruchquoten.
  65. 65. © anyMOTION GRAPHICS GmbH 2017 CITROËN – Click&Go Konfigurator 65
  66. 66. © anyMOTION GRAPHICS GmbH 2017 66 Komplexität reduzieren (Beschränkung auf essentielle/ erfolgreiche Ausstattungsmerkmale). Konsequente Usability/User Experience Betrachtung. Mobil-optimierte und fingerfreundliche Umsetzung.
  67. 67. © anyMOTION GRAPHICS GmbH 2017 67 Ergebnis: Deutlicher Zuwachs bei abgeschlossenen Konfigurationen !
  68. 68. © anyMOTION GRAPHICS GmbH 2017
  69. 69. © anyMOTION GRAPHICS GmbH 2017 69
  70. 70. © anyMOTION GRAPHICS GmbH 2017 Beispiel: DLR Jobs Jobportal
  71. 71. © anyMOTION GRAPHICS GmbH 2017 71 Übersichtlichkeit durch Kacheldesign. Intuitiver Suchfilter. Kompletter Bewerbungsprozess auf jedem Device durchführbar.
  72. 72. © anyMOTION GRAPHICS GmbH 2017 72
  73. 73. © anyMOTION GRAPHICS GmbH 2017 Fazit
  74. 74. © anyMOTION GRAPHICS GmbH 2017 Fazit User Centered Design ist die Konsequenz des Zeitalters der Pull Kommunikation. Das Wissen um die Zielgruppen reicht nicht, wir brauchen Personas. Die User Journey ist der Ausgangspunkt. Verstehen – Festlegen – Gestalten – Evaluieren Der Gestaltungsprozess unterliegt der kontinuierlichen Validierung und Optimierung. 74
  75. 75. © anyMOTION GRAPHICS GmbH 2017 anyMOTION GRAPHICS GmbH Malkastenstr. 2 - 40211 Düsseldorf Tel: +49 (0) 211 - 44 33 43 / Fax: 44 33 94 Spichernstr. 44 - 50672 Köln Tel: +49 (0) 221 - 222 820 0 / Fax: 222 820 15 http://www.anyMOTION.de Ihr Ansprechpartner: Mathias Kossmann, Business Development Director, m.kossmann@anymotion.de Sämtliche Urheber- und Nutzungsrechte an den in dieser Publikation enthaltenen Arbeiten, Bild- und Schriftwerken einschließlich der zugrunde liegenden Ideen, Schöpfungen und Konzeptionen liegen bei der anyMOTION Graphics GmbH (Düsseldorf ). Jede vollumfängliche oder teilweise Reproduktion, Weitergabe oder sonstige Nutzung bedarf unserer vorherigen Zustimmung und ist gesondert honorarpflichtig. 75 Vielen Dank!
  76. 76. © anyMOTION GRAPHICS GmbH 2017 76 Unser nächster Vortrag: 18.05.2017

×