Praxisbuch Usability und UX

Usability und UX -- Ihr Weg zum Erfolg ... 21

TEIL I. Was brauche ich, wenn ich anfange zu konzipieren, zu gestalten oder zu programmieren? ... 29

1. Von der Usability zur User Experience ... 31
1.1 ... Usability als Erfolgsfaktor für gute digitale Produkte ... 32
1.2 ... User Experience als umfassendes Nutzungserlebnis ... 32
1.3 ... Abgrenzung zwischen Usability und User Experience ... 33

2. Erkenntnisse aus Studien, Forschung und Projekten liefern Fakten ... 35
2.1 ... Können wir nicht einfach die Nutzenden fragen? ... 36
2.2 ... Wer schnell zum Ziel will, hält sich an den Weg ... 37
2.3 ... Wer setzt die Standards? ... 40

3. Menschliche Wahrnehmung -- Gestaltgesetze & Co. ... 43
3.1 ... Kurzzeitgedächtnis nicht überfordern ... 43
3.2 ... Auswahl ist gut, aber zu viel ist schlecht ... 44
3.3 ... Menschliche Wahrnehmung -- Gestaltgesetze ... 44
3.4 ... Menschliche Wahrnehmung -- weitere Erkenntnisse aus der Forschung ... 48
3.5 ... Sozialpsychologie ... 53

4. ISO 9241 & Co. -- Normen und Gesetze rund um Usability ... 57
4.1 ... ISO 9241 -- Ergonomie der Mensch-System-Interaktion ... 58
4.2 ... ISO 9241-210 -- Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme ... 60
4.3 ... ISO 14915 -- Software-Ergonomie für MultimediaBenutzungsschnittstellen ... 61
4.4 ... ISO 25000 -- Software-Engineering -- Qualitätskriterien und Bewertung von Softwareprodukten ... 62
4.5 ... ISO 9000 und 9001 ... 62
4.6 ... Praxisrelevanz der Normen ... 63
4.7 ... Gibt es ein Usability-Gesetz? ... 63
4.8 ... DSGVO -- Datenschutz und UX ... 63

5. Accessibility -- Umsetzung der Barrierefreiheit und gesetzliche Vorgaben ... 67
5.1 ... Was genau ist barrierefrei? ... 68
5.2 ... Warum wir uns mit Barrierefreiheit befassen sollten ... 69
5.3 ... Warum wir uns mit Barrierefreiheit befassen müssen ... 69
5.4 ... Pflichten aus dem Barrierefreiheitsstärkungsgesetz/Barrierefreiheitsgesetz ... 70
5.5 ... Inklusives Design und Universelles Design ... 74
5.6 ... Tipps zur Umsetzung ... 74
5.7 ... Grundregeln für barrierefreie Anwendungen ... 76
5.8 ... Werkzeuge zum Prüfen der Barrierefreiheit ... 79
5.9 ... Was muss ich testen? ... 82
5.10 ... Leichte Sprache und Einfache Sprache ... 83
5.11 ... Weitere gesetzliche Regelungen ... 85

6. Das digitale Zeitalter und die Auswirkung auf interaktive Konzepte ... 89
6.1 ... Künstliche Intelligenz und ihr Einfluss auf UX ... 91
6.2 ... Context First -- den Nutzungskontext berücksichtigen ... 93
6.3 ... Die Welten verschmelzen -- von PWA, WebXR und anderen Neuerungen ... 94
6.4 ... Touch, Gesten und Sprache -- zeitgemäße Interaktionsmechanismen ... 96
6.5 ... Alles ist testbar -- von Smartwear bis zum Internet of Things ... 98
6.6 ... Herausforderungen bei der Konzeption für neue Geräte ... 99
6.7 ... Remote-Arbeiten -- nicht nur die Anwendungen selbst, sondern auch die Art der Arbeit ändern sich ... 100

7. Nutzende in die Produktentwicklung einbinden -- der optimale Projektablauf ... 101
7.1 ... Menschzentrierte Entwicklung ... 101
7.2 ... Ein optimaler Projektablauf ... 102
7.3 ... Aller Anfang ist schwer -- UX-Reifegrad im Unternehmen steigern ... 104

8. Agil ans Ziel -- Usability-Engineering in agilen Prozessen ... 109
8.1 ... Warum agile Entwicklung? ... 109
8.2 ... Wie geht agile Entwicklung? ... 110
8.3 ... Agil oder Lean? ... 111
8.4 ... Agiles Arbeiten in der Praxis ... 112
8.5 ... Was ist Usability-Engineering? ... 114
8.6 ... DevOps -- DesignOps -- ResearchOps ... 114

TEIL II. Nutzende kennenlernen und für sie konzipieren ... 119

9. Fokusgruppen und Befragungen -- Erkenntnisse über das derzeitige Nutzungsverhalten ... 121
9.1 ... Was sind Fokusgruppen? Was sind Befragungen? ... 121
9.2 ... Wie führt man Fokusgruppen durch? ... 123
9.3 ... Wie setzt man Befragungen auf? ... 128

10. Vor-Ort-Beobachtungen und Tagebuchstudien -- Nutzende im Alltag beobachten ... 135
10.1 ... Nutzungskontextanalyse -- wozu? ... 135
10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 136

11. Personas -- aus Erkenntnissen prototypische Nutzende entwickeln ... 139
11.1 ... Was sind Personas? ... 139
11.2 ... Wie sehen Personas aus? ... 141
11.3 ... Wie erstellt man Personas? ... 142
11.4 ... Wann setze ich Personas ein? ... 148

12. Customer Journey Maps und andere Mapping-Methoden -- Interaktionen der Nutzenden strukturiert erfassen ... 151
12.1 ... Welche Mapping-Methoden gibt es? ... 151
12.2 ... Wann setze ich welche Map ein? ... 157
12.3 ... Wie sieht eine Customer Journey Map genau aus? ... 158
12.4 ... Wie erstellt man eine Customer Journey Map? ... 160
12.5 ... Wie arbeite ich mit einer Customer Journey Map? ... 162

13. Card Sorting -- Entwicklung der Informationsarchitektur ... 165
13.1 ... Wie sieht eine Informationsarchitektur aus? Wie komme ich zu einer Informationsarchitektur? ... 165
13.2 ... Was ist Card Sorting? ... 167
13.3 ... Wie läuft ein Card Sorting ab? ... 171
13.4 ... Was erhalten Sie als Ergebnis aus einem Card-Sorting-Workshop? ... 175
13.5 ... Wer sollte ein Card Sorting durchführen? ... 176
13.6 ... Wann setze ich Card Sorting ein? ... 177

14. Scribbles -- erste Ideen auf dem Weg zum Design ... 179
14.1 ... Was sind Scribbles? ... 179
14.2 ... Wie sehen Scribbles aus? ... 180
14.3 ... Wie macht man Scribbles? ... 182
14.4 ... Tipps zum Zeichnen ... 183
14.5 ... Scribbeln mit dem Tablet ... 185
14.6 ... Kommentare, Dokumentation und Überarbeitung ... 185
14.7 ... Scribbeln im Team ... 187
14.8 ... Wer sollte scribbeln? ... 187
14.9 ... Wann setze ich Scribbles ein? ... 188

15. Wireframes -- sich an das optimale Produkt annähern ... 189
15.1 ... Was heißt Wireframe? ... 189
15.2 ... Wozu Wireframes? ... 190
15.3 ... Programme für Wireframes ... 191
15.4 ... Für welche Seiten brauche ich Wireframes? ... 195
15.5 ... Was in einen Wireframe gehört ... 196
15.6 ... Was nicht in einen Wireframe gehört ... 197
15.7 ... Was manchmal in einen Wireframe gehört ... 198
15.8 ... Responsives Design und Wireframes ... 200
15.9 ... Arbeitserleichterung für die Entwicklung ... 201
15.10 ... Bibliotheken zur eigenen Arbeitserleichterung ... 202
15.11 ... Wie geht es weiter mit den Wireframes? ... 202

16. Mockups und Prototypen -- konkretisieren, visualisieren, designen ... 205
16.1 ... Was sind Mockups, was Prototypen? ... 205
16.2 ... Wie sehen Prototypen aus? ... 206
16.3 ... Wie erstelle ich einen Prototyp? ... 208
16.4 ... Wann setze ich Prototypen ein? ... 215

17. Design Sprints, Design Thinking und ausgewählte Ideation-Methoden -- Projektideen entwickeln und validieren ... 219
17.1 ... Was ist ein Design Sprint? ... 219
17.2 ... Was ist Design Thinking? ... 224
17.3 ... Ausgewählte Kreativitäts- und Ideation-Techniken ... 226

18. Usability-Tests -- die Klassiker unter den Nutzertests ... 231
18.1 ... Was sind Usability-Tests? Welche Formen gibt es? ... 232
18.2 ... Wie läuft ein Usability-Test ab? ... 238
18.3 ... Besonderheiten bei Usability-Tests ... 247
18.4 ... Wer sollte Usability-Tests durchführen? ... 251
18.5 ... Wann setze ich Usability-Tests ein? ... 254

19. Unmoderierte Online-Usability-Tests -- von zuhause aus testen lassen ... 255
19.1 ... Was sind unmoderierte Online-Usability-Tests? ... 255
19.2 ... Herausforderungen bei unmoderierten Online-Usability-Tests ... 256
19.3 ... Wie läuft ein unmoderierter Online-Usability-Test ab? ... 256

20. Guerilla-Usability-Tests -- informell und schnell Erkenntnisse sammeln ... 259
20.1 ... Warum Guerilla? ... 259
20.2 ... Wie finde ich Testpersonen? ... 261
20.3 ... Was kann ich testen? ... 262
20.4 ... Tipps für die Durchführung ... 263
20.5 ... Auswerten und präsentieren ... 264

21. Usability-Reviews -- Expertenmeinung einholen, bevor Sie Nutzende rekrutieren ... 265
21.1 ... Was sind Usability-Reviews? ... 265
21.2 ... Wie läuft ein Usability-Review ab? ... 266
21.3 ... Wer sollte einen Usability-Review durchführen? ... 268
21.4 ... Wann setze ich Usability-Reviews ein? ... 268

22. A/B-Tests -- Varianten gegeneinander antreten lassen ... 269
22.1 ... Was bringen A/B-Tests? ... 270
22.2 ... Was kann man alles testen? ... 270
22.3 ... Was kann man nicht testen? ... 271
22.4 ... Wie sieht eine gute Fragestellung aus? ... 272
22.5 ... Wie definiere ich Erfolg? ... 274
22.6 ... Bitte nicht stören -- Fehlerquellen ausschließen ... 274
22.7 ... Wie viele Testpersonen/Aufrufe brauche ich? ... 275
22.8 ... Multivariate Tests ... 278
22.9 ... Ergebnisse mit Hirn interpretieren ... 278
22.10 ... Womit testen? -- Tools ... 279
22.11 ... Erkenntnisse in Verbesserungen umsetzen ... 280

23. Analytics -- aus dem aktuellen Nutzungsverhalten lernen ... 283
23.1 ... Was kann man alles messen und dadurch lernen? ... 283
23.2 ... Wann setze ich Analytics ein? ... 292
23.3 ... Womit analysieren? -- Tools ... 292

24. Metriken ... 295
24.1 ... Warum Metriken für UX? ... 295
24.2 ... Statistik auch für kleine Stichproben ... 296
24.3 ... Die richtigen Metriken auswählen ... 297
24.4 ... Signifikanz -- was messen wir da überhaupt? ... 300
24.5 ... Performance -- Core Web Vitals und PageSpeed Insights ... 301

TEIL III. Usability-Guidelines -- Anleitung für die Umsetzung ... 305

25. Struktur der Anwendung -- Informations- und Navigationsarchitektur ... 307
25.1 ... Grobsortierung der Inhalte ... 308
25.2 ... Feingliederung der Inhalte ... 308
25.3 ... Site-Struktur festlegen und darstellen ... 311
25.4 ... Zeichnen der Sitemap ... 311
25.5 ... Zeige ich die Sitemap auf der Site? ... 312
25.6 ... Navigation für Nutzende planen ... 313

26. Ordnung auf den Seiten -- Gestaltungsraster und responsives Design ... 317
26.1 ... Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten ... 317
26.2 ... Wie ein Rastersystem aufgebaut ist ... 319
26.3 ... Was bedeutet responsives Webdesign? ... 322
26.4 ... Das sollten Sie bei der Konzeption responsiver Websites bedenken ... 324
26.5 ... Zukünftig noch mehr Flexibilität ... 329

27. Navigationskonzepte -- Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas ... 331
27.1 ... Gängige Gestaltungsmuster für Navigation ... 331
27.2 ... Burger/Hamburger als Icon für das Menü ... 339

28. Designsysteme, Styleguides, Component Libraries und Pattern Libraries ... 343
28.1 ... Standards berücksichtigen ... 343
28.2 ... Was ist ein Designsystem und wie setzt es sich zusammen? ... 348
28.3 ... Designsysteme nachhaltig etablieren ... 355

29. Kopfzeilen -- Header nutzenstiftend umsetzen ... 357
29.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 357
29.2 ... Headerverhalten im Navigationsfluss ... 362

30. Fußzeilen -- Footer sinnvoll gestalten ... 365
30.1 ... Metanavigation ... 365
30.2 ... Kontaktdaten ... 367
30.3 ... Sitemap ... 368
30.4 ... Newsletter-Anmeldung ... 368
30.5 ... Social Media ... 369
30.6 ... Sprungmarken nach oben ... 370

31. Farbe, Ästhetik und Usability ... 371
31.1 ... Was ist Farbe überhaupt? ... 372
31.2 ... Welche Wirkung hat Farbe? ... 375
31.3 ... Die richtigen Farben für meine Nutzenden finden ... 376
31.4 ... Fehler bei der Farbwahl vermeiden ... 378
31.5 ... Brauche ich einen Nachtmodus? ... 381

32. Schriftarten und Textformatierung ... 385
32.1 ... Von Punkten und Pixeln -- Grundlagen der Darstellung ... 386
32.2 ... Das Bildschirm-Grundstück -- Screen Real Estate ... 389
32.3 ... Die richtige Schriftart aussuchen ... 390
32.4 ... Schriftarten gut kombinieren ... 392
32.5 ... Wie groß sollte Fließtext sein? ... 393
32.6 ... Großbuchstaben und andere Hervorhebungen ... 395
32.7 ... Blocksatz niemals, zentriert selten ... 395
32.8 ... Die richtige Zeilenbreite ... 396
32.9 ... Der richtige Zeilenabstand ... 396
32.10 ... Typografie für Menschen mit Legasthenie ... 397

33. Sprachwahl und mehrsprachige Sites ... 399
33.1 ... Sprachumschaltung bei Apps ... 399
33.2 ... Sprachumschaltung bei Websites ... 400

34. Nutzerfreundlich schreiben ... 409
34.1 ... Vorgehen beim Schreiben ... 411
34.2 ... Wie schreibe ich lesbaren und verständlichen Text? ... 415
34.3 ... Überschriften ... 418
34.4 ... Listen und Kästen ... 420
34.5 ... Tabellen, Diagramme, Bilder und Videos ... 420
34.6 ... Hervorhebungen ... 421
34.7 ... Text und SEO ... 421

35. Bilder für Nutzende auswählen ... 425
35.1 ... Was ist eigentlich ein Bild? ... 425
35.2 ... Wofür brauchen wir Bilder? ... 425
35.3 ... Vorteile von Bildern ... 429
35.4 ... Nachteile von Bildern ... 429
35.5 ... Tipps für richtigen Einsatz und Auswahl von Bildern ... 430
35.6 ... Tipps für die nutzerfreundliche Darstellung von Bildern ... 438

36. Bildbühne, Slider, Karussell -- mehrere Bilder an einer Stelle ... 449
36.1 ... Was ist eine Bildbühne? ... 449
36.2 ... Wann nutzt man Bildbühnen? ... 449
36.3 ... Vorteile von Bildbühnen ... 453
36.4 ... Nachteile von Bildbühnen ... 453
36.5 ... Tipps für die Gestaltung von Bildbühnen ... 454
36.6 ... Alternativen ... 460

37. Audio und Video einbinden und steuern ... 465
37.1 ... Wann sind Audio und Video überhaupt sinnvoll? ... 465
37.2 ... Audio und Video zugänglich machen ... 466
37.3 ... Audio und Video steuern ... 467
37.4 ... Normen zur Steuerung von Audio und Video ... 467

38. Icons aussagekräftig auswählen ... 469
38.1 ... Icons nutzenstiftend einsetzen ... 469
38.2 ... Icon mit oder ohne Label -- das ist die Frage ... 470
38.3 ... Labels bei Icons bewusst positionieren ... 471
38.4 ... Icons eindeutig gestalten ... 472

39. Links und Buttons formatieren und formulieren ... 475
39.1 ... Welche Links biete ich an? ... 476
39.2 ... Wo kommen Links hin? ... 476
39.3 ... Wie sehen Links aus? ... 477
39.4 ... Links formulieren ... 478
39.5 ... Seitennamen ... 479
39.6 ... Dateinamen, URLs und Pfade ... 480
39.7 ... Buttons -- Schaltflächen, Tasten oder Knöpfe? ... 480
39.8 ... Nicht jeder Button ist gleich wichtig -- Hierarchie ... 482
39.9 ... Man sieht nicht immer gleich aus -- Button-Zustände ... 487
39.10 ... Klick -- Buttons und Sound ... 490
39.11 ... Wie groß darf's denn sein? ... 490
39.12 ... Spezielle Buttons -- Checkboxen, Radiobuttons, Selektoren ... 492

40. Formulare zielführend realisieren ... 495
40.1 ... Formulare -- vielfach angewandt und bekannt ... 495
40.2 ... Wofür werden Formulare eingesetzt? ... 496
40.3 ... Tipps für die Gestaltung von Formularen ... 497
40.4 ... Tipps zur Unterstützung von Nutzenden bei der Eingabe ... 505
40.5 ... Tipps zur Unterstützung von Nutzenden beim Abschicken des Formulars (Aktionen) ... 512

41. Labels und Auszeichnungen formulieren und positionieren ... 517
41.1 ... Labels zielführend positionieren ... 517
41.2 ... Labels verständlich formulieren ... 520

42. Fehlermeldungen hilfreich umsetzen ... 523
42.1 ... Fehlern vorbeugen (Inline-Validierung) ... 523
42.2 ... Fehlermeldungen optimal positionieren ... 525
42.3 ... Fehlermeldungen aufmerksamkeitsstark gestalten ... 527
42.4 ... Fehlermeldungen verständlich formulieren ... 527

43. Listen und Tabellen formatieren ... 529
43.1 ... Listen lockern Texte auf ... 529
43.2 ... Von eindimensionalen zu mehrdimensionalen Listen ... 529
43.3 ... Von Listen zu Tabellen ... 530
43.4 ... Listen fürs Lesen formatieren ... 531
43.5 ... Was kommt nach der Liste? ... 533
43.6 ... Keine Liste ohne Sortierung ... 535
43.7 ... Lange Listen bändigen ... 536
43.8 ... Listen filtern und Spalten ein-/ausblenden ... 536
43.9 ... Vergleichstabellen, die zum Kauf motivieren ... 538

44. Aufklappelemente/Akkordeons richtig umsetzen ... 541
44.1 ... Akkordeons zeigen und verstecken Inhalte nach Interaktion von Nutzenden ... 541
44.2 ... Akkordeons für Menüs, FAQ-Listen und komplexe Formulare -- vor allem mobil im Einsatz ... 542
44.3 ... Vorteile von Akkordeons ... 544
44.4 ... Nachteile von Akkordeons ... 545
44.5 ... Tipps für die Gestaltung von Akkordeons ... 546
44.6 ... Barrierefreiheit von Akkordeons ... 550

45. Diagramme auswählen und gestalten ... 551
45.1 ... Wann Diagramm, wann Tabelle? ... 552
45.2 ... Das richtige Diagramm für meine Daten ... 552
45.3 ... Werte unterschiedlicher Skalen vergleichen ... 558
45.4 ... Formatierung nach Usability, nicht nach Ästhetik ... 558

46. (Mikro-)Animation sinnvoll einsetzen ... 561
46.1 ... Animation belebt ... 561
46.2 ... Was ist eigentlich Animation? ... 561
46.3 ... Anwendung von Animationen ... 563
46.4 ... Wie sieht eine gute Animation aus? ... 565

47. Suchfunktionen zielführend gestalten ... 571
47.1 ... Wofür werden Suchfunktionen eingesetzt? ... 573
47.2 ... Tipps für die Gestaltung von Suchfunktionen ... 574
47.3 ... Tipps zur Unterstützung der Nutzenden bei der Sucheingabe ... 577
47.4 ... Tipps für eine eindeutige, gut strukturierte Trefferdarstellung ... 580
47.5 ... Alternativen ... 586

48. Filter und Facetten integrieren und positionieren ... 587
48.1 ... Filter grenzen schnell ein, Facetten unterstützen bei der Suche ... 587
48.2 ... Tipps für die Auswahl und Benennung von Filtern/Facetten ... 591
48.3 ... Tipps für die Gestaltung von Filtern/Facetten ... 593

49. Modals, Pop-ups und Overlays -- Dialoge nutzenstiftend einsetzen ... 601
49.1 ... Overlays wollen auffallen und Modals erzwingen eine Nutzerinteraktion ... 601
49.2 ... Tipps für die Gestaltung ... 605
49.3 ... Cookie Consent Banner oder Pop-up -- wie Sie sie optimieren ... 608

Index ... 611