Ihr seht sie überall, vielleicht besucht ihr eure Favoriten auch mehrmals am Tag. So oder so üben sie eine große Anziehungskraft aus: perfekt gestaltete Webseiten! Doch was macht ein wirklich gutes Webseiten-Design eigentlich aus? Und wieso sind manche Webseiten so erfolgreich?


Wenn ihr damit beginnt, eure eigene Homepage zu bauen, stehen euch gefühlt Millionen Kombinationen aus Schriftarten, Farben, Styles, Fotos und mehr zur Verfügung. Diese Vielfalt trügt – die Wahrheit ist nämlich, dass jede Webseite denselben Design-Prinzipien unterliegt, sodass sie schön anzusehen ist und eure Besucher sich leicht zurecht finden. Forschungsergebnisse von Google legen nahe, dass Internet-Nutzer einfache und bekannte Designs bevorzugen und diese Entscheidung innerhalb von Millisekunden treffen.

Damit ihr eure eigene Jimdo-Seite entsprechend dieser Prinzipien aufbauen könnt, werde ich jetzt mit euch einige der wichtigsten Punkte durchgehen und damit das Geheimnis großartiger Webseiten lüften. Los geht’s!

 

1. „The Paradox of Choice“, oder auch: die Qual der Wahl

Wusstet ihr schon? Je mehr Auswahlmöglichkeiten euch zur Verfügung stehen, umso unwahrscheinlicher wird es, eine Wahl zu treffen. Und wenn ihr die Entscheidung dann doch getroffen habt, seid ihr statisch belegt weniger zufrieden damit. Dieses Phänomen ist bekannt unter dem Namen „Paradox of Choice“.

In einem Experiment wurden Kunden in zwei Gruppen aufgeteilt. Der ersten Gruppe gab man in einer Einkaufssituation 6 Gläser Marmelade zur Auswahl, während sich die zweite Gruppe zwischen 24 verschiedenen Sorten entscheiden musste. In der ersten Gruppe entschieden sich 30% für einen Kauf, in der zweiten Gruppe mit den 24 Möglichkeiten schafften es nur 3%, eine Entscheidung zu treffen. Die Auswahl war einfach zu groß und hat das Gehirn überfordert.

Viel Auswahl führt zu weniger Entscheidungen, beziehungsweise Käufen? Das widerspricht erst einmal dem Bauchgefühl. Dennoch bestimmt dieses Phänomen, wie Händler ihre Produkte platzieren und verkaufen – und sollte daher auch die Gestaltung eurer Webseite beeinflussen.

Es scheint eine gute Idee zu sein, eure Besucher gleich mit allen wichtigen Informationen zu versorgen. In Wahrheit jedoch würden sie davon recht schnell überfordert werden und können sich dann gar nicht mehr entscheiden. Schlimmstenfalls verlassen die Nutzer dann eure Webseite, ohne auf etwas geklickt zu haben.

Schaut euch dieses Beispiel an: Auf dieser Webseite gibt es nur eine begrenzten Anzahl an Möglichkeiten, die der Nutzer anklicken kann – und das auf eine sehr übersichtliche Art und Weise:

Wie nutzt ihr das „Paradox of Choice“ für euer Webdesign?

  • Legt fest, was die Besucher auf eurer Seite erreichen sollen. Vielleicht möchtet ihr, dass sie sich zum Newsletter anmelden, etwas kaufen oder sich eure Musik anhören. Was auch immer es ist: Konzentriert euch darauf!
  • Haltet die Navigation schlank und übersichtlich. Die Faustregel ist: nicht mehr als sieben Punkte in der Navigation. Alles darüber erschwert es für eure Besucher, die wichtigen Informationen zu finden, sie zu lesen und sich dann zu entscheiden.
Die vielen Navigationspunkte

Die vielen Navigationspunkte erschlagen den Besucher regelrecht – er verliert die Übersicht und ist frustriert.

Menü Webseite Jimdo

Besser ist es, das Menü übersichtlich zu gliedern, sodass der Besucher leicht über eure Webseite navigieren kann.

 

  • Präsentiert eure Buttons klar und übersichtlich. Es macht keinen Sinn, den Webseiten-Besuchern fünf Buttons in der Sidebar und drei auf jeder Unterseite zu präsentieren. Gruppiert die Auswahlmöglichkeiten so, dass eure Besucher sie sofort sehen und schnell ihre Wahl treffen können.
  • Räumt euren Online-Shop auf. Wenn euer Shop viele Kategorien hat, teilt diese in aussagekräftige Haupt- und Nebenkategorien ein. Wenn ihr zum Beispiel 30 verschiedene Pullover anbietet, ist es nicht sinnvoll, sie alle auf eine Seite zu packen. Unterteilt die Hauptkategorie „Pullover“ stattdessen zum Beispiel in „Strickpullover“, „Sweatshirt“, „Hoodie“ und so weiter.

 

2. Ordnung auf den ersten Blick: eure visuelle Hierarchie

Sobald ihr euch für eine kleine Gruppe an Auswahlmöglichkeiten entschieden habt, geht es jetzt daran, die Informationen eurer Webseite nach Wichtigkeit zu ordnen. Durch visuelle Mittel wie Farbe, Schriftgröße und Platzierung könnt ihr den Nutzern zeigen, was wichtig und was eher weniger wichtig ist – damit erstellt ihr eine „visuelle Hierarchie“.

Besonders relevante Inhalte werdet ihr dementsprechend stärker hervorheben. Am unteren Beispiel seht ihr, dass diese Webseite eine Menge Auswahlmöglichkeiten in Form von Buttons bietet. Hier stehen die Chancen „gut“, dass die Seitenbesucher sich verlaufen und die Webseite wieder verlassen, ohne eine Aktion ausgeführt zu haben.

Wie bringt ihr eine visuelle Hierarchie in eure Webseite?

Ihr erstellt eine visuelle Hierarchie, indem ihr Unterschiede zwischen den einzelnen Elementen herstellt, die einem sofort ins Auge springen. Es macht keinen Sinn, alles groß und bunt zu gestalten, weil ihr findet, dass alles auf eurer Homepage irgendwie wichtig ist. Das ist wie in der Schule: Wenn man beim Lesen eines Textes alles markiert, hätte man auch einfach nichts markieren können.

So könnt ihr die wichtigen Inhalte besonders prominent darstellen:

  • Größe. Groß = wichtig, klein = weniger wichtig. Ganz einfach, oder?
  • Farbe. Mit Farben könnt ihr die Aufmerksamkeit der Leute einfangen. Wenn ihr euren Buttons zum Beispiel eine leuchtende Farbe gebt, die sich von eurer Webseite harmonisch abhebt, werden eure Besucher sie sicher nicht übersehen. Übertreibt es jedoch nicht, indem ihr alles bunt gestaltet – weniger ist hier mehr!
  • Platzierung. Informationen, die ihr direkt oben auf eurer Webseite präsentiert, sind wichtiger als Inhalte, die ganz weit unten auftauchen. In unserer westlichen Leserichtung von links nach rechts steht das Wichtigste dementsprechend oben links.

Nehmen wir einfach mal das etwas überladene Beispiel von eben und arrangieren es so, dass es einer übersichtlichen visuellen Hierarchie entspricht. Okay, es sind immer noch sechs Buttons, was definitiv zu viele sind, aber immerhin sind sie nun klarer angeordnet:

visuelle Hierarchie

Wie stellt ihr nun ebenfalls eine sinnvolle visuelle Hierarchie auf eurer Webseite her? Hier kommen ein paar Tipps:

Das einfachste und naheliegendste Hierarchie-Element ist die Überschrift. Fügt eine (wirklich nur eine!) große Überschrift ganz oben auf jeder Unterseite ein. Wenn ihr dann eine Menge Text habt, könnt ihr diesen mit mittleren und kleinen Überschriften sortieren. Hierbei sind eure Texte idealerweise so aufgebaut, dass die wichtigsten Informationen am Anfang stehen.

Wichtig: Nutzt für eure Überschriften auch wirklich das Überschriften-Element –macht nicht einfach nur die Schrift teilweise größer! Mit Überschriften strukturierte Texte sind viel attraktiver für Google und helfen euch dementsprechend bei eurer Suchmaschinenoptimierung.

Nutzt unsere Seitenvorlagen. Damit erhaltet ihr vorgefertigte und vorstrukturierte Layouts für eure Unterseiten, sodass ihr euch nicht stundenlang darum den Kopf zerbrecht, wie ihr eure Inhalte anordnet.

 

3. „White Space“ lässt euren Inhalten Platz zum Atmen

Der Begriff “White Space” oder “Weißraum” beschreibt die leere Fläche rund um eure einzelnen Elemente auf der Seite. Das bedeutet jedoch nicht, dass der Platz weiß gefüllt wird, sondern dass diese Stellen einfach leer bleiben. Lasst eure Inhalte atmen! Eure Besucher können sich so besser auf die wesentlichen Informationen konzentrieren, außerdem sieht es viel schöner aus. Dieses Prinzip ist vergleichbar mit einem chaotischen, vollgestopften Schrank, und einem aufgeräumten, organisierten – was sieht wohl besser aus?

Widmen wir uns noch einmal unserem Beispiel: Ich habe jetzt einmal die Buttons entfernt und auch die Abstandselemente gelöscht. Seht ihr den Unterschied? Ganz schön gequetscht, oder?

Um euren Inhalten mehr Raum zu schaffen, könnt ihr mit dem Abstands-Element und unserem Spalten-Element arbeiten. Das kann dann zum Beispiel so aussehen:

Tipp: Wenn ihr zwischen den beiden Elementen mehr Platz schaffen wollt, könnt ihr dazwischen eine dritte Spalte einfügen und diese leer lassen!

Wenn ihr eure Unterseite in verschiedene Bereiche aufteilen möchtet, hilft euch auch eine Trennlinie!

Auf dieser Jimdo-Seite seht ihr, wie der Seitenbetreiber auch bei einem dunklen Hintergrund „White Space“ einsetzt, um seine Inhalte klar zu strukturieren:

mwiduch.jimdo.com | Design: Cape Town

Entscheidet euch im Zweifel immer für das Einfachere!

Die Lektion hierbei ist: Als Webdesigner habt ihr bestimmte Entscheidungen zu treffen. Was fügt ihr ein, was lasst ihr weg? Sobald ihr die Prioritäten bei euren Inhalten gesetzt habt, ist es viel einfacher, die Webseite so zu gestalten, dass ihr eure Ziele erreicht.

Wenn ihr das Gefühl habt, festzustecken, erinnert euch daran: Weniger ist mehr! Wählt dann einfach die simplere und unaufwändigere Variante. Die Besucher eurer Websiete werden es euch danken!


Habt ihr weitere Webdesign-Prinzipien, die euch geholfen haben, eure Jimdo-Seite zu bauen? Dann teilt sie mit uns in den Kommentaren!