Der Shopify Blog

7 Tipps für deine Homepage: Diese Elemente gehören auf die Startseite jeder Website

Homepage bauen - shopify.de

Natürlich dient deine Homepage vor allem zur Präsentation und Vorstellung deiner Marke. Allerdings besteht sie zudem aus einer Reihe an kodierten Anleitungen, die neue und bestehende Kunden schnell das finden lassen sollen, wonach sie suchen.

Jedes Detail sollte darauf ausgerichtet sein, einen guten ersten Eindruck zu hinterlassen und zu motivieren, bestimmte Handlungen zu vollziehen.

Solche Handlungen sind eng gekoppelt an das Ziel, welches deine Homepage verfolgt. Solche Ziele können beispielsweise klassischer Produktverkauf sein oder Newsletter-Abonnenten zu generieren.

Es gibt nicht den einen, richtigen Weg, eine Startseite zu designen. Im Folgenden findest du dennoch sieben bewährte Tipps, die du im Kopf behalten solltest, wenn du deine Homepage erstellst. Diese Grundlagen des Homepage-Designs solltest du stets berücksichtigen - unabhängig davon, ob du deinen ersten Store aufbaust oder die Homepage deiner Webpräsenz überarbeitest.

Diese Fragen solltest du dir stellen, wenn du eine Homepage erstellst

Eine Homepage, die für das eine Unternehmen gut funktioniert, kann für ein anderes Unternehmen ein Flop sein. Wenn du Ausschau nach Design-Optionen hältst und dir unsicher bist, in welche Richtung du gehen möchtest, dann stell dir folgende Fragen, um eine fundierte Entscheidung zu treffen:

  • Was soll der Kunde machen? (z. B. kaufen, sich in deinen E-Mail-Verteiler eintragen usw.)
  • Wie einfach ist es für deine Kunden, genau das zu tun?
  • Wie viele Schritte müssen die Kunden unternehmen, um ihr Ziel zu erreichen?
  • Wie viele Informationen brauchen deine Kunden, um zum nächsten Schritt überzugehen?
  • Gibt es Schritte, die du löschen könntest?

Manche Besucher, die auf Homepages landen, wissen genau, was sie wollen - andere wissen es nicht.

Du musst das Design deiner Homepage für beide Gruppen ausrichten und gleichzeitig sichergehen, dass deine Entscheidung zu deinen Zielen passt.

Eine gute Startseite sollte diejenigen Besucher willkommen heißen, die auf der Suche nach einem bestimmten Ergebnis sind, und gleichzeitig denjenigen die Richtung weisen, die es noch nicht sind. 

Welche Ergebnisse sollte das Design deiner Homepage unterstützen?

Im Durchschnitt verbringen Besucher zehn bis zwanzig Sekunden auf deiner Homepage. Aus der Design-Perspektive bedeutet es, dass der Navigationsfluss klar und verständlich sein muss, sodass die Besucher schnell den besten Pfad für sich ausfindig machen können.

Dieser Drang nach Schnelligkeit und “Flow” ist ein psychologisches Phänomen und nennt sich “Entscheidungsvermeidung”, welches die menschliche Tendenz beschreibt, eine Entscheidung abzuwenden, die zu lange dauert.

Wie du weitere psychologische Trigger für dein Business nutzt, steht in diesem wichtigen Artikel.

Auf einer Homepage nennt sich Entscheidungsvermeidung “Absprung” und beschreibt den Prozess des Verlassens einer Seite. Um dies zu umgehen, sollte die erste Aufgabe deiner Homepage sein, potenzielle Kunden zum Bleiben zu bewegen. Um das zu tun, musst du die Rolle dieses wichtigsten Teils deiner Webseite ganz genau verstehen.

Lesetipp: 20 Beispiele von Händlern, die ihre Onlineshops grandios umgesetzt haben, findest du hier!

1. Above-the-Fold (ATF) Content als Inspiration für Handlungen

Wenn Webdesigner über den “above-the-fold” Bereich auf einer Homepage reden, dann meinen sie die Sektion, die für Nutzer auf den ersten Blick sichtbar ist, ohne dass sie scrollen müssen.

Wenn du darüber nachdenkst, was sich “above-the-fold” befinden soll und welchen Effekt es auf den Rest deiner Website hat, so konzentrier dich auf die ersten Handlungen, von denen du  willst, dass deine Besucher sie vollziehen, wenn sie auf deiner Homepage landen.

Das heißt: Welche Informationen brauchen sie zuerst? Und wie kannst du den Besuchern die Entscheidungen vereinfachen?

Homepage above-the-fold gestalten - Shopify.de

Im oberen Beispiel siehst du den oberen Teil der Homepage von GØLD's. GØLD's verkauft Bartöl und Bartpflegesets. Da ihr einziges Ziel darin besteht, potenzielle Kunden zum Kauf ihres Hauptproduktes zu bewegen, schmückt ein knallbuntes und produktspezifisches Bild die above-the-fold-Sektion mit einem klaren Call-to-Action, der Besucher weiterleitet, um einen Kauf zu tätigen.

Auf dieser Homepage gibt es zwei schnelle Entscheidungen, die ein Nutzer treffen kann:

  1. Weiter, um zu kaufen
  2. Oder nach unten scrollen, um mehr Informationen “below-the-fold” zu erhalten. Das heißt in diesem Fall: Bewertungen, Videos und Informationen über die Zutaten und Wirkung des Produktes.

Die meisten Webseiten-Header nutzen eine Kombination aus

  • einem ausdrucksstarken Titel,
  • einem überzeugenden Untertitel und
  • einem packenden Bild im above-the-fold Bereich,

um neue Besucher auf der Seite zu halten und sie mit der Marke vertraut zu machen.

Natürlich gibt es auch viele andere Wege, wie du das Interesse deiner Kunden von Anfang an wecken kannst. Zum Beispiel mit einem Promo-Banner über der Navigationsleiste, um ein besonderes Angebot oder kostenlosen Versand zu bewerben.

2. Verständliche Navigation

Die Navigationsstärke einer Webseite beruht auf ihrer Simplizität. Das scheint widersprüchlich, wenn du unterschiedliche Besuchertypen im Onlineshop empfangen willst, doch ist es sinnvoll, wenn man bedenkt, wie schnell sich Nutzer im Internet von einer Seite zur nächsten bewegen.

Die Navigation im Header sollte so überschaubar sein wie möglich und die Pfade priorisieren, die für Besucher am relevantesten sind. Gemäß der Millerschen Zahl empfehlen Experten des Webdesigns nicht mehr als sieben Navigationslinks auf der Homepage zu verwenden.

Menschen bedienen sich einer organisatorischen Erinnerungstechnik, die "Chunking" heißt und in der Informationen auf kleine mentale Einheiten - die Chunks - runtergebrochen werden. Je weniger Chunks es gibt, desto einfacher ist es, die Erinnerung abzurufen. In einer einflussreichen Zeitschrift, die 1956 veröffentlicht wurde, erklärte der Psychologie Professor George A. Miller, dass unser Kurzzeitgedächtnis generell nur sieben Posten gleichzeitig präsent halten kann.

Verwirrende Navigation.JPG

Seiten mit zu vielen Navigationsoptionen können überfordernd wirken, was die Wahrscheinlichkeit erhöht, dass die Besucher abspringen oder dem falschen Pfad folgen. Als eine gute Praktik hat sich erwiesen, die Navigation von links nach rechts zu priorisieren angefangen mit der wichtigsten Seite links.

Wenn du sehr viele Produkte und Kollektionen hast, konzentriere dich in deiner Navigation auf der Homepage auf deine hochkarätigen Hauptkollektionen und verwende ein Mega Menü oder ein Drop Down Menü, um eine Sub-Navigation einzubauen.

Eine Subnavigation ist eine gute Methode, deine Produkte zu organisieren sowie eine einfache Entdeckungstour durch deine Seiten anzubieten, ohne die Kunden mit zu vielen Optionen zu überfordern.

Subnavigation im Onlineshop - Shopify.de

Die Homepage von VYREU - als Beispiel - balanciert eine minimale Navigation und ein umfassendes Inventar mit einem kleinen Dropdown Menü sowie einem schönen Mega Menü, das einzelne, ausgewählte Uhren präsentiert.

Einige Seiten beinhalten ebenfalls Links zu der Über-Uns-Seite, einer Kontaktseite, einer FAQ-Seite und anderen Seiten in der Header-Navigation, weil diese die wichtigsten Ziele unterstützen.

Findest du allerdings heraus, dass Besucher auf diesen Seiten nicht mit Hinblick auf deine Ziele konvertieren, ist es wahrscheinlich, dass diese Links deine Kunden von dem richtigen Pfad zur Konversion eher abbringen. Wenn das der Fall ist, ist es ratsamer, diese Links stattdessen in den Footer zu platzieren.

Links im Footer platzieren - Shopify.de

3. Auffällige Bildsprache

Entscheidungsvermeidung gilt nicht nur für die Navigation, sondern auch für andere Elemente auf deiner Homepage. Berücksichtige die Grenzen der Aufmerksamkeit deiner Nutzer, denn das wird dir helfen beim Designen deiner Startseite, den Schwerpunkt auf das zu legen, was am wichtigsten ist.

Ob du ein Produkt oder eine Kollektion promotest oder versuchst, neue Leads zu generieren, das Ziel deines Bildmaterials ist es stets, Aufmerksamkeit deiner Nutzer zu wecken, sobald sie deine Seite ansurfen.

Im Folgenden findest du einige Methoden, Bildmaterial in die above-the-fold Sektion deiner Homepage unterzubringen:

Bild mit einer Texteinblendung

Bild-Hero mit Text auf der Homepage - Shopify.de

Dieser Stil des above-the-fold-Bildmaterials verbindet oft ein einziges, aussagekräftiges Bild, einen Slogan und einen Call-to-Action. Es funktioniert am besten für Händler, die sich auf ein konkretes Angebot above-the-fold konzentrieren, wie zum Beispiel ein Ausverkauf in einem begrenzten Zeitraum, ein Vorzeigeprodukt oder eine saisonale Kollektion.

Slideshows

Slideshow auf der Homepage - Shopify.de

Du könntest dich auch für eine Slideshow entscheiden und mit jeder einzelnen Slide für einen besonderen Sale, eine Produktgruppe oder ein qualitativ hochwertiges Produktfoto werben.

Shopinhaber, die eine große Produktauswahl über wenige Kategorien verkaufen, wählen oft diese Option, wenn sie einige wenige Kollektionen oder Seiten haben, die sie an Besucher promoten wollen.

Sortiere die Slides nach ihrer Priorität angefangen mit der wichtigsten Botschaft. Es ist ratsam, sich auf drei Slides zu limitieren, denn Nutzer werden sich nicht allzu lang jeden einzelne Slide ansehen, bevor sie dann den nächsten Schritt unternehmen.

Video

Video auf der Homepage - Shopify.de

Gewisse Marken profitieren vom Bildmaterial auf ihrer Homepage, welches ihre Geschichte erzählt. Einige Produkte, vor allem besonders innovative oder komplexe, erfordern zusätzliche Informationen über ihre Verwendung, um Besucher neugierig zu stimmen.

Schau dir zum Beispiel die Homepage von Searebel an. Viele Besucher wissen wahrscheinlich noch nicht, dass sie das Produkt brauchen, also schafft die Homepage Aufregung und eine bestimmte Atmosphäre, um das Produkt durch eine Videodemonstration zu zeigen - ein natürlicher erster Schritt im Konversionsprozess.

Da die Bilder einen sofortigen und signifikanten Effekt haben, ist es wichtig deren hohe Qualität und den Vorzeigecharakter deiner Brand sicherzustellen.

Wenn du kein Fotograf bist, kannst du jemanden engagieren oder den Image Picker im Shopify Theme Editor nutzen, um aus unserer Kollektion aus lizenzfreien Fotos auszuwählen.

Image Picker im Shopify Theme Editor - Shopify.de

4. Ein direkter Call-to-Action

Betrachte einen Call-to-Action wie ein Ausfahrtsschild auf der Autobahn: kurz, schwer zu verfehlen und sollte die Fahrer dorthin dirigieren, wo sie hin müssen.

Deine Calls-to-Action (CTAs) und wohin sie verlinken, sollten mit den nächsten Schritten, die der Kunde unternimmt, übereinstimmen, um das Ziel deiner Homepage zu erreichen. Das könnte bedeuten, dass du zu deiner aktuellsten Kollektion verlinken oder Nutzer auffordern, sich ein Erklärungsvideo anzuschauen, um mehr zu erfahren.

Die Nutzer müssen sofort verstehen, wohin sie klicken sollen, denn dein Call-to-Action-Button muss aus dem umgebenden Design hervorstechen. Je länger der Nutzer braucht, um den Call-to-Action zu finden, desto wahrscheinlicher werden er oder sie verwirrt und klicken weg.

Klare Calls-to-Action auf der Homepage - Shopify.de

Die Homepage von Stilnest, die oben zu sehen ist, verdeutlicht ganz hervorragend, wie Nutzer auf ihren idealen Konversionspfad gelangen. Brillantes Bildmaterial und ein einziger Hashtag fangen die Aufmerksamkeit der Nutzer ein, während der Call-to-Action ganz klar und deutlich platziert ist und durch das Schwarz aus dem hellen Hintergrund hervorsticht.

Nichts in der above-the-fold Sektion lenkt von dem eigentlichen Ziel der Homepage ab, und zwar den Nutzer in die Richtung zu weisen, durch die aktuellsten Produkte zu browsen. Wenn du herunterscrollst, siehst du noch mehr CTAs, die auffordern, weitere Produkte zu kaufen.

5. Ein leicht zugänglicher Warenkorb

Der Warenkorb ist für die meisten E-Commerce-Webseiten ein essenzieller Teil der Homepage. Zu einer intuitiven Gestaltung der Navigation für deine Kunden gehört ein leicht auffindbarer Warenkorb. Ein “sticky” Warenkorb (manchmal auch Slide-Out Warenkorb genannt und in einigen Shopify Themes erhältlich) ist die ganze Zeit, also während des gesamten Browsens, präsent und zugänglich auf dem Bildschirm und meistens in der rechten oberen Ecke platziert.

Noch besser ist es, wenn du die Anzahl der Produkte anzeigst, die aktuell im Warenkorb deines Kunden liegen. Eine deutliche und auffällige Benachrichtigung neben dem Warenkorb zeigt an, wie viele Produkte sich aktuell darin befinden und erinnert die Kunden zusätzlich daran, dass ihr Kaufprozess noch nicht abgeschlossen ist. Das motiviert sie dazu, zur Kasse zu gehen und den Kauf zu vervollständigen.

Im Klartext: Mach es deinen Kunden so deutlich wie möglich, dass sich Objekte in ihrem Warenkorb befinden und zeig ihnen, wie sie an diese Produkte kommen.

Ein gut auffindbarer Warenkorb - Shopify.de

Die Homepage von Fritzvold präsentiert eine Benachrichtigung, welche die Anzahl der Objekte im Warenkorb des Nutzers hervorhebt, sowie einen Slide-out Link, der dem Nutzer ermöglicht, ganz einfach weiterzushoppen oder zur Kasse zu gehen.

6. Eine Suchleiste (für große Kollektionen oder viele Produkte)

Neben einer minimalistischen Navigation und einem sticky Warenkorb implementieren viele Onlineshops eine Suchleiste, um Kunden, die genau wissen, was sie wollen, zu helfen, das zu finden, was sie suchen. Insbesondere, wenn du mehrere unterschiedliche Produkte hast oder viel Content veröffentlichst, ist eine solche Suchleiste empfehlenswert.

Suchleiste auf der Homepage - Shopify.de

Innonature zum Beispiel haben eine umfassende Kollektion unterschiedlicher Produkte. Um es den Kunden leichter zu machen, ihr Zielprodukt zu finden, hat Innonature eine smarte Suchleiste eingebaut, die Suchbegriffe automatisch vervollständigt und Produkte, Kollektionen und Seiten vorschlägt. Das kreiert einen direkten Pfad zu der Seite, nach der die Kunden auf deiner Homepage suchen.

Allgemein gilt: Nutzer, die eine Suche tätigen, konvertieren häufiger. Wenn deine Brand viele Produkte vertreibt, bietest du deinen Kunden eine einfache Suchleiste an als Alternative zu einer komplexen Navigation, die Kunden eher abschreckt.

Wenn du eine smarte Suchleiste in deinen Shopify Store implementieren willst, versuch es mit Smart Search & Instant Search oder Instant Search+.

7. Jenseits der Kante: Andere Elemente einer Homepage, die du berücksichtigen solltest

Alle Elemente, die du “below-the-fold” integrierst, das heißt nach dem Scrollen der Nutzer, sind nicht zwingend weniger wichtig. Oft verstärken sie und bauen Informationen aus, die du bereits vorgestellt hast. Sie bieten andere Pfade mit dem gleichen Konversionsziel an und machen Seiten verfügbar, die die Kunden brauchen.

Im Folgenden findest du eine kurze Liste mit Elementen, die du als Teil deines Homepage-Designs oder in den Footer integrieren kannst, abhängig davon, wie wichtig sie für deine Ziele sind.

1. Blogs, Videos und weiterer Content

Blog oder Video Content kann sehr gut für SEO (Was ist SEO???) sein, doch Content, der “above-the-fold” ist, hat die Eigenschaft, Kunden abzulenken und die Aufmerksamkeit weg von den Produkten zu ziehen. Generell willst du mit deinem Content die Aufmerksamkeit auf die Produkte lenken und nicht andersherum.

Ziehe in Betracht, Links in deinen Content below-the-fold oder sogar in den Footer zu platzieren, insbesondere wenn der Content nicht das Schlüsselelement deines Unternehmens ist. Erlaube Nutzern, die deine Webseite untersuchen wollen, diesen Content zu finden.

Möchtest du deinen Content promoten, fügen einen Link in deine Top-Navigation hinzu. Doch am besten ist es, den Link im Content in den sozialen Medien und über E-Mail- und Drittanbieter zu veröffentlichen, sodass externer Traffic zu deiner Seite entsteht.

Informatives Erklärvideo zum Produkt - Shopify.de

Cerascreen zum Beispiel verkauft medizinische Tests, mit denen man die eigene Gesundheit überprüfen kann. Ihr informatives Video auf der Homepage ist below-the-fold, was verhindert, dass Nutzer von ihrem Hauptangebot abgelenkt sind. Alles andere - vom FAQ bis zum YouTube Kanal ist unten im Footer verfügbar, sollten Nutzer danach suchen.

2. Social Proof: Kundenbewertungen, Testimonials und Presse

Der Social Proof, zu deutsch soziale Bewährtheit, dient einer Brand dazu, das vorhandene Vertrauen von Kunden oder Experten als Hebelwirkung zu nutzen, um das Vertrauen neuer Besucher zu gewinnen. Das können zum Beispiel Pressemitteilungen sein, Bewertungen, Posts in sozialen Medien, Galerien auf Instagram oder Aussagen von Influencern oder Experten.

Wenn du einen überzeugenden Social Proof hast, den du einsetzen kannst, dann könnte deine Homepage der richtige Ort dafür sein.

Die Homepage von Five unten präsentiert die Brands und Mitarbeiterstimmen von bekannten Unternehmen, die als Beleg für die Qualität des Produktes gelten. Dieser Beweis wird allerdings im unteren Teil der Seite vorgestellt, nachdem bereits festgestellt wurde, was das Produkt macht.

Bekannte Brands als Social Proof - Shopify.de

3. Produkte geringer Priorität und Zusatzprodukte

Ältere Produkte und Zusatzprodukte wie Uhrenarmbänder oder anderes Zubehör können eher im unteren Teil der Homepage aufgeführt werden. Denn du willst den Fokus eher auf deine Hauptprodukte setzen und auf neue Produktlinien verweisen.

Produkte, die kostengünstiger sind und deine Hauptartikel unterstützen, funktionieren am besten als Impulskäufe, die als Upsell-Produkte im Checkout angeboten werden. Sie können dennoch auf der Startseite in der “below-the-folder” Sektion auftauchen und Besucher auf sich aufmerksam machen, zum Beispiel wenn du Produkte verkaufst, die Ersatzteile benötigen.

Lizza konzentrieren sich auf den Verkauf des Low-Carb-Pizzateigs, doch bewerben auch ihre Premium Zusatzprodukte wie die Low Carb Tomatensoße und das Goldleinmehl im unteren Teil ihrer Homepage.

Lizza Zusatzprodukte auf der Homepage - Shopify.de

Seiten mit geringfügiger Priorität

Seiten, die du als nicht so wichtig einstufst, können sich je nach Business-Modell unterscheiden.

Generell machen sich Seiten wie die AGBs, Datenschutzbestimmungen und Rückversandrichtlinien am besten im Footer. Da es inzwischen eine inoffizielle Standardpraktik ist, Links zu solchen Seiten im Footer zu finden, suchen Besucher intuitiv im Footer danach.

Andere Seiten wie die “Über uns”-Seite, das Kontaktformular, die Filialstandorte oder die Bestellverfolgung können ebenfalls im Footer verbaut werden. Doch wenn diese Seiten ausschlaggebend dafür sind, ob Kunden kaufen oder andere von dir angestrebte Ziele erfüllen, dann kannst du dich dafür entscheiden, die Links in deiner Hauptnavigation oder sogar in deinem Homepage-Design mit aufzunehmen.

Zum Beispiel kann ein Händler, der ein Abo-Service vertreibt, seine Konversion signifikant steigern, indem er einen FAQ-Link in die Hauptnavigation platziert. One47 verkaufen sehr gut im stationären Handel, so lohnt es sich für die Händler ihren Besuchern schnell zu helfen, eine Filiale in ihrer Nähe zu identifizieren. Das Ganze funktioniert mit einem Store Locator Link.

Laden Finder auf der Homepage - Shopify.de

Möchtest du eine Seite mit geringfügiger Priorität identifizieren, so frag dich, wie du konkret davon profitierst, wenn du deine Besucher zu einer bestimmten Seite schickst oder ob der Link sie eher von den eigentlichen Zielen ablenkt.

Denk an das Design deiner mobilen Homepage

Der mobile Traffic wächst bekanntermaßen rasant. Da ein guter Teil deines Traffics höchstwahrscheinlich von mobilen Geräten kommt, sollte jede Entscheidung, die sich um das Design der Homepage dreht, mobile Nutzer mit einschließen.

Für mobile Besucher ist eine einfache Bedienung der Homepage besonders wichtig, um sie durch eine bestimmte Folge von Aktionen zu leiten.

Wenn du Eigentümer eines Shopify Stores bist, passen sich alle Elemente deines Themes aus dem Shopify Theme Store der Bildschirmgröße an. Doch bedenke, dass Bilder, die auf einem Desktop-Bildschirm gut wirken, auf einem mobilen Bildschirm womöglich abgeschnitten werden. Calls-to-Action können schwerer zu finden sein oder werden so verschoben, das Besucher eher wegklicken als draufzuklicken.

Im Vorschau-Modus des Shopify Theme Editors kannst du ganz einfach überprüfen, wie dein Shop auf unterschiedlichen Geräten wirkt.

Verbesser das Design deiner Homepage im Laufe der Zeit

Zu diesem Zeitpunkt hast du sicherlich festgestellt, dass es nicht den einen richtigen Weg gibt, eine Homepage zu designen. Faktoren wie die Demographie der Nutzer, das Branding, die Anzahl der Produkte, Marketing Kanäle und Sonstiges können das Verhalten deiner Nutzer vielfältig beeinflussen.

Daher ist es auch so essentiell deine Startseite als einen Prozess zu betrachten, den du anhand des Traffics und der Verkäufe misst und entsprechende Anpassungen im Laufe der Zeit machst. 

Aufmacherfoto von José Alejandro Cuffia.


Starte deinen eigenen Onlineshop mit Shopify!

14 Tage lang kostenlos testen—keine Kreditkarte erforderlich.


Which method is right for you?Geposted von Hendrik Breuer: Hendrik ist Redakteur des deutschen Shopify-Blogs. Möchtest Du einen Gastbeitrag veröffentlichen? Dann lies bitte zuerst diesen Leitfaden.

Dieser Artikel von Evan Ferguson erschien ursprünglich auf Englisch im Shopify.com-Blog und wurde lokalisiert und komplett überarbeitet von Inara Muradowa.