Programmieren von Web Informationssystemen

Transkript

1 Programmieren von Webinformationssystemen Wolfgang Gassler Databases and Information Systems (DBIS) Institute of Computer Science University of Innsbruck dbis-informatik.uibk.ac.at 1

2 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

3 Bitte bedenken Sie, dass ihre Besucher mehr als 99% ihrer Zeit auf anderen Webseiten verbringen (Jacob Nielsen) 3

4 4

5 Anforderungen an eine Webseite 5

6 Human-Computer Interaction 6

7 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

8 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

9 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

10 Gedächtnis (2) Langzeitgedächtnis Unendliche Kapazität Verknüpfte Abspeicherung Schnelles Lesen, langsames Speichern 10

11 Wahrnehmung Beispiel 1 11

12 Wahrnehmung Beispiel 2 12

13 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

14 Was hat das mit Webseiten zu tun? 14

15 Gesetz der Prägnanz Gute Gestalt (=einfache Struktur) Prägnanztendenz (Merkmale, die sich abheben) KompressionsAlgorithmus 15

16 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

17 Gesetz der Nähe: Web-Beispiel 17

18 Gesetz der Geschlossenheit Geschlossene Formen werden als zussamengehörig wahrgenommen Zeitlich? Grundlage des Fenster (User Interface) Achtung: nicht überstrapazieren 18

19 Zu viele Boxen (Gesetz der Geschlossenheit) 19

20 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

21 Gesetz der Kontinuität Kontinuierliche Reize implizieren Zusammengehörigkeit Gesetz des glatten Verlaufs (keine plötzlichen Änderungen) Zeitlich? 21

22 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

23 Gesetz der gemeinsamen Bewegung Objekte mit gleicher Bewegung als Gruppe wahrgenommen Bewegung hat sehr starken Effekt (User Interfaces!) Im Web: <blink> tag 23

24 Bsp: Mikrowelle 24

25 Mikrowelle und das Web? 25

26 Zusammenfassung Wahrnehmung & Gedächtnis beachten! Gestaltgesetze der: Prägnanz Nähe Geschlossenheit Ähnlichkeit Kontinuität Erfahrung Gemeinsame Bewegung 26

27 Barrierefreiheit / Zugänglichkeit 27

28 Jeder ist behindert 28

29 Beispiel 8% Männer, 0.5% Frauen 29

30 Internetnutzung 30

31 Barrierefreiheit Definition Barrierefreie Angebote können von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt genutzt werden. 31

32 Eingabe 32

33 Ausgabe 33

34 Anwender Marco Mozilla Orri Virtuoso 34

35 Barrierefreie Lösungen Wir benötigen KEIN speziellen Lösungen für Personen mit spezielle Bedürfnissen! 35

36 Beispiel 36

37 Beispiel (2) 37

38 Beispiel Barrierefrei 38

39 Beispiel Responsive Web Design 39

40 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 ( 41

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

42 WCAG 2.0 Web Content Accessibility Guidelines W3C Richtlinie (dt. 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

43 WCAG Prinzipien Wahrnehmbar Bedienbar Verständlich Robust Jeweils mehrere Richtlinien Erfolgskriterien Techniken zur Umsetzung Verschiedene Stufen (A, AA, AAA) 44

44 Barrierefreiheit in der Wirtschaft? 45

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

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

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

48 4. Robust Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken 49

49 Web Standards 50

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

51 Dreifaltigkeit der Web Standards Struktur Präsentation z.b. HTML z.b. CSS Verhalten z.b. JavaScript 52

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

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) in Köln. <h1> Überschriften h1-5 Skiplinks: per css (top: -1000px), nicht display:none! und noch viele viele mehr... 54

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

55 Benötigt zwei Versionen der Webseite Webstandards Browser adaptiert Inhalt je nach Medium Screenreader, Lynx, PDA, Handy,... Trennung Struktur, Präsentation, Verhalten 56

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

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

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

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

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

61 Dreamweaver macht mir das Dreamweaver, Cynthia Says, Lift,... Können nur Hilfe bieten Ersetzen nicht menschliches Urteilsvermögen Bsp: 62

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

63 Zusammenfassung Barrierefreiheit & Webstandards Kostet nicht viel Bringt jedem Benutzer etwas WinWin Situation Wartbarkeit Ist Stand der Technik! Muss jeder Webentwickler beherrschen! 64