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) 2
Web (App) Usability Teil 1: Human Computer Interaction (HCI) Grundlagen* Teil2: Usability im Web und Web-Apps *Folien basieren teilweise auf Designing Interactive Systems, Prof. Jan Borchers, RWTH Aachen 3
Web (App) Usability Teil 1: Human Computer Interaction (HCI) Grundlagen* Teil2: Usability im Web und Web-Apps *Folien basieren teilweise auf Designing Interactive Systems, Prof. Jan Borchers, RWTH Aachen 4
Bitte bedenken Sie, dass ihre Besucher mehr als 99% ihrer Zeit auf anderen Webseiten verbringen (Jacob Nielsen) 5
6
Anforderungen an eine Webseite 7
Human-Computer Interaction 8
Human Processor Model Stuart Card, Tom Moran, Alan Newell (1983) Wahrnehmung Speicher Motorische Systeme Ausführungszeit Fehlerraten Trainings-Effekte für Eingabe/Ausgabe- Aktionen 9
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 10
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 11
Gedächtnis (2) Langzeitgedächtnis Unendliche Kapazität Verknüpfte Abspeicherung Schnelles Lesen, langsames Speichern 12
Wahrnehmung Beispiel 1 13
Wahrnehmung Beispiel 2 14
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 15
Was hat das mit Webseiten zu tun? 16
Gesetz der Prägnanz Gute Gestalt (=einfache Struktur) Prägnanztendenz (Merkmale, die sich abheben) KompressionsAlgorithmus 17
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! 18
Gesetz der Nähe: Web-Beispiel 19
Gesetz der Geschlossenheit Geschlossene Formen werden als zusammengehörig wahrgenommen Zeitlich? Grundlage des Fenster (User Interface) Achtung: nicht überstrapazieren 20
Zu viele Boxen (Gesetz der Geschlossenheit) 21
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 22
Gesetz der Kontinuität Kontinuierliche Reize implizieren Zusammengehörigkeit Gesetz des glatten Verlaufs (keine plötzlichen Änderungen) Zeitlich? 23
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 24
Gesetz der gemeinsamen Bewegung Objekte mit gleicher Bewegung als Gruppe wahrgenommen Bewegung hat sehr starken Effekt (User Interfaces!) Im Web: <blink> tag 25
Bsp: Mikrowelle 26
Mikrowelle und das Web? 27
Zusammenfassung Wahrnehmung & Gedächtnis beachten! Gestaltgesetze der: Prägnanz Nähe Geschlossenheit Ähnlichkeit Kontinuität Erfahrung Gemeinsame Bewegung 28