Usability und Barrierefreiheit

Transkript

1 Entwicklung webbasierter Anwendungen Rich Internet Applications Usability und Barrierefreiheit Dipl.-Inf. (FH) Robert Dominik HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN Fakultät Informatik/Mathematik

2 Überblick Motivation Barrierefreiheit Definition Barrieren und Hürden im Web Richtlinien und Standards Usability Was ist Usability? Software-Ergonomie Gestaltungsrichtlinien Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 2

3 Motivation Was definiert den Erfolg einer Webseite? Basisfunktionalität Performance Usability Barrierefreiheit ästhetischer Stil Joy of Use Anforderungen an das Webdesign Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 3

4 Definition Barrierefreiheit Barrierefreiheit (allg.) bedeutet, dass Gegenstände, Medien und Einrichtungen so gestaltet werden, dass sie von jedem Menschen unabhängig von einer eventuell vorhandenen Behinderung uneingeschränkt benutzt werden können Barrierefreiheit (bzgl. Medien/Internet) fasst alle Anforderungen an eine Zugänglichkeit zu Informationen für alle Menschen zusammen Barrierefreiheit (Webentwickler) Designprinzip, bei dem versucht wird, die Nutzung von Webseiten unabhängig von körperl. und geistigen Behinderungen sowie techn. Hürden zu ermöglichen Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 4

5 RIA und Barrierefreiheit moderne Webauftritte bieten ein hohes Maß an Interaktivität und Multimedialität (Rich Internet Applications) technisches Fundament des World Wide Web kommt an seine Grenzen HTML und HTTP sind Grundsätzlich nicht für die Unterstützung der Interaktivität aktueller Webauftritte bestimmt mit Java-Script können diesbezügliche Schwächen von HTML und HTTP weitgehend überbrückt werden viele Ansätze, um Webauftritte multimedialer und interaktiver zu gestalten, bringen Probleme hinsichtlich der Verwendbarkeit für Menschen mit Einschränkungen mit sich (Barrierefreiheit wird nicht beachtet) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 5

6 Behinderungen und Barrieren Blindheit nutzen weder Bildschirm noch Maus Screenreader und Braillezeile wandeln Text in taktile oder akustische Informationen Sehbehinderung sehen trotz Sehhilfe weniger als 30% und benötigen eine Bildschirmlupe und gute Kontraste um noch etwas zu erkennen Gehörlosigkeit / Ertaubung haben ggf. nie Sprache gehört und benötigen dadurch einfache Texte oder Gebärdensprachenvideos Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 6

7 Behinderungen und Barrieren Motorische Behinderung können beispielsweise ihre Arme nur eingeschränkt bewegen und bedienen den PC über Spezial Maus und Bildschirmtastatur (auch Querschnittslähmung, Spastik, Muskeldystrophie) Intelligenzminderung (geistige Behinderung) haben Probleme beim Lernen und Verstehen und sind deshalb auf einfache Inhalte angewiesen (IQ <= 69) Technische Probleme Probleme durch unpassende oder inkompatible Infrastruktur -> das Einhalten von Standards und Flexibilität hilft Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 7

8 Typische Hürden im Web Kontrastarme Seiten besonders für Menschen mit Farbfehlsichtigkeit Kleine Texte besonders für Menschen mit Sehschwäche Können Sie das lesen? Ignorieren techn. Standards beschränkt Besucher auf bestimmte Browser Bilder für Blinde, die sich den Inhalt von einem Screenreader vorlesen lassen Komplexe Sprache Lesbarkeit wird erschwert (nicht nur für Menschen mit kognitiver Behinderung) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 8

9 Richtlinien und Standards Web Content Accessibility Guidelines (WCAG) erstellt von einer Arbeitsgruppe innerhalb des W3C, der Web Accessibility Initiative (WAI) ( aktueller Stand: WCAG 2.0 vom 11. Dezember 2008 siehe Barrierefreie Informationstechnik-Verordnung (BITV) ergänzt das am 1. Mai 2002 in Kraft getretene Behindertengleichstellungsgesetz (BGG) legt fest, dass alle öffentlich zugänglichen Webangebote des Bundes barrierefrei sein müssen in einer Anlage zur BITV werden alle Anforderungen aufgelistet, die ein barrierefreies Webangebot erfüllen muss siehe 1.html Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 9

10 Designprinzipien Wahrnehmbarkeit Inhalte müssen auf verständliche Weise für alle Menschen seh- bzw. hörbar sein Bedienbarkeit Inhalte müssen für alle leicht zugänglich und auffindbar sein Verständlichkeit Webseite soll einen selbsterklärenden Aufbau haben und die Inhalte verständlich präsentieren Robustheit (und Nachhaltigkeit) Webseite darf nicht auf Kompatibilität mit einer speziellen Soft- oder Hardware angewiesen sein Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 10

11 Barrierefreies HTML Allgemeines Doctype und Dokumentsprache richtig setzen (xml:lang="de") wichtige Infos in Meta Tags und Seitentitel Layout und Navigation Trennung von Inhalt und Design (durch CSS) beim Layout auf Tabellen verzichten, <div> Elemente verwenden! wenn doch Tabellen nötig, dann mit <th>-attribut beschreiben echte Überschriften (<h1>,<h2>) verwenden Navigation sollte auch ohne Javascript funktionieren Bilder, Grafiken und Multimedia-Inhalte so wenig wie möglich einsetzen! -> Für Sie akzeptabel? Inhalt immer im alt Attribut beschreiben Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 11

12 Barrierefreie RIAs Adobe Flex Beschriftung grafischer Elemente mit Informationsgehalt sinnvolle Tab Reihenfolge definieren! Audiodeskription für Multimediainhalte anbieten Microsoft Silverlight Tastaturkürzel, Alt Text und Bezeichnung von Elementen über AutomationProperties setzen auf veränderte Farbschema Einstellungen reagieren Zoom Funktionalität anbieten AJAX Regionen mit dem role Attribut beschreiben Tastaturnavigation durch setzen des tabindex Attributs Aktualisierbare Inhalte mit aria live markieren Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 12

13 Beispiele Barrierefreiheit im Web Webseiten der deutschen Lebenshilfe Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 13

14 Beispiele Barrierefreiheit im Web Webseiten der HTW Dresden Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 14

15 Usability Eine Person mit durchschnittlichen Fähigkeiten und Erfahrungen soll das Ding sei es eine Webseite, ein Kampfjet oder eine Drehtür in der beabsichtigten Weise benutzen können, ohne hoffnungslos frustriert zu werden. Steve Krug Übersetzung Brauchbarkeit, Bedienbarkeit, (Be-)Nutzbarkeit Bedeutung Beschreibt die Gebrauchstauglichkeit eines Produktes, bzw. die Benutzer- oder Benutzungsfreundlichkeit, d.h. die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einer Software oder einem System Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 15

16 Usability und Software Ergonomie Ziele der visuellen Gestaltung des User Interface ästhetische Ansprüche erfüllen Kommunikation optimieren positive Emotionen wecken Jenseits ästhetischer Betrachtungen ist ein gutes User Interface leicht zu bedienen leicht zu erlernen (bezieht sich auf längerfristige Nutzung) zufrieden stellend, motivierend (subjektive Eigenschaft) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 16

17 Usability Disziplinen Software-Ergonomie Anpassung der Technik an ihre Benutzer User Interface (Bedienoberfläche) wissenschaftliche Theorie Usability Engineering angewandte Wissenschaft von Software-Ergonomie Warum ist Software-Ergonomie heute so wichtig? PCs früher nur von Experten genutzt immer mehr Anwender und immer mehr neue Geräte und Techniken Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 17

18 Software-Ergonomische Gestaltungsrichtlinien Praktische Ergebnisse der Software-Ergonomie offizielle Normen und Standards -> ISO-Standards Industrierichtlinien -> IBM-PC oder Apple-Mac Empfehlungen von Designern -> z.b. Jacob Nielsen Ein Beispiel für software-ergonomische Standards: DIN EN ISO Standards DIN ISO 12119: Software Erzeugnisse Qualitätsanforderungen und Prüfbestimmungen DIN EN ISO 13407: Benutzerorientierte Gestaltung interaktiver Systeme DIN EN ISO 14915: Software-Ergonomie für Multimedia und Benutzungsschnittstellen DIN EN ISO 9241: Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 18

19 DIN EN ISO 9241 Norm Enthielt ursprünglich 17 Teile, wurde immer weiter ergänzt, inzwischen über 30 Teile! Grundsätze der Dialoggestaltung nach DIN EN ISO 9241 (Teil Ersetzte im Jahr 2006 Teil 10) 1. Aufgabenangemessenheit 2. Selbstbeschreibungsfähigkeit 3. Erwartungskonformität 4. Steuerbarkeit 5. Fehlertoleranz 6. Individualisierbarkeit 7. Lernförderlichkeit Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 19

20 DIN EN ISO 9241 Norm Grundsätze der Dialoggestaltung nach DIN EN ISO 9241 (Teil 12 Informationsdarstellung, Kap. 4, S. 9) 1. Klarheit 2. Unterscheidbarkeit 3. Kompaktheit 4. Konsistenz 5. Erkennbarkeit 6. Lesbarkeit 7. Verständlichkeit Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 20

21 Usability Engineering Usability Engineering Lifecycle Predesign Design Evaluation Methoden der Usability-Evaluation Nutzer orientierte Methoden (User Test) Inspektions- oder Experten orientierte Methoden Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 21

22 Nutzer orientierte Methoden Durchführung eines Nutzer Tests Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 22

23 Beispiel Nutzertest Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 23

24 Nutzer orientierte Methoden Durchführung eines Nutzer Tests Die Testumgebung (Usability Labor) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 24

25 Beispiel Usability-Labor Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 25

26 Nutzer orientierte Methoden Durchführung eines Nutzer Tests Die Testumgebung (Usability Labor) Vorteil: gute Ergebnisse durch wissenschaftliche Herangehensweise Nachteil: sterile, unnatürliche Umgebung Methoden der Datenerhebung Befragung (subjektive Daten) Beobachtung (objektive Daten) Lautes Denken und Fokusgruppen Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 26

27 Fragebogen-Beispiel: ISOmetrics Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 27

28 Beispiele Eye Tracking (früher) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 28

29 Beispiele Eye Tracking (heute) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 29

30 Beispiele Eye Tracking Deutsche Bank (Blickdichteverteilung) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 30

31 Beispiele Eye Tracking Deutsche Bank (Blickdichteverteilung) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 31

32 Beispiel Mouse Tracking Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 32

33 Die Grenzen von Nutzer-Tests künstliche Umgebung zeitliche Begrenzung Anzahl der Teilnehmer einmalige Nutzung Zeitpunkt der Evaluation Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 33

34 Inspektions- od. Experten orientierte Methoden Expert Review Usability-Analyse von Experten durchgeführt Guidelines Review Test mit Kriterienkatalogen Expert Walkthrough Usability-Experte führt typische Nutzeraufgaben durch Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 34

35 Die Evaluation Anzahl der Testpersonen bzw. Experten (nach Nielsen) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 35

36 Die Evaluation Preis-/Leistungsverhältnis von Nutzertests (nach Nielsen) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 36

37 Fazit Nutzer / Experten orientierte Methoden Beide Methoden sollten im Laufe des Usability Engineering Lifecycle kombiniert werden! Ein Usability-Test lohnt immer! Auch wenn er noch so klein ist -> Low Cost Usability Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 37

38 Low Cost Usability Jakob Nielsen -> "Discount-Usability" Vereinfachter Nutzertest 4-5 Tester Kein Labor Lautes Denken Heuristische Evaluation Prüfung anhand eines vereinfachten Kriterien- Katalogs Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 38

39 Literatur Jakob Nielsen stellt seine Erkenntnisse über Usability vor Außerdem können Sie von ihm z.b. lesen Nielsen, Jakob : Designing Web Usability. Indianapolis. New Riders, 2000 Sehr zu empfehlen ist folgendes Buch Krug, Steve: Don t make me think! Heidelberg. Redline, bzw. der neue Teil Krug, Steve: Web Usability: Rocket Surgery Made Easy. München. Addison-Wesley, Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 39

40 Vielen Dank für Ihre Aufmerksamkeit! Quellen: Alles von Jakob Nielsen und Steve Krug WCAG vom W3C BITV vom BGG Vorlesungsskripte aus dem Fach Medienpsychologie von Frau Prof. Merino (aktuell gelehrt im 3. Semester des Masterstudiengangs Angewandte Informationstechnologien an der HTW Dresden) Entwicklung webbasierter Anwendungen Dipl.-Inf. (FH) Robert Dominik Folie 40