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