Jacobsen, J: Praxisbuch Usability und UX

Von Praktikern für Praktiker: Dieses Buch enthält alles, was Sie für die Planung und Umsetzung nutzerfreundlicher 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. Auch geeignet als Nachschlagewerk!

Inkl. Usability Guidelines: Layout, Navigation, Bilder, Schriften, Inhaltselemente u.v.m.

Usability und UX - Ihr Weg zum Erfolg ... 21TEIL 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 den Nutzer 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 ... 59 4.2 ... ISO 9241-210 - Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme ... 60 4.3 ... ISO 14915 - Software-Ergonomie für Multimedia-Benutzungsschnittstellen ... 62 4.4 ... ISO 25000 - Software-Engineering - Qualitätskriterien und Bewertung von Softwareprodukten ... 62 4.5 ... ISO 9000 und 9001 ... 63 4.6 ... Praxisrelevanz der Normen ... 63 4.7 ... Gibt es ein Usability-Gesetz? ... 63 4.8 ... Leichte Sprache und Einfache Sprache ... 67 4.9 ... DSGVO - Datenschutz und UX ... 70 5. Das mobile Zeitalter und die Auswirkung auf interaktive Konzepte ... 73 5.1 ... Mit responsivem Design für verschiedene Endgeräte optimieren ... 75 5.2 ... Mobile First in die Konzeption einsteigen ... 75 5.3 ... Context First - den Nutzungskontext berücksichtigen ... 76 5.4 ... Touch, Gesten und Sprache - mobile Interaktionsmechanismen ... 76 6. Von Smartwear, Sprachsteuerung und anderen Revolutionen ... 79 6.1 ... Gute Werkzeuge sind langlebig ... 80 6.2 ... Gute Werkzeuge sind anpassungsfähig ... 81 6.3 ... Praxisbeispiel Sprachsteuerung - Wizard of Oz ... 82 6.4 ... Alles ist testbar - von Smartwear bis zum Internet of Things ... 83 6.5 ... Herausforderungen bei der Konzeption für neue Geräte ... 84 6.6 ... Remote-Arbeiten - nicht nur die Anwendungen selbst, sondern auch die Art der Arbeit ändern sich ... 86 7. Nutzer in die Produktentwicklung einbinden - der optimale Projektablauf ... 87 7.1 ... Nutzerzentrierte Entwicklung ... 87 7.2 ... Ein optimaler Projektablauf ... 88 7.3 ... Aller Anfang ist schwer - UX-Reifegrad im Unternehmen steigern ... 90 8. Agil ans Ziel - Usability Engineering in agilen Prozessen ... 93 8.1 ... Warum agile Entwicklung? ... 93 8.2 ... Wie geht agile Entwicklung? ... 94 8.3 ... Agil oder Lean? ... 95 8.4 ... Agiles Arbeiten in der Praxis ... 95 8.5 ... Was ist Usability Engineering? ... 98 8.6 ... DevOps - DesignOps - ResearchOps ... 98TEIL II Nutzer kennen lernen und für sie konzipieren ... 101 9. Fokusgruppen und Befragungen - Erkenntnisse über das derzeitige Nutzungsverhalten ... 103 9.1 ... Was sind Fokusgruppen? Was sind Befragungen? ... 103 9.2 ... Wie führt man Fokusgruppen durch? ... 105 9.3 ... Wie setzt man Befragungen auf? ... 10910. Vor-Ort-Beobachtungen und Tagebuchstudien - den Nutzer im Alltag beobachten ... 115 10.1 ... Nutzungskontextanalyse - wozu? ... 115 10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 11611. Personas - aus Erkenntnissen prototypische Nutzer entwickeln ... 119 11.1 ... Was sind Personas? ... 119 11.2 ... Wie sehen Personas aus? ... 120 11.3 ... Wie macht man Personas? ... 123 11.4 ... Wann setze ich Personas ein? ... 12812. Mapping-Methoden - Interaktionen des Nutzers strukturiert erfassen ... 131 12.1 ... Welche Mapping-Methoden gibt es? ... 131 12.2 ... Wann setze ich welche Map ein? ... 137 12.3 ... Wie sieht eine Customer Journey Map genau aus? ... 137 12.4 ... Wie erstellt man eine Customer Journey Map? ... 14013. Card Sorting - Entwicklung der Informationsarchitektur ... 141 13.1 ... Was ist Card Sorting? ... 141 13.2 ... Wie läuft ein Card Sorting ab? ... 146 13.3 ... Wie sieht eine Informationsarchitektur aus? Was erhalten Sie als Ergebnis aus einem Workshop? ... 150 13.4 ... Wer sollte ein Card Sorting durchführen? ... 151 13.5 ... Wann setze ich Card Sorting ein? ... 15114. Scribbles - erste Ideen auf dem Weg zum Design ... 153 14.1 ... Was sind Scribbles? ... 153 14.2 ... Wie sehen Scribbles aus? ... 154 14.3 ... Wie macht man Scribbles? ... 157 14.4 ... Tipps zum Zeichnen ... 157 14.5 ... Scribbeln mit dem Tablet ... 160 14.6 ... Kommentare, Dokumentation und Überarbeitung ... 161 14.7 ... Scribbeln im Team ... 162 14.8 ... Wer sollte scribbeln? ... 163 14.9 ... Wann setze ich Scribbles ein? ... 16315. Wireframes - sich an das optimale Produkt annähern ... 165 15.1 ... Was heißt Wireframe? ... 165 15.2 ... Wozu Wireframes? ... 166 15.3 ... Programme für Wireframes ... 167 15.4 ... Für welche Seiten brauche ich Wireframes? ... 171 15.5 ... Was in einen Wireframe gehört ... 171 15.6 ... Was nicht in einen Wireframe gehört ... 173 15.7 ... Was manchmal in einen Wireframe gehört ... 174 15.8 ... Responsives Design und Wireframes ... 176 15.9 ... Arbeitserleichterung für die Entwickler ... 177 15.10 ... Bibliotheken zur eigenen Arbeitserleichterung ... 178 15.11 ... Wie geht es weiter mit den Wireframes? ... 17816. Papierprototypen - Ideen schnell greifbar machen ... 181 16.1 ... Was sind Papierprototypen? ... 181 16.2 ... Wie erstelle ich einen Papierprototyp? ... 182 16.3 ... Wann setze ich Papierprototypen ein? ... 18617. Mockups und Prototypen - konkretisieren, visualisieren, designen ... 187 17.1 ... Was sind Mockups, was Prototypen? ... 187 17.2 ... Wie sehen Prototypen aus? ... 189 17.3 ... Wie erstelle ich einen Prototyp? ... 191 17.4 ... Wann setze ich Prototypen ein? ... 19618. Design Sprints, Design Thinking und ausgewählte Ideation-Methoden - Projektideen entwickeln und validieren ... 199 18.1 ... Was ist ein Design Sprint? ... 199 18.2 ... Was ist Design Thinking? ... 203 18.3 ... Ausgewählte Kreativitäts- und Ideation-Techniken ... 20619. Usability-Tests - die Klassiker unter den Nutzertests ... 209 19.1 ... Was sind Usability-Tests? Welche Formen gibt es? ... 210 19.2 ... Wie läuft ein Usability-Test ab? ... 218 19.3 ... Wer sollte Usability-Tests durchführen? ... 227 19.4 ... Wann setze ich Usability-Tests ein? ... 23020. Online-Usability-Tests - von zuhause aus testen lassen ... 231 20.1 ... Was sind Online-Usability-Tests? ... 231 20.2 ... Wann setze ich Online-Usability-Tests ein? ... 232 20.3 ... Moderierter Online-Usability-Test ... 232 20.4 ... Unmoderierter Online-Usability-Test ... 23721. Guerilla-Usability-Tests - informell und schnell Erkenntnisse sammeln ... 241 21.1 ... Warum Guerilla? ... 241 21.2 ... Wie finde ich Probanden? ... 243 21.3 ... Was kann ich testen? ... 245 21.4 ... Tipps für die Durchführung ... 245 21.5 ... Auswerten und präsentieren ... 24622. Usability-Reviews - Expertenmeinung einholen statt Nutzer rekrutieren ... 247 22.1 ... Was sind Usability-Reviews? ... 247 22.2 ... Wie läuft ein Usability-Review ab? ... 248 22.3 ... Wer sollte einen Usability-Review durchführen? ... 250 22.4 ... Wann setze ich Usability-Reviews ein? ... 25023. A/B-Tests - Varianten gegeneinander antreten lassen ... 251 23.1 ... Was bringen A/B-Tests? ... 252 23.2 ... Was kann man alles testen? ... 252 23.3 ... Was kann man nicht testen? ... 253 23.4 ... Wie sieht eine gute Fragestellung aus? ... 254 23.5 ... Wie definiere ich Erfolg? ... 255 23.6 ... Bitte nicht stören - Fehlerquellen ausschließen ... 256 23.7 ... Wie viele Testpersonen/Aufrufe brauche ich? ... 256 23.8 ... Multivariate Tests ... 260 23.9 ... Ergebnisse mit Hirn interpretieren ... 260 23.10 ... Womit testen? - Tools ... 261 23.11 ... Erkenntnisse in Verbesserungen umsetzen ... 26224. Analytics - aus dem aktuellen Nutzerverhalten lernen ... 265 24.1 ... Was kann man alles messen? ... 265 24.2 ... Womit analysieren? - Tools ... 27225. Metriken ... 275 25.1 ... Warum Metriken für UX? ... 275 25.2 ... Statistik auch für kleine Stichproben ... 276 25.3 ... Die richtigen Metriken auswählen ... 278 25.4 ... Signifikanz - was messen wir da überhaupt? ... 280 25.5 ... Performance - Core Web Vitals und PageSpeed Insights ... 281TEIL III Usability-Guidelines - Anleitung für die Umsetzung ... 28526. Struktur der Anwendung - Informations- und Navigationsarchitektur ... 287 26.1 ... Grobsortierung der Inhalte ... 288 26.2 ... Feingliederung der Inhalte ... 288 26.3 ... Sitestruktur festlegen und darstellen ... 291 26.4 ... Zeichnen der Sitemap ... 291 26.5 ... Zeige ich die Sitemap auf der Site? ... 292 26.6 ... Navigation für den Nutzer planen ... 29327. Ordnung auf den Seiten - Gestaltungsraster und responsives Design ... 295 27.1 ... Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten ... 295 27.2 ... Wie ein Rastersystem aufgebaut ist ... 297 27.3 ... Was bedeutet responsives Webdesign? ... 301 27.4 ... Das sollten Sie bei der Konzeption responsiver Websites bedenken ... 30328. Navigationskonzepte - Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas ... 309 28.1 ... Horizontale Navigationsleisten und Tableiste ... 309 28.2 ... Navigationsmenü mit Burger-Icon, Hamburger-Menü ... 311 28.3 ... Navigationshub ... 314 28.4 ... Mega-Dropdown-Menü ... 315 28.5 ... Akkordeonmenü ... 316 28.6 ... Off-Canvas-Navigation, Off-Canvas-Flyout ... 31729. Popups, Banner und Modals ... 319 29.1 ... Popups wollen auffallen, Banner werben für etwas und Modals erzwingen eine Nutzerinteraktion ... 319 29.2 ... Tipps für die Gestaltung ... 323 29.3 ... Cookie Consent Banner oder Popup - wie Sie ihn optimieren ... 32630. Kopfzeilen - Header nutzenstiftend umsetzen ... 329 30.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 329 30.2 ... Darstellung auf mobilen Endgeräten ... 332 30.3 ... Headerverhalten im Navigationsfluss ... 33331. Fußzeilen - Footer sinnvoll gestalten ... 335 31.1 ... Elemente zweckgebunden im Footer platzieren ... 335 31.2 ... Darstellung auf mobilen Endgeräten ... 34032. Farbe, Ästhetik und Usability ... 341 32.1 ... Was ist Farbe überhaupt? ... 342 32.2 ... Welche Wirkung hat Farbe? ... 345 32.3 ... Die richtigen Farben für meine Nutzer finden ... 346 32.4 ... Fehler bei der Farbwahl vermeiden ... 348 32.5 ... Brauche ich einen Nachtmodus? ... 35133. Schriftarten und Textformatierung ... 355 33.1 ... Von Punkten und Pixeln - Grundlagen der Darstellung ... 356 33.2 ... Das Bildschirm-Grundstück - Screen Real Estate ... 359 33.3 ... Die richtige Schriftart aussuchen ... 360 33.4 ... Schriftarten gut kombinieren ... 362 33.5 ... Wie groß sollte Fließtext sein? ... 362 33.6 ... Großbuchstaben und andere Hervorhebungen ... 364 33.7 ... Blocksatz niemals, zentriert selten ... 365 33.8 ... Die richtige Zeilenbreite ... 366 33.9 ... Der richtige Zeilenabstand ... 366 33.10 ... Typografie für Legastheniker ... 36734. Sprachwahl und mehrsprachige Sites ... 369 34.1 ... Sprachumschaltung bei Apps ... 369 34.2 ... Sprachumschaltung bei Websites ... 37035. Nutzerfreundlich schreiben ... 379 35.1 ... Vorgehen beim Schreiben ... 380 35.2 ... Wie schreibe ich lesbaren und verständlichen Text? ... 383 35.3 ... Überschriften ... 386 35.4 ... Listen und Kästen ... 387 35.5 ... Tabellen, Diagramme, Bilder und Videos ... 388 35.6 ... Hervorhebungen ... 388 35.7 ... Text und SEO ... 38936. Bilder für Benutzer auswählen ... 391 36.1 ... Was ist eigentlich ein Bild? ... 391 36.2 ... Wofür brauchen wir Bilder? ... 391 36.3 ... Vorteile von Bildern ... 395 36.4 ... Nachteile von Bildern ... 396 36.5 ... Tipps für richtigen Einsatz und Auswahl von Bildern ... 396 36.6 ... Tipps für die nutzerfreundliche Darstellung von Bildern ... 40337. Bildbühne, Karussell, Slideshow - mehrere Bilder an einer Stelle ... 413 37.1 ... Was ist eine Bildbühne? ... 413 37.2 ... Wann nutzt man Bildbühnen? ... 413 37.3 ... Vorteile von Bildbühnen ... 415 37.4 ... Nachteile von Bildbühnen ... 416 37.5 ... Tipps für die Gestaltung von Bildbühnen ... 418 37.6 ... Alternativen ... 42438. Audio und Video einbinden und steuern ... 429 38.1 ... Wann sind Audio und Video überhaupt sinnvoll? ... 429 38.2 ... Audio und Video zugänglich machen ... 430 38.3 ... Audio und Video steuern ... 431 38.4 ... Normen zur Steuerung von Audio und Video ... 43139. Icons aussagekräftig auswählen ... 433 39.1 ... Icons nutzenstiftend einsetzen ... 433 39.2 ... Icon mit oder ohne Label - das ist die Frage ... 434 39.3 ... Labels bei Icons bewusst positionieren ... 436 39.4 ... Icons eindeutig gestalten ... 43740. Links und Buttons formatieren und formulieren ... 439 40.1 ... Welche Links biete ich an? ... 440 40.2 ... Wo kommen Links hin? ... 440 40.3 ... Wie sehen Links aus? ... 441 40.4 ... Links formulieren ... 442 40.5 ... Seitennamen ... 443 40.6 ... Dateinamen, URLs und Pfade ... 443 40.7 ... Buttons - Schaltflächen, Tasten oder Knöpfe? ... 444 40.8 ... Nicht jeder ist gleich wichtig - Hierarchie ... 446 40.9 ... Man sieht nicht immer gleich aus - Button-Zustände ... 451 40.10 ... Klick - Buttons und Sound ... 453 40.11 ... Wie groß darf's denn sein? ... 454 40.12 ... Spezielle Buttons - Checkboxen, Radiobuttons, Selektoren ... 45541. Formulare zielführend realisieren ... 459 41.1 ... Formulare - vielfach angewandt und bekannt ... 459 41.2 ... Wofür werden Formulare eingesetzt? ... 460 41.3 ... Tipps für die Gestaltung von Formularen ... 465 41.4 ... Tipps zur Unterstützung des Nutzers bei der Eingabe ... 473 41.5 ... Tipps zur Unterstützung des Nutzers beim Abschicken des Formulars (Aktionen) ... 48042. Labels und Auszeichnungen formulieren und positionieren ... 485 42.1 ... Labels zielführend positionieren ... 485 42.2 ... Labels verständlich formulieren ... 48843. Fehlermeldungen hilfreich umsetzen ... 491 43.1 ... Fehlern vorbeugen (Inline-Validierung) ... 491 43.2 ... Fehlermeldungen optimal positionieren ... 493 43.3 ... Fehlermeldungen aufmerksamkeitsstark gestalten ... 494 43.4 ... Fehlermeldungen verständlich formulieren ... 49544. Listen und Tabellen formatieren ... 497 44.1 ... Listen lockern Texte auf ... 497 44.2 ... Von eindimensionalen zu mehrdimensionalen Listen ... 497 44.3 ... Von Listen zu Tabellen ... 498 44.4 ... Listen fürs Lesen formatieren ... 499 44.5 ... Was kommt nach der Liste? ... 501 44.6 ... Keine Liste ohne Sortierung ... 503 44.7 ... Lange Listen bändigen ... 503 44.8 ... Listen filtern und Spalten ein-/ausblenden ... 505 44.9 ... Vergleichstabellen, die zum Kauf motivieren ... 50645. Aufklappelemente/Akkordeons richtig umsetzen ... 509 45.1 ... Akkordeons zeigen und verstecken Inhalte nach Interaktion des Nutzers ... 509 45.2 ... Akkordeons für Menüs, FAQ-Listen und komplexe Formulare - vor allem mobil im Einsatz ... 511 45.3 ... Vorteile von Akkordeons ... 511 45.4 ... Nachteile von Akkordeons ... 512 45.5 ... Tipps für die Gestaltung von Akkordeons ... 51246. Diagramme auswählen und gestalten ... 517 46.1 ... Wann Diagramm, wann Tabelle? ... 517 46.2 ... Das richtige Diagramm für meine Daten ... 518 46.3 ... Werte unterschiedlicher Skalen vergleichen ... 524 46.4 ... Formatierung nach Usability, nicht nach Ästhetik ... 52547. (Mikro-)Animation sinnvoll einsetzen ... 527 47.1 ... Animation belebt ... 527 47.2 ... Was ist eigentlich Animation? ... 527 47.3 ... Anwendung von Animationen ... 529 47.4 ... Wie sieht eine gute Animation aus? ... 53148. Suchfunktionen zielführend gestalten ... 537 48.1 ... Wofür werden Suchfunktionen eingesetzt? ... 538 48.2 ... Tipps für die Auffindbarkeit von Suchfunktionen ... 540 48.3 ... Tipps für die Gestaltung der Suchfunktion ... 542 48.4 ... Tipps zur Unterstützung des Nutzers bei der Sucheingabe ... 543 48.5 ... Tipps für eine eindeutige, gut strukturierte Trefferdarstellung ... 547 48.6 ... Alternativen ... 55349. Filter und Facetten integrieren und positionieren ... 555 49.1 ... Filter grenzen schnell ein, Facetten unterstützen bei der Suche ... 555 49.2 ... Tipps für die Auswahl und Benennung von Filtern/Facetten ... 559 49.3 ... Tipps für die Gestaltung von Filtern/Facetten ... 56150. Designsysteme, Styleguides und Pattern Libraries ... 569 50.1 ... Standards berücksichtigen ... 569 50.2 ... Wie unterscheiden sich Designsystem, Styleguide und Pattern Library? ... 573 50.3 ... Designsysteme nachhaltig etablieren ... 578 Index ... 579