Praxisbuch Usability und UX

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

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

1. Von der Usability zur User Experience ... 33

1.1 ... Usability als Erfolgsfaktor für gute digitale Produkte ... 34
1.2 ... User Experience als umfassendes Nutzungserlebnis ... 34
1.3 ... Abgrenzung zwischen Usability und User Experience ... 35

2. Erkenntnisse aus Studien, Forschung und Projekten liefern Fakten ... 37

2.1 ... Können wir nicht einfach den Nutzer fragen? ... 38
2.2 ... Wer schnell zum Ziel will, hält sich an den Weg ... 39
2.3 ... Wer setzt die Standards? ... 42

3. Menschliche Wahrnehmung -- Gestaltgesetze & Co. ... 45

3.1 ... Kurzzeitgedächtnis nicht überfordern ... 45
3.2 ... Auswahl ist gut, aber zu viel ist schlecht ... 46
3.3 ... Menschliche Wahrnehmung -- Gestaltgesetze ... 46
3.4 ... Menschliche Wahrnehmung -- weitere Erkenntnisse aus der Forschung ... 50
3.5 ... Sozialpsychologie ... 55

4. ISO 9241 & Co. -- Normen und Gesetze rund um Usability ... 59

4.1 ... ISO 9241 -- Ergonomie der Mensch-System-Interaktion ... 61
4.2 ... ISO 9241-210 -- Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme ... 62
4.3 ... ISO 14915 -- Softwareergonomie für Multimedia-Benutzungsschnittstellen ... 63
4.4 ... ISO 25000 -- Software-Engineering -- Qualitätskriterien und Bewertung von Softwareprodukten (SQuaRE) -- Leitfaden für SQuaRE ... 64
4.5 ... ISO 9000 und 9001 ... 65
4.6 ... Praxisrelevanz der Normen ... 65
4.7 ... Gibt es ein Usability-Gesetz? ... 66
4.8 ... Leichte Sprache und Einfache Sprache ... 69

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

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

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

6.1 ... Gute Werkzeuge sind langlebig ... 80
6.2 ... Gute Werkzeuge sind anpassungsfähig ... 80

7. Nutzer in die Produktentwicklung einbinden: Der optimale Projektablauf ... 83

7.1 ... Nutzerzentrierte Entwicklung ... 83
7.2 ... Ein optimaler Projektablauf ... 84

8. Agil ans Ziel: Usability-Engineering in agilen Prozessen ... 87

8.1 ... Warum agile Entwicklung? ... 87
8.2 ... Wie geht agile Entwicklung? ... 88
8.3 ... Agile oder Lean? ... 89
8.4 ... Agiles Arbeiten in der Praxis ... 89

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

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

9.1 ... Was sind Fokusgruppen? Was sind Befragungen? ... 95
9.2 ... Wie führt man Fokusgruppen durch? ... 97
9.3 ... Wie setzt man Befragungen auf? ... 99

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

10.1 ... Nutzungskontextanalyse -- wozu? ... 103
10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 104

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

11.1 ... Was sind Personas? ... 107
11.2 ... Wie sehen Personas aus? ... 108
11.3 ... Wie macht man Personas? ... 111
11.4 ... Wann setze ich Personas ein? ... 116

12. Card Sorting -- Entwicklung der Informationsarchitektur ... 119

12.1 ... Was ist Card Sorting? ... 119
12.2 ... Wie läuft ein Card Sorting ab? ... 124
12.3 ... Wie sieht eine Informationsarchitektur aus? Was erhalten Sie als Ergebnis aus einem Workshop? ... 127
12.4 ... Wer sollte ein Card Sorting durchführen? ... 128
12.5 ... Wann setze ich Card Sorting ein? ... 128

13. Scribbles -- erste Ideen auf dem Weg zum Design ... 129

13.1 ... Was sind Scribbles? ... 129
13.2 ... Wie sehen Scribbles aus? ... 130
13.3 ... Wie macht man Scribbles? ... 133
13.4 ... Tipps zum Zeichnen ... 133
13.5 ... Scribbeln mit dem Tablet ... 136
13.6 ... Kommentare, Dokumentation und Überarbeitung ... 137
13.7 ... Scribbeln im Team ... 138
13.8 ... Wer sollte scribbeln? ... 139
13.9 ... Wann setze ich Scribbles ein? ... 139

14. Wireframes -- sich an das optimale Produkt annähern ... 141

14.1 ... Was heißt Wireframe? ... 141
14.2 ... Wozu Wireframes? ... 142
14.3 ... Programme für Wireframes ... 143
14.4 ... Für welche Seiten brauche ich Wireframes? ... 147
14.5 ... Was in einen Wireframe gehört ... 147
14.6 ... Was nicht in einen Wireframe gehört ... 149
14.7 ... Was manchmal in einen Wireframe gehört ... 150
14.8 ... Responsives Design und Wireframes ... 151
14.9 ... Arbeitserleichterung für die Entwickler ... 153
14.10 ... Bibliotheken zur eigenen Arbeitserleichterung ... 153
14.11 ... Wie geht es weiter mit den Wireframes? ... 154

15. Papierprototypen -- Ideen schnell greifbar machen ... 157

15.1 ... Was sind Papierprototypen? ... 157
15.2 ... Wie erstelle ich einen Papierprototyp? ... 158
15.3 ... Was ist bei einem Test eines Papierprototyps zu bedenken? ... 163
15.4 ... Wann setze ich Papierprototypen ein? ... 164

16. Mockups und Prototypen -- konkretisieren, visualisieren, designen ... 165

16.1 ... Was sind Mockups, was Prototypen? ... 165
16.2 ... Wie sehen Prototypen aus? ... 167
16.3 ... Wie erstelle ich einen Prototyp? ... 169
16.4 ... Wann setze ich Prototypen ein? ... 174

17. Usability-Tests -- der Klassiker unter den Nutzertests ... 177

17.1 ... Was sind Usability-Tests? Welche Formen gibt es? ... 178
17.2 ... Wie läuft ein Usability-Test ab? ... 186
17.3 ... Wer sollte Usability-Tests durchführen? ... 195
17.4 ... Wann setze ich Usability-Tests ein? ... 198

18. Remote-Usability-Tests -- von zuhause aus testen lassen ... 199

18.1 ... Was sind Remote-Usability-Tests? ... 199
18.2 ... Wie läuft ein Remote-Usability-Test ab? ... 203
18.3 ... Wann setze ich Remote-Usability-Tests ein? ... 204

19. Guerilla-Usability-Tests -- informell und schnell Erkenntnisse sammeln ... 207

19.1 ... Warum Guerilla? ... 207
19.2 ... Wie finde ich Probanden? ... 209
19.3 ... Was kann ich testen? ... 211
19.4 ... Tipps für die Durchführung ... 211
19.5 ... Auswerten und präsentieren ... 212

20. Usability-Reviews -- Expertenmeinung einholen statt Nutzer rekrutieren ... 213

20.1 ... Was sind Usability-Reviews? ... 213
20.2 ... Wie läuft ein Usability-Review ab? ... 215
20.3 ... Wer sollte einen Usability-Review durchführen? ... 217
20.4 ... Wann setze ich Usability-Reviews ein? ... 217

21. A/B-Tests -- Varianten gegeneinander antreten lassen ... 219

21.1 ... Was bringen A/B-Tests? ... 220
21.2 ... Was kann man alles testen? ... 220
21.3 ... Was kann man nicht testen? ... 221
21.4 ... Wie sieht eine gute Fragestellung aus? ... 222
21.5 ... Wie definiere ich Erfolg? ... 223
21.6 ... Bitte nicht stören -- Fehlerquellen ausschließen ... 224
21.7 ... Wie viele Testpersonen/Aufrufe brauche ich? ... 224
21.8 ... Ergebnisse mit Hirn interpretieren ... 227
21.9 ... Womit testen? -- Tools ... 228
21.10 ... Erkenntnisse in Verbesserungen umsetzen ... 228

22. Analytics -- aus dem aktuellen Nutzerverhalten lernen ... 231

22.1 ... Was kann man alles messen? ... 231
22.2 ... Womit analysieren? -- Tools ... 238

23. Struktur der Anwendung -- Informations- und Navigationsarchitektur ... 239

23.1 ... Grobsortierung der Inhalte ... 240
23.2 ... Feingliederung der Inhalte ... 240
23.3 ... Sitestruktur festlegen und darstellen ... 242
23.4 ... Zeichnen der Sitemap ... 243
23.5 ... Zeige ich die Sitemap auf der Site? ... 244
23.6 ... Navigation für den Nutzer planen ... 244

24. Ordnung auf den Seiten -- Gestaltungsraster und responsives Design ... 249

24.1 ... Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten ... 249
24.2 ... Wie ein Rastersystem aufgebaut ist ... 251
24.3 ... Was bedeutet responsives Webdesign? ... 254
24.4 ... Das sollten Sie bei der Konzeption responsiver Websites bedenken ... 256

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

25. Navigationskonzepte -- Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas ... 265

25.1 ... Horizontale Navigationsleisten und Tableiste ... 265
25.2 ... Navigationsmenü mit Burger-Icon, Hamburger-Menü ... 267
25.3 ... Navigationshub ... 269
25.4 ... Mega-Dropdown-Menü ... 270
25.5 ... Akkordeon-Menü ... 272
25.6 ... Off-Canvas-Navigation, Off-Canvas-Flyout ... 273

26. Kopfzeilen -- Header nutzenstiftend umsetzen ... 275

26.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 275
26.2 ... Darstellung auf mobilen Endgeräten ... 278
26.3 ... Headerverhalten im Navigationsfluss ... 278

27. Fußzeilen -- Footer nutzenstiftend gestalten ... 281

27.1 ... Elemente zweckgebunden im Footer platzieren ... 281
27.2 ... Darstellung auf mobilen Endgeräten ... 285

28. Farbe, Ästhetik und Usability ... 287

28.1 ... Was ist Farbe überhaupt? ... 288
28.2 ... Welche Wirkung hat Farbe? ... 291
28.3 ... Die richtigen Farben für meine Nutzer finden ... 292
28.4 ... Fehler bei der Farbwahl vermeiden ... 294

29. Schriftarten und Textformatierung ... 297

29.1 ... Von Punkten und Pixeln -- Grundlagen der Darstellung ... 298
29.2 ... Das Bildschirm-Grundstück -- Screen Real Estate ... 301
29.3 ... Die richtige Schriftart aussuchen ... 302
29.4 ... Schriftarten gut kombinieren ... 304
29.5 ... Wie groß sollte Fließtext sein? ... 305
29.6 ... Großbuchstaben und andere Hervorhebungen ... 306
29.7 ... Blocksatz niemals, zentriert selten ... 307
29.8 ... Die richtige Zeilenbreite ... 308
29.9 ... Der richtige Zeilenabstand ... 308
29.10 ... Typografie für Legastheniker ... 309

30. Sprachwahl und mehrsprachige Sites ... 311

30.1 ... Sprachumschaltung bei Apps ... 311
30.2 ... Sprachumschaltung bei Websites ... 312

31. Nutzerfreundlich schreiben ... 321

31.1 ... Vorgehen beim Schreiben ... 322
31.2 ... Wie schreibe ich lesbaren und verständlichen Text? ... 325
31.3 ... Überschriften ... 328
31.4 ... Listen und Kästen ... 329
31.5 ... Tabellen, Diagramme, Bilder und Videos ... 329
31.6 ... Hervorhebungen ... 330
31.7 ... Text und SEO ... 330

32. Bilder für Benutzer auswählen ... 333

32.1 ... Was ist eigentlich ein Bild? ... 333
32.2 ... Wofür brauchen wir Bilder? ... 333
32.3 ... Vorteile von Bildern ... 336
32.4 ... Nachteile von Bildern ... 337
32.5 ... Tipps für richtigen Einsatz und Auswahl von Bildern ... 338
32.6 ... Tipps für die nutzerfreundliche Darstellung von Bildern ... 344

33. Bildbühne, Karussell, Slideshow -- mehrere Bilder an einer Stelle ... 355

33.1 ... Was ist eine Bildbühne? ... 355
33.2 ... Wann nutzt man Bildbühnen? ... 355
33.3 ... Vorteile von Bildbühnen ... 358
33.4 ... Nachteile von Bildbühnen ... 358
33.5 ... Tipps für die Gestaltung von Bildbühnen ... 359
33.6 ... Alternativen ... 365

34. Icons aussagekräftig auswählen ... 369

34.1 ... Icons nutzenstiftend einsetzen ... 369
34.2 ... Icon mit oder ohne Label -- das ist die Frage ... 370
34.3 ... Labels bei Icons bewusst positionieren ... 372
34.4 ... Icons eindeutig gestalten ... 374

35. Links und Buttons formatieren und formulieren ... 377

35.1 ... Welche Links biete ich an? ... 378
35.2 ... Wo kommen Links hin? ... 378
35.3 ... Wie sehen Links aus? ... 379
35.4 ... Links formulieren ... 380
35.5 ... Seitennamen ... 381
35.6 ... Dateinamen, URLs und Pfade ... 382
35.7 ... Buttons -- Schaltflächen, Tasten oder Knöpfe? ... 382
35.8 ... Nicht jeder ist gleich wichtig -- Hierarchie ... 384
35.9 ... Man sieht nicht immer gleich aus -- Button-Zustände ... 389
35.10 ... Klick -- Buttons und Sound ... 392
35.11 ... Wie groß darf's denn sein? ... 392
35.12 ... Spezielle Buttons -- Checkboxen, Radiobuttons, Selektoren ... 394

36. Formulare zielführend realisieren ... 397

36.1 ... Formulare -- vielfach angewandt und benannt ... 397
36.2 ... Wofür werden Formulare eingesetzt? ... 398
36.3 ... Tipps für die Gestaltung von Formularen ... 403
36.4 ... Tipps zur Unterstützung des Nutzers bei der Eingabe ... 408
36.5 ... Tipps zur Unterstützung des Nutzers beim Abschicken des Formulars (Aktionen) ... 411

37. Labels und Auszeichnungen formulieren und positionieren ... 415

37.1 ... Labels zielführend positionieren ... 415
37.2 ... Labels verständlich formulieren ... 420

38. Fehlermeldungen hilfreich umsetzen ... 423

38.1 ... Fehlern vorbeugen (Inline-Validierung) ... 423
38.2 ... Fehlermeldungen optimal positionieren ... 425
38.3 ... Fehlermeldungen aufmerksamkeitsstark gestalten ... 426
38.4 ... Fehlermeldungen verständlich formulieren ... 427

39. Listen und Tabellen formatieren ... 429

39.1 ... Listen lockern Texte auf ... 429
39.2 ... Von eindimensionalen zu mehrdimensionalen Listen ... 429
39.3 ... Von Listen zu Tabellen ... 430
39.4 ... Listen fürs Lesen formatieren ... 431
39.5 ... Was kommt nach der Liste? ... 433
39.6 ... Keine Liste ohne Sortierung ... 434
39.7 ... Lange Listen bändigen ... 435
39.8 ... Listen filtern und Spalten ein-/ausblenden ... 436
39.9 ... Vergleichstabellen, die zum Kauf motivieren ... 438

40. Aufklappelemente/Akkordeons richtig umsetzen ... 441

40.1 ... Akkordeons zeigen und verstecken Inhalte nach Interaktion des Nutzers ... 441
40.2 ... Akkordeons für Menüs, FAQ-Listen und komplexe Formulare -- vor allem mobil im Einsatz ... 442
40.3 ... Vorteile von Akkordeons ... 444
40.4 ... Nachteile von Akkordeons ... 445
40.5 ... Tipps für die Gestaltung von Akkordeons ... 445

41. (Mikro-)Animation sinnvoll einsetzen ... 451

41.1 ... Animation belebt ... 451
41.2 ... Was ist eigentlich Animation? ... 451
41.3 ... Anwendung von Animationen ... 453
41.4 ... Wie sieht eine gute Animation aus? ... 455

42. Suchfunktionen zielführend gestalten ... 461

42.1 ... Was ist eine Suchfunktion? ... 461
42.2 ... Wofür werden Suchfunktionen eingesetzt? ... 462
42.3 ... Tipps für die Auffindbarkeit von Suchfunktionen ... 464
42.4 ... Tipps für die Gestaltung der Suchfunktion ... 465
42.5 ... Tipps zur Unterstützung des Nutzers bei der Sucheingabe ... 466
42.6 ... Tipps für eine eindeutige, gut strukturierte Trefferdarstellung ... 468
42.7 ... Tipps für eine technisch zeitgemäße Umsetzung ... 473
42.8 ... Alternativen ... 475

43. Filter und Facetten integrieren und positionieren ... 477

43.1 ... Filter grenzen schnell ein, Facetten unterstützen bei der Suche ... 477
43.2 ... Unerlässlich im Onlinehandel und auch sonst weitverbreitet ... 480
43.3 ... Tipps für die Auswahl und Benennung von Filtern/Facetten ... 481
43.4 ... Tipps für die Gestaltung von Filtern/Facetten ... 484

44. Standards und Styleguides ... 491

44.1 ... Standards berücksichtigen ... 491
44.2 ... Styleguides nachhaltig etablieren ... 494

Index ... 499