Die Nutzererfahrung ist einer der wichtigsten Erfolgsfaktoren digitaler Geschäftsmodelle. Haben Sie die Nutzererfahrung nicht im Fokus, riskieren Sie viel: Besucher werden sich nicht auf Ihrer Website als Kunde registrieren, anmelden und Umsatz generieren und sammeln in der Regel auch noch eine Vielzahl negativer Erfahrungen. Doch wie optimiert man User-Experience eigentlich durch User Centricity? Erfahren Sie in dieser Präsentation von André Goldmann, welche Elemente bei der User Centricity genutzt werden können, um die UX zu verbessern, welche Tools bei der Optimierung helfen können und warum sich der Ansatz auf die gesamte Unternehmenskultur auswirkt.

1. User-Experience-Optimierung
durch User Centricity

2. Damit du weißt, wem du hier zuhörst:
André Goldmann, Inhaber und Gründer vom Büro für gute Websites
Erste Website mit 14 Jahren ➡ 20+ Jahre Branchenerfahrung
Früher war ich:
Frontendentwickler bei preisvergleich.de und best-price.com
CTO, COO und Dozent bei der 121WATT GmbH
Heute mache ich:
Einfach gute Websites ➡ UX- und Landingpage-Design, Website-
Entwicklung, -Optimierungen und -Audits aller Art. Workshops und
Online-Kurse zu Website-Relaunches, SEO und Web-Analyse.
Mehr unter: www.gutewebsites.de
2

3. Podcast für gute Websites
Im Podcast für gute Websites lernst du welche Faktoren für die
Suchmaschinenoptimierung (SEO), Usability, dem Webdesign deiner
Webseiten und der User Experience deiner gesamten Website wichtig
sind - Mehr als 2⃣0⃣ Stunden Know-how für dich und deine Website
3

4. No emotions - no money

5. Was ist User Centricity?

6. Was ist User Centricity?
6
Eine Kultur, Philosophie
und Mentalität in Einem.

7. Was ist User Centricity?
Eine Wertschöpfungskette
die beim Kunden beginnt
7

8. Produkte und Leistungen werden
auf Basis dieser
(weiter)entwickelt.
8

9. 9

10. 10

11. 11

12. Produkte und Leistungen werden
im Sinne des Kunden
supportet und kommuniziert.
12

13. Support und Kommunikation:
Auf Basis des Kontextes
13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. Support und Kommunikation:
Inspirierend
21

22. 22

23. 23

24. 24

25. 25

26. Wo liegen die Probleme
von User Centricity?

27. Probleme von User Centricity
Voraussetzungen und
Herausforderungen
27

28. Probleme von User Centricity
Es muss von Oben kommen!
28

29. Probleme von User Centricity
Muss auf den richtigen
Plattformen gleichermaßen
gelebt werden!
29

30. 30

31. 31

32. 32

33. Probleme von User Centricity
SEO & SEA
33

34. 34

35. 35

36. 36

37. 37

38. Wie kann man UC messen?

39. Mit einem klarem Ziel. z.B.:
Produktseiten
die überzeugen
39

40. 40

41. 41

42. 42

43. 43

44. Wie kann man UC messen?
HEART-Framework
44

45. Happiness
Engagement
Adoption
Retention
Task success

46. Happiness
Engagement
Adoption
Retention
Task success

47. Ziele Signale Metriken
Happiness
Benutzer finden die Website
hilfreich, lustig und einfach zu
bedienen.
Beantwortung von Umfragen
5-Sterne-Bewertungen
abgeben
NPS,
Zufriedenheitsbewertung,
Anzahl der 5-Sterne-
Bewertungen
Engagement
Adoption
Retention
Task success

48. Happiness
Engagement
Adoption
Retention
Task success

49. Ziele Signale Metriken
Happiness
Benutzer finden die Website
hilfreich, lustig und einfach zu
bedienen.
Beantwortung von Umfragen
5-Sterne-Bewertungen
abgeben
NPS,
Zufriedenheitsbewertung,
Anzahl der 5-Sterne-
Bewertungen
Engagement
Benutzer genießen die Inhalte
und setzen sich weiterhin mit
ihnen auseinander.
Es wird mehr Zeit auf der
Website verbracht
Durchschnittliche Dauer der
Sitzungen und
Sitzungsfrequenz,
Anzahl der Conversions
Adoption
Retention
Task success

50. Happiness
Engagement
Adoption
Retention
Task success

51. Ziele Signale Metriken
Happiness
Benutzer finden die Website
hilfreich, lustig und einfach zu
bedienen.
Beantwortung von Umfragen
5-Sterne-Bewertungen
abgeben
NPS,
Zufriedenheitsbewertung,
Anzahl der 5-Sterne-
Bewertungen
Engagement
Benutzer genießen die Inhalte
und setzen sich weiterhin mit
ihnen auseinander.
Es wird mehr Zeit auf der
Website verbracht
Durchschnittliche Dauer der
Sitzungen und
Sitzungsfrequenz,
Anzahl der Conversions
Adoption
Neue Benutzer sehen den Wert
im Produkt oder in der neuen
Funktion.
Anmeldung für ein Konto
Verwendung einer neuen
Funktion
Download-Rate von Dateien,
Registrierungsrate,
Feature-Akzeptanzrate
Retention
Task success

52. Happiness
Engagement
Adoption
Retention
Task success

53. Ziele Signale Metriken
Happiness
Benutzer finden die Website
hilfreich, lustig und einfach zu
bedienen.
Beantwortung von Umfragen
5-Sterne-Bewertungen
abgeben
NPS,
Zufriedenheitsbewertung,
Anzahl der 5-Sterne-
Bewertungen
Engagement
Benutzer genießen die Inhalte
und setzen sich weiterhin mit
ihnen auseinander.
Es wird mehr Zeit auf der
Website verbracht
Durchschnittliche Dauer der
Sitzungen und
Sitzungsfrequenz,
Anzahl der Conversions
Adoption
Neue Benutzer sehen den Wert
im Produkt oder in der neuen
Funktion.
Anmeldung für ein Konto
Verwendung einer neuen
Funktion
Download-Rate von Dateien,
Registrierungsrate,
Feature-Akzeptanzrate
Retention
Benutzer kommen immer wieder
auf die Website zurück, um eine
Aktion (Suche, Kauf etc.)
abzuschließen.
Aktiv bleiben auf der Website
Abonnement verlängern
Wiederholter Kauf
Absprungrate,
Verlängerungsrate des
Abonnements
Task success

54. Happiness
Engagement
Adoption
Retention
Task success

55. Ziele Signale Metriken
Happiness
Benutzer finden die Website
hilfreich, lustig und einfach zu
bedienen.
Beantwortung von Umfragen
5-Sterne-Bewertungen
abgeben
NPS,
Zufriedenheitsbewertung,
Anzahl der 5-Sterne-
Bewertungen
Engagement
Benutzer genießen die Inhalte
und setzen sich weiterhin mit
ihnen auseinander.
Es wird mehr Zeit auf der
Website verbracht
Durchschnittliche Dauer der
Sitzungen und
Sitzungsfrequenz,
Anzahl der Conversions
Adoption
Neue Benutzer sehen den Wert
im Produkt oder in der neuen
Funktion.
Anmeldung für ein Konto
Verwendung einer neuen
Funktion
Download-Rate von Dateien,
Registrierungsrate,
Feature-Akzeptanzrate
Retention
Benutzer kommen immer wieder
auf die Website zurück, um eine
Aktion (Suche, Kauf etc.)
abzuschließen.
Aktiv bleiben auf der Website
Abonnement verlängern
Wiederholter Kauf
Absprungrate,
Verlängerungsrate des
Abonnements
Task success
Benutzer erreichen ihr Ziel
schnell und einfach.
Schnelles Auffinden eines
Inhaltes,
effizient erledigen von
Aufgaben
Such-Exit-Rate,
Sessions ohne Events

56. Weiterführende Informationen zum HEART-Framework
https://ai.google/research/pubs/pub36299
https://www.interaction-design.org/literature/article/google-s-heart-
framework-for-measuring-ux
56

57. Wo kann UC auf Websites
genutzt werden?

58. Wo kann UC auf Websites genutzt werden?
User-Interface-Design (UI)
58

59. User-Interface-Design (UI)
Sorgt für Vertrauen
59

60. 60

61. 61

62. User-Interface-Design (UI)
Schafft Orientierung
62

63. 63

64. User-Interface-Design (UI)
Stört nicht sondern
funktioniert!
64

65. Wo kann UC auf Websites genutzt werden?
Informationsarchitektur
65

66. Informationsarchitektur
Unterstützung der
User-Journey
66

67. 67

68. 68

69. 69

70. 70

71. 71

72. 72

73. 73

74. 74

75. 75

76. Informationsarchitektur
Sorgt für Aufklärung
76

77. 77

78. Informationsarchitektur
Schafft Klarheit
78

79. 79

80. Bessere Strukturen durch
Card Sorting
80

81. 81

82. Wo kann UC auf Websites genutzt werden?
Interaction Design (IxD)
82

83. 83

84. 84

85. 85

86. Wo kann UC auf Websites genutzt werden?
Usability
86

87. Beispiele
🤨

88. Farbauswahl mit Bedacht
Kontrastreich auswählen (Pastel ist nicht immer das Beste)
Schwarz/Weiß kann wehtun - eher leicht Grau und Dunkelgrau mixen
Nicht zu ähnlich in der Farbauswahl (nicht nur Rot-Grün-Schwäche ist weit
verbreitet)
EINE Interaktion-Farbe verwenden
88

89. Typografie
Schriftgrößen dem Gerät entsprechend wählen. Standard sind 16px = 1em
Laufzeilen beachten. Ideal sind 75 Zeichen pro Zeile
Kein Blocksatz und selten Zentriert (max. Überschriften)
Richtiger Zeilenabstand (1.45em) und passender Absatzabstand
89

90. Navigationskonzepte
Bitte nicht am Wettbewerb orientieren („Das finden die Chefs ganz toll“)
Card Sorting betreiben und entsprechende Menükonzepte verwenden:
• Horizontale Navigationsleisten oder Tableisten
• Hamburger-Menüs
• Mega-Dropdown-Menüs
• Akkordeon-Menüs
• Off-Canvas-Navigationen
90

91. Nutzenstiftende Header
Elemente erwartungskonform auswählen und platzieren
Darstellung für den mobilen Kontext regelmässig validieren
Verhalten des gesamten Headers passend zum Navigationsfluss:
Bereiche hervorheben, Teilweises mitscrollen etc.
91

92. Zweckerfüllende Footer
Metanavigation inkl. der wichtigsten Landingpages
Kontaktdaten
Sprungmarken nach Oben
Newsletter-Anmeldung
Social-Media-Verlinkungen WENN ES ZUR STRATEGIE PASST (!!!)
92

93. Icons
Icons nach Möglichkeit nie ohne Label verwenden
Icons unmissverständlich auswählen
Icons nur mit Interaktionsfarbe abbilden, wenn sie klickbar sind oder ein
Tooltip dahinter steckt
Icons mit bedacht verwenden
93

94. Links und Buttons
Klar kommunizieren was hinter dem Link steckt und was die Folge des
Klicks ist
Buttons/Links optisch hervorheben (Interaktionsfarbe)
Verschiedene Farb-Zustände verwenden (z.B. wenn bereits interagiert
wurde)
94

95. Was noch?
Texte mit Listen und Tabellen auflockern
Formulare: Labels zielführend positionieren
Fehlermeldungen verständlich formulieren
Mikro-Animationen mit Bedacht verwenden (Mobile oft ein Graus)
…
95

96. Wo kann UC auf Websites genutzt werden?
Content-Strategie
96

97. Content auf Augenhöhe
moz.com: Whitebord-Friday
97

98. 98
https://moz.com/blog/what-is-bert

99. Meine 6⃣ Tipps zum Ende

100. Meine 6 Tipps am Ende
Einzel-Feedbacks (Von Kunden oder Kollegen) nicht zu wichtig nehmen
—> keine Entscheidungen auf Grund eine einzelnen Aussage treffen
Nutzerfeedbacks nie abstempeln oder vorschnell bewerten
Wireframes Cards verwenden (https://wbsit.es/6a)
Prototypen mit Stift und Zettel entwickeln und Raum für Neues lassen
Entwickelt einen Workflow für Feedbackschleife -> Prototyping -> Testing
Holt euch Hilfe von Aussen - Interne Prozesse sind oft nur von externen
Beratern aufzubrechen, da es keine Befindlichkeiten gibt
100

101. Ist User Centricity nun der heilige
Gral der User Experience?

102. 🎸 UX mit UC rockt. Aber nur mit
der richtigen Band und Crew.

103. Ich helfe euch dabei!
André Goldmann, Büro für gute Websites
@gutewebsites /in/andre-goldmann
103