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.1.1 Millersches Gesetz - 7 plus/minus 2

43

3.1.2 Hicksches Gesetz (auch Hick-Hyman-Gesetz genannt)

44

3.2 Auswahl ist gut, aber zu viel ist schlecht

44

3.3 Menschliche Wahrnehmung - Gestaltgesetze

44

3.3.1 Nähe

44

3.3.2 Ähnlichkeit

45

3.3.3 Geschlossenheit

46

3.3.4 Figur und Grund

46

3.3.5 Symmetrie

46

3.3.6 Gemeinsame Region

48

3.3.7 Weitere Gestaltgesetze

48

3.4 Menschliche Wahrnehmung - weitere Erkenntnisse aus der Forschung

48

3.4.1 Banner-Blindheit

49

3.4.2 Fitts’ Gesetz

49

3.4.3 Gutenberg-Diagramm und Z-Muster

50

3.4.4 F-Muster

50

3.4.5 Wir sind darauf geprägt, Gesichter zu erkennen

52

3.4.6 Wir entscheiden nicht rational

52

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.7.1 Gesetzliche Regelungen

64

4.7.2 Freiwillige Vereinbarungen und Förderung

66

4.7.3 Sonderfall Medizin

67

4.8 Leichte Sprache und Einfache Sprache

67

4.8.1 Schreiben in Einfacher Sprache

68

4.8.2 Schreiben in Leichter Sprache

69

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

98

9 Fokusgruppen und Befragungen - Erkenntnisse über das derzeitige Nutzungsverhalten

103

9.1 Was sind Fokusgruppen? Was sind Befragungen?

103

9.1.1 Fokusgruppen

103

9.1.2 Befragungen

104

9.2 Wie führt man Fokusgruppen durch?

105

9.2.1 Rolle und Aufgaben des Moderators

105

9.2.2 Vorbereitung einer Fokusgruppe

106

9.2.3 Durchführung einer Fokusgruppe

107

9.2.4 Auswertung der Fokusgruppen

109

9.3 Wie setzt man Befragungen auf?

109

9.3.1 Vorgehen bei quantitativen Befragungen

110

9.3.2 Erstellung eines Fragebogens

111

9.3.3 Feldkontrolle, Datenbereinigung und Auswertung

113

10 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?

116

10.2.1 Vor-Ort-Beobachtungen

116

10.2.2 Tagebuchstudien

117

11 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.3.1 Konsolidieren der User-Research-Daten

123

11.3.2 Vorgehen bei der qualitativen Auswertung

124

11.3.3 Vorgehen bei der quantitativen Auswertung

126

11.3.4 Tipps zur Anwendung: Arbeiten mit Personas

127

11.4 Wann setze ich Personas ein?

128

12 Mapping-Methoden - Interaktionen des Nutzers strukturiert erfassen

131

12.1 Welche Mapping-Methoden gibt es?

131

12.1.1 Customer Journey Map

132

12.1.2 Empathy Map

133

12.1.3 Experience Map

135

12.1.4 Service Blueprint

136

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?

140

13 Card Sorting - Entwicklung der Informationsarchitektur

141

13.1 Was ist Card Sorting?

141

13.1.1 Offenes Card Sorting (generativer Ansatz)

143

13.1.2 Geschlossenes Card Sorting (evaluierender Ansatz)

143

13.1.3 Reverse Card Sorting oder Tree Testing (evaluierender Ansatz)

144

13.2 Wie läuft ein Card Sorting ab?

146

13.2.1 Stichprobengröße, Anzahl der Karten und Dauer der Session

146

13.2.2 Planung, Durchführung und Auswertung eines offenen Card Sortings

147

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?

151

14 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?

163

15 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.3.1 Axure und Balsamiq

167

15.3.2 Grafik- und Designprogramme

169

15.3.3 Office-Programme und Satzprogramme

170

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.6.1 Low-, Medium- und High-Fidelity-Wireframes

174

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?

178

16 Papierprototypen - Ideen schnell greifbar machen

181

16.1 Was sind Papierprototypen?

181

16.2 Wie erstelle ich einen Papierprototyp?

182

16.2.1 Vorgehen bei der Erstellung

182

16.2.2 Benötigtes Material

184

16.2.3 Unterstützende Tools und Vorlagen

185

16.3 Wann setze ich Papierprototypen ein?

186

17 Mockups und Prototypen - konkretisieren, visualisieren, designen

187

17.1 Was sind Mockups, was Prototypen?

187

17.1.1 Mockups

187

17.1.2 Prototypen

188

17.2 Wie sehen Prototypen aus?

189

17.2.1 Detaillierungsgrad des Prototyps

189

17.2.2 Ausbau des Prototyps entlang des Entwicklungsprozesses

189

17.3 Wie erstelle ich einen Prototyp?

191

17.3.1 Vorüberlegungen zum Prototyp

191

17.3.2 Auswahl eines Prototyping-Tools

193

17.3.3 Erstellen des Prototyps

196

17.4 Wann setze ich Prototypen ein?

196

17.4.1 Rapid Prototyping

197

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

199

18.1 Was ist ein Design Sprint?

199

18.1.1 Wie läuft ein Design Sprint ab?

200

18.1.2 Wer sollte bei einem Design Sprint dabei sein?

201

18.1.3 Was benötigen Sie noch?

201

18.2 Was ist Design Thinking?

203

18.2.1 Der Double-Diamond-Ansatz

203

18.2.2 Das 6-Phasen-Modell

204

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

206

19 Usability-Tests - die Klassiker unter den Nutzertests

209

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

210

19.1.1 Kriterien zur Unterscheidung von Usability-Tests

211

19.1.2 Aufbau eines Usability-Labors

212

19.1.3 Thinking-aloud-Methode oder Protokolle lauten Denkens

213

19.1.4 Eyetracking (Blickverlaufsmessung)

214

19.1.5 Quantitative Werte im Usability-Test

217

19.2 Wie läuft ein Usability-Test ab?

218

19.2.1 Vorüberlegungen

218

19.2.2 Studienkonzeption

219

19.2.3 Erstellen des Interviewleitfadens

220

19.2.4 Anzahl der Testpersonen, Größe der Stichprobe

221

19.2.5 Rekrutierung der Testpersonen

222

19.2.6 Pretest und Vorbereitungen für die Einzelinterviews

222

19.2.7 Erhebung, Durchführung der Einzelinterviews

223

19.2.8 (Interner) Ergebnis-Workshop, Wrap-up

224

19.2.9 Datenanalyse und -interpretation

225

19.2.10 Bericht

226

19.3 Wer sollte Usability-Tests durchführen?

227

19.3.1 Anforderungen an Interviewer

228

19.3.2 Anforderungen an Beobachter

229

19.4 Wann setze ich Usability-Tests ein?

230

20 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.3.1 Herausforderungen bei moderierten Online-Usability-Tests

233

20.3.2 Wie läuft ein moderierter Online-Usability-Test ab?

234

20.3.3 Wie sieht der technische Aufbau aus?

235

20.3.4 Tipps für Tests mit mobilen Endgeräten

236

20.4 Unmoderierter Online-Usability-Test

237

20.4.1 Herausforderungen bei unmoderierten Online-Usability-Tests

237

20.4.2 Wie läuft ein unmoderierter Online-Usability-Test ab?

238

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

241

21.1 Warum Guerilla?

241

21.1.1 Wann Guerilla-Tests nicht das Richtige sind

242

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

246

22 Usability-Reviews - Expertenmeinung einholen statt Nutzer rekrutieren

247

22.1 Was sind Usability-Reviews?

247

22.1.1 Cognitive Walkthrough (aufgabenbasierter Ansatz)

247

22.1.2 Heuristische Evaluation (richtlinienbasierte Herangehensweise)

248

22.1.3 Usability-Review als Grundlage für weitere Methoden

248

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?

250

23 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.7.1 Woher weiß ich, dass es statistisch stimmt?

257

23.7.2 Darf ich A/B-Tests vorzeitig abbrechen?

259

23.8 Multivariate Tests

260

23.9 Ergebnisse mit Hirn interpretieren

260

23.10 Womit testen? - Tools

261

23.11 Erkenntnisse in Verbesserungen umsetzen

262

24 Analytics - aus dem aktuellen Nutzerverhalten lernen

265

24.1 Was kann man alles messen?

265

24.1.1 Standard-Tracking

267

24.1.2 Ereignisse und Ereignisfluss

268

24.1.3 Verweildauer, Ladegeschwindigkeit

269

24.1.4 Verhaltensfluss, Ereignisfluss

270

24.1.5 Ziele und Trichter

271

24.2 Womit analysieren? - Tools

272

25 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.3.1 TCR und TOT

278

25.3.2 SEQ

278

25.3.3 SUS

279

25.3.4 UEQ

279

25.3.5 NPS

279

25.3.6 VisAWI und AttrakDiff

279

25.4 Signifikanz - was messen wir da überhaupt?

280

25.5 Performance - Core Web Vitals und PageSpeed Insights

281

26 Struktur der Anwendung - Informations- und Navigationsarchitektur

287

26.1 Grobsortierung der Inhalte

288

26.2 Feingliederung der Inhalte

288

26.2.1 Welche Gliederung verstehen meine Nutzer?

289

26.2.2 Was tun mit nicht einzuordnenden Bereichen?

290

26.2.3 Schaffen Sie mehrere Wege zum Ziel

290

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

293

27 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

303

27.4.1 Wo soll die Anwendung überhaupt laufen?

304

27.4.2 Flexible Grids statt fester Gestaltungsraster

305

27.4.3 Flexible Typografie statt fester Schriftgröße

305

27.4.4 Skalierbare Bilder statt fester Bildgrößen

307

28 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

317

29 Popups, Banner und Modals

319

29.1 Popups wollen auffallen, Banner werben für etwas und Modals erzwingen eine Nutzerinteraktion

319

29.1.1 Modals

319

29.1.2 Popups

321

29.1.3 Banner

322

29.1.4 Cookie-Consent-Dialog

323

29.2 Tipps für die Gestaltung

323

29.2.1 Zeitpunkt des Erscheinens - lassen Sie den Nutzer erstmal etwas tun

323

29.2.2 Kontext der Anzeige - überzeugen Sie den Nutzer im richtigen Moment

324

29.2.3 Relevanz des Inhalts - erklären Sie den Mehrwert

325

29.3 Cookie Consent Banner oder Popup - wie Sie ihn optimieren

326

30 Kopfzeilen - Header nutzenstiftend umsetzen

329

30.1 Zentrale Elemente eines Headers auswählen und erwartungskonform platzieren

329

30.1.1 Logo

330

30.1.2 Suchfunktion

330

30.1.3 Warenkorb

330

30.1.4 Metanavigation, übergreifende Funktionalitäten

331

30.1.5 Sprachwahl

332

30.2 Darstellung auf mobilen Endgeräten

332

30.3 Headerverhalten im Navigationsfluss

333

31 Fußzeilen - Footer sinnvoll gestalten

335

31.1 Elemente zweckgebunden im Footer platzieren

335

31.1.1 Metanavigation

335

31.1.2 Kontaktdaten

337

31.1.3 Sitemap

337

31.1.4 Newsletter-Anmeldung

338

31.1.5 Social Media

339

31.1.6 Sprungmarken nach oben

339

31.2 Darstellung auf mobilen Endgeräten

340

32 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.4.1 Zu wenig Kontrast

348

32.4.2 Ist Schwarz-Weiß zu intensiv?

349

32.4.3 Zu geringe Unterscheidbarkeit - nicht nur bei Rot-Grün-Sehschwäche

350

32.5 Brauche ich einen Nachtmodus?

351

33 Schriftarten und Textformatierung

355

33.1 Von Punkten und Pixeln - Grundlagen der Darstellung

356

33.1.1 Pixel ist nicht gleich Pixel

359

33.2 Das Bildschirm-Grundstück - Screen Real Estate

359

33.3 Die richtige Schriftart aussuchen

360

33.3.1 Fonts schaffen Vertrauen

361

33.3.2 Sind Schriften mit Serifen besser leserlich?

361

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

367

34 Sprachwahl und mehrsprachige Sites

369

34.1 Sprachumschaltung bei Apps

369

34.2 Sprachumschaltung bei Websites

370

34.2.1 Position des Sprachumschalters

371

34.2.2 Gestaltung und Beschriftung des Sprachumschalters

373

34.2.3 Funktion des Umschalters

374

34.2.4 Konzeption der Mehrsprachigkeit

375

34.2.5 Design/Gestaltung der Mehrsprachigkeit

376

34.2.6 SEO (Suchmaschinenoptimierung)

377

35 Nutzerfreundlich schreiben

379

35.1 Vorgehen beim Schreiben

380

35.1.1 Ihre Zielgruppe

381

35.1.2 Der Ton/die Tonalität

381

35.1.3 Siezen oder duzen?

381

35.1.4 Ihr Ziel

382

35.1.5 Der Einstieg

382

35.1.6 Das Ende - die Handlungsaufforderung

382

35.1.7 Die Gliederung

382

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

389

36 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.5.1 Die falschen Fotos erkennen

399

36.5.2 Die richtigen Fotos finden

399

36.5.3 Schöne Fotos sind erlaubt

400

36.5.4 Woher die Fotos nehmen?

402

36.6 Tipps für die nutzerfreundliche Darstellung von Bildern

403

36.6.1 Crashkurs Bildbeschnitt

403

36.6.2 Bilder sinnvoll auf der Seite platzieren

406

36.6.3 Bilder auf verschiedenen Bildschirmgrößen richtig darstellen

409

37 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.2.1 Sonderfall Fotopräsentation - klassische Diaschau

415

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.5.1 Fünf oder weniger Elemente

418

37.5.2 Klare Fotos

419

37.5.3 Deutliche Beschriftung

420

37.5.4 Klare Verortung

421

37.5.5 Klare Navigation

422

37.5.6 Kontrolle durch den Nutzer

422

37.5.7 Gutes Timing

423

37.5.8 Sinnvolles Ladeverhalten

423

37.5.9 Klaren Fokus oder Übersicht geben

424

37.5.10 Technisch zeitgemäße Umsetzung

424

37.6 Alternativen

424

37.6.1 Konzentration auf das Wesentliche

424

37.6.2 Hero Shots

424

37.6.3 Bilder untereinander

424

37.6.4 Führung über die Seite

425

37.6.5 Themenkacheln

425

38 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

431

39 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

437

40 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.8.1 Position und Text

447

40.8.2 Die Handlungsaufforderung - Call to Action

450

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

455

41 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.3.1 Übersichtliche, schnell erfassbare Struktur des Formulars

465

41.3.2 Logische Unterteilung

467

41.3.3 Eingabefelder ausreichend groß gestalten

467

41.3.4 Formularelemente und Auswahloptionen richtig wählen

468

41.3.5 Pflichtfelder ausweisen

471

41.3.6 Beschriftungen (Labels) platzieren

473

41.4 Tipps zur Unterstützung des Nutzers bei der Eingabe

473

41.4.1 Anforderungen an Eingaben klar erkennbar machen

473

41.4.2 Falscher Eingabe vorbeugen

474

41.4.3 Native Funktionalitäten für eine einfachere Eingabe nutzen

477

41.4.4 Auswahloptionen ein-/ausblenden

478

41.4.5 Validierung als Feedback für den Nutzer

479

41.4.6 Fehlermeldungen/Hilfe bei fehlerhaften Eingaben

479

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

480

41.5.1 Buttons platzieren und gestalten

480

41.5.2 Fortschrittsanzeige bei mehrseitigen Formularen einbinden

481

42 Labels und Auszeichnungen formulieren und positionieren

485

42.1 Labels zielführend positionieren

485

42.1.1 Label oberhalb des Eingabefelds

485

42.1.2 Label links vom Eingabefeld

486

42.1.3 Label innerhalb des Eingabefelds

487

42.2 Labels verständlich formulieren

488

43 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

495

44 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

506

45 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

512

45.5.1 Flexible Bedienung durch den Nutzer

512

45.5.2 Elemente ausreichend groß gestalten

513

45.5.3 Animationen erkennbar einsetzen

513

45.5.4 Nächsten Inhaltsbereich im Akkordeon schnell ansteuern

513

45.5.5 Bedienelemente auswählen

514

45.5.6 Bedienelemente erwartungskonform platzieren

515

46 Diagramme auswählen und gestalten

517

46.1 Wann Diagramm, wann Tabelle?

517

46.2 Das richtige Diagramm für meine Daten

518

46.2.1 Skalenniveau bestimmen

519

46.2.2 Kreis-, Torten- und Donut-Diagramm: Anteile darstellen

520

46.2.3 Säulen- und Balkendiagramme: Zustimmung, Nutzungshäufigkeit etc. darstellen

521

46.2.4 Liniendiagramme: Veränderung über die Zeit darstellen

523

46.3 Werte unterschiedlicher Skalen vergleichen

524

46.4 Formatierung nach Usability, nicht nach Ästhetik

525

47 (Mikro-)Animation sinnvoll einsetzen

527

47.1 Animation belebt

527

47.2 Was ist eigentlich Animation?

527

47.3 Anwendung von Animationen

529

47.3.1 Wann sind Animationen sinnvoll?

530

47.4 Wie sieht eine gute Animation aus?

531

47.4.1 Vorsicht mit Humor

532

47.4.2 Sound oder nicht?

532

47.4.3 Das richtige Timing

533

48 Suchfunktionen zielführend gestalten

537

48.1 Wofür werden Suchfunktionen eingesetzt?

538

48.1.1 Sonderfall kontextuelle Suche

538

48.2 Tipps für die Auffindbarkeit von Suchfunktionen

540

48.2.1 Erwartungskonforme Platzierung

540

48.2.2 Portalübergreifend zugänglich machen

542

48.3 Tipps für die Gestaltung der Suchfunktion

542

48.3.1 Mindestens ein Suchen-Button

543

48.3.2 Gestaltung des Lupensymbols

543

48.4 Tipps zur Unterstützung des Nutzers bei der Sucheingabe

543

48.4.1 Den gesamten Inhalt berücksichtigen

543

48.4.2 Vorbelegung des Suchfelds

544

48.4.3 Autosuggest/Autocomplete anbieten

544

48.5 Tipps für eine eindeutige, gut strukturierte Trefferdarstellung

547

48.5.1 Listenform mit zentralen Angaben

547

48.5.2 Sortieren der Ergebnisse

548

48.5.3 Trefferdarstellung inklusive Anzeige der Suchwörter mit Ergebnissen

548

48.5.4 Nachfiltern der Suchergebnisse

548

48.5.5 Umgang mit null Treffern

551

48.6 Alternativen

553

49 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.2.1 Filterkriterien sinnvoll auswählen und strukturieren

559

49.2.2 Filterkriterien selbsterklärend benennen

561

49.3 Tipps für die Gestaltung von Filtern/Facetten

561

49.3.1 Erwartungskonform positionieren

562

49.3.2 Filtermechanismus kenntlich machen

564

49.3.3 Filter/Facetten nutzerfreundlich gestalten

565

49.3.4 Filter auswählen und zurücksetzen

566

50 Designsysteme, Styleguides und Pattern Libraries

569

50.1 Standards berücksichtigen

569

50.1.1 Warum Standards Sinn machen

570

50.1.2 Wie Sie Konsistenz in Ihrer Anwendung erreichen

571

50.2 Wie unterscheiden sich Designsystem, Styleguide und Pattern Library?

573

50.2.1 Was ist ein Styleguide?

574

50.2.2 Was ist eine Pattern Library?

575

50.2.3 Was umfasst ein Designsystem?

576

50.3 Designsysteme nachhaltig etablieren

578