E-Book, Deutsch, 624 Seiten
Reihe: Rheinwerk Computing
Jacobsen / Meyer Praxisbuch Usability und UX
4. Auflage 2024
ISBN: 978-3-8362-9905-3
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Was alle wissen sollten, die Websites und Apps entwickeln
E-Book, Deutsch, 624 Seiten
Reihe: Rheinwerk Computing
ISBN: 978-3-8362-9905-3
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Von Praktikern für Praktiker: Dieses Buch enthält alles, was Sie für die Planung und Umsetzung nutzungsfreundlicher Webseiten wissen sollten. Mit modernen Tools, neuen Mapping-Methoden und aktualisierten Guidelines zu Audio, Video und Dashboards ist es auf der Höhe der Zeit. Profitieren Sie von jahrzehntelanger Erfahrung und lernen Sie, wie Sie Seiten navigierbar gestalten, Inhalte zugänglich präsentieren und User begeistern. Die Anleitung für alle, die neue Websites erstellen oder bestehende verbessern möchten. Inkl. Barrierefreiheit und Tipps zum KI-Einsatz!
Aus dem Inhalt:
- User Centered Design
- Usability-Engineering in agilen Projekten
- Personas und Journey Maps
- Nutzerführung und Seitengestaltung
- Mockups und Wireframes
- Usability-/UX-Metriken
- Gestaltung für unterschiedliche Nutzungskontexte
- Nutzerfreundlich schreiben
- A/B-Tests und Analysen
Jens Jacobsen arbeitet seit 1998 als Konzepter und Berater für interaktive Projekte. Als Freiberufler unterstützt er etablierte Unternehmen wie auch Start-ups beim Erstellen von Websites, Apps und interaktiven Anwendungen. Dabei bringt er regelmäßig Usability und UX von Anfang an in die Konzeption ein. Bei Gesprächen im Team ergeben sich dadurch immer wieder lohnende Diskussionen und neue Ansätze. Diese gibt er weiter in Büchern, Seminaren und auf www.benutzerfreun.de.
Autoren/Hrsg.
Weitere Infos & Material
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
