Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
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.1.1 Millersches Gesetz – 7 plus/minus 2
43
3.1.2 Hicksches Gesetz (auch Hick-Hyman-Gesetz genannt)
44
3.2 Auswahl ist gut, aber zu viel ist schlecht
44
3.3 Menschliche Wahrnehmung – Gestaltgesetze
44
3.3.1 Nähe
44
3.3.2 Ähnlichkeit
45
3.3.3 Geschlossenheit
46
3.3.4 Figur und Grund
46
3.3.5 Symmetrie
47
3.3.6 Gemeinsame Region
47
3.3.7 Weitere Gestaltgesetze
48
3.4 Menschliche Wahrnehmung – weitere Erkenntnisse aus der Forschung
48
3.4.1 Bannerblindheit
48
3.4.2 Fitts’ Gesetz
49
3.4.3 Gutenberg-Diagramm und Z-Muster
50
3.4.4 F-Muster
50
3.4.5 Wir sind darauf geprägt, Gesichter zu erkennen
51
3.4.6 Wir entscheiden nicht rational
52
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.4.1 Für wen gelten die Vorgaben?
71
5.4.2 Was genau muss ich nun tun?
72
5.4.3 Vorgaben für öffentliche Stellen
73
5.5 Inklusives Design und Universelles Design
74
5.6 Tipps zur Umsetzung
74
5.7 Grundregeln für barrierefreie Anwendungen
76
5.7.1 HTML so nutzen, wie es gedacht ist
77
5.7.2 Leserlichkeit von Text
77
5.7.3 Formularlabels und Tastaturfokus
78
5.7.4 Bilder beschreiben
78
5.7.5 Audio und Video
78
5.8 Werkzeuge zum Prüfen der Barrierefreiheit
79
5.8.1 Jeder Browser
79
5.8.2 Google Lighthouse
80
5.8.3 VoiceOver auf dem Mac
80
5.8.4 Colorblindly
81
5.8.5 Wave
81
5.8.6 AccessScan, Axe und Total Validator
81
5.8.7 BIK BITV-Test
82
5.9 Was muss ich testen?
82
5.10 Leichte Sprache und Einfache Sprache
83
5.10.1 Schreiben in Einfacher Sprache
84
5.10.2 Schreiben in Leichter Sprache
84
5.11 Weitere gesetzliche Regelungen
85
5.11.1 Arbeitsstättenverordnung (ArbStättV)
86
5.11.2 Betriebssicherheitsverordnung (BetrSichV)
86
5.11.3 Maschinenrichtlinie (MRL)
87
5.11.4 Sonderfall Medizin
87
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.1.1 Fokusgruppen
121
9.1.2 Befragungen
122
9.2 Wie führt man Fokusgruppen durch?
123
9.2.1 Rolle und Aufgaben der moderierenden Person
123
9.2.2 Vorbereitung einer Fokusgruppe
123
9.2.3 Durchführung einer Fokusgruppe
125
9.2.4 Auswertung der Fokusgruppen
127
9.3 Wie setzt man Befragungen auf?
128
9.3.1 Vorgehen bei quantitativen Befragungen
128
9.3.2 Erstellung eines Fragebogens
130
9.3.3 Feldkontrolle, Datenbereinigung und Auswertung
132
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
10.2.1 Vor-Ort-Beobachtungen
136
10.2.2 Tagebuchstudien
137
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.3.1 Konsolidieren der User-Research-Daten
143
11.3.2 Vorgehen bei der qualitativen Auswertung
143
11.3.3 Vorgehen bei der quantitativen Auswertung
146
11.3.4 Tipps zur Anwendung: Arbeiten mit Personas
147
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.1.1 Customer Journey Map
152
12.1.2 Empathy Map
153
12.1.3 Experience Map
155
12.1.4 Service Blueprint
156
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.2.1 Offenes Card Sorting (generativer Ansatz)
168
13.2.2 Geschlossenes Card Sorting (evaluierender Ansatz)
169
13.2.3 Reverse Card Sorting oder Tree Testing (evaluierender Ansatz)
170
13.3 Wie läuft ein Card Sorting ab?
171
13.3.1 Stichprobengröße, Anzahl der Karten und Dauer der Session
171
13.3.2 Planung, Durchführung und Auswertung eines offenen Card Sortings
172
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.3.1 Figma, Axure und Balsamiq
191
15.3.2 Grafik- und Designprogramme
193
15.3.3 Office-Programme und Satzprogramme
194
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.6.1 Low-, Medium- und High-Fidelity-Wireframes
198
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.1.1 Mockups
205
16.1.2 Prototypen
206
16.2 Wie sehen Prototypen aus?
206
16.2.1 Detaillierungsgrad des Prototyps
207
16.2.2 Ausbau des Prototyps entlang des Entwicklungsprozesses
207
16.3 Wie erstelle ich einen Prototyp?
208
16.3.1 Vorüberlegungen zum Prototyp
209
16.3.2 Auswahl eines Prototyping-Tools
211
16.3.3 Erstellen des Prototyps
213
16.4 Wann setze ich Prototypen ein?
215
16.4.1 Papier-Prototyping
216
16.4.2 Rapid Prototyping
217
17 Design Sprints, Design Thinking und ausgewählte Ideation-Methoden – Projektideen entwickeln und validieren
219
17.1 Was ist ein Design Sprint?
219
17.1.1 Wie läuft ein Design Sprint ab?
220
17.1.2 Wer sollte bei einem Design Sprint dabei sein?
221
17.1.3 Was benötigen Sie noch?
222
17.2 Was ist Design Thinking?
224
17.2.1 Der Double-Diamond-Ansatz
224
17.2.2 Das 6-Phasen-Modell
225
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.1.1 Kriterien zur Unterscheidung von Usability-Tests
233
18.1.2 Thinking-aloud-Methode oder Protokolle lauten Denkens
234
18.1.3 Technischer Aufbau bei Online-Usability-Tests
235
18.1.4 Aufbau eines Usability-Labors
237
18.2 Wie läuft ein Usability-Test ab?
238
18.2.1 Vorüberlegungen
239
18.2.2 Studienkonzeption
239
18.2.3 Erstellen des Interviewleitfadens
240
18.2.4 Anzahl der Testpersonen, Größe der Stichprobe
241
18.2.5 Rekrutierung der Testpersonen
242
18.2.6 Pretest und Vorbereitungen für die Einzelinterviews
243
18.2.7 Erhebung, Durchführung der Einzelinterviews
244
18.2.8 (Interner) Ergebnis-Workshop, Wrap-up
245
18.2.9 Datenanalyse und -interpretation
246
18.2.10 Bericht
246
18.3 Besonderheiten bei Usability-Tests
247
18.3.1 Eyetracking (Blickverlaufsmessung)
248
18.3.2 Quantitative Werte im Usability-Test
250
18.4 Wer sollte Usability-Tests durchführen?
251
18.4.1 Anforderungen an Interviewer
251
18.4.2 Anforderungen an Beobachtende
253
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.1.1 Wann Guerilla-Tests nicht das Richtige sind
260
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.1.1 Cognitive Walkthrough (aufgabenbasierter Ansatz)
265
21.1.2 Heuristische Evaluation (richtlinienbasierte Herangehensweise)
266
21.1.3 Usability-Review als Grundlage für weitere Methoden
266
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.7.1 Woher weiß ich, dass es statistisch stimmt?
275
22.7.2 Darf ich A/B-Tests vorzeitig abbrechen?
277
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.1.1 Standard-Tracking
285
23.1.2 Ereignisse und Ereignisfluss
287
23.1.3 Verweildauer, Ladegeschwindigkeit
287
23.1.4 Verhaltensfluss, Ereignisfluss
289
23.1.5 Heatmaps
289
23.1.6 Ziele und Konversionsraten
290
23.1.7 Trichter
291
23.1.8 Zielgruppe
291
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.3.1 TCR und TOT
298
24.3.2 SEQ
298
24.3.3 SUS
298
24.3.4 UEQ
299
24.3.5 NPS
299
24.3.6 VisAWI und AttrakDiff
299
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.2.1 Welche Gliederung verstehen die Nutzenden?
309
25.2.2 Was tun mit nicht einzuordnenden Bereichen?
310
25.2.3 Schaffen Sie mehrere Wege zum Ziel
310
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.4.1 Wo soll die Anwendung überhaupt laufen?
325
26.4.2 Flexible Grids statt fester Gestaltungsraster
326
26.4.3 Flexible Typografie statt fester Schriftgröße
326
26.4.4 Skalierbare Bilder statt fester Bildgrößen
327
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.1.1 Horizontale Navigationsleisten und Tableiste
332
27.1.2 Navigationshub
333
27.1.3 Mega-Dropdown-Menü
334
27.1.4 Akkordeonmenü
336
27.1.5 Off-Canvas-Navigation, Off-Canvas-Flyout
338
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.1.1 Warum Standards Sinn machen
344
28.1.2 Wie Sie Konsistenz in Ihrer Anwendung erreichen
346
28.2 Was ist ein Designsystem und wie setzt es sich zusammen?
348
28.2.1 Was umfasst ein Designsystem?
348
28.2.2 Was ist ein Styleguide?
350
28.2.3 Was ist eine Component Library?
352
28.2.4 Was ist eine Pattern Library?
354
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.1.1 Logo
358
29.1.2 Warenkorb
359
29.1.3 Suchfunktion
360
29.1.4 Metanavigation, übergreifende Funktionalitäten
360
29.1.5 Sprachwahl
361
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.4.1 Zu wenig Kontrast
378
31.4.2 Ist Schwarz-Weiß zu intensiv?
379
31.4.3 Zu geringe Unterscheidbarkeit – nicht nur bei Rot-Grün-Sehschwäche
380
31.5 Brauche ich einen Nachtmodus?
381
32 Schriftarten und Textformatierung
385
32.1 Von Punkten und Pixeln – Grundlagen der Darstellung
386
32.1.1 Pixel ist nicht gleich Pixel
389
32.2 Das Bildschirm-Grundstück – Screen Real Estate
389
32.3 Die richtige Schriftart aussuchen
390
32.3.1 Fonts schaffen Vertrauen
391
32.3.2 Sind Schriften mit Serifen besser leserlich?
392
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
33.2.1 Position des Sprachumschalters
402
33.2.2 Gestaltung und Beschriftung des Sprachumschalters
403
33.2.3 Funktion des Umschalters
405
33.2.4 Konzeption der Mehrsprachigkeit
405
33.2.5 Design/Gestaltung der Mehrsprachigkeit
406
33.2.6 SEO (Suchmaschinenoptimierung)
407
34 Nutzerfreundlich schreiben
409
34.1 Vorgehen beim Schreiben
411
34.1.1 Ihre Zielgruppe
411
34.1.2 Der Ton/die Tonalität
411
34.1.3 Siezen oder duzen?
412
34.1.4 Gendern oder nicht?
412
34.1.5 Ihr Ziel
413
34.1.6 Der Einstieg
413
34.1.7 Das Ende – die Handlungsaufforderung
413
34.1.8 Die Gliederung
414
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.5.1 Die falschen Fotos erkennen
432
35.5.2 Die richtigen Fotos finden
433
35.5.3 Schöne Fotos sind erlaubt
437
35.5.4 Woher die Fotos nehmen?
438
35.6 Tipps für die nutzerfreundliche Darstellung von Bildern
438
35.6.1 Crashkurs Bildbeschnitt
438
35.6.2 Bilder sinnvoll auf der Seite platzieren
441
35.6.3 Bilder auf verschiedenen Bildschirmgrößen richtig darstellen
444
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.2.1 Sonderfall Fotopräsentation – klassische Diaschau
451
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.5.1 Fünf oder weniger Elemente
454
36.5.2 Klare Fotos
455
36.5.3 Deutliche Beschriftung
456
36.5.4 Klare Verortung
456
36.5.5 Klare Navigation
458
36.5.6 Kontrolle durch Nutzende
458
36.5.7 Gutes Timing
459
36.5.8 Sinnvolles Ladeverhalten
459
36.5.9 Klaren Fokus oder Übersicht geben
460
36.5.10 Technisch zeitgemäße Umsetzung
460
36.6 Alternativen
460
36.6.1 Konzentration auf das Wesentliche
460
36.6.2 Hero Shots
460
36.6.3 Bilder untereinander
460
36.6.4 Führung über die Seite
461
36.6.5 Themenkacheln
461
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.8.1 Position und Text
483
39.8.2 Die Handlungsaufforderung – Call to Action
486
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.3.1 Übersichtliche, schnell erfassbare Struktur des Formulars
498
40.3.2 Logische Unterteilung
500
40.3.3 Eingabefelder ausreichend groß gestalten
500
40.3.4 Formularelemente und Auswahloptionen richtig wählen
500
40.3.5 Pflichtfelder ausweisen
504
40.3.6 Beschriftungen (Labels) platzieren
505
40.4 Tipps zur Unterstützung von Nutzenden bei der Eingabe
505
40.4.1 Anforderungen an Eingaben klar erkennbar machen
506
40.4.2 Falscher Eingabe vorbeugen
506
40.4.3 Automatisches Ausfüllen anbieten
508
40.4.4 Native Funktionalitäten für eine einfachere Eingabe nutzen
509
40.4.5 Auswahloptionen ein-/ausblenden
510
40.4.6 Validierung als Feedback für Nutzende
511
40.4.7 Fehlermeldungen/Hilfe bei fehlerhaften Eingaben
512
40.4.8 Formularfelder per Tabulatortaste auswählbar machen
512
40.5 Tipps zur Unterstützung von Nutzenden beim Abschicken des Formulars (Aktionen)
512
40.5.1 Buttons platzieren und gestalten
512
40.5.2 Fortschrittsanzeige bei langen Formularen einbinden
513
41 Labels und Auszeichnungen formulieren und positionieren
517
41.1 Labels zielführend positionieren
517
41.1.1 Label oberhalb des Eingabefelds
517
41.1.2 Label links vom Eingabefeld
518
41.1.3 Label innerhalb des Eingabefelds
519
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.5.1 Flexible Bedienung durch Nutzende
546
44.5.2 Elemente ausreichend groß gestalten
546
44.5.3 Animationen erkennbar einsetzen
546
44.5.4 Nächsten Inhaltsbereich im Akkordeon schnell ansteuern
547
44.5.5 Bedienelemente auswählen
548
44.5.6 Bedienelemente erwartungskonform platzieren
549
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.2.1 Skalenniveau bestimmen
553
45.2.2 Kreis-, Torten- und Donut-Diagramm: Anteile darstellen
554
45.2.3 Säulen- und Balkendiagramme: Zustimmung, Nutzungshäufigkeit etc. darstellen
555
45.2.4 Liniendiagramme: Veränderung über die Zeit darstellen
557
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.3.1 Wann sind Animationen sinnvoll?
564
46.4 Wie sieht eine gute Animation aus?
565
46.4.1 Vorsicht mit Humor
566
46.4.2 Sound oder nicht?
566
46.4.3 Das richtige Timing
567
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.2.1 Erwartungskonforme Platzierung
574
47.2.2 Mindestens ein Suchen-Button
576
47.2.3 Gestaltung des Lupensymbols
577
47.3 Tipps zur Unterstützung der Nutzenden bei der Sucheingabe
577
47.3.1 Den gesamten Inhalt berücksichtigen
577
47.3.2 Vorbelegung des Suchfelds
578
47.3.3 Autosuggest/Autocomplete anbieten
578
47.4 Tipps für eine eindeutige, gut strukturierte Trefferdarstellung
580
47.4.1 Listenform mit zentralen Angaben
580
47.4.2 Sortieren der Ergebnisse
581
47.4.3 Trefferdarstellung inklusive Anzeige der Suchwörter mit Ergebnissen
582
47.4.4 Nachfiltern der Suchergebnisse
582
47.4.5 Umgang mit null Treffern
584
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.2.1 Filterkriterien sinnvoll auswählen und strukturieren
591
48.2.2 Filterkriterien selbsterklärend benennen
593
48.3 Tipps für die Gestaltung von Filtern/Facetten
593
48.3.1 Erwartungskonform positionieren
594
48.3.2 Filtermechanismus kenntlich machen
596
48.3.3 Filter/Facetten nutzerfreundlich gestalten
597
48.3.4 Filter auswählen und zurücksetzen
598
49 Modals, Pop-ups und Overlays – Dialoge nutzenstiftend einsetzen
601
49.1 Overlays wollen auffallen und Modals erzwingen eine Nutzerinteraktion
601
49.1.1 Modals
601
49.1.2 Pop-ups/Overlays
602
49.1.3 Cookie-Consent-Dialog
603
49.1.4 Bottom Sheets
604
49.2 Tipps für die Gestaltung
605
49.2.1 Zeitpunkt des Erscheinens – lassen Sie Nutzende erstmal etwas tun
605
49.2.2 Kontext der Anzeige – überzeugen Sie Nutzende im richtigen Moment
606
49.2.3 Relevanz des Inhalts – erklären Sie den Mehrwert
607
49.2.4 Möglichkeit, den Dialog schließen bzw. verlassen zu können
607
49.3 Cookie Consent Banner oder Pop-up – wie Sie sie optimieren
608
Index
611