Usability - Kriterien f

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äsentation Fazit 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit Web-Anwendung
8
Baumstruktur (Beispiel)
Ziele der Gestaltung einer
Bestandteile 1.Content 2.Hypertext
3.Präsentation Fazit 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit Web-Anwendung
14
Präsentation(2)

• Aliasing Buchstaben werden als einzelne Pixel
  dargestellt gtTreppcheneffekt
• 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äsentation Fazit 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äsentation Fazit 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äsentation Fazit Web-Anwendung