Praxisbuch Usability und UX - Was alle wissen sollten, die Websites und Apps entwickeln

Praxislösungen für alle Usability-Fälle

• User kennenlernen und verstehen
• Projekte sinnvoll planen und umsetzen
• Mit umfangreichen Usability-Guidelines

Von Praktikern für Praktiker: Dieses Buch enthält alles, was Sie für die Planung und Umsetzung nutzungsfreundlicher Websites 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 so 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

  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

   &nb