1 / 16

Usability - Kriterien für Web -Anwendungen

Usability - Kriterien für Web -Anwendungen. Oxana Paul. 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.

clare-davis
Download Presentation

Usability - Kriterien für Web -Anwendungen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related