Hilfe Registrieren

Erreicht eure Webseiten-Ziele schneller mit diesen 3 Webdesign-Prinzipien!

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 erschlagen den Besucher regelrecht – er verliert die Übersicht und ist frustriert.
Die vielen Navigationspunkte erschlagen den Besucher regelrecht – er verliert die Übersicht und ist frustriert.
Besser ist es, das Menü übersichtlich zu gliedern, sodass der Besucher leicht über eure Webseite navigieren kann.
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:

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 SeitenvorlagenDamit 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!
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!


Diesen Artikel mit anderen teilen:


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

 

Bis gleich,

Jasmin

Jasmin Schreiber 

Web-Redakteurin bei Jimdo

Ähnliche Artikel:

Ihr möchtet erfolgreich gründen? Holt euch hier Tipps von Frank Thelen ab!
>> mehr lesen

Baut mit eurer Kunst ein Business auf – wie das Paar hinter "Sammy Rose"!
>> mehr lesen

Jimdo Stories: Florians Weg vom Chormitglied zum Opernsänger!
>> mehr lesen

Jimdo Stories: Wie Elli als Foodstylistin ihren Traumjob gefunden hat
>> mehr lesen


Kommentar schreiben

Kommentare: 28
  • #1

    Hoerblogger (Donnerstag, 06 Oktober 2016 18:47)

    Be different, be simple, be structurized. Altes Marketing-Prinzip. Aber: Eine Webseite bildet stets individuelle Inhalte zu einem möglichst individuellen Thema ab. Und das auf individuelle Art und Weise.

    Merci für den Artikel.
    Hoerblogger

  • #2

    Sandra (Freitag, 07 Oktober 2016 10:18)

    Danke! Immer wieder hilfreich - auch wenn viele Dinge "logisch" sind, aber es hilft, die eigene Page ständig zu aktualisieren :-)
    Liebe Grüße

  • #3

    Baumzelt Solling (Freitag, 07 Oktober 2016 12:06)

    Weniger ist mehr, da bin ich ganz bei Euch :-)

  • #4

    Stefanie (Freitag, 07 Oktober 2016 14:47)

    Vielen Dank für den Artikel - sehr schöner Reminder für (eigentlich!) logische Dinge :-)
    Eine Frage bzw. Bitte zum Spaltenelement: Ich nutze die leere Spalte recht häufig, aber sie ist mir selbst in der schmalstmöglichen Variante fast immer etwas zu breit. Gibt es da vielleicht demnächst eine Anpassung, so dass man Spalten noch etwas schmaler machen kann?
    Der Abstand 5px im Abstandselement kam ja auch recht spät, aber er kam, sah und siegte ;-))
    Vielen Dank!

  • #5

    Nedim (Samstag, 08 Oktober 2016 07:24)

    Wiedermal ein toller Beitrag und viele Tolle Tipps, vielen Dank liebes Jimdo Team.

  • #6

    Sylvana Pollehn (Samstag, 08 Oktober 2016 09:56)

    Ich muss es einmal sagen: Ich bin seit Jahren nun bereits mit vier Homepages bei euch und nach wie vor begeistert. Eure Tipps sind immer hilfreich, denn gerade das offensichtliche, übersieht man selbst. Wie sagt man so schön: Man wird betriebsblind. Ich danke euch und macht weiter so. Eure Sylvana

  • #7

    Brettspieleland (Samstag, 08 Oktober 2016 19:16)

    Vielen Dank für die interessanten Tipps.

  • #8

    Stehschreibtisch (Sonntag, 09 Oktober 2016 19:08)

    Immer wieder wichtig dran erinnert zu werden, es einfach zu halten.
    Gerade wenn man die Qual der Wahl hat, ist es wichtig, sich schnell für etwas zu entscheiden - anstatt es perfekt machen zu wollen.

  • #9

    Marlies (Sonntag, 09 Oktober 2016 22:06)

    Seit Juni gab es keine neuen Funktionen für den Baukasten hier im Blog? Immer nur Tipps und Vorstellungen anderer Seiten. Wer täglich mit jimdo arbeitet und die vielen kleinen und größeren Macken ständig umschiffen muss der verzweifelt langsam. Wann gibt es mal wieder Funktionen, die viele User schon lange wünschen und immer wieder angesprochen haben????? Und wolltet ihr nicht regeläßig neue Designvorlagen vorstellen? Statt dessen bringt ihr sogenannte Apps, die nichts weiter als ein Widget sind mit einem Hilfetext. Man klickt auf Kalender und anstatt dass man einen von euch gebauten Kalender hat kommt eine Anleitung wie man Google Kalender einbindet? Das ist - leider - absoluter Kinderkram und täuscht Funktionen vor die nicht da sind. Sowas gehört in die Hilfeseiten und fertig.
    Fällt euch nichts neues ein? Dann schaut mal eure Mitbewerber an, da gibt es ständig Verbesserungen und Neuheiten.

  • #10

    Jan (Montag, 10 Oktober 2016 09:53)

    Oh ja gute Idee :-) Danke

  • #11

    Top-Statt-Flop.com (Montag, 10 Oktober 2016 09:57)

    Einige Neuerungen fehlen uns noch ansonsten ganz gut.

    Herzlichen Dank

  • #12

    Günther Wagner Immobilien (Montag, 10 Oktober 2016 11:02)

    Guter Beitrag! Einiges davon kannste ich schon und sehe mich nochmals bestätigt.
    Das mit dem Platz zum Atmen: genauso sehe ich das auch! Es ist angenehmer auf der Startseite weniger zu lesen anstatt überschwemmt zu werden.

  • #13

    Maike (Montag, 10 Oktober 2016 11:49)

    Nur damit ihr das nicht missversteht: Eure Aussage im Mai:

    Daher stellen wir auch laufend wieder neue Jimdo-Designs online.

    Was muss man unter "laufend" verstehen? tägich, nonatlich, jährlich?????

  • #14

    Jimdo-Team (Montag, 10 Oktober 2016 14:54)

    @Maike: Im Juli und August haben wir die neuen Designs Stockholm und Tokyo an den Start gebracht. Regelmäßige Veröffentlichungstermine gibt es nicht. Unser Portfolio ist auch schon ziemlich vollständig. Warum eine Riesenauswahl nicht unbedingt ein Vorteil ist, erklärt der obige Artikel ja sehr schön. Stattdessen setzen wir auf die Vielfalt, die durch die flexiblen Gestaltungsmöglichkeiten entstehen. Viele Grüße, Tim

  • #15

    Dennis (Montag, 10 Oktober 2016 19:57)

    Finde Jimdo echt super und würde mich freuen wenn ihr so weiter macht wie bis her also Daumen nach oben.

  • #16

    Tals (Dienstag, 11 Oktober 2016 07:54)

    Ein Sehr Schöner und Lesenswerter Beitrag vielen Dank für die Bereitstellung.

  • #17

    Für Männer (Dienstag, 11 Oktober 2016 18:05)

    Ohh cool.
    Danke

  • #18

    inspinature (Dienstag, 11 Oktober 2016 20:50)

    Keep it simple - auf das Wesentliche konzentrieren und die Seiten nicht überladen. Ich finde das macht eine Website auch zeitlos.

  • #19

    Bert Spiegel (Mittwoch, 12 Oktober 2016 08:46)

    Leider ist es momentan nicht möglich paypal plus zu integrieren. Bin total verärgert. Die anderen Anwender sind Jimdo-Nutzern wieder einmal voraus. Auch andere Themen wie eine tiefere Seitenstruktur werden seit Jahren von Jimdo konsequent ausgeblendet. Ich muss feststellen, dass Jimdo nicht mehr das richtige Shopsystem für mich ist. Als ich mich für Jimdo entschieden habe, habe ich einen Fehler gemacht.

  • #20

    Ja, das stimmt. (Mittwoch, 12 Oktober 2016 15:22)

    ♥ Hallo! ♥

    Eure Tipps und Tricks sind immer hilfreich und werden auch oft auf meiner Webseite angewendet.

    Was ich jedoch Schade finde, ist, dass Kommentare, die spät geschrieben werden "untergehen". Wenn man viele Kommentare hat, gehen die Kommentare unten leider manchmal unter, weil die meisten Leute nur ca. 10 Kommentare lesen.

    Schönen Tag an alle, die das hier lesen (obwohl es so weit unten steht) wünscht alionblog.de

  • #21

    Gerald (Mittwoch, 12 Oktober 2016 21:14)

    Danke!
    www.der-edelstein.at

  • #22

    Nicole (Donnerstag, 13 Oktober 2016 22:48)

    Der richtige Erfolg kommt natürlich mit einem richtigem, einzigartigem Inhalt! Ich finde eure Designs echt super, besonders gut zu den verschiedenartigsten Inhalten kombiniert! Ein Freund will sich eine neue HP basteln, da habe ich ihm gleich mal eure Seite gezeigt!

  • #23

    tom (Freitag, 14 Oktober 2016 17:11)

    "Entscheidet euch im Zweifel immer für das Einfachere" - wie wahr ;-)
    Gute Tipps!

  • #24

    Dirk (Mittwoch, 19 Oktober 2016 11:27)

    danke für den Beitrag

    lG. Dirk

    www.parfumboss.de

  • #25

    frank sieweke (Donnerstag, 03 November 2016 22:43)

    mir fehlt eine suchfunktion für den kunden, ein kundenkonto im shop, funktionierende schnittstellen,z.b. was die einbindung von rechtstexten betrifft usw..
    sorry, teilweise ist die ganze shopsoftware eher auf gut glück zurechtgefummelt, als das ich ein einfach funktionierendes system erkennen könnte.

    muss es ausgerechnet google-analytics sein?

  • #26

    Strandpalais Duhnen (Samstag, 05 November 2016 16:18)

    Danke für die vielen Hinweise.
    Suchfunktionen wären top, da muss ich frank sieweke recht geben.

  • #27

    Renate Kerec (Sonntag, 06 November 2016 14:15)

    Danke für die vielen tollen Tipps von Eurer Seite. Ich versuche auf meiner Seite www.napuri.at diese qualitativen Inputs auch umzusetzen.

    lg Renate

  • #28

    Tom (Samstag, 03 Dezember 2016 15:01)

    Wie immer ein sehr hilfreicher Artikel!
    THANX