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 den Nutzer 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 ... 59
4.2 ... ISO 9241-210 - Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme ... 60
4.3 ... ISO 14915 - Software-Ergonomie für Multimedia-Benutzungsschnittstellen ... 62
4.4 ... ISO 25000 - Software-Engineering - Qualitätskriterien und Bewertung von Softwareprodukten ... 62
4.5 ... ISO 9000 und 9001 ... 63
4.6 ... Praxisrelevanz der Normen ... 63
4.7 ... Gibt es ein Usability-Gesetz? ... 63
4.8 ... Leichte Sprache und Einfache Sprache ... 67
4.9 ... DSGVO - Datenschutz und UX ... 70

5. Das mobile Zeitalter und die Auswirkung auf interaktive Konzepte ... 73

5.1 ... Mit responsivem Design für verschiedene Endgeräte optimieren ... 75
5.2 ... Mobile First in die Konzeption einsteigen ... 75
5.3 ... Context First - den Nutzungskontext berücksichtigen ... 76
5.4 ... Touch, Gesten und Sprache - mobile Interaktionsmechanismen ... 76

6. Von Smartwear, Sprachsteuerung und anderen Revolutionen ... 79

6.1 ... Gute Werkzeuge sind langlebig ... 80
6.2 ... Gute Werkzeuge sind anpassungsfähig ... 81
6.3 ... Praxisbeispiel Sprachsteuerung - Wizard of Oz ... 82
6.4 ... Alles ist testbar - von Smartwear bis zum Internet of Things ... 83
6.5 ... Herausforderungen bei der Konzeption für neue Geräte ... 84
6.6 ... Remote-Arbeiten - nicht nur die Anwendungen selbst, sondern auch die Art der Arbeit ändern sich ... 86

7. Nutzer in die Produktentwicklung einbinden - der optimale Projektablauf ... 87

7.1 ... Nutzerzentrierte Entwicklung ... 87
7.2 ... Ein optimaler Projektablauf ... 88
7.3 ... Aller Anfang ist schwer - UX-Reifegrad im Unternehmen steigern ... 90

8. Agil ans Ziel - Usability Engineering in agilen Prozessen ... 93

8.1 ... Warum agile Entwicklung? ... 93
8.2 ... Wie geht agile Entwicklung? ... 94
8.3 ... Agil oder Lean? ... 95
8.4 ... Agiles Arbeiten in der Praxis ... 95
8.5 ... Was ist Usability Engineering? ... 98
8.6 ... DevOps - DesignOps - ResearchOps ... 98

TEIL II Nutzer kennen lernen und für sie konzipieren ... 101

9. Fokusgruppen und Befragungen - Erkenntnisse über das derzeitige Nutzungsverhalten ... 103

9.1 ... Was sind Fokusgruppen? Was sind Befragungen? ... 103
9.2 ... Wie führt man Fokusgruppen durch? ... 105
9.3 ... Wie setzt man Befragungen auf? ... 109

10. Vor-Ort-Beobachtungen und Tagebuchstudien - den Nutzer im Alltag beobachten ... 115

10.1 ... Nutzungskontextanalyse - wozu? ... 115
10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 116

11. Personas - aus Erkenntnissen prototypische Nutzer entwickeln ... 119

11.1 ... Was sind Personas? ... 119
11.2 ... Wie sehen Personas aus? ... 120
11.3 ... Wie macht man Personas? ... 123
11.4 ... Wann setze ich Personas ein? ... 128

12. Mapping-Methoden - Interaktionen des Nutzers strukturiert erfassen ... 131

12.1 ... Welche Mapping-Methoden gibt es? ... 131
12.2 ... Wann setze ich welche Map ein? ... 137
12.3 ... Wie sieht eine Customer Journey Map genau aus? ... 137
12.4 ... Wie erstellt man eine Customer Journey Map? ... 140

13. Card Sorting - Entwicklung der Informationsarchitektur ... 141

13.1 ... Was ist Card Sorting? ... 141
13.2 ... Wie läuft ein Card Sorting ab? ... 146
13.3 ... Wie sieht eine Informationsarchitektur aus? Was erhalten Sie als Ergebnis aus einem Workshop? ... 150
13.4 ... Wer sollte ein Card Sorting durchführen? ... 151
13.5 ... Wann setze ich Card Sorting ein? ... 151

14. Scribbles - erste Ideen auf dem Weg zum Design ... 153

14.1 ... Was sind Scribbles? ... 153
14.2 ... Wie sehen Scribbles aus? ... 154
14.3 ... Wie macht man Scribbles? ... 157
14.4 ... Tipps zum Zeichnen ... 157
14.5 ... Scribbeln mit dem Tablet ... 160
14.6 ... Kommentare, Dokumentation und Überarbeitung ... 161
14.7 ... Scribbeln im Team ... 162
14.8 ... Wer sollte scribbeln? ... 163
14.9 ... Wann setze ich Scribbles ein? ... 163

15. Wireframes - sich an das optimale Produkt annähern ... 165

15.1 ... Was heißt Wireframe? ... 165
15.2 ... Wozu Wireframes? ... 166
15.3 ... Programme für Wireframes ... 167
15.4 ... Für welche Seiten brauche ich Wireframes? ... 171
15.5 ... Was in einen Wireframe gehört ... 171
15.6 ... Was nicht in einen Wireframe gehört ... 173
15.7 ... Was manchmal in einen Wireframe gehört ... 174
15.8 ... Responsives Design und Wireframes ... 176
15.9 ... Arbeitserleichterung für die Entwickler ... 177
15.10 ... Bibliotheken zur eigenen Arbeitserleichterung ... 178
15.11 ... Wie geht es weiter mit den Wireframes? ... 178

16. Papierprototypen - Ideen schnell greifbar machen ... 181

16.1 ... Was sind Papierprototypen? ... 181
16.2 ... Wie erstelle ich einen Papierprototyp? ... 182
16.3 ... Wann setze ich Papierprototypen ein? ... 186

17. Mockups und Prototypen - konkretisieren, visualisieren, designen ... 187

17.1 ... Was sind Mockups, was Prototypen? ... 187
17.2 ... Wie sehen Prototypen aus? ... 189
17.3 ... Wie erstelle ich einen Prototyp? ... 191
17.4 ... Wann setze ich Prototypen ein? ... 196

18. Design Sprints, Design Thinking und ausgewählte Ideation-Methoden - Projektideen entwickeln und validieren ... 199

18.1 ... Was ist ein Design Sprint? ... 199
18.2 ... Was ist Design Thinking? ... 203
18.3 ... Ausgewählte Kreativitäts- und Ideation-Techniken ... 206

19. Usability-Tests - die Klassiker unter den Nutzertests ... 209

19.1 ... Was sind Usability-Tests? Welche Formen gibt es? ... 210
19.2 ... Wie läuft ein Usability-Test ab? ... 218
19.3 ... Wer sollte Usability-Tests durchführen? ... 227
19.4 ... Wann setze ich Usability-Tests ein? ... 230

20. Online-Usability-Tests - von zuhause aus testen lassen ... 231

20.1 ... Was sind Online-Usability-Tests? ... 231
20.2 ... Wann setze ich Online-Usability-Tests ein? ... 232
20.3 ... Moderierter Online-Usability-Test ... 232
20.4 ... Unmoderierter Online-Usability-Test ... 237

21. Guerilla-Usability-Tests - informell und schnell Erkenntnisse sammeln ... 241

21.1 ... Warum Guerilla? ... 241
21.2 ... Wie finde ich Probanden? ... 243
21.3 ... Was kann ich testen? ... 245
21.4 ... Tipps für die Durchführung ... 245
21.5 ... Auswerten und präsentieren ... 246

22. Usability-Reviews - Expertenmeinung einholen statt Nutzer rekrutieren ... 247

22.1 ... Was sind Usability-Reviews? ... 247
22.2 ... Wie läuft ein Usability-Review ab? ... 248
22.3 ... Wer sollte einen Usability-Review durchführen? ... 250
22.4 ... Wann setze ich Usability-Reviews ein? ... 250

23. A/B-Tests - Varianten gegeneinander antreten lassen ... 251

23.1 ... Was bringen A/B-Tests? ... 252
23.2 ... Was kann man alles testen? ... 252
23.3 ... Was kann man nicht testen? ... 253
23.4 ... Wie sieht eine gute Fragestellung aus? ... 254
23.5 ... Wie definiere ich Erfolg? ... 255
23.6 ... Bitte nicht stören - Fehlerquellen ausschließen ... 256
23.7 ... Wie viele Testpersonen/Aufrufe brauche ich? ... 256
23.8 ... Multivariate Tests ... 260
23.9 ... Ergebnisse mit Hirn interpretieren ... 260
23.10 ... Womit testen? - Tools ... 261
23.11 ... Erkenntnisse in Verbesserungen umsetzen ... 262

24. Analytics - aus dem aktuellen Nutzerverhalten lernen ... 265

24.1 ... Was kann man alles messen? ... 265
24.2 ... Womit analysieren? - Tools ... 272

25. Metriken ... 275

25.1 ... Warum Metriken für UX? ... 275
25.2 ... Statistik auch für kleine Stichproben ... 276
25.3 ... Die richtigen Metriken auswählen ... 278
25.4 ... Signifikanz - was messen wir da überhaupt? ... 280
25.5 ... Performance - Core Web Vitals und PageSpeed Insights ... 281

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

26. Struktur der Anwendung - Informations- und Navigationsarchitektur ... 287

26.1 ... Grobsortierung der Inhalte ... 288
26.2 ... Feingliederung der Inhalte ... 288
26.3 ... Sitestruktur festlegen und darstellen ... 291
26.4 ... Zeichnen der Sitemap ... 291
26.5 ... Zeige ich die Sitemap auf der Site? ... 292
26.6 ... Navigation für den Nutzer planen ... 293

27. Ordnung auf den Seiten - Gestaltungsraster und responsives Design ... 295

27.1 ... Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten ... 295
27.2 ... Wie ein Rastersystem aufgebaut ist ... 297
27.3 ... Was bedeutet responsives Webdesign? ... 301
27.4 ... Das sollten Sie bei der Konzeption responsiver Websites bedenken ... 303

28. Navigationskonzepte - Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas ... 309

28.1 ... Horizontale Navigationsleisten und Tableiste ... 309
28.2 ... Navigationsmenü mit Burger-Icon, Hamburger-Menü ... 311
28.3 ... Navigationshub ... 314
28.4 ... Mega-Dropdown-Menü ... 315
28.5 ... Akkordeonmenü ... 316
28.6 ... Off-Canvas-Navigation, Off-Canvas-Flyout ... 317

29. Popups, Banner und Modals ... 319

29.1 ... Popups wollen auffallen, Banner werben für etwas und Modals erzwingen eine Nutzerinteraktion ... 319
29.2 ... Tipps für die Gestaltung ... 323
29.3 ... Cookie Consent Banner oder Popup - wie Sie ihn optimieren ... 326

30. Kopfzeilen - Header nutzenstiftend umsetzen ... 329

30.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 329
30.2 ... Darstellung auf mobilen Endgeräten ... 332
30.3 ... Headerverhalten im Navigationsfluss ... 333

31. Fußzeilen - Footer sinnvoll gestalten ... 335

31.1 ... Elemente zweckgebunden im Footer platzieren ... 335
31.2 ... Darstellung auf mobilen Endgeräten ... 340

32. Farbe, Ästhetik und Usability ... 341

32.1 ... Was ist Farbe überhaupt? ... 342
32.2 ... Welche Wirkung hat Farbe? ... 345
32.3 ... Die richtigen Farben für meine Nutzer finden ... 346
32.4 ... Fehler bei der Farbwahl vermeiden ... 348
32.5 ... Brauche ich einen Nachtmodus? ... 351

33. Schriftarten und Textformatierung ... 355

33.1 ... Von Punkten und Pixeln - Grundlagen der Darstellung ... 356
33.2 ... Das Bildschirm-Grundstück - Screen Real Estate ... 359
33.3 ... Die richtige Schriftart aussuchen ... 360
33.4 ... Schriftarten gut kombinieren ... 362
33.5 ... Wie groß sollte Fließtext sein? ... 362
33.6 ... Großbuchstaben und andere Hervorhebungen ... 364
33.7 ... Blocksatz niemals, zentriert selten ... 365
33.8 ... Die richtige Zeilenbreite ... 366
33.9 ... Der richtige Zeilenabstand ... 366
33.10 ... Typografie für Legastheniker ... 367

34. Sprachwahl und mehrsprachige Sites ... 369

34.1 ... Sprachumschaltung bei Apps ... 369
34.2 ... Sprachumschaltung bei Websites ... 370

35. Nutzerfreundlich schreiben ... 379

35.1 ... Vorgehen beim Schreiben ... 380
35.2 ... Wie schreibe ich lesbaren und verständlichen Text? ... 383
35.3 ... Überschriften ... 386
35.4 ... Listen und Kästen ... 387
35.5 ... Tabellen, Diagramme, Bilder und Videos ... 388
35.6 ... Hervorhebungen ... 388
35.7 ... Text und SEO ... 389

36. Bilder für Benutzer auswählen ... 391

36.1 ... Was ist eigentlich ein Bild? ... 391
36.2 ... Wofür brauchen wir Bilder? ... 391
36.3 ... Vorteile von Bildern ... 395
36.4 ... Nachteile von Bildern ... 396
36.5 ... Tipps für richtigen Einsatz und Auswahl von Bildern ... 396
36.6 ... Tipps für die nutzerfreundliche Darstellung von Bildern ... 403

37. Bildbühne, Karussell, Slideshow - mehrere Bilder an einer Stelle ... 413

37.1 ... Was ist eine Bildbühne? ... 413
37.2 ... Wann nutzt man Bildbühnen? ... 413
37.3 ... Vorteile von Bildbühnen ... 415
37.4 ... Nachteile von Bildbühnen ... 416
37.5 ... Tipps für die Gestaltung von Bildbühnen ... 418
37.6 ... Alternativen ... 424

38. Audio und Video einbinden und steuern ... 429

38.1 ... Wann sind Audio und Video überhaupt sinnvoll? ... 429
38.2 ... Audio und Video zugänglich machen ... 430
38.3 ... Audio und Video steuern ... 431
38.4 ... Normen zur Steuerung von Audio und Video ... 431

39. Icons aussagekräftig auswählen ... 433

39.1 ... Icons nutzenstiftend einsetzen ... 433
39.2 ... Icon mit oder ohne Label - das ist die Frage ... 434
39.3 ... Labels bei Icons bewusst positionieren ... 436
39.4 ... Icons eindeutig gestalten ... 437

40. Links und Buttons formatieren und formulieren ... 439

40.1 ... Welche Links biete ich an? ... 440
40.2 ... Wo kommen Links hin? ... 440
40.3 ... Wie sehen Links aus? ... 441
40.4 ... Links formulieren ... 442
40.5 ... Seitennamen ... 443
40.6 ... Dateinamen, URLs und Pfade ... 443
40.7 ... Buttons - Schaltflächen, Tasten oder Knöpfe? ... 444
40.8 ... Nicht jeder ist gleich wichtig - Hierarchie ... 446
40.9 ... Man sieht nicht immer gleich aus - Button-Zustände ... 451
40.10 ... Klick - Buttons und Sound ... 453
40.11 ... Wie groß darf's denn sein? ... 454
40.12 ... Spezielle Buttons - Checkboxen, Radiobuttons, Selektoren ... 455

41. Formulare zielführend realisieren ... 459

41.1 ... Formulare - vielfach angewandt und bekannt ... 459
41.2 ... Wofür werden Formulare eingesetzt? ... 460
41.3 ... Tipps für die Gestaltung von Formularen ... 465
41.4 ... Tipps zur Unterstützung des Nutzers bei der Eingabe ... 473
41.5 ... Tipps zur Unterstützung des Nutzers beim Abschicken des Formulars (Aktionen) ... 480

42. Labels und Auszeichnungen formulieren und positionieren ... 485

42.1 ... Labels zielführend positionieren ... 485
42.2 ... Labels verständlich formulieren ... 488

43. Fehlermeldungen hilfreich umsetzen ... 491

43.1 ... Fehlern vorbeugen (Inline-Validierung) ... 491
43.2 ... Fehlermeldungen optimal positionieren ... 493
43.3 ... Fehlermeldungen aufmerksamkeitsstark gestalten ... 494
43.4 ... Fehlermeldungen verständlich formulieren ... 495

44. Listen und Tabellen formatieren ... 497

44.1 ... Listen lockern Texte auf ... 497
44.2 ... Von eindimensionalen zu mehrdimensionalen Listen ... 497
44.3 ... Von Listen zu Tabellen ... 498
44.4 ... Listen fürs Lesen formatieren ... 499
44.5 ... Was kommt nach der Liste? ... 501
44.6 ... Keine Liste ohne Sortierung ... 503
44.7 ... Lange Listen bändigen ... 503
44.8 ... Listen filtern und Spalten ein-/ausblenden ... 505
44.9 ... Vergleichstabellen, die zum Kauf motivieren ... 506

45. Aufklappelemente/Akkordeons richtig umsetzen ... 509

45.1 ... Akkordeons zeigen und verstecken Inhalte nach Interaktion des Nutzers ... 509
45.2 ... Akkordeons für Menüs, FAQ-Listen und komplexe Formulare - vor allem mobil im Einsatz ... 511
45.3 ... Vorteile von Akkordeons ... 511
45.4 ... Nachteile von Akkordeons ... 512
45.5 ... Tipps für die Gestaltung von Akkordeons ... 512

46. Diagramme auswählen und gestalten ... 517

46.1 ... Wann Diagramm, wann Tabelle? ... 517
46.2 ... Das richtige Diagramm für meine Daten ... 518
46.3 ... Werte unterschiedlicher Skalen vergleichen ... 524
46.4 ... Formatierung nach Usability, nicht nach Ästhetik ... 525

47. (Mikro-)Animation sinnvoll einsetzen ... 527

47.1 ... Animation belebt ... 527
47.2 ... Was ist eigentlich Animation? ... 527
47.3 ... Anwendung von Animationen ... 529
47.4 ... Wie sieht eine gute Animation aus? ... 531

48. Suchfunktionen zielführend gestalten ... 537

48.1 ... Wofür werden Suchfunktionen eingesetzt? ... 538
48.2 ... Tipps für die Auffindbarkeit von Suchfunktionen ... 540
48.3 ... Tipps für die Gestaltung der Suchfunktion ... 542
48.4 ... Tipps zur Unterstützung des Nutzers bei der Sucheingabe ... 543
48.5 ... Tipps für eine eindeutige, gut strukturierte Trefferdarstellung ... 547
48.6 ... Alternativen ... 553

49. Filter und Facetten integrieren und positionieren ... 555

49.1 ... Filter grenzen schnell ein, Facetten unterstützen bei der Suche ... 555
49.2 ... Tipps für die Auswahl und Benennung von Filtern/Facetten ... 559
49.3 ... Tipps für die Gestaltung von Filtern/Facetten ... 561

50. Designsysteme, Styleguides und Pattern Libraries ... 569

50.1 ... Standards berücksichtigen ... 569
50.2 ... Wie unterscheiden sich Designsystem, Styleguide und Pattern Library? ... 573
50.3 ... Designsysteme nachhaltig etablieren ... 578

Index ... 579