Bei der Gestaltung von Websites sind im Vergleich zur Gestaltung von Broschüren, Plakaten, Zeitschriften und anderen Druckwerken einige Besonderheiten zu beachten.
Ob die technischen Voraussetzungen und die besondere Art der Verwendung von Internet-Seiten bei der Gestaltung ausreichend berücksichtigt werden, hat einen erheblichen Einfluss auf die Erfolgschancen einer Website.
Ein gedruckter Prospekt sieht immer gleich aus - egal, wer ihn in die Hand nimmt, um ihn zu betrachten. Bedrucktes Papier unterliegt vollständig dem künstlerischen Willen des Grafik-Designers.
Webseiten dagegen sind veränderliche Gebilde:
Der Web-Designer muss also einen Teil der Umsetzung seiner gestalterischen Ideen dem Nutzer und dessen Software und Hardware überlassen. Er beschreibt seine Ideen als Regeln für den Seitenaufbau und für das Aussehen einzelner Teile des Dokumentes. Diese Regeln werden in einer standardisierten Sprache formuliert, und er muss darauf hoffen, daß seine Regeln auf Seiten des Betrachters verstanden und eingehalten werden.
Tatsächlich führen dieselben Darstellungsregeln jedoch zu unterschiedlichen Ergebnissen auf den Bildschirmen der Nutzer. Einerseits, weil die Browser die Regeln fehlerhaft interpretieren. Andererseits aber auch, weil zum Beispiel der vorgesehene Schrifttyp nicht installiert ist oder einfach weil die Anzeigefenster unterschiedlich viel Platz zur Darstellung bieten (Laptop mit Breitbild, Bildschirme mit Hochformat, Mobiltelefone mit sehr geringer Auflösung).
Hinzu kommt, daß der Nutzer die Darstellung des Dokumentes mit Hilfe seines Browsers nach seinen Wünschen beeinflussen kann. Nicht nur, daß er die Größe des Fensters auf seinem Bildschirm ändern kann. In jedem modernen Browser kann der Schriftgrad vergrößert und verkleinert werden. Außerdem kann der Nutzer beispielsweise eine minimale Schriftgröße festlegen, Schriftfarbe und Hintergrundfarbe bestimmen, Bilder ausblenden oder Überschriften automatisch nummerieren lassen.
Darauf hat der Web-Designer keinen Einfluss. Dafür muss er das Dokument sauber strukturieren und flexible Darstellungsregeln so wählen, daß die Seite trotzdem sinnvoll angezeigt werden kann.
Neben den individuellen Einstellungsmöglichkeiten für die Anzeige des Dokumentes, die der Nutzer über seinen Browser steuern kann, kann der Web-Designer dem Nutzer die Möglichkeit geben, den Inhalt des angeforderten Dokumentes aktiv zu beeinflussen.
So kann der Nutzer bei seinem Seitenaufruf zum Beispiel einen Suchbegriff mitgeben, und das Dokument wird dann entsprechend mit Suchergebnissen zu eben diesem Suchbegriff gefüllt. Auch aktive Änderungen am bereits geladenen Dokumentes sind machbar.
Sind solcherlei Interaktionen des Nutzers mit dem Dokument vorgesehen, so muss der Web-Designer seine Darstellungsregeln so flexibel wählen, daß die lesbare Darstellung des Dokumentes trotz variabler Inhalte sichergestellt bleibt.
Die folgende Tabelle gibt einen kurzen Überblick über die technischen Unterschiede, die bei der Gestaltung von Dokumenten für Papier und Webseiten zu beachten sind.
| Papier | Web |
|---|---|
Exakte Umsetzung der Idee auf dem finalen Medium | Formulierung der Idee als Regelwerk für die Struktur und Vorschlägen für die Darstellung, welche von den Browsern unterschiedlich umgesetzt werden |
Schrifttyp beliebig nach Geschmack | Geringe Auswahl von verbreiteten Schrifttypen, keine Garantie |
Festes Papierformat | Variable Bildschirmauflösung und Fenstergröße, Unterschiedliche Ausgabegeräte |
Starres, millimetergenaues Layout | Flexibles Layout mit relativen Schriftgrößen |
CMYK-Farben, Druckfarben normiert | RGB-Farben, Bildschirmkalibrierung, Bildschirmfarbtiefe |
Schärfe, Kontrastumfang auf Papier besser | Schärfe, Kontrastumfang auf Bildschirm schlechter |
Lupe nötig, um bei Bedarf zu vergrößern | Digital skalierbar, Sprachsynthese möglich |
Größere Fläche möglich für mehr Übersicht | Scrollen und Textsuche möglich |
Verweise textuell | Hyperlinks |
Fotos und Grafiken möglich | Fotos, Grafiken, Ton, Video möglich |
Abschließend verfasste Inhalte | Variable, dynamische, parametrisierbare Inhalte |
Keine Interaktion möglich | Interaktion möglich |
Nachträgliche Digitalisierung eingeschränkt möglich | Nachträglicher Druck möglich, sogar mit speziellem Print-Layout |
Eine Zeitschrift kommt per Abonnement ins Haus geflattert, einen Produktkatalog bekommt man in die Hand gedrückt. Man schaut hinein, verschafft sich einen Überblick und legt sie auf den Wohnzimmertisch. Später sieht man sie herumliegen, nimmt sie wieder in die Hand, blättert sie durch und lässt sich inspirieren. Man ist bereit, sich mit etwas unerwartetem zu beschäftigen und nimmt sich Zeit dafür.
Anders bei Web-Seiten. Internet-Nutzer haben ein spezifisches Nutzungsverhalten, das sich vom Leseverhalten bei Druckerzeugnissen stark unterscheidet:
Sie haben in aller Regel ein klares Ziel. Auf dem Weg zu diesem Ziel ignoriert ein Web-Nutzer alles, was auf den ersten Blick nichts mit diesem Ziel zu tun hat. Interessant ist für ihn ausschließlich, was ihn seinem Ziel näher bringt.
Der Web-Designer muss also darauf achten, das Kernangebot einer jeden Seite (egal ob Information oder Funktion) klar erkennbar zu machen. Das "Drumherum" wird vom Betrachter ohnehin ignoriert. Zuviel "Drumherum" führt gegebenenfalls sogar dazu, daß der Betrachter das Kernangebot übersieht.
Eindrucksvoll zeigt sich dies in der sogenannten Werbe-Blindheit (englisch: Banner-Blindness) - eine Art "Tunnelblick" auf den eigentlichen Inhalt einer Web-Seite, bei dem alles, was aussieht wie Werbung, aus dem Blickfeld verbannt wird.
Bunte, blinkende Bereiche und übergroße Schrift werden bei der Wahrnehmung der Seite einfach ausgeblendet. Besonders betroffen davon sind rechteckige Werbe-Banner am oberen oder rechten Seitenrand. (Siehe auch Jakob Nielsens Alertbox-Artikel über Banner-Blindheit und über besonders auffällige Formatierung. Beide zeigen in Bildern anschaulich den beschriebenen Effekt.)
Ein weiteres Beispiel für das zielgerichtete Verhalten von Web-Nutzern ist das übliche "Durchklicken" von Suchergebnissen einer Suchmaschine: Der Nutzer wirft einen Blick auf die angezeigten kurzen Textauszüge der Treffer und klickt auf den erstbesten Treffer. Die ausgewählte Seite prüft er kurz und gnadenlos auf Relevanz. Wenn die Seite nicht innerhalb weniger Sekunden überzeugt, kehrt der Nutzer zurück zur Suchergebnisseite und wendet sich dem nächsten Treffer zu.
Dasselbe gilt für Websites, die technisch nicht einwandfrei funktionieren oder die nicht intuitiv bedienbar sind: Wenn die Bedienung nicht auf Anhieb verständlich ist oder die Bedienelemente nicht so reagieren, wie der Nutzer er erwartet, dann zögert dieser nicht lange. Er schließt das Fenster und geht zum nächsten Anbieter.
Für den Web-Designer bedeutet das, auf Gebrauchstauglichkeit (englisch: Usability) allergrößten Wert zu legen.
Websites, die
und diese dann auch noch
präsentieren, werden von zufriedenen Besuchern immer wieder aufgesucht. Die zufriedenen Besucher empfehlen diese Websites ihren Freunden und Bekannten. Sie setzen von ihren eigenen Webseiten aus Hyperlinks auf diese Websites.
Diese Formen der "Mundpropaganda" sind im WWW die beste Werbung.
Die folgende Tabelle gibt einen kurzen Überblick über die Unterschiede in der Nutzung von Papier und Webseiten, die bei der Gestaltung von Dokumenten für diese Medien zu beachten sind.
| Papier | Web |
|---|---|
Sinnliches Erlebnis (wird betrachtet, in die Hand genommen und hat einen Geruch) | Mittel zum Zweck (wird benutzt) |
Inspirieren lassen, Neues kennenlernen, Information finden | Information finden, Aufgabe erledigen |
Überblicken, Texte lesen | Nach Überschriften, Aufzählungen und Hyperlinks scannen, Text lesen |
Zeit nehmen, kennenlernen | Relevanz in wenigen Sekunden prüfen, sonst wegklicken |
Durchblättern | Weiterklicken |
Einlassen auf besondere Gestaltung | Intuitiv navigieren |
Permanent (bleibt nach der Nutzung liegen) | Flüchtig (Fenster wird nach der Nutzung geschlossen) |
Wird gesammelt, später vielleicht nochmal gelesen | Wird bei Gefallen als Bookmark gespeichert, auf der eigenen Website verlinkt und immer wieder benutzt |
Bilder, Überschriften sind Blickfang | Hyperlinks, Aufzählungen, Überschriften sind Blickfang |
Werbung kann Blicke fangen | Banner-Blindheit: Alles, was aussieht wie Werbung wird ignoriert |
Stöbern im Buchladen, Zeitschriften-Kiosk, Broschüren mitnehmen auf einer Messe, Abonnement | Suchmaschine, Link auf anderer Website, Bookmark, Link per E-Mail, Link auf Visitenkarte oder Flyer |
Greifbar (bei sich tragen, auf den Tisch legen) | Virtuell (aufrufen, Bookmark anlegen, Fenster schließen) |
Zweitverwertung als Papierhut, Papierflieger, und ähnliches möglich | Kein Müll |
Eine gravierende Besonderheit von Web-Design gegenüber Print-Design ist die Berücksichtigung von Suchmaschinen.
Damit Suchmaschinen mit Ihren Indexierungsprogrammen (sogenannte Robots, Crawler oder Spider) den Inhalt einer Seite erfassen können, müssen diese Seiten vor allem aus Text bestehen. Indexierungsprogramme interessieren sich nicht dafür, ob eine Seite hübsch aussieht. Sie erfassen ausschließlich den textuellen Inhalt einer Seite, sowie die in einer Seite enthaltenen Hyperlinks. Die verlinkten Seiten setzen sie auf ihre Aufgabenliste und indexieren sie zu einem späteren Zeitpunkt.
Moderne Suchmaschinen bewerten die Relevanz der indexierten Seiten anhand verschiedener Kriterien. Um eine vordere Platzierung der eigenen Webseiten in einer Suchmaschine zu erreichen, kann der Web-Designer bei der Gestaltung darauf achten, diese Kriterien möglichst gut zu bedienen - man spricht dann von Suchmaschinen-Optimierung der betroffenen Seiten.
Möchten Sie mehr erfahren über die Besonderheiten der Informationsgestaltung für das Web oder über weitere Möglichkeiten zur Optimierung Ihres Internet-Angebotes? Dann sollten wir einen Termin für ein Beratungsgespräch vereinbaren. Gerne übernehme ich auch die gesamte Entwicklung Ihrer Internet-Präsenz. Ich freue mich darauf, Sie kennenzulernen.