Programmieren von Webinformationssystemen

Größe: px

Ab Seite anzeigen:

Download "Programmieren von Webinformationssystemen"

Insa Gerber
vor 8 Jahren
Abrufe

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 3

4 Human-Computer Interaction 4

5 Human Processor Model Stuart Card, Tom Moran, Alan Newell (1983) Wahrnehmung Speicher Motorische Systeme Ausführungszeit Fehlerraten Trainings-Effekte für Eingabe/Ausgabe- Aktionen 5

6 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 6

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

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

9 Wahrnehmung Beispiel 1 9

10 Wahrnehmung Beispiel 2 10

11 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 11

12 Was hat das mit Webseiten zu tun? 12

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

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

15 Gesetz der Nähe: Web-Beispiel 15

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

17 Zu viele Boxen (Gesetz der Geschlossenheit) 17

18 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 18

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

20 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 20

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

22 Bsp: Mikrowelle 22

23 Mikrowelle und das Web? 23

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

25 Barrierefreiheit / Zugänglichkeit 25

26 Jeder ist behindert 26

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

28 Internetnutzung 28

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

30 Eingabe 30

31 Ausgabe 31

32 Anwender Marco Mozilla Orri Virtuoso 32

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

34 Beispiel 34

35 Beispiel (2) 35

36 Beispiel 36

37 Microformats: Statistik 37 Quelle:

38 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 ( 38

39 Nachteile 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 39

40 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. 40

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

42 Barrierefreiheit in der Wirtschaft? 42

43 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 43

44 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 44

45 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 45

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

47 Web Standards 47

48 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 48

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

50 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 50

51 Wichtige HTML Elemente alt vs. title label role (landmarks) aria-xxxx describedby labelledby haspopup... <h1> Überschriften h1-5 Skiplinks: per css (top: -1000px), nicht display:none! 51

52 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 52

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

54 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 54

55 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 55

56 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 56

57 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 57

58 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 58

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

60 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! 60

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

Ähnliche Dokumente

Programmieren von Web Informationssystemen

Programmieren von Web Informationssystemen Programmieren von Webinformationssystemen Nikolaus Krismer Databases and Information Systems (DBIS) Institute of Computer Science University of Innsbruck dbis-informatik.uibk.ac.at 1 Usability (Teil 1)