Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Navigation überspringen

Was ist eigentlich Webdesign?

Webdesign umfaßt einen weiten Bereich an Tätigkeiten bei der Erstellung von Webseiten. Hier spielen nahezu alle Aspekte der Webseitenerstellung eine Rolle:

Auf dieser Seite:

Eben weil Webdesign so vielschichtig ist, ist es eine so schwierige Tätigkeit. Und weil es eigentlich ganz einfach ist, eine Seite ins Netz zu stellen, übersehen viele, dass zu einer guten Seite sehr viel mehr gehört, als nur einen WYSIWYG-Editor zu bedienen.

Das wichtigste Detail der Webseitenerstellung ist wiederum kein Bestandteil des Webdesigns: der Inhalt. Die schönste, schnellste und optimal bedienbare Webseite wird kaum Erfolg haben, wenn sie keinen interessanten Inhalt bietet!

– — – — – — – — –

Optisches Design bzw. Layout

Das ist das, was den Besuchern als erstes ins Auge sticht und was auch die meisten für den Hauptbestandteil (oder gar den einzigen Aspekt) von Webdesign betrachten.

Wie man an den vielen hübschen aber nicht brauchbaren Webseiten erkennt, ist dem nicht so. Trotzdem ist es natürlich ein ganz wesentlicher Aspekt.

Entgegen dem klassischen Layout (von Druckerzeugnissen), besteht hier das Problem, dass eine Seite auf unterschiedlichen Ausgabemedien unter unterschiedlichen Randbedingungen gut aussehen soll. Gutes grafisches Design zeichnet sich im Web eben nicht durch pixelgenaues ausrichten der Elemente aus, sondern dadurch, dass es auf einem Bildschirm mit 640*480 Pixeln (fast) genau so gut aussieht, wie auf einem mit 1600*1200 Pixeln.

Außerdem muss die Seite lesbar bleiben, wenn der Besucher eine andere / größere / kleinere Schriftart verwendet. Sie sollte auch ohne Farben oder mit den Standardfarben des Browsers benutzbar sein.

Dazu kommen die zusätzlichen Beschränkungen des WWW: Zu große Datenmengen erfordern zu lange Ladezeiten. Die geringe Auflösung heutiger Monitore erlaubt nur relativ wenige Schriftarten (wenn der Text lesbar bleiben soll). Auf Bildern, die nicht den gesamten Platz einnehmen, ist kaum etwas zu erkennen. Jeder Computer / Monitor stellt die Farben (etwas) anders da: aus einem schicken hellgrau wird da schnell mal ein zartes rosa.

Das soll nicht heißen, dass ein schickes Layout im Web nicht möglich wäre, aber es ist schwieriger oder zumindest anders, als bei Printmedien. Leider haben viele Grafikdesigner das Web als Einkommensquelle entdeckt, ohne die Unterschiede wirklich begriffen zu haben.

Da die meisten Auftraggeber für Webseiten diese Unterschiede auch nicht kennen, werden bei Vorführungen meist auf den PC des Auftraggebers optimierte Seiten gezeigt. Und diese gehen an der eigentlichen Problematik (und Zielgruppe) häufig vorbei.

– — – — – — – — –

Navigationsdesign und Site-Struktur

Hier wird es endgültig haarig. Dem Auftraggeber und auch dem Ersteller der Seiten ist üblicherweise klar, was die verwendeten Begriffe bedeuten und welche Informationen sich wo verbergen. Aber kann dies auch ein Besucher auf den ersten Blick (!) nachvollziehen?

Komplexe Informationen zu strukturieren ist nicht einfach. Diese so abzulegen, dass jeder das, was er sucht, auch schnell findet, erst recht nicht. Dazu kommt, dass viele (nicht nur neue) Internet-Nutzer die meisten "bekannten" Begriffe gar nicht verstehen.

Die Navigation auf Webseiten gilt als das größte aktuelle Problem im Internet und das größte Hindernis für den Erfolg von Webauftritten. Hier gibt es bisher kein Erfolgsrezept.

Allerdings haben sich inzwischen einige Punkte eingebürgert, die auch den meisten Besuchern (recht schnell) bekannt sind: Nagivationselemente befinden sich links und/oder oben. Verweise (Links) sind blau und unterstrichen. Hiervon abzuweichen sollte man sich gut überlegen, wenn man will, dass die Besucher sich zurechtfinden.

– — – — – — – — –

Benutzerschnittstelle bzw. GUI-Design

Sobald es um mehr als das Darstellen von Texten und Bildern geht, muss man sich mit der Benutzerschnittstelle (GUI = Graphical User Interface) befassen. Eigentlich ist die Navigation bereits ein Teil davon. Da sie aber auf allen Webseiten eine Rolle spielt, wurde sie hier getrennt behandelt.

Formulare, Suchmasken, dynamisch aufgebaute Seiten - alles das sind Dinge, die der Besucher bedienen (können) muss. Und deren Verhalten muss ihm auf Anhieb (!) verständlich sein, sonst wird er bei ihrer Bedienung wenig Erfolg haben.

Insbesondere das Neugestalten von altvertrauten Bedienelementen sollte mit sehr großer Vorsicht durchgeführt werden. Modisch gestaltete Scrollbars zum Beispiel haben den Nachteil, dass sie nur noch von wenigen Besuchern erkannt werden. Somit findet ein Teil der Besucher die untere Hälfte der Seite nicht mehr!

Bei Icons hat sich gezeigt, dass die Kombination Bild mit Text die schnellste Einarbeitung ermöglicht. Nur Text ist für Anfänger (und beim ersten Besuch einer Webseite ist jeder Besucher Anfänger!) genauso einfach. Nur Grafiken sind meist kaum verständlich. Und wer hat schon Zeit und Lust, langsam mit der Maus über jede Grafik zu gehen, um festzustellen, welche Funktion sich dahinter verbirgt?

– — – — – — – — –

Grafikdesign

Grafiken und Bilder für Webseiten müssen natürlich zuerst den "normalen Ansprüchen" wie bei Printprodukten auch genügen. Sie müssen zum Stil und Design der Seiten passen. Sie müssen die Aussage der jeweiligen Seite unterstützen. Sie müssen das, was sie darstellen sollen, verständlich machen.

Dazu kommen weitere Anforderungen: Sie müssen mit wenig Platz auskommen, weil der Monitor des Besuchers evtl. recht klein ist. Außerdem soll die Datenmenge relativ klein sein, damit sie schnell geladen werden können.

Allgemein üblich ist es daher, bei großen Bildern ein kleines (Vorschau-) Bild direkt in die Seite einzubinden, welches einen Link auf das große Bild darstellt. Da es nicht immer leicht zu erkennen ist, welches Bild sich anklicken lässt und welches nicht, sollte es auch immer einen Text-Verweis zu dem großen Bild geben.

Nicht zu gebrauchen sind die Interlaced Darstellungen, die viele Grafikformate bieten. Hierdurch erhält man nach der Hälfte der Ladezeit ein "vollständiges" aber auch vollständig unscharfes Bild. Dies bietet gegenüber einem halben scharfen Bild keinen Vorteil. Eher den Nachteil, dass man nicht einmal das halbe Bild vernünftig betrachten kann.

– — – — – — – — –

Textaufbereitung

"Textaufbereitung? Warum denn das, wir haben doch fertige Prospekte!"

Texte auf Webseiten werden meist weniger gelesen, als überflogen (gescannt). Auch die verfügbare Bildschirmfläche zeigt meist deutlich weniger Text, als ein Blatt Papier. Nicht zuletzt ist das Lesen am Monitor deutlich anstrengender als von Papier.

Entsprechend sollten Texte für das Web aufbereitet werden:

– — – — – — – — –

Technischer Aufbau

Dies ist reines Handwerk, dass man aber beherrschen sollte. Also: gültige, fehlerfreie HTML- und CSS-Konstrukte einsetzen, auf Browserfehler Rücksicht nehmen, von proprietären Erweiterungen die Finger lassen, ...

Auf der Serverseite gibt es noch eine Menge Technik (Scriptsprachen wie PHP, Datenbanken, ...), deren Beschreibung hier aber deutlich zu weit führen würde. Dies sind alles Dinge, die helfen, eine Webseite zusammen zu bauen. Und wenn deren Design klar ist, dann hat man das, was der Besucher sieht, im Griff.

Urheber © Dr. Joachim Wiesemann

Letzte Aktualisierung: 27.5.2006

– — – — – — – — –

Verweise (Links)