Programmieren von Webinformationssystemen

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 2

3 I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone. (Bjarne Stroustrup) 3

4 Gutes Design / Sichtbarkeit Menschliches Versagen Sehr oft schlechtes Design / Usability Computer / Webseiten haben ähnliche Probleme, wie Dinge im Alltag Gehirn versucht zu verstehen, sucht Erklärungen, interpretiert Hinweise Wissen liegt oft nicht im Gedächtnis, sondern in der Welt Sichtbarkeit ist wichtiger Aspekt im Design Klare Hinweise ohne Nachzudenken Keep it simple (nur das Wichtigste ist sichtbar) 4

5 Sichtbarkeit - Beispiel 5

6 Affordance (Aufforderungscharakter) Gibson affordances of the environment are what it offers the animal... Donald Norman 1988 Wahrgenommenen Eigenschaften von Dingen/Objekten und wie diese daraus resultierend verwendet werden können Aktionen, die mit einem Objekt/Ding möglich sind und dem Benutzer suggeriert werden... 6

7 Affordance (Aufforderungscharakter) (2) Affordances geben Hinweise zur Verwendung Kein Anleitung, Beschriftungen nötig Design mit Anleitungen ist oft schlechtes Design Gilt auch für Computer, Web-Seiten Ausnahme: Komplexe Funktionen, die nicht durch einfache Hinweise beschrieben werden können Usability wird durch Affordances stark verbessert Keep it simple Verwendung ist sofort klar 7

8 Beispiel: Stirnlampe 8

9 Beispiel: Headset 9

10 Gutes Design Sichtbarkeit Gutes Konzept Konsistenz Gutes natürliches Mapping Zwischen Aktionen und Ergebnis Steuerung und deren Ergebnis Status des Systems und dessen Sichtbarkeit Gutes Feedback Aktionen, Ergebnisse, Ereignisse, laufende Prozesse, aktueller Status 10

11 Mappings Verbindet User Interface mit realen Welt Ein und Ausgabe 11

12 Gute Mappings Mappings sollten natürlich sein Physikalische Ähnlichkeit Kulturelle Standards Vorteile Sofort verständlich Einfach zu merken Erhöht Bedienkomfort 12

13 Räumliche Ähnlichkeit Wichtigste Form des Mappings Steuerung einer Autohebebühne? 13

14 Räumliche Ähnlichkeit (2) Steuerung in der gleichen Anordnung wie reale Elemente Raumbeleuchtung Lenkrad Autoradio Steuerung Vorne/Hinten? 14

15 Beispiel: Klinikgebäude Heidelberg 15

16 Beispiel: Herd 16

17 Biologische/Kulturelle Übereinstimmung Beispiel Level Steigend -> Mehr Fallend -> Weniger Anwendung Eindimensional (Lautstärke, Wasserstand, Temperatur, Dicke, Gewicht,...) Nich anwendbar bei Farbe Töne Geschmack (Empfindungen) Örtlichkeit 17

18 Biologische/Kulturelle Übereinstimmung (2) Ordnung von Oben nach Unten von Links nach Rechts? 18

19 Wahrnehmungs-Ähnlichkeit Steuerung / Eingabe ist Modell Das Voodoo Prinzip 19

20 Wahrnehmungs-Ähnlichkeit (2) 20

21 Beschränkungen Gegenteil von Erwartbarkeit / Affordances Beschränken wie ein Objekt verwendet werden kann Vorteil Verhindern Fehler Keine Anleitung nötig / weniger zu merken Beschränkungsarten Physikalisch Semantisch (Bedeutung) Kulturell Logisch 21

22 Zusammenfassung Affordances Mappings Aktionen aus realer Welt übertragbar Affordances Anleitungen / Hinweise nicht mehr nötig Beschränkungen Unterstützen Affordances Verhindern Fehler 22

23 6 Regeln für ein gutes Web-Interface Direkte Bedienung Leichtgewichtigkeit Auf der Seite bleiben Affordances / Hinweise Übergänge / Transitions Reaktion und Feedback 23

24 Direkte Bedienung In-Page Editierung Drag & Drop Direkte Auswahl / Objekte angreifen Feedback / Hinweise Was für Aktionen sind möglich Wo befindet sich Objekt (Drag & Drop) In welchen Zustand befindet sich Objekt 24

25 Leichtgewichtigkeit An den Kontext angepasst Immer sichtbar Hover sichtbar Toogle sichtbar Submenü Oberfläche nicht überladen Wichtige Tools immer sichtbar Seltene verbergen / Kontext 25

26 Auf der Seite bleiben Overlays Inlays Virtuelle Seiten Prozess Workflow Change Blindness beachten Fokus bleibt erhalten Leichtgewichtigkeit Details einblenden wenn nötig 26

27 Affordances / Hinweise Statische Hinweise Immer sichtbar Dynamische Hinweise Hover Affordance Drag & Drop Während Interaktion Mehr Hinweis (Virtuelle Seiten) Vorteile siehe Affordances 27

28 Übergänge / Transitions Verbreitete Transitions Highlight / Dimmen (Lightbox Effekt bei Bilder) Auf / Zuklappen (z.b. Dynamisches Menü) Self-Healing Fade (z.b. Löschen in Liste) Animation Vorteile Feedback / Change Blindness Fokus (Aufmerksamkeit) Achtung: Benötigen Zeit, können ruckeln, 28

29 Reaktion und Feedback Aktion während Tippen (Live Suche, Vorschläge,...) Feedback Aktions-Vorschau (Benutzer vor Fehlern bewahren) Progressive Hinweise (Hinweise nur wenn nötig) Fortschrittsindikatoren (z.b. Ladebalken) 29

30 Reaktion und Feedback (2) Grundregeln für Feedback Was passiert gerade? Was wird passieren? Was ist gerade passiert? Wo bin ich? 30

31 Zusammenfassung Direkte Bedienung keine Umwege, direkt am Objekt arbeiten Leichtgewichtigkeit Keep it simple, nur Anzeigen was im Moment/Kontext nötig Auf der Seite bleiben Affordances / Hinweise Benutzer helfen, Hinweise zu möglichen Aktionen geben Übergänge / Transitions Benutzer Hinweise geben, Anzeigen was gerade passiert Reaktion und Feedback 31 Was, Warum, Wie und überhaupt? Und das zu jeder Zeit!

32 Beispiele Amazon Flickr Google (Mail) Yahoo! Twitter Facebook 32

33 Bücher Designing Web Navigation ( ) Designing Web Interfaces ( ) Design of Everyday Things ( ) Human Computer Interaction ( ) 33

34 Zusammenfassung Keep it simple Testen, Testen, Testen Gestalt Gesetze, Affordances, Mappings Keep it simple Testen, Testen, Testen Barrierefreiheit & Webstandards Keep it simple Testen, Testen, Testen 34