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

52

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

61

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 & Einfache Sprache

67

5 Das mobile Zeitalter und die Auswirkung auf interaktive Konzepte

71

5.1 Mit responsivem Design für verschiedene Endgeräte optimieren

73

5.2 Mobile First in die Konzeption einsteigen

73

5.3 Context First – den Nutzungskontext berücksichtigen

74

5.4 Touch, Gesten und Sprache – mobile Interaktionsmechanismen

75

6 Von Smartwear, Sprachsteuerung & anderen Revolutionen

77

6.1 Gute Werkzeuge sind langlebig

78

6.2 Gute Werkzeuge sind anpassungsfähig

79

6.3 Praxisbeispiel Sprachsteuerung – Wizard of Oz

79

6.4 Alles ist testbar – von Smartwear bis zum Internet of Things

80

6.5 Herausforderungen bei der Konzeption für neue Geräte

81

7 Nutzer in die Produktentwicklung einbinden: der optimale Projektablauf

83

7.1 Nutzerzentrierte Entwicklung

83

7.2 Ein optimaler Projektablauf

84

7.3 Aller Anfang ist schwer – UX-Reifegrad im Unternehmen steigern

86

8 Agil ans Ziel: Usability Engineering in agilen Prozessen

89

8.1 Warum agile Entwicklung?

89

8.2 Wie geht agile Entwicklung?

90

8.3 Agil oder Lean?

91

8.4 Agiles Arbeiten in der Praxis

91

9 Fokusgruppen und Befragungen – Erkenntnisse über das derzeitige Nutzungsverhalten

97

9.1 Was sind Fokusgruppen? Was sind Befragungen?

97

9.2 Wie führt man Fokusgruppen durch?

99

9.3 Wie setzt man Befragungen auf?

103

10 Vor-Ort-Beobachtungen und Tagebuchstudien – den Nutzer im Alltag beobachten

109

10.1 Nutzungskontextanalyse – wozu?

109

10.2 Was sind Vor-Ort-Beobachtungen und Tagebuchstudien?

110

11 Personas – aus Erkenntnissen prototypische Nutzer entwickeln

113

11.1 Was sind Personas?

113

11.2 Wie sehen Personas aus?

114

11.3 Wie macht man Personas?

117

11.4 Wann setze ich Personas ein?

122

12 Mapping-Methoden – Interaktionen des Nutzers strukturiert erfassen

125

12.1 Welche Mapping-Methoden gibt es?

125

12.2 Wann setze ich welche Map ein?

130

12.3 Wie sieht eine Customer Journey Map genau aus?

131

12.4 Wie erstellt man eine Customer Journey Map?

133

13 Card Sorting – Entwicklung der Informationsarchitektur

135

13.1 Was ist Card Sorting?

135

13.2 Wie läuft ein Card Sorting ab?

140

13.3 Wie sieht eine Informationsarchitektur aus? Was erhalten Sie als Ergebnis aus einem Workshop?

143

13.4 Wer sollte ein Card Sorting durchführen?

143

13.5 Wann setze ich Card Sorting ein?

144

14 Scribbles – erste Ideen auf dem Weg zum Design

145

14.1 Was sind Scribbles?

145

14.2 Wie sehen Scribbles aus?

146

14.3 Wie macht man Scribbles?

149

14.4 Tipps zum Zeichnen

149

14.5 Scribbeln mit dem Tablet

152

14.6 Kommentare, Dokumentation und Überarbeitung

153

14.7 Scribbeln im Team

154

14.8 Wer sollte scribbeln?

155

14.9 Wann setze ich Scribbles ein?

155

15 Wireframes – sich an das optimale Produkt annähern

157

15.1 Was heißt Wireframe?

157

15.2 Wozu Wireframes?

158

15.3 Programme für Wireframes

159

15.4 Für welche Seiten brauche ich Wireframes?

163

15.5 Was in einen Wireframe gehört

163

15.6 Was nicht in einen Wireframe gehört

165

15.7 Was manchmal in einen Wireframe gehört

166

15.8 Responsives Design und Wireframes

168

15.9 Arbeitserleichterung für die Entwickler

169

15.10 Bibliotheken zur eigenen Arbeitserleichterung

170

15.11 Wie geht es weiter mit den Wireframes?

170

16 Papierprototypen – Ideen schnell greifbar machen

173

16.1 Was sind Papierprototypen?

173

16.2 Wie erstelle ich einen Papierprototyp?

174

16.3 Was ist bei einem Test eines Papierprototyps zu bedenken?

179

16.4 Wann setze ich Papierprototypen ein?

180

17 Mockups und Prototypen – konkretisieren, visualisieren, designen

181

17.1 Was sind Mockups, was Prototypen?

181

17.2 Wie sehen Prototypen aus?

183

17.3 Wie erstelle ich einen Prototyp?

185

17.4 Wann setze ich Prototypen ein?

190

18 Design Sprints, Design Thinking und ausgewählte Ideation-Methoden: Projektideen entwickeln und validieren

193

18.1 Was ist ein Design Sprint?

193

18.2 Was ist Design Thinking?

197

18.3 Ausgewählte Kreativitäts- und Ideation-Techniken

199

19 Usability-Tests – der Klassiker unter den Nutzertests

203

19.1 Was sind Usability-Tests? Welche Formen gibt es?

204

19.2 Wie läuft ein Usability-Test ab?

212

19.3 Wer sollte Usability-Tests durchführen?

221

19.4 Wann setze ich Usability-Tests ein?

223

20 Remote-Usability-Tests – von zuhause aus testen lassen

225

20.1 Was sind Remote-Usability-Tests?

225

20.2 Wie läuft ein Remote-Usability-Test ab?

229

20.3 Wann setze ich Remote-Usability-Tests ein?

231

21 Guerilla-Usability-Tests – informell und schnell Erkenntnisse sammeln

233

21.1 Warum Guerilla?

233

21.2 Wie finde ich Probanden?

235

21.3 Was kann ich testen?

237

21.4 Tipps für die Durchführung

237

21.5 Auswerten und präsentieren

238

22 Usability-Reviews – Expertenmeinung einholen statt Nutzer rekrutieren

239

22.1 Was sind Usability-Reviews?

239

22.2 Wie läuft ein Usability-Review ab?

241

22.3 Wer sollte einen Usability-Review durchführen?

243

22.4 Wann setze ich Usability-Reviews ein?

243

23 A/B-Tests – Varianten gegeneinander antreten lassen

245

23.1 Was bringen A/B-Tests?

246

23.2 Was kann man alles testen?

246

23.3 Was kann man nicht testen?

247

23.4 Wie sieht eine gute Fragestellung aus?

248

23.5 Wie definiere ich Erfolg?

249

23.6 Bitte nicht stören – Fehlerquellen ausschließen

250

23.7 Wie viele Testpersonen/Aufrufe brauche ich?

250

23.8 Ergebnisse mit Hirn interpretieren

253

23.9 Womit testen? – Tools

254

23.10 Erkenntnisse in Verbesserungen umsetzen

254

24 Analytics – aus dem aktuellen Nutzerverhalten lernen

257

24.1 Was kann man alles messen?

257

24.2 Womit analysieren? – Tools

264

25 Metriken

265

25.1 Warum Metriken für UX?

265

25.2 Statistik auch für kleine Stichproben

266

25.3 Die richtigen Metriken auswählen

267

25.4 Signifikanz – ein Wort zur Statistik

270

26 Struktur der Anwendung – Informations- und Navigationsarchitektur

273

26.1 Grobsortierung der Inhalte

274

26.2 Feingliederung der Inhalte

274

26.3 Sitestruktur festlegen und darstellen

276

26.4 Zeichnen der Sitemap

277

26.5 Zeige ich die Sitemap auf der Site?

278

26.6 Navigation für den Nutzer planen

278

27 Ordnung auf den Seiten – Gestaltungsraster und responsives Design

281

27.1 Gestaltungsraster helfen beim Anordnen von Inhalten und Elementen auf den Seiten

281

27.2 Wie ein Rastersystem aufgebaut ist

283

27.3 Was bedeutet responsives Webdesign?

286

27.4 Das sollten Sie bei der Konzeption responsiver Websites bedenken

288

28 Navigationskonzepte – Mega-Dropdowns, Flyouts, Hamburger-Menü, Off-Canvas

295

28.1 Horizontale Navigationsleisten und Tableiste

295

28.2 Navigationsmenü mit Burger-Icon, Hamburger-Menü

297

28.3 Navigationshub

299

28.4 Mega-Dropdown-Menü

300

28.5 Akkordeonmenü

302

28.6 Off-Canvas-Navigation, Off-Canvas-Flyout

303

29 Kopfzeilen – Header nutzenstiftend umsetzen

305

29.1 Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren

305

29.2 Darstellung auf mobilen Endgeräten

308

29.3 Headerverhalten im Navigationsfluss

308

30 Fußzeilen – Footer sinnvoll gestalten

311

30.1 Elemente zweckgebunden im Footer platzieren

311

30.2 Darstellung auf mobilen Endgeräten

315

31 Farbe, Ästhetik und Usability

317

31.1 Was ist Farbe überhaupt?

318

31.2 Welche Wirkung hat Farbe?

321

31.3 Die richtigen Farben für meine Nutzer finden

322

31.4 Fehler bei der Farbwahl vermeiden

324

32 Schriftarten und Textformatierung

327

32.1 Von Punkten und Pixeln – Grundlagen der Darstellung

328

32.2 Das Bildschirm-Grundstück – Screen Real Estate

331

32.3 Die richtige Schriftart aussuchen

332

32.4 Schriftarten gut kombinieren

334

32.5 Wie groß sollte Fließtext sein?

335

32.6 Großbuchstaben und andere Hervorhebungen

336

32.7 Blocksatz niemals, zentriert selten

337

32.8 Die richtige Zeilenbreite

338

32.9 Der richtige Zeilenabstand

338

32.10 Typografie für Legastheniker

339

33 Sprachwahl und mehrsprachige Sites

341

33.1 Sprachumschaltung bei Apps

341

33.2 Sprachumschaltung bei Websites

342

34 Nutzerfreundlich schreiben

351

34.1 Vorgehen beim Schreiben

352

34.2 Wie schreibe ich lesbaren und verständlichen Text?

355

34.3 Überschriften

358

34.4 Listen und Kästen

359

34.5 Tabellen, Diagramme, Bilder und Videos

359

34.6 Hervorhebungen

360

34.7 Text und SEO

360

35 Bilder für Benutzer auswählen

363

35.1 Was ist eigentlich ein Bild?

363

35.2 Wofür brauchen wir Bilder?

363

35.3 Vorteile von Bildern

366

35.4 Nachteile von Bildern

367

35.5 Tipps für richtigen Einsatz und Auswahl von Bildern

368

35.6 Tipps für die nutzerfreundliche Darstellung von Bildern

374

36 Bildbühne, Karussell, Slideshow – mehrere Bilder an einer Stelle

385

36.1 Was ist eine Bildbühne?

385

36.2 Wann nutzt man Bildbühnen?

385

36.3 Vorteile von Bildbühnen

388

36.4 Nachteile von Bildbühnen

388

36.5 Tipps für die Gestaltung von Bildbühnen

389

36.6 Alternativen

395

37 Audio & Video einbinden und steuern

399

37.1 Wann sind Audio & Video überhaupt sinnvoll?

399

37.2 Audio & Video zugänglich machen

400

37.3 Audio & Video steuern

401

37.4 Normen zur Steuerung von Audio & Video

402

38 Icons aussagekräftig auswählen

403

38.1 Icons nutzenstiftend einsetzen

403

38.2 Icon mit oder ohne Label – das ist die Frage

404

38.3 Labels bei Icons bewusst positionieren

406

38.4 Icons eindeutig gestalten

408

39 Links und Buttons formatieren und formulieren

411

39.1 Welche Links biete ich an?

412

39.2 Wo kommen Links hin?

412

39.3 Wie sehen Links aus?

413

39.4 Links formulieren

414

39.5 Seitennamen

415

39.6 Dateinamen, URLs und Pfade

416

39.7 Buttons – Schaltflächen, Tasten oder Knöpfe?

416

39.8 Nicht jeder ist gleich wichtig – Hierarchie

418

39.9 Man sieht nicht immer gleich aus – Button-Zustände

423

39.10 Klick – Buttons und Sound

426

39.11 Wie groß darf’s denn sein?

426

39.12 Spezielle Buttons – Checkboxen, Radiobuttons, Selektoren

428

40 Formulare zielführend realisieren

431

40.1 Formulare – vielfach angewandt und bekannt

431

40.2 Wofür werden Formulare eingesetzt?

432

40.3 Tipps für die Gestaltung von Formularen

437

40.4 Tipps zur Unterstützung des Nutzers bei der Eingabe

442

40.5 Tipps zur Unterstützung des Nutzers beim Abschicken des Formulars (Aktionen)

445

41 Labels und Auszeichnungen formulieren und positionieren

449

41.1 Labels zielführend positionieren

449

41.2 Labels verständlich formulieren

455

42 Fehlermeldungen hilfreich umsetzen

457

42.1 Fehlern vorbeugen (Inline-Validierung)

457

42.2 Fehlermeldungen optimal positionieren

459

42.3 Fehlermeldungen aufmerksamkeitsstark gestalten

459

42.4 Fehlermeldungen verständlich formulieren

460

43 Listen und Tabellen formatieren

463

43.1 Listen lockern Texte auf

463

43.2 Von eindimensionalen zu mehrdimensionalen Listen

463

43.3 Von Listen zu Tabellen

464

43.4 Listen fürs Lesen formatieren

465

43.5 Was kommt nach der Liste?

467

43.6 Keine Liste ohne Sortierung

468

43.7 Lange Listen bändigen

470

43.8 Listen filtern und Spalten ein-/ausblenden

470

43.9 Vergleichstabellen, die zum Kauf motivieren

472

44 Aufklappelemente/Akkordeons richtig umsetzen

475

44.1 Akkordeons zeigen und verstecken Inhalte nach Interaktion des Nutzers

475

44.2 Akkordeons für Menüs, FAQ-Listen und komplexe Formulare – vor allem mobil im Einsatz

476

44.3 Vorteile von Akkordeons

478

44.4 Nachteile von Akkordeons

478

44.5 Tipps für die Gestaltung von Akkordeons

479

45 Diagramme auswählen & gestalten

485

45.1 Wann Diagramm, wann Tabelle?

486

45.2 Das richtige Diagramm für meine Daten

486

45.3 Werte unterschiedlicher Skalen vergleichen

492

45.4 Formatierung nach Usability, nicht Ästhetik

492

46 (Mikro-)Animation sinnvoll einsetzen

495

46.1 Animation belebt

495

46.2 Was ist eigentlich Animation?

495

46.3 Anwendung von Animationen

497

46.4 Wie sieht eine gute Animation aus?

499

47 Suchfunktionen zielführend gestalten

505

47.1 Was ist eine Suchfunktion?

505

47.2 Wofür werden Suchfunktionen eingesetzt?

506

47.3 Tipps für die Auffindbarkeit von Suchfunktionen

508

47.4 Tipps für die Gestaltung der Suchfunktion

509

47.5 Tipps zur Unterstützung des Nutzers bei der Sucheingabe

510

47.6 Tipps für eine eindeutige, gut strukturierte Trefferdarstellung

512

47.7 Tipps für eine technisch zeitgemäße Umsetzung

516

47.8 Alternativen

518

48 Filter und Facetten integrieren und positionieren

519

48.1 Filter grenzen schnell ein, Facetten unterstützen bei der Suche

519

48.2 Unerlässlich im Onlinehandel und auch sonst weitverbreitet

522

48.3 Tipps für die Auswahl und Benennung von Filtern/Facetten

523

48.4 Tipps für die Gestaltung von Filtern/Facetten

525

49 Design-Systeme, Styleguides & Pattern Libraries

533

49.1 Standards berücksichtigen

533

49.2 Wie unterscheiden sich Design-System, Styleguide und Pattern Library?

537

49.3 Design-Systeme nachhaltig etablieren

542