Praxisbuch Usability und UX von Jens/Meyer Jacobsen - gebundenes Buch

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 DesignUsability-Engineering in agilen ProjektenPersonas und Journey MapsNutzerführung und SeitengestaltungMockups und WireframesUsability-/UX-MetrikenGestaltung für unterschiedliche NutzungskontexteNutzerfreundlich schreibenA/B-Tests und Analysen

       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.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.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.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.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.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.1 ... Menschzentrierte Entwicklung ... 101        7.2 ... Ein optimaler Projektablauf ... 102        7.3 ... Aller Anfang ist schwer -- UX-Reifegrad im Unternehmen steigern ... 104        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        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.1 ... Nutzungskontextanalyse -- wozu? ... 135        10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 136        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.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.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.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.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.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.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.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.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.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.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.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.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.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        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.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.1 ... Gängige Gestaltungsmuster für Navigation ... 331        27.2 ... Burger/Hamburger als Icon für das Menü ... 339        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.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 357        29.2 ... Headerverhalten im Navigationsfluss ... 362        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.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.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.1 ... Sprachumschaltung bei Apps ... 399        33.2 ... Sprachumschaltung bei Websites ... 400        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.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.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.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.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.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.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.1 ... Labels zielführend positionieren ... 517        41.2 ... Labels verständlich formulieren ... 520        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.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.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.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.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.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.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.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