Usability Diplomarbeit

“Ein Bild sagt mehr als 1.000 Worte”.

Dieses Sprichwort gilt auch im WWW. Doch aufgrund des Ladezeitproblems ist Vorsicht bei der Verwendung von Grafiken und Fotos geboten. Die verwendeten Grafiken sollten eine kommunikative Funktion haben und nicht nur Dekoration oder Platzverschwender sein. Die Tatsache, dass User im WWW den Inhalt scannen, kann eine klare Bild-Text-Sprache den Inhalt unterstützen. Zusätzlich ist darauf zu achten, dass Bild und Text immer in Beziehung zueinander stehen und einander ergänzen.

Dabei ist auch auf eine rhythmische Gestaltung zu achten: Texte und Bilder sollten so angeordnet sein, dass die freien und die bedeckten Flächen von unterschiedlicher Proportion und Größe sind. Somit wird eine visuelle Spannung erzeugt.

Zudem sollte die Funktion der einzelnen Grafik unmittelbar erkennbar sein: Ist diese nur Dekoration, Illustration oder Navigationselement? Dazu gehört auch eine adäquate Erläuterung oder Bildunterschrift.
Fotos können den User aktiv unterstützen: Auf einer Produktseite sollte stets ein Bild des Produktes erscheinen. Falls nur ein kleines Bild (Thumbnail) angezeigt wird, so sollte ein Link zu größeren Fotos erkennbar sein, da der User bei echtem Interesse gerne Fotos mit näheren Details zur Kaufentscheidung heranziehen würde.

Im oben besprochenen Konfigurator von Volkswagen erscheint bei der Auswahl der Außenlackierung automatisch eine Ansicht des Wagens, die den Benutzer animiert, verschiedene Farben auszuprobieren. Dies ist eine sinnvolle Anwendung von Fotos, allerdings wären hier zusätzlich Rundumsichten des Fahrzeuges denkbar und wünschenswert.
Bilder ziehen allgemein mehr Aufmerksamkeit auf sich als reiner Text und werden müheloser entschlüsselt. Ebenso ist die Gedächtnisleistung für Bildmaterial wesentlich besser, was die Orientierung innerhalb komplexer Websites vereinfachen kann. Markante Bilder können somit als Bookmark in der mentalen Landkarte abgespeichert werden, die die Benutzer während des Besuchs aufbauen. Somit können die Benutzer schon besuchte Seiten leichter wiedererkennen. Dies kann z.B. durch Gesichter oder andere Fotos geschehen.

Aus technischer Sicht sind bei der Verwendung von Grafiken und Fotos einige spezielle Tatsachen zu berücksichtigen.
Da Text vor Grafik geladen wird, ist bei der Einbettung von Grafiken in die HTML-Seite darauf zu achten, die Angabe der Höhe und Breite der entsprechenden Grafik mit anzugeben. Der Browser weiß somit, welche Dimensionen die Grafik hat und kann den Text ohne ruckeln auf der Seite darstellen. Der User kann sich somit schnellstmöglich eine Übersicht über die Seite verschaffen. Allerdings ist hier die Originalgröße der Grafik anzugeben um ein Zoomen zu verhindern. In diesem Fall wird die Grafik entweder zu groß angezeigt, was zu einer qualitativ schlechten Darstellung führt oder zu klein, was unnötige Ladezeit nach sich zieht.
Für bestimmte Nutzergruppen, wie Sehbehinderte oder User, die die Grafikdarstellung im Browser deaktiviert haben, ist es nützlich, Grafiken mit einem alternativen Text zu versehen. Dies ist der gelbe Text, der bei Mausberührung über dem Objekt angezeigt wird oder bei einer nicht geladenen Grafik an dessen Stelle erscheint. Sehbehinderte Surfer, die sich den Inhalt von einem Scanner vorlesen lassen, können so bei einem geeigneten Text die Grafik wahrnehmen.
Somit sieht ein optimaler HTML-Code für die Einbettung eines Bildes folgendermaßen aus:

<img src=”augsburg.jpg” width=”300″ height=”100″ alt= “Fotovon Augsburg”>< /EM> < /STRONG>

Bei der Aufbereitung von Grafiken und Fotos für das Web ist es nötig qualitativ hochwertige Grafiken bei geringen Ladezeiten zu entwerfen.
Obwohl den Internetnutzern immer schnellere Downloadgeschwindigkeiten zur Verfügung stehen, sollte auf eine sehr gute Dateigrößenoptimierung der Grafiken und Fotos Wert gelegt werden. Sind mehrere Grafiken auf einer Seite herunterzuladen, so schwillt die herunter zu ladende Dateimenge schnell an.

Zwei Grafiktypen werden für das Web benutzt:

Bitmap- und Vektorgrafiken.
Vektorgrafiken sind z.B. Flashgrafiken und bestehen aus Flächen, welche durch Ausdehnung in die entsprechenden Größen skaliert werden. Diese Grafiken werden in mathematischen Werten (Vektoren) angegeben, dadurch sind deren Dateien kleiner als die optisch gleichgroßen Bitmapgrafiken.
Gif und Jpg Grafiken sind die gebräuchlichsten Bitmapgrafiken fürs Web. Im Gegensatz zu den Vektorgrafiken setzen sich Bitmapgrafiken aus einzelnen Pixeln zusammen, was sichtbar wird, wenn die Grafik vergrößert wird.
Jpg-Grafiken sind aufgrund der großen Farbtiefe von bis zu 16,7 Mio Farben (24 bit) besonders für Fotos geeignet. Somit sind auch komplexe Farbübergänge wie z.B. ein Sonnenaufgang optimal darzustellen.
Gif-Grafiken können dagegen nur 256 Farben (8 bit) darstellen und eignen sich nicht für Fotodarstellungen. Dieses Dateiformat ist am geeignetsten für Strichzeichnungen und Bilder, die nur geringe Farbtiefen aufweisen sowie viel gleichfarbige Flächen enthalten. Einige Besonderheiten machen dieses Dateiformat besonders geeignet für das Web. Es kann Interlaced abgespeichert werden, so dass während des Ladens das komplette Bild in einer niedrigen Auflösung gezeigt und nach und nach vollständig geladen wird. Der User meint dadurch, dass das Bild schneller lädt als eine non-interlaced Grafik. Vom Dateiumfang ist allerdings kein Größenunterschied erkennbar.
Des Weiteren kann eine transparente Farbe in einer Gif-Grafik definiert werden, was sich vor allem für Logos und Navigationselemente anbietet.
Ebenfalls sind animierte Grafiken möglich. Dies soll im Folgenden näher erläutert werden.