ergo online
Arbeit im Büro gesund gestalten

Expertenwissen
Grafiken & Multimedia

Autor: Lothar Bräutigam

Übersicht

  • Grafiken und Bilder können schneller erfaßt werden und sind einprägsamer als Text.
  • Zu viele und zu aufwendige Grafiken führen zu langen Wartezeiten.
  • Grafiken müssen zu möglichst geringer Speichergröße komprimiert werden.
  • Sie sollten sparsam und mehrfach verwendet werden.

Bilder können ergonomisch sinnvoll sein   

Auf vielen Webseiten finden sich oft viele aufwendige Grafiken, teilweise mit integrierten Hyperlinks. Das hat einen guten Grund: "ein Bild sagt mehr als tausend Worte". Dies gilt auch in der Software-Ergonomie, da Bilder schneller wahrgenommen werden und einprägsamer sind als Text. "Bleiwüsten", die nur aus optisch monotonemText bestehen, strengen das Auge besonders an und führen zur vorzeitigen Ermüdung.

Oft zu lange Wartezeiten

Damit sind aber auch Nachteile verbunden. Zu viele Bilder und zu aufwendige Bilder (d.h. zu große Bilddateien) haben lange Wartezeiten zur Folge. Kurze Antwortzeiten sind aber auch eine software-ergonomische Anforderung. Ab einer Antwortzeit von 2 bis 4 Sekunden fühlen sich Anwender in Ihrem Arbeitsablauf gestört. Und das hat auch seine Auswirkungen auf die Arbeitsproduktivität.

Natürlich hängt dies von der zur Verfügung stehenden Bandbreite ab, und die wird beständig ausgebaut. Nur steht nicht allen Nutzern ein gleich schneller Internet-Zugang zur Verfügung. 64 kBit/s sind derzeit noch als schnelle Verbindung anzusehen. Daran ist die Größe von Bilddateien auszurichten.

Empfehlungen

Auf Bilder sollte man bei der Gestaltung von Webseiten nicht verzichten. Es gibt aber wichtige Anforderungen, die bei der Verwendung von Bildern und Grafiken zu beachten sind:

Nur Grafiken mit Aussagewert

Grafiken sollten nicht als Verzierung eingesetzt werden. Kommt ihnen keine konkrete Funktion oder kein wichtiger Informationsgehalt zu, dann ist es besser darauf zu verzichten.

Komprimierung der Grafiken

Im Internet werden fast ausschließlich nur zwei Bildformate verwendet: JPG und GIF. Beide sind komprimierte Formate, bei JPG allerdings mit Verlusten in der Bildqualität. Während sich JPG besser für Fotos oder Grafiken mit vielen Details eignet, ist GIF die geeignete Kompressionsmethode für Grafiken mit gleichartigen Farbflächen.

Wichtig ist eine möglichst weitgehende Kompression, so weit es die verbleibende Bildqualität gestattet. Beim GIF-Format geschieht dies über die Reduktion der Farben (z.B. auf 16).


Beispiel 1
Beispiel 1 im GIF-Format:
256 Farben, 6 kByte groß

Beispiel 2
Beispiel 2 im GIF-Format:
16 Farben, nur 4 kByte groß.
Geringe Änderungen der Farben,
sonst aber keine Qualitätsverluste

Bei JPG ist eine Kompressionrate einstellbar, die allerdings zu Qualitätsverlusten führt. Ausprobieren, welche Bildqualität noch tragbar ist, heißt hier die Devise.


Beispiel 3
Beispiel 3 im JPG-Format:
Komprimierungsfaktor 1; 10 kByte groß.
Gute Bildqualität

 


Beispiel 4
Beispiel 4 im JPG-Format:
Komprimierungsfaktor 70; 5 kByte groß.

Deutliche Qualitätseinbußen bei der Bildschärfe und der Wiedergabe von Details.


Bei beiden Formaten hängt die Speichergröße natürlich entscheidend vom Bildformat ab, das relativ klein gewählt werden sollte.

Nur wenige Grafiken

Jede Grafik erhöht die zu übertragende Datenmenge im Vergleich zu Text beträchtlich. Grafiken sind nicht Teil des Textes (der HTML-Seite), sondern werden als eigene Dateien mit einem gewissen Overhead an Protokollinformationen übertragen.

Zur Reduzierung der Antwortzeit sollten nur so wenig Grafiken und Bilder wie unbedingt nötig in eine Webseite eingebaut werden. 50 kByte an Grafiken führt oft zu inakzeptablen Wartezeiten.

Grafiken mehrfach verwenden

Wird die gleiche Grafik mehrfach auf einer oder auf verschiedenen Seiten eingesetzt, so wird sie nur einmal aus dem Netz heruntergeladen. Wichtig ist dabei, daß die Grafik jedesmal mit dem gleichen Namen und aus dem gleichen Verzeichnis verwendet wird.

Neben der Reduzierung der Antwortzeit wird aus ergonomischer Sicht dadurch auch ein einheitliches Layout, z.B. über gleiche Buttons zur Navigation, erreicht.

Dokumente auch ohne Grafiken nutzbar machen

Sind die Attribute HEIGHT und WIDTH bei Bildern angegeben, so kann der Textaufbau im richtigen Format durch den Browser erfolgen, auch wenn die Bilder selbst noch nicht übertragen sind. Der Anwender kann den Text bereits lesen oder zu einem Hyperlink verzweigen, ohne auf den vollständigen Bildaufbau warten zu müssen.

Wichtig sind auch Alternativtexte für Bilder, die vom Browser angezeigt werden, bis die Bildübertragung abgeschlossen ist. Sie werden per ALT-Tag in HTML angegeben.

Der Servicebereich

Rechtsquellen und Normen

Gesetze und Verordnungen
  • Bildschirmarbeitsverordnung (BildscharV),  Anhang, Nr. 20 - 22
Normen
  • DIN EN ISO 9241:  Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten (neu: Ergonomie der Mensch-System-Interaktion)
    • Teil 8: Anforderungen an Farbdarstellung
    • Teil 12: Informationsdarstellung 

Literatur 

Zur Vertiefung:            

Harald Weinreich (Universität Hamburg, Fachbereich Informatik):
10 wichtige Leitlinien für die Gestaltung eines ergonomischen WWW-Informationssystems
http://vsys-www.informatik.uni-hamburg.de/ergonomie/index.html
Hamburg 1997, (enthält auch vertiefende Literaturhinweise) 

Fit für Usability
http://www.fit-fuer-usability.de/
Eine online Initiative des Fraunhofer-Instituts für Angewandte Informationstechnik FIT
Mit Tipps zur Software-Gestaltung und Web-Gestaltung 

Bücher und Broschüren zu Software-Ergonomie

Verwandte Themen

Letzte Änderung: 19.12.1999

Logo Ergo Online
© 2016 Beratungsstelle für Technologiefolgen und Qualifizierung (BTQ Kassel)

Rechtsquellen
  • DIN EN ISO 9241


mehr

Informationen im www
Verwandte Themen
Inhaltsverzeichnis
Bezug des Regelwerks
Sponsoren

Der Artikel wurde gefördert von


Gewerkschaft ver.di


Rationalisierungs- und Innovationszentrum der Deutschen Wirschaft e.V.