Praxisbuch Usability und UX

28.06.2017

Deutsch

9783836244237

Rheinwerk

Nein

Jens Jacobsen

511

1

Gebundene Ausgabe

Was jeder wissen sollte, der Websites und Apps entwickelt - bewährte Usability- und UX-Methoden praxisnah erklärt

User Experience, Web-Design, HTML5, CSS3, Praxisratgeber, Agile Entwicklung, Webseiten, Typografie, Barrierefreiheit, Responsive, Testing, Online-Marketing, Content, Layouts, Hand-Buch Bücher lernen Grundlagen Kurse Tipps Workshops Tutorials Wissen Anleitung Training Ausbildung, Websites

Usability und UX -- Ihr Weg zum Erfolg ... 25 TEIL I  Was brauche ich, wenn ich anfange zu konzipieren, zu gestalten oder zu programmieren? ... 31   1.  Von der Usability zur User Experience ... 33        1.1 ... Usability als Erfolgsfaktor für gute digitale Produkte ... 34        1.2 ... User Experience als umfassendes Nutzungserlebnis ... 34        1.3 ... Abgrenzung zwischen Usability und User Experience ... 35   2.  Erkenntnisse aus Studien, Forschung und Projekten liefern Fakten ... 37        2.1 ... Können wir nicht einfach den Nutzer fragen? ... 38        2.2 ... Wer schnell zum Ziel will, hält sich an den Weg ... 39        2.3 ... Wer setzt die Standards? ... 42   3.  Menschliche Wahrnehmung -- Gestaltgesetze & Co. ... 45        3.1 ... Kurzzeitgedächtnis nicht überfordern ... 45        3.2 ... Auswahl ist gut, aber zu viel ist schlecht ... 46        3.3 ... Menschliche Wahrnehmung -- Gestaltgesetze ... 46        3.4 ... Menschliche Wahrnehmung -- weitere Erkenntnisse aus der Forschung ... 50        3.5 ... Sozialpsychologie ... 55   4.  ISO 9241 & Co. -- Normen und Gesetze rund um Usability ... 59        4.1 ... ISO 9241 -- Ergonomie der Mensch-System-Interaktion ... 61        4.2 ... ISO 9241-210 -- Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme ... 62        4.3 ... ISO 14915 -- Softwareergonomie für Multimedia-Benutzungsschnittstellen ... 63        4.4 ... ISO 25000 -- Software-Engineering -- Qualitätskriterien und Bewertung von Softwareprodukten (SQuaRE) -- Leitfaden für SQuaRE ... 64        4.5 ... ISO 9000 und 9001 ... 65        4.6 ... Praxisrelevanz der Normen ... 65        4.7 ... Gibt es ein Usability-Gesetz? ... 66        4.8 ... Leichte Sprache und Einfache Sprache ... 69   5.  Das mobile Zeitalter und die Auswirkung auf interaktive Konzepte ... 73        5.1 ... Mit responsivem Design für verschiedene Endgeräte optimieren ... 74        5.2 ... Mobile First in die Konzeption einsteigen ... 74        5.3 ... Context First -- den Nutzungskontext berücksichtigen ... 75        5.4 ... Touch und Gesten -- mobile Interaktionsmechanismen ... 77   6.  Von Smartphones, Smartwear und anderen Revolutionen ... 79        6.1 ... Gute Werkzeuge sind langlebig ... 80        6.2 ... Gute Werkzeuge sind anpassungsfähig ... 80   7.  Nutzer in die Produktentwicklung einbinden: Der optimale Projektablauf ... 83        7.1 ... Nutzerzentrierte Entwicklung ... 83        7.2 ... Ein optimaler Projektablauf ... 84   8.  Agil ans Ziel: Usability-Engineering in agilen Prozessen ... 87        8.1 ... Warum agile Entwicklung? ... 87        8.2 ... Wie geht agile Entwicklung? ... 88        8.3 ... Agile oder Lean? ... 89        8.4 ... Agiles Arbeiten in der Praxis ... 89 TEIL II  Nutzer kennen lernen und für sie konzipieren ... 93   9.  Fokusgruppen und Befragungen -- Erkenntnisse über das derzeitige Nutzungsverhalten ... 95        9.1 ... Was sind Fokusgruppen? Was sind Befragungen? ... 95        9.2 ... Wie führt man Fokusgruppen durch? ... 97        9.3 ... Wie setzt man Befragungen auf? ... 99 10.  Vor-Ort-Beobachtungen und Tagebuchstudien -- den Nutzer im Alltag beobachten ... 103        10.1 ... Nutzungskontextanalyse -- wozu? ... 103        10.2 ... Was sind Vor-Ort-Beobachtungen und Tagebuchstudien? ... 104 11.  Personas -- aus Erkenntnissen prototypische Nutzer entwickeln ... 107        11.1 ... Was sind Personas? ... 107        11.2 ... Wie sehen Personas aus? ... 108        11.3 ... Wie macht man Personas? ... 111        11.4 ... Wann setze ich Personas ein? ... 116 12.  Card Sorting -- Entwicklung der Informationsarchitektur ... 119        12.1 ... Was ist Card Sorting? ... 119        12.2 ... Wie läuft ein Card Sorting ab? ... 124        12.3 ... Wie sieht eine Informationsarchitektur aus? Was erhalten Sie als Ergebnis aus einem Workshop? ... 127        12.4 ... Wer sollte ein Card Sorting durchführen? ... 128        12.5 ... Wann setze ich Card Sorting ein? ... 128 13.  Scribbles -- erste Ideen auf dem Weg zum Design ... 129        13.1 ... Was sind Scribbles? ... 129        13.2 ... Wie sehen Scribbles aus? ... 130        13.3 ... Wie macht man Scribbles? ... 133        13.4 ... Tipps zum Zeichnen ... 133        13.5 ... Scribbeln mit dem Tablet ... 136        13.6 ... Kommentare, Dokumentation und Überarbeitung ... 137        13.7 ... Scribbeln im Team ... 138        13.8 ... Wer sollte scribbeln? ... 139        13.9 ... Wann setze ich Scribbles ein? ... 139 14.  Wireframes -- sich an das optimale Produkt annähern ... 141        14.1 ... Was heißt Wireframe? ... 141        14.2 ... Wozu Wireframes? ... 142        14.3 ... Programme für Wireframes ... 143        14.4 ... Für welche Seiten brauche ich Wireframes? ... 147        14.5 ... Was in einen Wireframe gehört ... 147        14.6 ... Was nicht in einen Wireframe gehört ... 149        14.7 ... Was manchmal in einen Wireframe gehört ... 150        14.8 ... Responsives Design und Wireframes ... 151        14.9 ... Arbeitserleichterung für die Entwickler ... 153        14.10 ... Bibliotheken zur eigenen Arbeitserleichterung ... 153        14.11 ... Wie geht es weiter mit den Wireframes? ... 154 15.  Papierprototypen -- Ideen schnell greifbar machen ... 157        15.1 ... Was sind Papierprototypen? ... 157        15.2 ... Wie erstelle ich einen Papierprototyp? ... 158        15.3 ... Was ist bei einem Test eines Papierprototyps zu bedenken? ... 163        15.4 ... Wann setze ich Papierprototypen ein? ... 164 16.  Mockups und Prototypen -- konkretisieren, visualisieren, designen ... 165        16.1 ... Was sind Mockups, was Prototypen? ... 165        16.2 ... Wie sehen Prototypen aus? ... 167        16.3 ... Wie erstelle ich einen Prototyp? ... 169        16.4 ... Wann setze ich Prototypen ein? ... 174 17.  Usability-Tests -- der Klassiker unter den Nutzertests ... 177        17.1 ... Was sind Usability-Tests? Welche Formen gibt es? ... 178        17.2 ... Wie läuft ein Usability-Test ab? ... 186        17.3 ... Wer sollte Usability-Tests durchführen? ... 195        17.4 ... Wann setze ich Usability-Tests ein? ... 198 18.  Remote-Usability-Tests -- von zuhause aus testen lassen ... 199        18.1 ... Was sind Remote-Usability-Tests? ... 199        18.2 ... Wie läuft ein Remote-Usability-Test ab? ... 203        18.3 ... Wann setze ich Remote-Usability-Tests ein? ... 204 19.  Guerilla-Usability-Tests -- informell und schnell Erkenntnisse sammeln ... 207        19.1 ... Warum Guerilla? ... 207        19.2 ... Wie finde ich Probanden? ... 209        19.3 ... Was kann ich testen? ... 211        19.4 ... Tipps für die Durchführung ... 211        19.5 ... Auswerten und präsentieren ... 212 20.  Usability-Reviews -- Expertenmeinung einholen statt Nutzer rekrutieren ... 213        20.1 ... Was sind Usability-Reviews? ... 213        20.2 ... Wie läuft ein Usability-Review ab? ... 215        20.3 ... Wer sollte einen Usability-Review durchführen? ... 217        20.4 ... Wann setze ich Usability-Reviews ein? ... 217 21.  A/B-Tests -- Varianten gegeneinander antreten lassen ... 219        21.1 ... Was bringen A/B-Tests? ... 220        21.2 ... Was kann man alles testen? ... 220        21.3 ... Was kann man nicht testen? ... 221        21.4 ... Wie sieht eine gute Fragestellung aus? ... 222        21.5 ... Wie definiere ich Erfolg? ... 223        21.6 ... Bitte nicht stören -- Fehlerquellen ausschließen ... 224        21.7 ... Wie viele Testpersonen/Aufrufe brauche ich? ... 224        21.8 ... Ergebnisse mit Hirn interpretieren ... 227        21.9 ... Womit testen? -- Tools ... 228        21.10 ... Erkenntnisse in Verbesserungen umsetzen ... 228 22.  Analytics -- aus dem aktuellen Nutzerverhalten lernen ... 231        22.1 ... Was kann man alles messen? ... 231        22.2 ... Womit analysieren? -- Tools ... 238 23.  Struktur der Anwendung -- Informations- und Navigationsarchitektur ... 239        23.1 ... Grobsortierung der Inhalte ... 240        23.2 ... Feingliederung der Inhalte ... 240        23.3 ... Sitestruktur festlegen und darstellen ... 242        23.4 ... Zeichnen der Sitemap ... 243        23.5 ... Zeige ich die Sitemap auf der Site? ... 244        23.6 ... Navigation für den Nutzer planen ... 244 24.  Ordnung auf den Seiten -- Gestaltungsraster und responsives Design ... 249        24.1 ... Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten ... 249        24.2 ... Wie ein Rastersystem aufgebaut ist ... 251        24.3 ... Was bedeutet responsives Webdesign? ... 254        24.4 ... Das sollten Sie bei der Konzeption responsiver Websites bedenken ... 256 TEIL III  Usability-Guidelines -- Anleitung für die Umsetzung ... 263 25.  Navigationskonzepte -- Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas ... 265        25.1 ... Horizontale Navigationsleisten und Tableiste ... 265        25.2 ... Navigationsmenü mit Burger-Icon, Hamburger-Menü ... 267        25.3 ... Navigationshub ... 269        25.4 ... Mega-Dropdown-Menü ... 270        25.5 ... Akkordeon-Menü ... 272        25.6 ... Off-Canvas-Navigation, Off-Canvas-Flyout ... 273 26.  Kopfzeilen -- Header nutzenstiftend umsetzen ... 275        26.1 ... Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren ... 275        26.2 ... Darstellung auf mobilen Endgeräten ... 278        26.3 ... Headerverhalten im Navigationsfluss ... 278 27.  Fußzeilen -- Footer nutzenstiftend gestalten ... 281        27.1 ... Elemente zweckgebunden im Footer platzieren ... 281        27.2 ... Darstellung auf mobilen Endgeräten ... 285 28.  Farbe, Ästhetik und Usability ... 287        28.1 ... Was ist Farbe überhaupt? ... 288        28.2 ... Welche Wirkung hat Farbe? ... 291        28.3 ... Die richtigen Farben für meine Nutzer finden ... 292        28.4 ... Fehler bei der Farbwahl vermeiden ... 294 29.  Schriftarten und Textformatierung ... 297        29.1 ... Von Punkten und Pixeln -- Grundlagen der Darstellung ... 298        29.2 ... Das Bildschirm-Grundstück -- Screen Real Estate ... 301        29.3 ... Die richtige Schriftart aussuchen ... 302        29.4 ... Schriftarten gut kombinieren ... 304        29.5 ... Wie groß sollte Fließtext sein? ... 305        29.6 ... Großbuchstaben und andere Hervorhebungen ... 306        29.7 ... Blocksatz niemals, zentriert selten ... 307        29.8 ... Die richtige Zeilenbreite ... 308        29.9 ... Der richtige Zeilenabstand ... 308        29.10 ... Typografie für Legastheniker ... 309 30.  Sprachwahl und mehrsprachige Sites ... 311        30.1 ... Sprachumschaltung bei Apps ... 311        30.2 ... Sprachumschaltung bei Websites ... 312 31.  Nutzerfreundlich schreiben ... 321        31.1 ... Vorgehen beim Schreiben ... 322        31.2 ... Wie schreibe ich lesbaren und verständlichen Text? ... 325        31.3 ... Überschriften ... 328        31.4 ... Listen und Kästen ... 329        31.5 ... Tabellen, Diagramme, Bilder und Videos ... 329        31.6 ... Hervorhebungen ... 330        31.7 ... Text und SEO ... 330 32.  Bilder für Benutzer auswählen ... 333        32.1 ... Was ist eigentlich ein Bild? ... 333        32.2 ... Wofür brauchen wir Bilder? ... 333        32.3 ... Vorteile von Bildern ... 336        32.4 ... Nachteile von Bildern ... 337        32.5 ... Tipps für richtigen Einsatz und Auswahl von Bildern ... 338        32.6 ... Tipps für die nutzerfreundliche Darstellung von Bildern ... 344 33.  Bildbühne, Karussell, Slideshow -- mehrere Bilder an einer Stelle ... 355        33.1 ... Was ist eine Bildbühne? ... 355        33.2 ... Wann nutzt man Bildbühnen? ... 355        33.3 ... Vorteile von Bildbühnen ... 358        33.4 ... Nachteile von Bildbühnen ... 358        33.5 ... Tipps für die Gestaltung von Bildbühnen ... 359        33.6 ... Alternativen ... 365 34.  Icons aussagekräftig auswählen ... 369        34.1 ... Icons nutzenstiftend einsetzen ... 369        34.2 ... Icon mit oder ohne Label -- das ist die Frage ... 370        34.3 ... Labels bei Icons bewusst positionieren ... 372        34.4 ... Icons eindeutig gestalten ... 374 35.  Links und Buttons formatieren und formulieren ... 377        35.1 ... Welche Links biete ich an? ... 378        35.2 ... Wo kommen Links hin? ... 378        35.3 ... Wie sehen Links aus? ... 379        35.4 ... Links formulieren ... 380        35.5 ... Seitennamen ... 381        35.6 ... Dateinamen, URLs und Pfade ... 382        35.7 ... Buttons -- Schaltflächen, Tasten oder Knöpfe? ... 382        35.8 ... Nicht jeder ist gleich wichtig -- Hierarchie ... 384        35.9 ... Man sieht nicht immer gleich aus -- Button-Zustände ... 389        35.10 ... Klick -- Buttons und Sound ... 392        35.11 ... Wie groß darf's denn sein? ... 392        35.12 ... Spezielle Buttons -- Checkboxen, Radiobuttons, Selektoren ... 394 36.  Formulare zielführend realisieren ... 397        36.1 ... Formulare -- vielfach angewandt und benannt ... 397        36.2 ... Wofür werden Formulare eingesetzt? ... 398        36.3 ... Tipps für die Gestaltung von Formularen ... 403        36.4 ... Tipps zur Unterstützung des Nutzers bei der Eingabe ... 408        36.5 ... Tipps zur Unterstützung des Nutzers beim Abschicken des Formulars (Aktionen) ... 411 37.  Labels und Auszeichnungen formulieren und positionieren ... 415        37.1 ... Labels zielführend positionieren ... 415        37.2 ... Labels verständlich formulieren ... 420 38.  Fehlermeldungen hilfreich umsetzen ... 423        38.1 ... Fehlern vorbeugen (Inline-Validierung) ... 423        38.2 ... Fehlermeldungen optimal positionieren ... 425        38.3 ... Fehlermeldungen aufmerksamkeitsstark gestalten ... 426        38.4 ... Fehlermeldungen verständlich formulieren ... 427 39.  Listen und Tabellen formatieren ... 429        39.1 ... Listen lockern Texte auf ... 429        39.2 ... Von eindimensionalen zu mehrdimensionalen Listen ... 429        39.3 ... Von Listen zu Tabellen ... 430        39.4 ... Listen fürs Lesen formatieren ... 431        39.5 ... Was kommt nach der Liste? ... 433        39.6 ... Keine Liste ohne Sortierung ... 434        39.7 ... Lange Listen bändigen ... 435        39.8 ... Listen filtern und Spalten ein-/ausblenden ... 436        39.9 ... Vergleichstabellen, die zum Kauf motivieren ... 438 40.  Aufklappelemente/Akkordeons richtig umsetzen ... 441        40.1 ... Akkordeons zeigen und verstecken Inhalte nach Interaktion des Nutzers ... 441        40.2 ... Akkordeons für Menüs, FAQ-Listen und komplexe Formulare -- vor allem mobil im Einsatz ... 442        40.3 ... Vorteile von Akkordeons ... 444        40.4 ... Nachteile von Akkordeons ... 445        40.5 ... Tipps für die Gestaltung von Akkordeons ... 445 41.  (Mikro-)Animation sinnvoll einsetzen ... 451        41.1 ... Animation belebt ... 451        41.2 ... Was ist eigentlich Animation? ... 451        41.3 ... Anwendung von Animationen ... 453        41.4 ... Wie sieht eine gute Animation aus? ... 455 42.  Suchfunktionen zielführend gestalten ... 461        42.1 ... Was ist eine Suchfunktion? ... 461        42.2 ... Wofür werden Suchfunktionen eingesetzt? ... 462        42.3 ... Tipps für die Auffindbarkeit von Suchfunktionen ... 464        42.4 ... Tipps für die Gestaltung der Suchfunktion ... 465        42.5 ... Tipps zur Unterstützung des Nutzers bei der Sucheingabe ... 466        42

240 mm

16.8 cm