Programmieren von Webinformationssystemen Wolfgang Gassler Databases and Information Systems (DBIS) Institute of Computer Science University of Innsbruck dbis-informatik.uibk.ac.at 1
Web (App) Usability Human Computer Interaction (HCI) Grundlagen* Zugänglichkeit / Barrierefreiheit Usability im Web und Web-Apps *Folien basieren teilweise auf Designing Interactive Systems, Prof. Jan Borchers, RWTH Aachen 2
Bitte bedenken Sie, dass ihre Besucher mehr als 99% ihrer Zeit auf anderen Webseiten verbringen (Jacob Nielsen) 3
4
Anforderungen an eine Webseite 5
Human-Computer Interaction 6
Human Processor Model Stuart Card, Tom Moran, Alan Newell (1983) Wahrnehmung Speicher Motorische Systeme Ausführungszeit Fehlerraten Trainings-Effekte für Eingabe/Ausgabe- Aktionen 7
Wahrnehmung Auge Augen-Sakkaden 230 ms, 13 Buchstaben / Sakkade (max 652 Wörter/Min.) Luat eienr Stduie der Cambrdige Unievrstiät speilt es kenie Rlloe in welcehr Reiehnfogle die Buhcstbaen in eniem Wrot vorkmomen, die eingzie whctige Sahce ist, dsas der ertse und der lettze Buhcstbaen stmimt. Der Rset knan in eienm völilegen Duchrienanedr sein und knan trtozedm prboelmols gelseen wreden. Wahrnehmung Sensorsignale Übertragung in Speicher Verarbeitung in 100ms 8
Gedächtnis Speicherung in Einheiten (Chunks) Arbeitsgedächtnis 7 +/- 2 Einheiten Halbwertszeit 1 Einheit -> 73 Sekunden 3 Einheiten -> 7 Sekunden Audio, Visuelle, Räumliche Speicherung 9
Gedächtnis (2) Langzeitgedächtnis Unendliche Kapazität Verknüpfte Abspeicherung Schnelles Lesen, langsames Speichern 10
Wahrnehmung Beispiel 1 11
Wahrnehmung Beispiel 2 12
Gestaltpsychologie Max Wertheimer, Wolfgang Köhler, Kurt Koffka Anfang 20. Jahrhundert Berliner Schule Über 100 Gestalt Gesetze Was wird von Menschen als zusammengehörig wahrgenommen? Gruppieren Zusammenfassen Abstrahieren 13
Was hat das mit Webseiten zu tun? 14
Gesetz der Prägnanz Gute Gestalt (=einfache Struktur) Prägnanztendenz (Merkmale, die sich abheben) KompressionsAlgorithmus 15
Gesetz der Nähe Objekte mir geringem Abstand (auch zeitlich!) werden als Gruppe wahrgenommen Großer Vorteil für Design/Usability: Keine Boxen, Linien nötig Keep it simple! 16
Gesetz der Nähe: Web-Beispiel 17
Gesetz der Geschlossenheit Geschlossene Formen werden als zussamengehörig wahrgenommen Zeitlich? Grundlage des Fenster (User Interface) Achtung: nicht überstrapazieren 18
Zu viele Boxen (Gesetz der Geschlossenheit) 19
Gesetz der Ähnlichkeit Ähnliche Formen werden als zusammengehörig wahrgenommen Zeitlich? Unterschiedliche Formen benötigen mehr Wahrnehmungs-Aufwand Vorteil Nachteil Ähnlichkeit relativ zur Umgebung Regelmäßigkeit Schwungvolle Kurve 20
Gesetz der Kontinuität Kontinuierliche Reize implizieren Zusammengehörigkeit Gesetz des glatten Verlaufs (keine plötzlichen Änderungen) Zeitlich? 21
Gesetz der Erfahrung Einordnung in bekannte Kategorien, Formen Anwendung bestehendem Wissen vermindert Lernaufwand Grundlage der Computer -Interaktion (Metaphoren) Analogie zur realen Welt z.b. Arbeitsplatz, Papierkorb 22
Gesetz der gemeinsamen Bewegung Objekte mit gleicher Bewegung als Gruppe wahrgenommen Bewegung hat sehr starken Effekt (User Interfaces!) Im Web: <blink> tag 23
Bsp: Mikrowelle 24
Mikrowelle und das Web? 25
Zusammenfassung Wahrnehmung & Gedächtnis beachten! Gestaltgesetze der: Prägnanz Nähe Geschlossenheit Ähnlichkeit Kontinuität Erfahrung Gemeinsame Bewegung 26
Barrierefreiheit / Zugänglichkeit 27
Jeder ist behindert 28
Beispiel 8% Männer, 0.5% Frauen 29
Internetnutzung 30
Barrierefreiheit Definition Barrierefreie Angebote können von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt genutzt werden. 31
Eingabe 32
Ausgabe 33
Anwender Marco Zehe @ Mozilla Orri Erling @ Virtuoso 34
Barrierefreie Lösungen Wir benötigen KEIN speziellen Lösungen für Personen mit spezielle Bedürfnissen! 35
Beispiel 36
Beispiel (2) 37
Beispiel Barrierefrei www.hauptbahnhof-wien.at 38
Beispiel Responsive Web Design http://2012.newadventuresconf.com/ 39
Rechtliche Rahmenbedingungen Österreich Diskriminierungsverbot für behinderte Menschen, und eine Staatszielbestimmung, die den Gesetzgebers zur aktiven Verwirklichung einer faktischen Gleichstellung verpflichtet Im Internet-Bereich wurden auf dem Weg zur optimalen Zugänglichkeit bereits viele Etappen zurückgelegt. Das Bundeskanzleramt orientiert sich dabei an den Richtlinien WCAG 2.0 des WAI / W3C. Quelle (http://www.bka.gv.at/site/7482/default.aspx) 41
Achtung: WCAG 1.0 Techniken und Richtlinien vermischt nicht mehr zeitgemäß z.b. Javascript = Böse (Meinung 1999) Teilweise ungenau definiert Teilweise viel zu genau und unflexibel definiert Nur sehr schwer testbar 42
WCAG 2.0 Web Content Accessibility Guidelines W3C Richtlinie (dt. http://www.w3.org/translations/wcag20-de/) Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 decken einen großen Bereich von Empfehlungen ab, um Webinhalte barrierefreier zu machen. Wenn Sie diesen Richtlinien folgen, dann werden Inhalte für eine größere Gruppe von Menschen mit Behinderungen barrierefrei sein. Dies beinhaltet Blindheit und Sehbehinderung, Gehörlosigkeit und nachlassendes Hörvermögen, Lernbehinderungen, kognitive Einschränkungen, eingeschränkte Bewegungsfähigkeit, Sprachbehinderungen, Photosensibilität und Kombinationen aus diesen Behinderungen. Darüber hinaus wird das Befolgen dieser Richtlinien Ihre Webinhalte in vielen Fällen für Nutzer im Allgemeinen benutzbarer machen. 43
WCAG 2.0 - Prinzipien Wahrnehmbar Bedienbar Verständlich Robust Jeweils mehrere Richtlinien Erfolgskriterien Techniken zur Umsetzung Verschiedene Stufen (A, AA, AAA) 44
Barrierefreiheit in der Wirtschaft? 45
1. Wahrnehmbar Textalternativen für alle Nicht-Text-Inhalte Alternativen für zeit-basierteasierte Medien Inhalt muss auf versch. Arten dargestellt werden können, ohne die Struktur zu verändern Erleichterung für Benutzer, Inhalte zu sehen und hören 46
2. Bedienbar Alle Funktionen per Tastatur ansprechbar Ausreichend Zeit, Inhalte zu lesen + benutzen Keine Verwendung von Techniken, die zu Anfällen führen Unterstützung des Benutzers durch zusätzliche Möglichkeiten: zu navigieren, Inhalte zu finden 47
3. Verständlich Textinhalte lesbar und verständlich Webseiten sollen vorhersehbar aussehen und funktionieren Benutzern helfen, Fehler zu vermeiden und korrigieren Reversibel Geprüft Bestätigt 48
4. Robust Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken 49
Web Standards 50
Vorteile Web Standards Aufwärtskompatibilität (zukünftige Browser) Ein Dokument für alle Wartbarkeit (Zeit!) Kosten Reichweite Zukunft gesichert WHATWG & W3C? Web Hypertext Application Technology Working Group Apple, Mozilla und Opera 51
Dreifaltigkeit der Web Standards Struktur Präsentation z.b. HTML z.b. CSS Verhalten z.b. JavaScript 52
Progressive Enhancement Gegenteil zum üblichen Prozess: graceful degradation würdevolle Herabstufung Progressive Verbesserung Mit Struktur starten Schrittweise Präsentation (CSS) darüberlegen Schrittweise Verhalten (JavaScript) einbauen 53
Wichtige HTML Elemente alt vs. title label role (landmarks) aria-xxxx (Accessible Rich Internet Applications) describedby, labelledby, haspopup,... "HTML5 und WAI-ARIA, richtig modern barrierefrei entwickeln" (Marco Zehe) 03.12.2011 in Köln. http://www.youtube.com/watch?v=ozid4gbg8uk <h1> Überschriften h1-5 Skiplinks: per css (top: -1000px), nicht display:none! und noch viele viele mehr... 54
Mythen zu Barrierefreiheit Es wird leider immer noch behauptet... Benötigt zwei Versionen der Webseite Barrierefrei = Textversion der Seite Kostet viel Erzwingt primitive, unschöne Designs Seiten müssen überall gleich aussehen Barrierefreiheit ist nur für behinderte Menschen Dreamweaver macht mir das Mein Kunde braucht das nicht 55
Benötigt zwei Versionen der Webseite Webstandards Browser adaptiert Inhalt je nach Medium Screenreader, Lynx, PDA, Handy,... Trennung Struktur, Präsentation, Verhalten 56
Textversion heißt Zugang für alle Zusätzliche Textversion!= Barrierefreiheit Verschiedene Einschränkung der Besucher Motorisch Farbschwäche Kognitive Schwäche Ein motorisch eingeschränkter Besucher kann Bilder sehen 57
Barrierefreiheit kosten sehr viel Kosten für alt-tags und Skiplinks? Meiste WCAG 2.0 Richtlinien benötigen nur minimalen Zeitaufwand Multimediale Inhalte Sogar Untertitel benötigen nur wenig Zeit 58
Erzwingt primitive, unschöne Designs Barrierefreiheit erlaubt alle Techniken Bilder Tabellen CSS JavaScript Server-seitige Scripts (PHP, ASP,...) Barrierefreiheit arbeitet im Hintergrund (Struktur) und schränkt Präsentation nicht ein 59
Seiten müssen überall gleich aussehen Inhalte können und müssen nicht überall gleich aussehen Präsentation soll vom Browser / Endgerät bestimmt werden Alte Schule: Webseite überall gleich Schriften Pixel-Horror Runde Ecken 60
Barrierefreiheit ist bloß für behinderte Menschen Der blinde Milliardär Google ist der größte blinde Anwender im Netz Personen auf alternativen Endgeräten (Handy,...) Personen mit leichter Einschränkung 61
Dreamweaver macht mir das Dreamweaver, Cynthia Says, Lift,... Können nur Hilfe bieten Ersetzen nicht menschliches Urteilsvermögen Bsp: www.contentquality.com 62
Testen? Browser CSS abschalten Javascript abschalten Nur Tastatur verwenden (auf Fokus achten) Screenreader oder blinde Personen Zahlreiche Online Tools Können nur technische Überprüfungen durchführen! 63
Zusammenfassung Barrierefreiheit & Webstandards Kostet nicht viel Bringt jedem Benutzer etwas WinWin Situation Wartbarkeit Ist Stand der Technik! Muss jeder Webentwickler beherrschen! 64