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 ... 52
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 ... 61
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 & Einfache Sprache ... 67
5. Das mobile Zeitalter und die Auswirkung auf interaktive Konzepte ... 71
5.1 ... Mit responsivem Design für verschiedene Endgeräte optimieren ... 73
5.2 ... Mobile First in die Konzeption einsteigen ... 73
5.3 ... Context First -- den Nutzungskontext berücksichtigen ... 74
5.4 ... Touch, Gesten und Sprache -- mobile Interaktionsmechanismen ... 75
6. Von Smartwear, Sprachsteuerung & anderen Revolutionen ... 77
6.1 ... Gute Werkzeuge sind langlebig ... 78
6.2 ... Gute Werkzeuge sind anpassungsfähig ... 79
6.3 ... Praxisbeispiel Sprachsteuerung -- Wizard of Oz ... 79
6.4 ... Alles ist testbar -- von Smartwear bis zum Internet of Things ... 80
6.5 ... Herausforderungen bei der Konzeption für neue Geräte ... 81
7. Nutzer in die Produktentwicklung einbinden: der optimale Projektablauf ... 83
7.1 ... Nutzerzentrierte Entwicklung ... 83
7.2 ... Ein optimaler Projektablauf ... 84
7.3 ... Aller Anfang ist schwer -- UX-Reifegrad im Unternehmen steigern ... 86
8. Agil ans Ziel: Usability Engineering in agilen Prozessen ... 89
8.1 ... Warum agile Entwicklung? ... 89
8.2 ... Wie geht agile Entwicklung? ... 90
8.3 ... Agil oder Lean? ... 91
8.4 ... Agiles Arbeiten in der Praxis ... 91
Teil II Nutzer kennenlernen und für sie konzipieren ... 95
9. Fokusgruppen und Befragungen -- Erkenntnisse über das derzeitige Nutzungsverhalten ... 97
9.1 ... Was sind Fokusgruppen? Was sind Befragungen? ... 97
9.2 ... Wie führt man Fokusgruppen durch? ... 99
9.3 ... Wie setzt man Befragungen auf? ... 103
10. Vor-Ort-Beobachtungen und Tagebuchstudien -- den Nutzer im Alltag beobachten ... 109
10.1 ... Nutzungskontextanalyse -- wozu? ... 109
10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 110
11. Personas -- aus Erkenntnissen prototypische Nutzer entwickeln ... 113
11.1 ... Was sind Personas? ... 113
11.2 ... Wie sehen Personas aus? ... 114
11.3 ... Wie macht man Personas? ... 117
11.4 ... Wann setze ich Personas ein? ... 122
12. Mapping-Methoden -- Interaktionen des Nutzers strukturiert erfassen ... 125
12.1 ... Welche Mapping-Methoden gibt es? ... 125
12.2 ... Wann setze ich welche Map ein? ... 130
12.3 ... Wie sieht eine Customer Journey Map genau aus? ... 131
12.4 ... Wie erstellt man eine Customer Journey Map? ... 133
13. Card Sorting -- Entwicklung der Informationsarchitektur ... 135
13.1 ... Was ist Card Sorting? ... 135
13.2 ... Wie läuft ein Card Sorting ab? ... 140
13.3 ... Wie sieht eine Informationsarchitektur aus? Was erhalten Sie als Ergebnis aus einem Workshop? ... 143
13.4 ... Wer sollte ein Card Sorting durchführen? ... 143
13.5 ... Wann setze ich Card Sorting ein? ... 144
14. Scribbles -- erste Ideen auf dem Weg zum Design ... 145
14.1 ... Was sind Scribbles? ... 145
14.2 ... Wie sehen Scribbles aus? ... 146
14.3 ... Wie macht man Scribbles? ... 149
14.4 ... Tipps zum Zeichnen ... 149
14.5 ... Scribbeln mit dem Tablet ... 152
14.6 ... Kommentare, Dokumentation und Überarbeitung ... 153
14.7 ... Scribbeln im Team ... 154
14.8 ... Wer sollte scribbeln? ... 155
14.9 ... Wann setze ich Scribbles ein? ... 155
15. Wireframes -- sich an das optimale Produkt annähern ... 157
15.1 ... Was heißt Wireframe? ... 157
15.2 ... Wozu Wireframes? ... 158
15.3 ... Programme für Wireframes ... 159
15.4 ... Für welche Seiten brauche ich Wireframes? ... 163
15.5 ... Was in einen Wireframe gehört ... 163
15.6 ... Was nicht in einen Wireframe gehört ... 165
15.7 ... Was manchmal in einen Wireframe gehört ... 166
15.8 ... Responsives Design und Wireframes ... 168
15.9 ... Arbeitserleichterung für die Entwickler ... 169
15.10 ... Bibliotheken zur eigenen Arbeitserleichterung ... 170
15.11 ... Wie geht es weiter mit den Wireframes? ... 170
16. Papierprototypen -- Ideen schnell greifbar machen ... 173
16.1 ... Was sind Papierprototypen? ... 173
16.2 ... Wie erstelle ich einen Papierprototyp? ... 174
16.3 ... Was ist bei einem Test eines Papierprototyps zu bedenken? ... 179
16.4 ... Wann setze ich Papierprototypen ein? ... 180
17. Mockups und Prototypen -- konkretisieren, visualisieren, designen ... 181
17.1 ... Was sind Mockups, was Prototypen? ... 181
17.2 ... Wie sehen Prototypen aus? ... 183
17.3 ... Wie erstelle ich einen Prototyp? ... 185
17.4 ... Wann setze ich Prototypen ein? ... 190
18. Design Sprints, Design Thinking und ausgewählte Ideation-Methoden: Projektideen entwickeln und validieren ... 193
18.1 ... Was ist ein Design Sprint? ... 193
18.2 ... Was ist Design Thinking? ... 197
18.3 ... Ausgewählte Kreativitäts- und Ideation-Techniken ... 199
19. Usability-Tests -- der Klassiker unter den Nutzertests ... 203
19.1 ... Was sind Usability-Tests? Welche Formen gibt es? ... 204
19.2 ... Wie läuft ein Usability-Test ab? ... 212
19.3 ... Wer sollte Usability-Tests durchführen? ... 221
19.4 ... Wann setze ich Usability-Tests ein? ... 223
20. Remote-Usability-Tests -- von zuhause aus testen lassen ... 225
20.1 ... Was sind Remote-Usability-Tests? ... 225
20.2 ... Wie läuft ein Remote-Usability-Test ab? ... 229
20.3 ... Wann setze ich Remote-Usability-Tests ein? ... 231
21. Guerilla-Usability-Tests -- informell und schnell Erkenntnisse sammeln ... 233
21.1 ... Warum Guerilla? ... 233
21.2 ... Wie finde ich Probanden? ... 235
21.3 ... Was kann ich testen? ... 237
21.4 ... Tipps für die Durchführung ... 237
21.5 ... Auswerten und präsentieren ... 238
22. Usability-Reviews -- Expertenmeinung einholen statt Nutzer rekrutieren ... 239
22.1 ... Was sind Usability-Reviews? ... 239
22.2 ... Wie läuft ein Usability-Review ab? ... 241
22.3 ... Wer sollte einen Usability-Review durchführen? ... 243
22.4 ... Wann setze ich Usability-Reviews ein? ... 243
23. A/B-Tests -- Varianten gegeneinander antreten lassen ... 245
23.1 ... Was bringen A/B-Tests? ... 246
23.2 ... Was kann man alles testen? ... 246
23.3 ... Was kann man nicht testen? ... 247
23.4 ... Wie sieht eine gute Fragestellung aus? ... 248
23.5 ... Wie definiere ich Erfolg? ... 249
23.6 ... Bitte nicht stören -- Fehlerquellen ausschließen ... 250
23.7 ... Wie viele Testpersonen/Aufrufe brauche ich? ... 250
23.8 ... Ergebnisse mit Hirn interpretieren ... 253
23.9 ... Womit testen? -- Tools ... 254
23.10 ... Erkenntnisse in Verbesserungen umsetzen ... 254
24. Analytics -- aus dem aktuellen Nutzerverhalten lernen ... 257
24.1 ... Was kann man alles messen? ... 257
24.2 ... Womit analysieren? -- Tools ... 264
25. Metriken ... 265
25.1 ... Warum Metriken für UX? ... 265
25.2 ... Statistik auch für kleine Stichproben ... 266
25.3 ... Die richtigen Metriken auswählen ... 267
25.4 ... Signifikanz -- ein Wort zur Statistik ... 270
Teil III Usability-Guidelines -- Anleitung für die Umsetzung ... 271
26. Struktur der Anwendung -- Informations- und Navigationsarchitektur ... 273
26.1 ... Grobsortierung der Inhalte ... 274
26.2 ... Feingliederung der Inhalte ... 274
26.3 ... Sitestruktur festlegen und darstellen ... 276
26.4 ... Zeichnen der Sitemap ... 277
26.5 ... Zeige ich die Sitemap auf der Site? ... 278
26.6 ... Navigation für den Nutzer planen ... 278
27. Ordnung auf den Seiten -- Gestaltungsraster und responsives Design ... 281
27.1 ... Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten ... 281
27.2 ... Wie ein Rastersystem aufgebaut ist ... 283
27.3 ... Was bedeutet responsives Webdesign? ... 286
27.4 ... Das sollten Sie bei der Konzeption responsiver Websites bedenken ... 288
28. Navigationskonzepte -- Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas ... 295
28.1 ... Horizontale Navigationsleisten und Tableiste ... 295
28.2 ... Navigationsmenü mit Burger-Icon, Hamburger-Menü ... 297
28.3 ... Navigationshub ... 299
28.4 ... Mega-Dropdown-Menü ... 300
28.5 ... Akkordeonmenü ... 302
28.6 ... Off-Canvas-Navigation, Off-Canvas-Flyout ... 303
29. Kopfzeilen -- Header nutzenstiftend umsetzen ... 305
29.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 305
29.2 ... Darstellung auf mobilen Endgeräten ... 308
29.3 ... Headerverhalten im Navigationsfluss ... 308
30. Fußzeilen -- Footer sinnvoll gestalten ... 311
30.1 ... Elemente zweckgebunden im Footer platzieren ... 311
30.2 ... Darstellung auf mobilen Endgeräten ... 315
31. Farbe, Ästhetik und Usability ... 317
31.1 ... Was ist Farbe überhaupt? ... 318
31.2 ... Welche Wirkung hat Farbe? ... 321
31.3 ... Die richtigen Farben für meine Nutzer finden ... 322
31.4 ... Fehler bei der Farbwahl vermeiden ... 324
32. Schriftarten und Textformatierung ... 327
32.1 ... Von Punkten und Pixeln -- Grundlagen der Darstellung ... 328
32.2 ... Das Bildschirm-Grundstück -- Screen Real Estate ... 331
32.3 ... Die richtige Schriftart aussuchen ... 332
32.4 ... Schriftarten gut kombinieren ... 334
32.5 ... Wie groß sollte Fließtext sein? ... 335
32.6 ... Großbuchstaben und andere Hervorhebungen ... 336
32.7 ... Blocksatz niemals, zentriert selten ... 337
32.8 ... Die richtige Zeilenbreite ... 338
32.9 ... Der richtige Zeilenabstand ... 338
32.10 ... Typografie für Legastheniker ... 339
33. Sprachwahl und mehrsprachige Sites ... 341
33.1 ... Sprachumschaltung bei Apps ... 341
33.2 ... Sprachumschaltung bei Websites ... 342
34. Nutzerfreundlich schreiben ... 351
34.1 ... Vorgehen beim Schreiben ... 352
34.2 ... Wie schreibe ich lesbaren und verständlichen Text? ... 355
34.3 ... Überschriften ... 358
34.4 ... Listen und Kästen ... 359
34.5 ... Tabellen, Diagramme, Bilder und Videos ... 359
34.6 ... Hervorhebungen ... 360
34.7 ... Text und SEO ... 360
35. Bilder für Benutzer auswählen ... 363
35.1 ... Was ist eigentlich ein Bild? ... 363
35.2 ... Wofür brauchen wir Bilder? ... 363
35.3 ... Vorteile von Bildern ... 366
35.4 ... Nachteile von Bildern ... 367
35.5 ... Tipps für richtigen Einsatz und Auswahl von Bildern ... 368
35.6 ... Tipps für die nutzerfreundliche Darstellung von Bildern ... 374
36. Bildbühne, Karussell, Slideshow -- mehrere Bilder an einer Stelle ... 385
36.1 ... Was ist eine Bildbühne? ... 385
36.2 ... Wann nutzt man Bildbühnen? ... 385
36.3 ... Vorteile von Bildbühnen ... 388
36.4 ... Nachteile von Bildbühnen ... 388
36.5 ... Tipps für die Gestaltung von Bildbühnen ... 389
36.6 ... Alternativen ... 395
37. Audio & Video einbinden und steuern ... 399
37.1 ... Wann sind Audio & Video überhaupt sinnvoll? ... 399
37.2 ... Audio & Video zugänglich machen ... 400
37.3 ... Audio & Video steuern ... 401
37.4 ... Normen zur Steuerung von Audio & Video ... 402
38. Icons aussagekräftig auswählen ... 403
38.1 ... Icons nutzenstiftend einsetzen ... 403
38.2 ... Icon mit oder ohne Label -- das ist die Frage ... 404
38.3 ... Labels bei Icons bewusst positionieren ... 406
38.4 ... Icons eindeutig gestalten ... 408
39. Links und Buttons formatieren und formulieren ... 411
39.1 ... Welche Links biete ich an? ... 412
39.2 ... Wo kommen Links hin? ... 412
39.3 ... Wie sehen Links aus? ... 413
39.4 ... Links formulieren ... 414
39.5 ... Seitennamen ... 415
39.6 ... Dateinamen, URLs und Pfade ... 416
39.7 ... Buttons -- Schaltflächen, Tasten oder Knöpfe? ... 416
39.8 ... Nicht jeder ist gleich wichtig -- Hierarchie ... 418
39.9 ... Man sieht nicht immer gleich aus -- Button-Zustände ... 423
39.10 ... Klick -- Buttons und Sound ... 426
39.11 ... Wie groß darf's denn sein? ... 426
39.12 ... Spezielle Buttons -- Checkboxen, Radiobuttons, Selektoren ... 428
40. Formulare zielführend realisieren ... 431
40.1 ... Formulare -- vielfach angewandt und bekannt ... 431
40.2 ... Wofür werden Formulare eingesetzt? ... 432
40.3 ... Tipps für die Gestaltung von Formularen ... 437
40.4 ... Tipps zur Unterstützung des Nutzers bei der Eingabe ... 442
40.5 ... Tipps zur Unterstützung des Nutzers beim Abschicken des Formulars (Aktionen) ... 445
41. Labels und Auszeichnungen formulieren und positionieren ... 449
41.1 ... Labels zielführend positionieren ... 449
41.2 ... Labels verständlich formulieren ... 455
42. Fehlermeldungen hilfreich umsetzen ... 457
42.1 ... Fehlern vorbeugen (Inline-Validierung) ... 457
42.2 ... Fehlermeldungen optimal positionieren ... 459
42.3 ... Fehlermeldungen aufmerksamkeitsstark gestalten ... 459
42.4 ... Fehlermeldungen verständlich formulieren ... 460
43. Listen und Tabellen formatieren ... 463
43.1 ... Listen lockern Texte auf ... 463
43.2 ... Von eindimensionalen zu mehrdimensionalen Listen ... 463
43.3 ... Von Listen zu Tabellen ... 464
43.4 ... Listen fürs Lesen formatieren ... 465
43.5 ... Was kommt nach der Liste? ... 467
43.6 ... Keine Liste ohne Sortierung ... 468
43.7 ... Lange Listen bändigen ... 470
43.8 ... Listen filtern und Spalten ein-/ausblenden ... 470
43.9 ... Vergleichstabellen, die zum Kauf motivieren ... 472
44. Aufklappelemente/Akkordeons richtig umsetzen ... 475
44.1 ... Akkordeons zeigen und verstecken Inhalte nach Interaktion des Nutzers ... 475
44.2 ... Akkordeons für Menüs, FAQ-Listen und komplexe Formulare -- vor allem mobil im Einsatz ... 476
44.3 ... Vorteile von Akkordeons ... 478
44.4 ... Nachteile von Akkordeons ... 478
44.5 ... Tipps für die Gestaltung von Akkordeons ... 479
45. Diagramme auswählen & gestalten ... 485
45.1 ... Wann Diagramm, wann Tabelle? ... 486
45.2 ... Das richtige Diagramm für meine Daten ... 486
45.3 ... Werte unterschiedlicher Skalen vergleichen ... 492
45.4 ... Formatierung nach Usability, nicht Ästhetik ... 492
46. (Mikro-)Animation sinnvoll einsetzen ... 495
46.1 ... Animation belebt ... 495
46.2 ... Was ist eigentlich Animation? ... 495
46.3 ... Anwendung von Animationen ... 497
46.4 ... Wie sieht eine gute Animation aus? ... 499
47. Suchfunktionen zielführend gestalten ... 505
47.1 ... Was ist eine Suchfunktion? ... 505
47.2 ... Wofür werden Suchfunktionen eingesetzt? ... 506
47.3 ... Tipps für die Auffindbarkeit von Suchfunktionen ... 508
47.4 ... Tipps für die Gestaltung der Suchfunktion ... 509
47.5 ... Tipps zur Unterstützung des Nutzers bei der Sucheingabe ... 510
47.6 ... Tipps für eine eindeutige, gut strukturierte Trefferdarstellung ... 512
47.7 ... Tipps für eine technisch zeitgemäße Umsetzung ... 516
47.8 ... Alternativen ... 518
48. Filter und Facetten integrieren und positionieren ... 519
48.1 ... Filter grenzen schnell ein, Facetten unterstützen bei der Suche ... 519
48.2 ... Unerlässlich im Onlinehandel und auch sonst weitverbreitet ... 522
48.3 ... Tipps für die Auswahl und Benennung von Filtern/Facetten ... 523
48.4 ... Tipps für die Gestaltung von Filtern/Facetten ... 525
49. Design-Systeme, Styleguides & Pattern Libraries ... 533
49.1 ... Standards berücksichtigen ... 533
49.2 ... Wie unterscheiden sich Design-System, Styleguide und Pattern Library? ... 537
49.3 ... Design-Systeme nachhaltig etablieren ... 542
Index ... 543
