Janott.com » Medien - Kommunikation

Seitenüberblick


Hauptmenü

 

Suchen

Sie sind hier:

» Janott.com » Beratung » Print-Design und Web-Design

Web-Design ist kein Print-Design
Unterschiede beim Gestalten für Internet und Papier

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.

Individuelle Darstellung

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.

Browserumgebung

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.

Interaktion

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.

Interaktionsbeispiel

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.

Tabellarischer Überblick

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.

Technische Besonderheiten von Papier- und Web-Dokumenten
PapierWeb

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

Zielgerichtete Nutzung

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.

Unwichtiges hat keine Chance

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.

Was nicht funktioniert, hat keine Chance

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.

Qualität überzeugt

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.

Tabellarischer Überblick

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.

Besonderheiten bei der Nutzung von Papier- und Web-Dokumenten
PapierWeb

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

Suchmaschinen

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.

Weitere Informationen

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.


Website-Infos

.
..
# # # #