Schönheit und Nutzen einer Webseite (oder Printdesign vs. Webdesign)

vom 21.09.2011

Eine Webseite ist kein Werbeplakat. Sie ist nicht auf bestimmte Maße beschränkt, sie enthält Bedienelemente und Funktionalitäten und es können unbegrenzte Mengen an Information auf einer Webseite Platz finden. Eine Webseite steht auch nicht am Straßenrand oder hängt im Bahnhof, sondern wird bei Google angepinnt.

Leider wird das Verständnis davon, was eine Webseite ist, häufig auf Plakatformat beschränkt und o.g. Vorteile einer Webseite geraten ins Hintertreffen. Man übersieht sie einfach oder erachtet sie für unwichtig z.B. zugunsten der Schönheit einer Webseite.

Das ist vielleicht auch völlig legitim, solange man die Webseite hauptsächlich für sich selbst haben möchte. Man selbst kennt ja seine Inhalte und weiß, wo man etwas findet. Und wenn die Webseite so gestaltet ist, wie man sie selbst schön findet, kann man sich selbst natürlich auch davor hocken und sich an dieser Schönheit erfreuen.

Wenn man etwas vermarkten oder verkaufen möchte, spielt die Optik natürlich auch eine große Rolle. Noch viel wichtiger sind allerdings Benutzerfreundlichkeit und Auffindbarkeit der Webseite im Netz. Viele Webseiten, die sehr erfolgreich verkaufen, verzichten auf aufwendige, grafische Gestaltung und das nicht grundlos. Beispiele: Google, Amazon, Ebay, Facebook.

Wenn man etwas vermarkten möchte, sollten sich gestalterische Elemente auf der Webseite am Nutzen orientieren. Sie müssen deswegen nicht unschön sein, aber die optische Gestaltung sollte auf eine Art erfolgen, die dem Zweck dieser Elemente dienen und ihn klar erkennen lassen.

Webseiten werden auf Monitoren verschiedenster Größen angeschaut im Gegensatz zu einem Printprodukt, bei welchem die Elemente fix auf einem Medium mit bestimmten Maßen festgesetzt werden. Es ist zwar möglich, aber doch recht frevelhaft, wenn man Elemente auf einer Webseite so festpinnt, dass sie sich in keiner Weise z.B. Inhalt oder Bildschirmauflösung des Benutzers anpassen. Mit dem Online-Tool Screenfly kann man sich diese "Problematik" (welche ich eigentlich als Vorteil gegenüber Printmedien bezeichnen würde, da z.B. ein Text völlig unabhängig von seiner Länge auf eine "Seite" passt) ganz gut vor Augen führen.

Aus all diesen Überlegungen folgt, dass bestimmte gestalterische Mittel, die ich selbst z.T. auch "schön" finde, zu Lasten des Nutzens einer Webseite gehen können und deshalb auch bei der Gestaltung einer solchen vermieden werden sollten.

Es folgen Beispiele:

Kästen und Bereiche mit fester Größe

Oft finden sich im Inhaltsbereich oder auch in der Sidebar von Webseiten Elemente, die grafisch so gestaltet sind, dass sie eine Größenänderung nicht erlauben.

Das sieht oft wirklich nett aus, hat aber den Nachteil, dass man sich inhaltlich beschränken muss. Hat jemand in seinem Browser eine größere Schriftgröße eingestellt, geht der Inhalt über das Ziel hinaus oder ist nicht mehr sichtbar. Das kann man natürlich wiederum verhindern, indem man die Schriftgröße fest in Pixeln angibt, was zu Lasten der Lesbarkeit bei einigen Benutzern geht. Oder man lässt Scrollbalken in diesem Element zu, aber wie doof sieht das bitteschön aus? Oder man löst das Problem, indem man längere Texte auf mehrere Seiten verteilt, die der User dann bitteschön anklicken soll, was unbequem ist und zu Lasten der Konversionsrate geht.

Bereiche mit Inhalten jedweder Art sollten sich wenigstens in der Länge dem Inhalt anpassen. Auch dann, wenn sie über den sichtbaren Bereich des Monitors hinaus reichen. Es ist eine Webseite, man kann scrollen.

Eine Webseite sollte also so gestaltet sein, dass diese notwendige Flexibilität nicht das ganze Design verunstaltet, wenn ein Inhalt mal etwas länger ist. Das gilt nicht nur für den Bereich selbst, sondern auch für die Elemente drum herum.

Grafische Navigationselemente oder Überschriften

Sie sehen auch schön aus. Oft wirklich hübscher als ein HTML-Text in Arial, Verdana oder Georgia. Aber der Google-Bot sieht leider keinen Text, sondern ein Bild. Und aus einem Bild kann ein Bot die Worte nicht heraus lesen und somit auch nicht als Keywords für den Inhalt der Seite bei der Indexierung verwenden.

Grafische Navigationselemente oder Überschriften wirken sich also auf die Suchmaschinenoptimierung und damit auf die Sichtbarkeit der Webseite im Netz negativ aus.

Man kann mit Hilfe von z.B. Hintergrundgrafiken, Hover-Effekten und dergleichen trotzdem gute Design-Effekte erzielen. Aber Text sollte auch technisch Text sein, auch wenn die Auswahl der Schriftarten begrenzt ist. Technische Entwicklungen der jüngeren Zeit ermöglichen es mittlerweile auch, seltenere Nicht-Standard-Schriftarten zu verwenden, die der User auch so dargestellt bekommt, ohne sie selbst auf dem eigenen Rechner installiert zu haben.

Ebenso spielt hier die Lesbarkeit eine Rolle. Besonders originelle Darstellung eines Textes in einer irren Schriftart führt häufig dazu, dass der User sich lediglich fragt "Äh, was?". Eine Schriftvergrößerung ist Benutzern, die nicht besonders gut "zu Auge" sind, leider mit grafischen Texten auch nicht möglich.

Bündigkeit von Elementen

Wie schon erwähnt, sollten sich Webseiten-Elemente an ihre Inhalte sowie an Monitorauflösungen anpassen können. Das führt natürlich zu Verschiebungen.

Eine Navigation in der Sidebar hat z.B. den Vorteil, dass man nach unten hin beliebig viele Navigationspunkte hinzufügen kann. Liegt unter diesem Navigationselement ein weiteres Element, wird dieses je nach Menge der Navigationspunkte weiter oben oder weiter unten sein.

In grafischen Designentwürfen, welche von Hauptberufs-Grafikern erstellt werden, wird dieser einfache Fakt leider oft nicht bedacht. So hat dann im Entwurf die Navigation fünf Navigationspunkte, ist soundso lang und schließt am unteren Ende bündig mit dem Teaser im Inhaltsbereich ab. Um das zu unterstreichen, gibt es dann noch zwei hübsche, verschnörkelte, auffällige Linien sowohl unter dem Teaser im Inhaltsbereich, als auch unter der Navigation in der Sidebar, die extakt bündig auf gleicher Höhe sind. Sieht toll aus, passt.

Nun ist die Webseite in HTML umgesetzt, online und der Webseitenbesitzer erkennt, dass ein weiter Navigationspunkt ziemlich wichtig wäre, da er Feedback von Benutzern bekommen hat, welche die entsprechende Information auf der Webseite noch vermissen.

Es wird also ein weiterer Navigationspunkt hinzugefügt, die verschnörkelte, auffällige, hübsche Linie in der Sidebar rutscht ein paar Pixel nach unten, schließt nicht mehr bündig mit der Linie im Inhaltsbereich daneben ab und alles sieht irgendwie ... unschlüssig ... aus.

Flash-Animationen

Mit Flash-Animationen kann man tolle, schön anzuschauende Effekte erreichen. Leider können solche Animationen ebenso wie Grafiken nicht gelesen werden (z.B. vom Google-Bot), Schriftvergrößerung ist nicht möglich, Screenreader erhalten überhaupt keine Informationen.

Mittlerweile kann man viele Bewegungseffekte und Spielereien, die denen einer Flash-Animation sehr nahe kommen auch mit Javascript-Libraries, wie z.B. JQuery, MooTools u.a. erreichen. Solche Varianten sollte man zugunsten der Sichtbarkeit der Seite im Netz und der Benutzerfreundlichkeit gegenüber Flash-Animationen bevorzugen.

Fazit

Je nachdem, was man mit einer Webseite erreichen möchte, kann es vorkommen, dass die optische Gestaltung sich dem in gewissen Bereichen anpassen muss oder sollte.

Man kann seine Priorität darauf legen, dass einem selbst die Webseite ganz besonders gut gefällt und dabei evtl. in Kauf nehmen, dass der Nutzen dieser Webseite darunter leidet.

Oder man legt die Priorität darauf, das Potenzial der Möglichkeiten und Vorteile, die Webseiten im Gegensatz zu allen anderen Informationsträgern bieten, voll und optimal auszunutzen und dafür auf bestimmte Möglichkeiten der rein optischen Gestaltung zu verzichten. Die Webseite muss darum noch lange nicht unschön aussehen, aber es sind eben an der einen oder anderen Stelle Grenzen gesetzt.