Programmieren von Web Informationssystemen

Transkript

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

2 Usability (Teil 1) 2

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 3

4 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

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

6 6

7 Anforderungen an eine Webseite 7

8 Human-Computer Interaction 8

9 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

10 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

11 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

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

13 Wahrnehmung Beispiel 1 13

14 Wahrnehmung Beispiel 2 14

15 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

16 Was hat das mit Webseiten zu tun? 16

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

18 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

19 Gesetz der Nähe: Web-Beispiel 19

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

21 Zu viele Boxen (Gesetz der Geschlossenheit) 21

22 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

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

24 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

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

26 Bsp: Mikrowelle 26

27 Mikrowelle und das Web? 27

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