Interface Design: Usability, User Experience und Accessibility im Web gestalten

559 Pages·2016·19.96 MB·German

by  Stephan Thesmann (auth.)

Stephan Thesmann
Interface
Design
Usability, User Experience
und Accessibility im Web gestalten
2. Auflage
Interface Design

Stephan Thesmann
Interface Design
Usability, User Experience und Accessibility
im Web gestalten
2., aktualisierte und erweiterte Aufl age
Stephan Thesmann
Hochschule Pforzheim
Pforzheim, Deutschland
ISBN 978-3-658-03856-4 ISBN 978-3-658-03857-1 (eBook)
DOI 10.1007/978-3-658-03857-1
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografi e; detaillierte
bibliografi sche Daten sind im Internet über h ttp://dnb.d-nb.de abrufbar.
Springer Vieweg
© Springer Fachmedien Wiesbaden 2010, 2016
Die 1. Aufl age ist unter dem Titel „Einführung in das Design multimedialer Webanwendungen“ erschienen.
Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jede Verwertung, die nicht ausdrücklich
vom Urheberrechtsgesetz zugelassen ist, bedarf der vorherigen Zustimmung des Verlags. Das gilt insbesondere
für Vervielfältigungen, Bearbeitungen, Übersetzungen, Mikroverfi lmungen und die Einspeicherung und
Verarbeitung in elektronischen Systemen.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt
auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen-
und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden
dürften.
D er Verlag, die Autoren und die Herausgeber gehen davon aus, dass die Angaben und Informationen in diesem
Werk zum Zeitpunkt der Veröffentlichung vollständig und korrekt sind. Weder der Verlag, noch die Autoren oder
die Herausgeber übernehmen, ausdrücklich oder implizit, Gewähr für den Inhalt des Werkes, etwaige Fehler oder
Äußerungen.
Gedruckt auf säurefreiem und chlorfrei gebleichtem Papier
Springer Vieweg ist Teil von Springer Nature
Die eingetragene Gesellschaft ist Springer Fachmedien Wiesbaden GmbH
Vorwort zur zw eiten Aufl age
Liebe Leserinnen und Leser,
h erzlichen Dank für Ihre vielfältigen positiven Reaktionen auf die erste Aufl age, aber auch
für Ihre konstruktive Kritik, die mir geholfen hat, dieses Buch ein wenig besser zu
machen.
Die fast sprichwörtliche Evolutionsgeschwindigkeit der Digitalbranche zeigt sich be-
sonders deutlich dort, wo Informationstechnologie auf den privaten Endkunden trifft: in
der Unterhaltungselektronik (etwa bei Smartphones) und im Web.
F ast 80 % der Deutschen sind heute online. Im Schnitt verbringen sie täglich 42 Minuten mit
Kommunikation, 28 Minuten mit Informationssuche, 27 Minuten mit Mediennutzung, 16
Minuten mit Spielen und 12 Minuten mit Transaktionen wie Einkaufen und Bankgeschäften.
Mobile Geräte und Applikationen entwickeln sich dabei in vielen Bereichen zum primären
Kommunikationskanal: Heute ist die Hälfte aller deutschen Onlinenutzer zumindest gelegent-
lich mobil im Netz unterwegs.
User Experience (UX) Design, User Interface (UI) Design bzw. Webdesign haben da-
durch weiter an Bedeutung gewonnen. Ob Sie einen Webauftritt mit dem PC oder dem
Smartphone besuchen – ein nahtloser Übergang und eine Benutzererfahrung mit hohem
Wiedererkennungswert sind dank responsivem Webdesign zum Standard geworden. Die
Konsequenzen für den Designer ziehen sich quer durch die Kapitel dieses Buches, vom
Entwurf der Seitenstruktur bis zur Gestaltung von Navigations- und Medienelementen.
D eutlich mehr Raum nehmen in der zweiten Aufl age auch Maßnahmen für
Barrierefreiheit und das Umsetzen der BITV 2.0-Richtlinien in HTML (5) ein. Außerdem
sind neuere Erkenntnisse in die Grundlagen der Suchmaschinenoptimierung eingefl ossen,
kleinere Fehler korrigiert, alle Weblinks im Buch aktualisiert und – wo es für das
Verständnis wichtig ist – Abbildungen in Farbe gedruckt.
Ich wünsche Ihnen eine kurzweilige und informative Lektüre.
Ihr Stephan Thesmann
v
Inhaltsverzeichnis
1 Einleitung .............................................................................................................. 1
1.1 Websites und Webapplikationen .................................................................... 4
1.2 Erfolgsfaktoren .............................................................................................. 5
1.3 Softwareentwicklung in Web-Projekten ........................................................ 7
1.3.1 Web-Projekte ...................................................................................... 7
1.3.2 Softwareentwicklungsmodell für Web-Projekte................................. 9
Literatur .................................................................................................................. 12
2 Menschliche Informationsverarbeitung ............................................................. 13
2.1 Wahrnehmung ................................................................................................ 15
2.1.1 Visuelle Wahrnehmung ...................................................................... 15
2.1.2 Auditive Wahrnehmung ...................................................................... 20
2.2 Aktivierung .................................................................................................... 23
2.3 Entscheidungsprozesse .................................................................................. 27
2.3.1 Informationsbedarf ............................................................................. 27
2.3.2 Informationsbeschaffung .................................................................... 29
2.3.3 Informationsaufnahme........................................................................ 30
2.3.4 Informationsverarbeitung ................................................................... 31
2.3.5 Informationsspeicherung .................................................................... 36
2.3.6 Informationsweitergabe ...................................................................... 38
2.4 Linkverzeichnis .............................................................................................. 38
Literatur .................................................................................................................. 38
3 Barrierefreiheit ..................................................................................................... 43
3.1 Einschränkungen ............................................................................................ 45
3.1.1 Visuelle Wahrnehmung ...................................................................... 46
3.1.2 Auditive Wahrnehmung ...................................................................... 48
3.1.3 Sprache ............................................................................................... 49
3.1.4 Motorische Störungen ........................................................................ 49
3.1.5 Kognitive Störungen ........................................................................... 52
vii
viii Inhaltsverzeichnis
3.2 Gesetze und Regelwerke ................................................................................ 52
3.2.1 Web Accessibility Initiative................................................................ 52
3.2.2 Barrierefreie Informationstechnikverordnung .................................... 54
3.3 Prinzip 1: Wahrnehmbarkeit .......................................................................... 55
3.3.1 Anforderung 1.1: Text-Alternativen ................................................... 55
3.3.2 Anforderung 1.2: Zeitbasierte Medien ............................................... 59
3.3.3 Anforderung 1.3: Anpassbarkeit ........................................................ 67
3.3.4 Anforderung 1.4: Unterscheidbarkeit ................................................. 77
3.4 Prinzip 2: Bedienbarkeit ................................................................................ 85
3.4.1 Anforderung 2.1: Zugänglichkeit per Tastatur ................................... 85
3.4.2 Anforderung 2.2: Bereitstellung ausreichender Zeit .......................... 87
3.4.3 Anforderung 2.3: Vermeidung von Anfällen ...................................... 92
3.4.4 Anforderung 2.4: Navigierbarkeit ...................................................... 93
3.5 Prinzip 3: Verständlichkeit ............................................................................. 102
3.5.1 Anforderung 3.1: Lesbarkeit .............................................................. 103
3.5.2 Anforderung 3.2: Vorhersehbarkeit .................................................... 107
3.5.3 Anforderung 3.3: Hilfestellung bei der Eingabe ................................ 111
3.6 Prinzip 4: Robustheit ...................................................................................... 116
3.6.1 Anforderung 4.1: Kompatibilität ........................................................ 117
3.7 Linkverzeichnis .............................................................................................. 123
Literatur .................................................................................................................. 125
4 Suchmaschinenoptimierung ................................................................................ 127
4.1 Suchmaschinen .............................................................................................. 131
4.1.1 Funktionsweise ................................................................................... 132
4.1.2 Ranking .............................................................................................. 139
4.2 Maßnahmen .................................................................................................... 143
4.2.1 Schlüsselwörter .................................................................................. 145
4.2.2 Onpage-Optimierung .......................................................................... 148
4.2.3 Offpage-Optimierung ......................................................................... 160
4.3 Monitoring ..................................................................................................... 163
4.3.1 Server-Monitoring .............................................................................. 163
4.3.2 Rank-Monitoring ................................................................................ 164
4.3.3 User-Agent-Monitoring ...................................................................... 165
4.4 Löschung der Seite aus Suchmaschinen ........................................................ 172
4.5 Linkverzeichnis .............................................................................................. 172
Literatur .................................................................................................................. 173
5 Voruntersuchung (Exposé) .................................................................................. 177
5.1 Zieldefi nition .................................................................................................. 178
5.2 Grundidee ..................................................................................................... 178
Inhaltsverzeichnis ix
5.3 Nutzungskontext ............................................................................................ 179
5.3.1 Zielgruppendefi nition ......................................................................... 179
5.3.2 Personas .............................................................................................. 182
5.4 Rahmenbedingungen ...................................................................................... 184
5.4.1 Annahmen .......................................................................................... 184
5.4.2 Bedarfs- und Marktanalyse ................................................................ 185
5.4.3 Zeitraster ............................................................................................. 187
5.4.4 Organisation ....................................................................................... 187
5.4.5 Team ................................................................................................... 187
5.4.6 Technische Umgebungen.................................................................... 188
5.4.7 Conditiones sine qua non ................................................................... 188
5.5 Aufwand- und Nutzenschätzung .................................................................... 188
5.6 Fazit ................................................................................................................ 190
5.7 Linkverzeichnis .............................................................................................. 190
Literatur .................................................................................................................. 191
6 Grobkonzeption (Rohdrehbuch) ......................................................................... 193
6.1 Phasenorganisation......................................................................................... 194
6.2 Qualitätssicherung .......................................................................................... 197
6.2.1 Systemergonomie ............................................................................... 198
6.2.2 Qualitätssicherungsmaßnahmen ......................................................... 200
6.3 Redaktion ....................................................................................................... 201
6.3.1 Bestimmung möglicher Inhalte .......................................................... 201
6.3.2 Auswahl und Strukturierung des Inhalts ............................................ 207
6.3.3 Informationsbeschaffung .................................................................... 210
6.3.4 Informationsverwaltung ..................................................................... 222
6.4 Entwurf der Bildschirmstruktur ..................................................................... 224
6.4.1 Gestaltgesetze ..................................................................................... 225
6.4.2 Nutzererwartungen ............................................................................. 237
6.4.3 Blickverlauf ........................................................................................ 241
6.4.4 Wireframes ......................................................................................... 247
6.5 Entwurf der Navigationspfade ....................................................................... 264
6.6 Datenvolumen ................................................................................................ 265
6.7 Vorkalkulation ................................................................................................ 266
6.8 Fazit ............................................................................................................... 269
6.9 Linkverzeichnis .............................................................................................. 270
Literatur .................................................................................................................. 273
7 Feinkonzeption (Drehbuch) ................................................................................. 275
7.1 Integrative Sicht ............................................................................................. 276
7.2 Design der Mensch-Computer-Dialoge ......................................................... 280
7.2.1 Aufgabenangemessenheit ................................................................... 281
7.2.2 Selbstbeschreibungsfähigkeit ............................................................. 283
x Inhaltsverzeichnis
7.2.3 Erwartungskonformität ....................................................................... 285
7.2.4 Lernförderlichkeit ............................................................................... 287
7.2.5 Steuerbarkeit ....................................................................................... 289
7.2.6 Fehlertoleranz ..................................................................................... 291
7.2.7 Individualisierbarkeit .......................................................................... 293
7.3 Interaktionsdiagramm .................................................................................... 295
7.4 Design der Benutzeroberfl äche (Styleguide) ................................................. 297
7.4.1 Farben ................................................................................................. 299
7.4.2 Formen ................................................................................................ 319
7.4.3 Texte ................................................................................................... 330
7.4.4 Bilder .................................................................................................. 346
7.4.5 Audio .................................................................................................. 352
7.4.6 Video .................................................................................................. 357
7.4.7 Animation ........................................................................................... 359
7.4.8 Werbung ............................................................................................. 361
7.4.9 Blogs ................................................................................................... 367
7.4.10 Interaktion .......................................................................................... 370
7.4.11 Orientierung........................................................................................ 377
7.4.12 Navigation .......................................................................................... 388
7.4.13 Meldungen .......................................................................................... 404
7.4.14 Hilfe .................................................................................................... 408
7.4.15 Anbieterkennzeichnung ...................................................................... 410
7.5 Auswahl von Content-Management-Systemen und Frameworks .................. 413
7.6 Machbarkeitsanalyse ...................................................................................... 418
7.7 Projektmanagement ........................................................................................ 418
7.8 Fazit ............................................................................................................... 419
7.9 Linkverzeichnis .............................................................................................. 421
Literatur .................................................................................................................. 424

8 Medienobjekte ...................................................................................................... 429
8.1 Texte ............................................................................................................... 432
8.1.1 TXT .................................................................................................... 434
8.1.2 RTF ..................................................................................................... 434
8.1.3 T X/LaT X ........................................................................................ 434
E E
8.1.4 Proprietäre Textformate ...................................................................... 435
8.2 Bilder ............................................................................................................. 435
8.2.1 Vektorgrafi k ........................................................................................ 435
8.2.2 Pixelgrafi k .......................................................................................... 436
8.2.3 SVG .................................................................................................... 438
8.2.4 Canvas ................................................................................................ 439
8.2.5 NETPBM ............................................................................................ 440
8.2.6 BMP/DIB ........................................................................................... 441
8.2.7 TIFF .................................................................................................... 442