Wie man eine Startseite gestaltet
18. November 2021![Wie man Startseite einer Website richtig gestalltet](https://www.webnode.com/de/blog/files/2021/11/HomePage.png)
Die Startseite deiner Website ist wie ein Schaufenster. Sie ist perfekt, um die Aufmerksamkeit deiner potenziellen Kunden/Kundinnen anzuziehen. Lese wie du deine Startseite so gestaltest, dass Besucher/-innen in deine Seiten hineinzuschauen und nach mehr wollen.
Einige kennen dein Unternehmen bereits. Denn, wenn sie deine Website öffnen, wissen sie genau, wo sie klicken müssen. Neue Besucher/-innen gelangen durch Suchergebnisse auf deine Startseite. Sie scannen diese schnell nach Überschriften und Schaltflächen, die sie anklicken können. Hierbei haben sie keine Zeit herauszufinden wie deine Website aufgebaut ist oder funktioniert, oder gar Texte zu lesen.
Wenn du wenn du die Startseite durchdacht gestaltest, werden deine Besucher/-innen an deiner Website ihre Freude haben und wieder kommen.
Die Vorteile einer gut gestalteten Startseite
1. Eine gut gestaltete Startseite zeigt deinen Kunden/Kundinnen, wer du bist und womit du ihnen helfen kannst.
Begrüße deine Besucher/-innen, indem du ihnen klar und deutlich sagst, wer du bist und was du für sie tun kannst. Sicherlich hast du schon vom Alleinstellungsmerkmal (unique selling proposition, USP) gehört. Mit anderen Worten ist dass das, was dein Unternehmen besser macht als die Konkurrenz. Mache allen auf Anhieb klar, was deine Stärken sind.
Je eindeutiger deine Frontseite ist, desto besser wird diese intuitiv verstanden und desto höher sind deine Chancen, Neukunden/Neukundinnen zu gewinnen.
2. Mit einer gut gestalteten Startseite kannst du deine Marke aufbauen.
Die Frontseite hat einen wichtigen Einfluss auf dein Unternehmen. Deshalb solltest du sie professionell gestalten. Achte auf eine starke Markenidentität, damit deine Besucher/-innen dich sofort erkennen.
Wahrscheinlich hast du dein Logo, deinen Slogan, deine Markenfarben und Bildmaterial bereits fertig. Falls nicht, ist dafür jetzt der richtige Zeitpunkt. Verwende diese kontinuierlich auf deiner Website. Somit bauen deine Besucher/-innen sofort eine Verbindung zwischen deiner Site und Offline-Präsenz auf.
3. Eine gut gestaltete Startseite bringt Conversions
Übersichtlich und strategisch platzierte CTAs (call-to-action), wie Buttons und verlinkte Texte, können, die User fesseln und dazu bewegen deine Dienste oder Produkte zu kaufen.
Es geht darum eine positive User Experience (UX) zu schaffen, vom ersten Klick auf deine Startseite bis hin zur den Unterseiten und dem Checkout. Die Startseite ist der Anfang der Reise deiner Kunden/Kundinnen.
Behalte die Reise deine/r Kunden/Kundinnen im Auge
Die sogenannte Customer Journey beschreibt die Schritte, die dein/e Kunde/Kundin von der Landung auf deiner Startseite bis zum Kauf deiner Produkte oder Dienste und darüber hinaus durchläuft. Wenn du diesen Weg kennst, kannst du deine Start- und folglich alle anderen Unterseiten entsprechend optimieren.
Versuche dir deine durchschnittlichen Kunden/Kundinnen vorzustellen
- Wer sind sie?
- Was ist ihr Ziel?
- Was brauchen diese, wenn sie deine Seite öffnen?
- Wie kannst du deren Bedürfnisse erfüllen?
Insbesondere sollten diese Bedürfnisse so gestillt werden, dass der/die Kunde/Kundin dafür keine extra Schritte unternehmen oder viel Zeit investieren muss.
Sobald du eine bestimmte Zielgruppe oder Persona im Kopf hast, können Details folgen. Gebe ihr einen Namen und einen Avatar, damit es sich noch persönlicher anfühlt.
Beispiel einer Zielgruppe oder Persona
Versuche nun dir die Reise deiner Besucher/-innen so vorzustellen, als wäre deine Website ein echtes Geschäft. Gehe auf alle Fragen ein und begleite sie bis zur Kasse.
Mache die Homepage groß genug, um alle Fragen zu beantworten. (Aber übertreibe es nicht. Du kannst immer noch eine Schaltfläche “Mehr lesen” verwenden, um Wissbegierige weiter zu leiten).
Tipp
Verwende eine Chatbox, um einen echten Verkaufsprozess zu imitieren. Auf diese Weise kommunizierst du mit deinen Kunden/Kundinnen in Echtzeit über einen Live-Chat.
Hier erfährst du, wie du ein Live-Chat-Fenster einrichtest.
Was ist ein effektives Layout?
Die durchschnittliche Homepage mit allen Unterseiten ist in zwei Bereiche unterteilt – “above the fold“ und “below the fold“.
Diese Begriffe sind durch die Zeitungsbranche geprägt, wo die wichtigsten Geschichten in der oberen Hälfte der ersten Seite platziert werden. So erfährt jeder bereits im Vorbeigehen am Kiosk wichtigsten Neuigkeiten. Diese effiziente Praxis wird im Webdesign groß verwendet.
Das Fold-Schema
Elemente, die oberhalb der Faltung bleiben sollten
Einer der wichtigsten Teile deiner Homepage ist der Inhalt, der in der oberen Hälfte der Startseite erscheint – oder anders ausgedrückt: above the fold. Welche Elemente sollten hier platziert werden?
Übersichtliche Navigation
Gestalte die Navigation so praktisch wie möglich. Denke daran: Je mehr Klicks den User vom Ziel trennen, desto mehr Zeit geht verloren, bis ein Formular ausgefüllt, das Produkt gefunden oder ein Newsletter bestellt wird.
Nimm nur die notwendigsten Seiten in die Hauptnavigation auf. Verlagere den Rest, wie z. B. die Allgemeinen Geschäftsbedingungen oder zum Beispiel die Datenschutzerklärung, in die Fußzeile.
Verstecke nicht alle deine Dienstleistungen oder Produktkategorien unter einem faden Etikett – nenne diese klar und direkt. Aber überfordere deine Besucher/-innen nicht mit zu vielen Optionen.
Betrachte folgende Beispiele: Stell dir vor, du bist auf der Suche nach Kakteen für deine Sammlung. Mit welcher Navigation findest du diese schneller und einfacher?
Ein Beispiel für eine nicht ganz so klare Navigation
Ein Beispiel für eine übersichtlichere Navigation
Starke Heldenbilder
Ein weiteres bewährtes Merkmal ist das sogenannte Heldenbild (hero image). In der Regel handelt es sich dabei um ein übergroßes Bannerbild am oberen Rand einer Website.
Hier solltest du deine Mission klar formulieren – wer du bist, was du tust, was du deinen Usern geben und wie ihnen helfen kannst. Sei so eindeutig wie möglich, niemals vage.
Fasse dich kurz. Sei prägnant. Stelle dir das vor wie eine Plakatwand auf der Autobahn. Du musst die Aufmerksamkeit der schnell fahrenden Autofahrer auf sich lenken und die Botschaft innerhalb von Sekunden vermitteln.
Verwende außerdem die bestmöglichen Bilder, um dich zu zeigen. Menschen reagieren viel eher auf ansprechende Bilder als auf Text. Schrecke nicht mit minderwertigen Bildern aus irgendeiner online Photo-Bank ab. Zeige dich von deiner echten Seite.
Ein überfülltes Heldenbild und der Bereich des Headers
Klare Call-to-Action-Schaltfläche (CTA)
Interessierte reagieren auf den Aufruf zum Handeln (call to action), sobald sie diesen sehen, da sie bereits entschlossen sind das Produkt zu kaufen.
Ein Beispiel für einen unklaren Call-to-Action
Ein Beispiel für eine klare Call-to-Action-Schaltfläche
Schüchterne hingegen benötigen auf der Seite einen weiteren CTA, der mit der richtigen Menge an Text platziert wird.
Denke auch hier an die Customer Journey – platziere den CTA an dem Punkt, an dem der/die Besucher/-in bereits genug über deine Produkte oder Dienstleistungen weiß und durch den begleitenden Inhalt nur noch auf den nächsten Schritt wartet den Button zu klicken.
Elemente, die unterhalb des Folds bleiben sollten
Du hast also nach unten gescrollt und befindest dich nun below the fold. Das ist die Stelle, die wenig bis gar nicht gelesen wird.
Denke daran: Menschen lesen nicht, sie scannen. Wie geht man am besten mit dieser Tatsache um?
Gestalte den Rest der Seite als Launchpad
Mache die Startseite zum Startpunkt, von dem deine Besucher/-innen leicht zu anderen Seiten gelangen, nach denen sie suchen. Doch, verrate nicht alles auf einmal.🤫
Verwende Kostproben der auf den anderen Seiten veröffentlichten Inhalte. Fordere auf eine bestimmte Schaltfläche oder einen Link anzuklicken und mehr über dein Produkt, deine Dienstleistungen, dein Unternehmen usw. zu erfahren. Lass dich entdecken.
Deine Startseite als Launchpad
Mit Social Media und Kundenbewertungen glänzen
Sammele die Kommentare zufriedener Kunden/Kundinnen. Präsentiere auch das Firmenlogo deiner Kunden/Kundinnen. Wurden deine Dienstleistungen zum Beispiel in renommierten Zeitschriften vorgestellt? Zeige diese mit Stolz!
Zeige Referenzen deiner Kunden/Kundinnen
Bewährte Praktiken zur Startseitengestaltung
Altbewährt ist gut.
Menschen suchen nach gewohnten Mustern und Tradition. Deshalb ähneln sich viele Websites. Dies ist nicht unbedingt etwas Schlechtes.
Es wird zum Beispiel erwartet, dass das Logo oben links zur Homepage zurückführt. Oder dass sich die Kontaktinformationen oben rechts befinden.
Auf diese Weise wissen alle sofort, wie sie die Website bedienen, ohne sich allzu viele Gedanken über dessen Funktionalität zu machen. Besucher/-innen können somit mehr über deinen Service und/oder Produkte nachdenken. Eine Win-Win-Situation.
Ein altes Beispiel für ein unkonventionelles Layout der Startseite
Weniger ist mehr
Denke an Coco Chanel: Ziehe immer das letzte Accessoire aus, das du angezogen hast.
Das Gleiche gilt für alle Schaltflächen, Textkopien, Videos, Gifs, Memes und Titel, die du gerade auf deiner Startseite hinzugefügt hast. Zeige nur relevantes. Lass Details für Unterseiten übrig.
Ein Beispiel für eine überfüllte Startseite
CTA attraktiv und klar gestalten
Wähle für die Schaltfläche kontrastierende Farben zum Hintergrund, damit sie sich abhebt. Verwende kurze, aber selbsterklärende Texte. Lass keinen Raum für Rätselraten, was die Schaltfläche bewirkt, und fragen lässt: “Soll ich das überhaupt anklicken?”😵.
Wenig Text
Um es noch einmal in Erinnerung zu rufen: Menschen lesen nicht. Sie scannen. Übermittele ihnen wichtige Botschaften in möglichst wenigen Worten. Ja, sie interessieren sich für deine Geschichte, aber nur, wenn diese höchstens zwei Sätze lang und bebildert oder ein kurzes Video ist.
Wähle gute Bilder und Videos
Qualität ist wichtig, um sich von der Masse abzuheben. Was die Bildgröße betrifft, so sollten vorzugsweise das Heldenbild weniger als 600 kB alle anderen Abbildungen weniger als 250 kB einnehmen.
Die visuelle Hierarchie richtig nutzen
Es gibt Überschriften, Untertitel, Absätze und Schaltflächen. Verwende daher immer die gleiche Art der Formatierung für gleich wichtige Inhalte.
Eine Startseite mit chaotischer Hierarchie
Vermeide falsche Fußzeilen
Die Menschen neigen dazu, auf einen dunkleren Abschnitt der Website zu reagieren, als ob dieser die Fußzeile und somit das untere Ende wäre. Sie werden nicht weiter nach unten scrollen. Auch hier gilt: Verwirre deine Besucher/-innen nicht mit doppelten Unterteilungen.
Vorsicht vor falschen Fußzeilen – der schwarze Abschnitt in der Mitte als Beispiel
Die wichtigsten Erkenntnisse über die Gestaltung der Startseite einer Website
- Der erste Eindruck zählt. Verwende hochwertige Bilder und harmonierende Farben.
- Menschen lesen Websites nicht, sie scannen sie. Halte Texte so kurz und prägnant wie möglich.
- Mache CTAs unwiderstehlich, indem du die richtige Farbe und treffende Worte der Schaltfläche wählst.
- Eindeutige USP. Verwende dafür das Heldenbild
- Tradition funktioniert. Die meisten Websites verwenden eine einfache Struktur, weil es funktioniert.
- Zeige nur das Wichtigste.
Möchtest du alle deine Seiten gestalten, nicht nur die Startseite? Probiere die Schritt-für-Schritt-Anleitung aus.