Einige Regeln für gutes Webdesign

1. Das World Wide Web
2. Die W-Fragen
3. Was ist "gutes" Webdesign?
4. Intentionsanalyse: Warum eine Website?
5. Zielgruppenanalyse: Wer soll die Website besuchen?
6. Projektlayout - Wo bin ich nun gelandet?
7. Seitenlayout - Struktur oder Konfusion?
8. Werbung - Weniger kann mehr sein

Das Internet entwickelt sich in einer unglaublichen Geschwindigkeit. Aus ein paar Technikfreaks die im textbasierten Internet kommunizierten und die ersten Seiten mit Hyperlinks ins WWW stellten sind heute Millionen User mit unterschiedlichsten Kenntnissen und Ambitionen geworden. In den frühen 90ern tauschte man Informationen aus, heute werden im WWW Millionen verdient. Aus ellenlangen Texten wurden grelle Bildershows auf denen sich alles bewegt und blinkt - ähnlich den Straßenzügen im Spielerparadies Las Vegas. Der Inhalt der Websites wird automatisch generiert und auf die durch Cookies festgestellten Bedürfnisse des Users zugeschnitten. Dynamisch muss es heute sein.

Es ist im WWW nicht anders als in anderen Bereichen des Lebens. Was möglich ist wird auch realisiert. Was noch nicht realisierbar ist muss möglich gemacht werden. Niemand scheint dabei nach den Konsequenzen zu fragen. Hat das alles einen Sinn?

Auf langsamen Rechnern und über Telefonleitungen war einfaches HTML im WWW vollkommen ausreichend. Bilder konnten ohnehin nicht gezeigt werden, oder man musste bei einen kleinen Bild 15, 20 oder 30 Sekunden warten bis über den Akustikkoppler die Startseite der Website aufgebaut war. Glücklich waren die stolzen Besitzer schneller Modems. Heute hat fast jeder User (zumindest in den Industrienationen) einen schnellen Anschluss (z. B. DSL) der die Frage nach den Ladezeiten nicht mehr aufkommen lässt. 

Bessere Techniken weckten Begehrlichkeiten nach graphischen Darstellungen, dynamischem Seitenaufbau, Multimedia, Online-Spiele, Internetradio, Videostreaming, und, und, und...

Dies alles war jedoch mit reinem HTML nicht realisierbar. So kam CSS als Ergänzung um HTML-Seiten einheitlich zu formatieren. Es folgte JavaScript mit erweiterten Funktionalitäten, die jedoch auf der Clientseite (auf den Rechner des Users) ausgeführt wurden. JavaScript führte wegen der ihm zugeschriebenen Bedeutung Mitte der 90er Jahre des vorigen Jahrhunderts zum Browserkrieg zwischen Netscape und Microsoft mit zwei verschiedenen JavaScript-Versionen. Mittlerweile ist JavaScript als ECMA-262 standardisiert aber immer noch nicht einheitlich. JavaScript wurde häufig verwendet um den Browser des Users zu manipulieren (z.B. Werbeblocker umgehen, Adresse verschleiern, Kontextmenue ausschalten, Quelltext verstecken, Browserfenster öffnen oder schließen). Dies führte dazu, dass auch heute noch viele User die JavaScript-Unterstützung ihrer Browser abschalten. 

Parallel dazu wurde für den Serverseitigen Einsatz CGI entwickelt. Damit wurden dynamische Inhalte bereits auf dem Server erzeugt, was zu Manipulationsversuchen direkt auf dem Server des Providers führte. Hauptaufgabe von CGI ist die Verarbeitung von User-Daten (Eingaben, Verhaltensbeobachtungen) auf dem Server mit entsprechender Erzeugung von HTML-Code. Fast jeder Anbieter von Webspace stellt mittlerweile die wichtigsten CGI-Module zur Nutzung auf der eigenen Website bereit.

Als weitere serverseitige Techniken bzw. Programmiersprachen seien hier Perl, ColdFusion, JSP, Servlet, FastCGI, mod_python, mod_perl und SSI erwähnt. Es gibt noch viele weitere. Weite Verbreitung hat PHP gefunden. Diese auf C basierende Programmiersprache wurde speziell für die Bedürfnisse im WWW entwickelt. Das PHP-Programm läuft auf dem Server ab, HTML-Code ist nicht mehr unbedingt sichtbar, nahezu alle verbreiteten Datenbanken können leicht eingebunden werden. 

Das sind viele Techniken die ich als Webdesigner nutzen kann. Fast alles scheint damit machbar zu sein. Als Webdesigner stellt sich mir jedoch die Frage: Ist das alles nötig? Sind diese Techniken wirklich sinnvoll? Doch diese Frage ist falsch gestellt. Sie muss lauten: Für welchen Zweck ist eine bestimmte Technik notwendig? Ich benutze eine Technik also nicht weil sie vorhanden ist und weil ich sie nutzen kann. Ich benutze eine Technik nur wenn dies auch notwendig ist um mein Ziel zu erreichen.

Einige Webdesigner behaupten sie würden PHP benutzen damit ihre genialen Programmierungen sicher vor der Konkurrenz geschützt sind. Ich jedoch behaupte: Wer PHP ohne Notwendigkeit benutzt, versteckt nur seine schlampige Arbeitsweise vor der Welt. PHP-Programmierung ist kein Geheimnis sondern Handwerk. Außerdem sollte niemand sein Wissen verstecken. Das sind alte Denkweisen die heute in Sackgassen führen. Wir leben im Zeitalter von OpenSource und Wikipedia. Wissen zu verstecken ist nicht mehr angesagt.

In diesem Projekt von Xdok.de werden Sie übrigens kein JavaScript oder PHP finden. Dieses Projekt ist mit reinem HTML und CSS-Stylsheets realisierbar. Sollte doch einmal anderer Programmcode notwendig sein wird der Leser das an der entsprechenden Stelle erfahren. Außerdem können Sie in einem solchen Fall auch den Quellcode einsehen.

Bevor Sie sich als Webdesigner für den einen oder anderen Technikeinsatz entscheiden sollten Sie sich einige Fragen zu Ihrem Web-Projekt stellen und nach befriedigenden Antworten suchen.

• Warum eine Website? Gründe für die Web-Präsenz.
• Wer soll die Website besuchen? Zielgruppenanalyse und Optik.
• Wie viel Inhalt darf es sein? Vorsicht vor Informationsüberflutung!
• Welche Techniken sind sinnvoll? HTML, CSS, JavaScript, PHP, CGI ...
• Wie gestalte ich die Website? Navigation und Position.
• Werbung, dezent oder aufdringlich?

Diese und ähnliche Fragen werden wir in dem vorliegenden Beitrag beleuchten, denn es sind grundsätzliche Fragen zum Webdesign die zu häufig beiseite geschoben oder als nebensächlich abgetan werden. Das geschieht entweder aus Bequemlichkeit oder aus Unwissenheit.

Heute möchte jeder Webseiten erstellen der einen WYSIWYG-Websiteeditor bedienen kann. Mittlerweile scheinen dazu nicht einmal HTML-Kenntnisse notwendig um etwas im WWW zu veröffentlichen, so will es uns zumindest manche Werbeabteilung nahebringen. Doch auch professionelle Webdesigner - oder besser: berufliche Webdesigner - machen manchmal unglaubliche Fehler, sei es aus mangelnder Kenntnis der Problemstellung oder durch Zwang von Vorgesetzten die ihre eigene Kompetenz beim Webdesign vollkommen falsch einschätzen. 

Dieses Web-Projekt wurde wird ausschließlich mit der Software KompoZer (früher Nvu) erstellt. In diesem Projekt bekommen Sie an anderer Stelle einige weitere Informationen zu KompoZer.

Wenn Ihnen KompoZer nicht gefällt, nutzen Sie ruhig ihren gewohnten Website-Editor. Doch eines ist dabei wichtig: Ihr Editor sollte die HTML-Variante "strikt" unterstützen, denn es erleichtert die Arbeit ungemein, wenn Sie nicht ständig Browserweichen für jeden Browser und verschiedene Browserversionen erstellen wollen. Die Variante "Strikt" ist bei kleinen und mittleren Projekten für über 90% der Anwendungsfälle völlig ausreichend und zudem stabil.

Ein Webdesigner sollte immer bestrebt sein das Web-Projekt so einfach wie möglich zu halten. Je näher die Website am W3C-Standard orientiert ist und je einfacher die eingesetzten Verfahren sind, desto stabiler, einheitlicher, zukunftssicherer und pflegeleichter ist sie. Die technische Realisierung einer Website ist erst der zweite und mit etwas Übung auch der leichtere Schritt. Vorweg sollten Sie als Webdesigner einige wesentliche Fragen beantwortet haben (das gilt sinngemäß natürlich auch für den Auftraggeber einer Website).

Ist es überhaupt möglich von gutem und schlechtem Webdesign zu sprechen? Ist das nicht Geschmacksache? 

Die Antwort darauf ist eindeutig JA und NEIN!

Als Egozentriker kann ich natürlich machen was ich will, ohne mich um die Empfindungen, Meinungen und Interessen anderer Leute zu scheren. "Dies ist eben mein Geschmack, ich finde das schön, also ist es so richtig und damit basta." Wir wollen hier Niemanden in seiner Selbstgefälligkeit stören. Doch warum bastelt Jemand mit dieser Meinung eine Website, die doch von millionen Menschen auf der ganzen Welt betrachtet werden kann? Er möchte doch eine Außenwirkung erzielen, sonst würde er vielleicht Bilder malen und sie nur zu Hause aufhängen. Eine Website mit außergewöhnlichem Layout und hohem künstlerischen Anspruch nützt nichts, wenn meine Zielgruppe damit nichts anzufangen weiß.

Die erste Bedingung für gutes Webdesign ist natürlich gutes Werkzeug und dessen Beherrschung (mindestens Grundkenntnisse in HTML, Hyperlinktheorie, CSS, Browsereigenschaften). Dazu kommt die Anwendung psychologischer und lernphysiologischer Erkenntnisse. Ein Webdesigner ist in erster Linie ein Redakteur. Er benutzt Sprache und Layout um seinen Lesern ein Thema nahezubringen. Erst wenn das alles stimmt kommt der Geschmack ins Spiel. Gutes Webdesign hat jedoch nicht viel mit dem eigenen Geschmack zu tun. Auf den Geschmack der potentiellen Besucher kommt es an!

Wir werden hier die wichtigsten Bedingungen für gutes Webdesign behandeln. Nach der Lektüre diese Artikels haben Sie vor allem eine andere Sicht auf die eigene Arbeit. Möglicherweise erkennen Sie was sie bisher falsch oder richtig gemacht haben. Das Thema "gutes Webdesign" wird jedoch nicht erschöpfend behandelt. Aber Sie haben anschließend einen Einblick in das Thema und können in die richtige Richtung weiterforschen.

Warum möchten Sie / Ihr Auftraggeber eine Website betreiben? Diese Frage ist nicht so trivial wie Sie jetzt vielleicht denken. Die Antwort auf diese Frage entscheidet vor allem über den Umfang des anvisierten Projektes und über laufende Kosten (und Zeitaufwand) für Servermiete, Support und Pflege. Dies sind exemplarisch einige Gründe für Webauftritte:

• Ein kleiner Handwerksbetrieb möchte nur eine einzige Seite mit Firmenlogo, Adresse, Telefonnummer und E-Mail-Kontakt.
• Ein Dienstleistungsbetrieb möchte auf mehreren Seiten seine Leistungen vorstellen.
• Ein Einzelhändler möchte seine Waren zusätzlich in einem Web-Shop anbieten.
• Ein Verein möchte über das Vereinsleben informieren und Aktivitäten ankündigen. 
• Sie möchten auf mehreren Seiten über ihr Hobby fachsimpeln.
• Eine Jugendgruppe möchte täglich über Lageraktivitäten berichten. 
• ...

Aus diesen verschiedenen Wünsche ergeben sich wichtige Konsequenzen für den Webdesigner als auch für den Auftraggeber. Das betrifft Kosten für die "Programmierung" der Website, den Zeitrahmen der Erstellung, und den Aufwand für die Pflege des Webauftritts. Dabei ist es auch die Aufgabe des Webdesigners den Auftraggeber auf einige Konsequenzen seiner Wünsche aufmerksam zu machen. Beispielsweise erfordern aktuelle Informationen auf einer Website eine ständige Pflege. Diese Pflege verursacht weitere Kosten und Zeitaufwand. Außerdem muss ständig Neues zu berichten sein. Es gibt wohl kaum etwas schlimmeres als eine drei Jahre alte Produktankündigung unter der Rubrik "Aktuelles". Wenn der Auftraggeber nichts aktuelles zu berichten hat, das seine Leser interessieren könnte, sollte er auf diese Rubrik verzichten. Dem Auftraggeber sind diese Zusammenhänge nicht immer in vollem Umfang klar - hier muss der Webdesigner informieren.

Auch ein Webshop kann unerwartet hohe Kosten verursachen, wenn die online anzubietenden Produkte alle noch photographiert werden müssen und wenn die Produktpalette häufig wechselt. 

Die Antwort nach dem "Warum" bringt im Vorfeld des Projektes eine erste Klärung des Umfangs und des Aufwands. Doch die Klärung dieser Frage ist zwar notwendig, aber noch nicht hinreichend für die Planung des Projektes.

Die Frage nach der Zielgruppe ist bei einem Website-Projekt am schwierigsten zu beantworten. Die Frage lässt sich weiter differenzieren:

• Welche Besucher will ich ansprechen?
• Was erwarten die Besucher meiner Website?
• Stehen meine Besucher auf Aktion und Geflimmer?
• Möchten die Besucher unterhalten werden?
• Suchen meine Besucher Entspannung?
• Erwarten sie schnellen Zugang zur gesuchten Information?
• Sind sie bereit sich auf der Seite erst zu orientieren?
• Welchen Stellenwert hat das Design der Website?
• Werden sie sich durch mehrere Ebenen klicken?
• Fühlen sie sich durch Werbung gestört?

Diese Liste lässt sich wahrscheinlich endlos fortführen. Nicht auf alle Fragen lassen sich klare Antworten finden. Doch nur wenn wir eine Vorstellung von den Menschen haben die die geplante Website besuchen werden (oder besuchen sollen), können wir ihre Bedürfnisse im Konzept zur Website berücksichtigen. Wir fertigen ein Profil eines typischen Besuchers unserer geplanten Website an. Computerleute denken nun möglicherweise an "Benutzerprofile" die die Arbeitsumgebung eines Users beschreiben. Ein solches Profil ist hier nicht gemeint. Es geht hier eher um ähnliche Profile wie sie Kriminalpsychologen erstellen um dem Täter näher zu kommen, ähnlich wie man das in manchen Kriminalfilmen sehen kann. Wir sind also auch (und vor allem) Zielgruppenprofiler! Wir suchen die typischen Eigenschaften der User die unsere Website besuchen werden. Das geht natürlich nicht mit der absoluten Zuweisung von definierten Eigenschaften. Aber es geht mit der Untersuchung von wahrscheinlichen Bedürfnissen, Vorlieben und Eigenschaften der erwarteten Benutzer unserer Website.

Wenn das Profil unserer Leser weitmöglichst definiert ist können wir die Wissenschaften und die empirische Forschung heranziehen um unsere Website optimal auf das Profil zuschneiden.

In der Psychologie und der Lernphysiologie bekommen wir wichtige Anhaltspunkte dafür, wie eine Website auf bestimmte Besuchergruppen wirken kann. 

Es gibt verschiedene Untersuchungen darüber wie Menschen auf Farben reagieren. Johann Wolfgang von Goethe legte in seiner Farbentheorie den Grundstein der Farbenpsychologie. Farben rufen Assoziationen und Gefühle hervor. Doch  Farbempfinden ist nicht immer einheitlich. Bei manchen Farben kann sich das Empfinden je nach Alter, Geschlecht und Kulturkreis unterscheiden. So scheinen z.B. Frauen einen größeren Hang zu  Rosa und Pink zu haben als Männer, während Männer eine größere  Vorliebe für Blau empfinden. Rot ist im westlichen Kulturkreis eine Signalfarbe die (u.a.) auf mögliche  Gefahren hinweist, während in China Rot eine Glücksfarbe mit absolut positiver Bedeutung ist. Große Werbeagenturen beschäftigen einen ganzen Stab von Psychologen die sich nur mit der Psychologie der Wahrnehmung beschäftigen. Farben nehmen darin eine zentrale Stellung ein. Am Ende dieses Artikels finden Sie eine Linksammlung zum Thema Farben.

Wir wählen die Farben der Website also möglichst so, dass sie unsere Zielgruppe bestmöglich ansprechen, gleichzeitig aber bei anderen Lesergruppen nicht unangenehme Assoziationen hervorrufen. 

Bei größeren Unternehmen oder Verbänden sind die zur Verfügung stehenden Farben gelegentlich im  Corporate Design festgelegt. Das schränkt die Farbauswahl zwar ein, meist ist das Design aber bereits auf die Zielgruppe des Unternehmens oder Verbandes zugeschnitten, so dass bei der Farbgebung keine ablehnenden Reaktionen zu befürchten sind. Zeigt sich jedoch, dass die Farben des Corporate Design nicht mit den Vorlieben der Zielgruppe übereinstimmen, muss die Farbgestaltung der Website so erfolgen, dass die gewählten Farben zueinander passen, sich nicht beißen. Im Notfall wählt der Webdesigner "neutrale" Farben, die zwar die Zielgruppe nicht unbedingt ansprechen aber auch nicht negativ wirken.

Auch die Leserlichkeit der Website muss bei der Farbwahl berücksichtigt werden. Die Farbwahl muss eine optimale Leserlichkeit der Texte gewährleisten.  Der Kontrast zwischen Schriftfarbe und Hintergrundfarbe muss ausreichend groß sein, darf aber auch nicht zu Blendungen führen (Gefahr bei heller Schrift auf dunklem Hintergrund). Es darf den Leser keinerlei Anstrengung bereiten den dargebotenen Inhalt wahrzunehmen und zu verarbeiten, denn der Inhalt ist die Botschaft an die Zielgruppe. Dem Webdesigner obliegt die Aufgabe diese Botschaft bestmöglich zu vermitteln.

Schließlich ist hier noch ein Hinweis zur Barrierefreiheit nötig. Beachten Sie bei der Farbwahl auch die Regeln zur   Barrierefreiheit ihres Web-Projektes (z. B. bei Farbenblindheit mit Rot-grün-Schwäche).

Die  Leserlichkeit ist von der  Lesbarkeit zu unterscheiden. Bei der Lesbarkeit handelt es sich um inhaltliche Fragestellungen während die Leserlichkeit durch technische Sachverhalte bestimmt wird.

Gute Leserlichkeit bedeutet schnelles sicheres Lesen ohne Anstrengung, damit der Leser sich problemlos dem Inhalt des Textes widmen kann. Die ganze Aufmerksamkeit des Lesers gilt somit dem Verstehen des Textes.

Zur Leserlichkeit zählen z, B.:

• die Schriftart (Proportional / nichtproportional, Serifen / serifenlos),
• der Durchschuss (Zeilenabstand),
• der Zeilenfall (Blocksatz, Flattersatz),
• die Textausrichtung (linksbündig, zentriert, rechtsbündig),
• die Zeichenformatierung (Schriftschnitt),
• der Texthintergrund (Struktur und Farbe, Kontraste).

Wenn wir einen Text lesen erfasst unser Auge in der Regel nicht einzelne Buchstaben sondern Wordbilder. Dabei werden Wörter mit einer Länge von fünf bis sechs Zeichen recht zuverlässig und augenblicklich erkannt. Lange unbekannte Wörter werden auch Silbe für Silbe oder gar Buchstabe für Buchstabe gelesen. Das Auge tastet den Text jedoch nicht kontinuierlich wie ein Scanner ab. Vielmehr springt das Auge in der Zeile jeweils ein Wort oder mehrere Wörter weiter. Trainierte Leser erfassen bis zu fünf Wörter gleichzeitig (sogenannte Querleser). Dabei benötigt  das Auge eine klare Führung um die Zeile nicht zu verlassen. Erst am Zeilenende muss das Auge umschwenken und möglichst leicht den Anfang der nächsten Zeile finden. Dazu muss das Auge sich auf der Seite (am Bildschirm) orientieren können (an welcher Position befindet sich meine Zeile?).

Der Orientierungsmöglichkeit des Lesers innerhalb einer Website oder eines einzelnen Beitrags wird häufig viel zu wenig Aufmerksamkeit geschenkt. Gerade Personen die nur gelegentlich surfen verlieren oft die Orientierung innerhalb der Website und auch innerhalb von einzelnen längeren Beiträgen. Bei Print- Produkten gibt es meist viele verschiedene Orientierungspunkte für das Auge. Sei es die Werbung auf der gegenüber liegenden Seite oder die Abbildung am Seitenrand. Wenn der Leser auf einer Website durch einen Beitrag scrollt oder auf den Button nächste Seite klickt, benötigt er ebenfalls Orientierungspunkte um gegebenenfalls zu einer interessanten Stelle zurückkehren zu können oder am nächsten Tag an einer bestimmten Stelle weiterarbeiten zu können. Zwischenüberschriften und vor allem Abbildungen im Text erleichtern sowohl einen raschen Lesefluss als auch eine Orientierung im gesamten Dokument. Zudem erhöhen Abbildungen im Text den Lerneffekt. Das Gehirn knüpft Assoziationen zwischen gelesenem Text und der zugehörigen Abbildung. Die notwendige Häufigkeit dieser Abbildungen hängt von der Lernübung des Lesers ab (siehe Zielgruppenprofil).

Daraus ergibt sich folgendes (je nach Profil der Zielgruppe natürlich etwas variabel):

• die Wörter sollten möglichst nicht zu lang sein (notfalls Bindestriche benutzen),
• der Zeilenabstand muss an Schrifttyp, Schriftgröße und Zeilenlänge angepasst sein um den Anfang der nächsten Zeile schnell zu finden,
• der Texthintergrund sollte das Auge beim Abtasten der Zeile nicht ablenken (kein Hintergrundbild oder aber auf Kontraste im Hintergrund verzichten - allenfalls ein leichtes Wasserzeichen einsetzen),
• bei längeren Textpassagen erleichtert ein Flattersatz die Orientierung auf der Seite, wodurch der Zeilenwechsel des Auges einfacher wird (Blocksatz sollte nur mit Zeilenlängen unter 50 Zeichen und bei kurzen Absätzen eingesetzt werden),
• eine kürzere Zeile begünstigt schnelleres lesen und einen leichten Umschwung in die nächste Zeile (bewährt haben sich Zeilenlängen von 50 bis 70 Zeichen).

Für unser Benutzerprofil ergibt sich daraus die Frage wie lesegeübt unsere Zielgruppe ist. Handelt es sich um Personen die sehr viel lesen, evtl. sogar am Bildschirm, oder lesen sie eher selten? Für Gelegenheitsleser müssen die oben angeführten Folgerungen sehr streng ausgelegt werden. Das wird Viellesern nicht schaden, umgekehrt aber würden Gelegenheitsleser ausgeschlossen.

Fachhochschule Lippe  http://www.fh-luh.de/~darjush/farbenlehre2.htm
Pixelpower  http://www.pixxelpower.de/category/grafik/ 
Projekt Farbcodes http://www.beta45.de/farbcodes/theorie/itten.html 
Fachhochschule Reutlingen http://www-cadcam.fh-reutlingen.de/colph_01.htm 
sRGB-Farbraum  http://de.wikipedia.org/wiki/SRGB

Typografie für Webdesigner http://webdesign.crissov.de/Typographie
Typografie.info  http://www.typografie.info