Usability - Kriterien für Web -Anwendungen

1. Usability - Kriterien für Web -Anwendungen Oxana Paul

2. Motivation • Web-Usabillity ist ein Begriff, bei dem es sich um die ergonomische Gestaltung von Web-Anwendungen handelt. • Ziel des Betreibers: dem Nutzer bestmögliche Funktionalität und Präsentation zu bieten. Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

3. Gebrauchstauglichkeit • Effektivität: Erreicht der Benutzer einer Web-Anwendung seine Ziele? • Effizienz: Wie hoch ist der Aufwand zur Erreichung des Ziels? • Zufriedenheit: Mag der Benutzer die Web-Anwendung? Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

4. Bestandteile einer Web-Anwendung • Content (Inhalt) Inhalte, die eine Web-Anwendung zur Verfügung stellt. • Hypertext(Navigationsstrukturen) Wo bin ich? Woher komme ich? Wohin will ich gehen? • Präsentation (Benutzungsschnittstelle) Benutzerfreundliche Darstellung der Web-Anwendung am Bildschirm Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

5. Hypertext (Navigation) • Wo bin ich? • Zumindest ein gut platzierter Titel sollte dem Benutzer mitteilen wo er sich gerade befindet • Woher komme ich? • Hierbei hilft meistens der Browser mit der „Zurück“ Schaltfläche • Wohin will ich gehen? • Kinderknoten vorführen • Navigationsstrukturen: • Lineare Struktur • Hierarchische Struktur • Netzwerkstruktur • Gitterstruktur Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

6. Lineare Struktur • Ähnelt einem Zug • Beispiel: diverse Tutorials • Nachteil: wer in den Mittelteil springen will, muss sich erst durch vorgehenden Seiten kämpfen. Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

7. Hierarchische Struktur (Baumstruktur) • von einer Startseite gelangt der Surfer zu verschiedenen Unterseiten • Surfer muss wissen, auf welcher Ebene er sich befindet. • Möglichkeiten haben auf- bzw. abzusteigen. • Beispiel: Yahoo - und Uni-Seiten Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

8. Baumstruktur (Beispiel) Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

9. Netzwerkstruktur • Diese Strukturen sind ungeordnet • Problem: durch Unordnung kann Chaos entstehen • Beispiel: das WWW selbst. Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

10. Gitterstruktur • Bringt zwei Variablen in Zusammenhang • Beispiel: • Universitäten: Fakultäten/Forschung, Lehre, Skripte, Kurse • Voraussetzungen: • Alle Variablen sind gleich wichtig • Visualisierung der Zusammenhänge Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

11. Komplexitätsgrad der Strukturen • Von einfach bis komplex: Linear Gitter Hierarchie Netzwerk Je höher der Komplexitätsgrad der Struktur desto: - komplexere Inhalte können vermittelt werden - komplexer wird die Anwendung - flexibler ist die Struktur • In Wirklichkeit wird eine größere Site sich mehrerer Strukturen gleichzeitig bedienen. Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

12. Präsentation (Übersicht) • Schriftarten • Welche Schriftarten sind für das Lesen am Bildschirm besser geeignet? • Anti-Aliasing • Farben • Welche Farben sind besser für Hintergrund als für die Schrift geeignet? • Struktur • Verschiedene Gliederungsarten der Elemente für die bessere Klarheit Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

13. Präsentation • Keine Blockbuchstaben:Mensch ließt Wörter als ganzes und orientiert sich dabei an der äußeren Form der Wörter • Schriftarten:Bildschirmschriften sind schlechter zu lesen • Generell:Serifen erhöhen die Lesbarkeit im Print, reduzieren sie aber am Bildschirm Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

14. Präsentation(2) • Aliasing: Buchstaben werden als einzelne Pixel dargestellt =>Treppcheneffekt • Anti-Aliasing schaltet dieses Effekt aus. • Farben: verschiedene Farben eignen sich besser oder schlechter für die Schrift Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

15. Bildschirmmaskengestaltung(4) • Strukturiertheit und Klarheit: • Optische Gliederungen ausdrücken durch Schriftgrößen • Bezüge durch Positionierung oder Verschachtelung • Optische Gliederung zur Erklärung der Seite Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung

16. Fazit • Navigation • Angepasst an die Ziele und Erwartungen des Nutzers • Dem Nutzer bei der Navigation alternative Wege bieten • Intuitiv funktionierende Navigation • Konsistenz • Präsentation • Keine Blockbuchstaben • Keine Serifen • Elemente optisch gliedern • Thematisch zusammengehörige Bereiche zusammenfassen Ziele der Gestaltung einer Bestandteile: 1.Content 2.Hypertext 3.PräsentationFazit Web-Anwendung