Startseite eines Shops gestalten: Aufbau und Inhalte
Kurz gesagt
Für Shops in Deutschland, Österreich und der Schweiz gilt derselbe Aufbau: Über der Falz stehen Marke, Angebot, Hauptnavigation und die ein bis vier wichtigsten Aufgaben, darunter konkrete Produktbeispiele, Service- und Vertrauensblöcke. Was keine Kaufentscheidung stützt, gehört nicht auf die Startseite. Grundlage der Rangfolge: 57 Prozent der Blickzeit liegen über der Falz (Nielsen Norman Group, 120 Personen, 2018, mehrere Seitentypen).
Das Wichtigste
- Rangfolge über der Falz: Kopfzeile, Angebot in einem Satz, ein bis vier Hauptaufgaben, Kategorieneinstieg.
- Blickzeit: 57 Prozent über der Falz, 74 Prozent in den ersten zwei Bildschirmhöhen (Nielsen Norman Group, 2018, mehrere Seitentypen).
- Konkrete Produktbeispiele wirken besser als Schlagwörter wie Sortiment oder Produkt-Highlight (Nielsen Norman Group, 15. März 2024).
- Bewegung, Blinken oder Scrollen, die von selbst starten, länger als fünf Sekunden dauern und parallel zu anderem Inhalt stehen, brauchen einen Mechanismus zum Pausieren, Stoppen oder Ausblenden; automatische Aktualisierung, die parallel zu anderem Inhalt steht, braucht dasselbe oder eine steuerbare Aktualisierungsfrequenz; beide Anforderungen entfallen, wenn die Bewegung oder Aktualisierung wesentlicher Teil einer Tätigkeit ist (WCAG 2.1, Erfolgskriterium 2.2.2, Stufe A).
- WebAIM prüfte im Februar 2026 eine Million Startseiten: 95,9 Prozent hatten erkannte WCAG-Verstöße, häufigster Befund war zu wenig Textkontrast.
- Weg zurück zur Startseite: verlinktes Logo plus ein Link mit der Bezeichnung Startseite (Nielsen Norman Group, 15. März 2024).
Eine Startseite ist eine Rangliste, keine Sammlung. Weil alle Blöcke um dieselbe Aufmerksamkeit konkurrieren, entscheidet die Reihenfolge darüber, was zuerst verstanden wird; festgelegt wird sie vor dem Layout.
Was Sie vorab brauchen
- die Kategorien, wie Kundschaft sie sucht, statt der Warengruppen aus dem Warenwirtschaftssystem (Kategorien und Navigation im Shop planen)
- Umsatzanteil und Zugriffszahlen je Kategorie für die letzten zwölf Monate
- die ein bis vier Aufgaben, die auf der Startseite zuerst erledigt werden sollen
- je Kategorie ein bis drei Beispielartikel mit Bild, Preis und Verfügbarkeit
- die Angaben, die vor dem Kauf gefragt werden: Versandkosten, Lieferzeit, Rückgabe, Zahlungsarten
- die Suchbegriffe aus der internen Suche, die in keinem Kategorienamen vorkommen
- Zugang zu Titel, Überschriften, Alternativtexten und Kopfbereich der Vorlage
- eine Testfassung, in der Sie Blöcke ausblenden und die Reihenfolge tauschen können
Der Bauplan: Blöcke nach Rangfolge
Vor der Gestaltung steht die Rangfolge; die Falz ist die Grenze des sichtbaren Bereichs ohne Scrollen. Die Nielsen Norman Group empfiehlt, den Inhalt zuerst nach Wichtigkeit zu ordnen und das Layout danach zu bauen (Homepage Design: 5 Fundamental Principles, 15. März 2024). Die folgende Tabelle setzt das für einen Shop um; Blocknamen sind ein Vorschlag, der Rang folgt aus der Aufgabe. Zahlenangaben in der Tabelle, etwa vier bis acht Kategorien, sind redaktionelle Richtwerte dieses Bauplans und keine Messwerte.
| Rang | Block | Inhalt | Aufgabe | Platz |
|---|---|---|---|---|
| 1 | Kopfzeile | Logo mit Link zur Startseite, Hauptnavigation, Suche, Konto, Warenkorb | Orientierung und Weg in jede Kategorie | oberste Zeile, ohne Scrollen sichtbar, auf allen Seiten gleich |
| 2 | Angebot in einem Satz | was der Shop verkauft, für wen, wodurch er sich unterscheidet | erkennen lassen, wo man gelandet ist | über der Falz, direkt unter der Kopfzeile |
| 3 | Hauptaufgabe | die ein bis vier wichtigsten Handlungen, je eigener Link oder eigene Schaltfläche | einen klaren Startpunkt geben | über der Falz, an einer Stelle am deutlichsten |
| 4 | Kategorieneinstieg | vier bis acht Hauptkategorien mit den Wörtern der Kundschaft | Weg in die Tiefe des Sortiments | unter der Hauptaufgabe; auf breiten Bildschirmen über der Falz, auf schmalen direkt darunter |
| 5 | Produktbeispiele | Bestseller oder Neuheiten als Kacheln mit Bild, Preis und Verfügbarkeit | zeigen statt behaupten | erste Bildschirmhöhe unter der Falz |
| 6 | Aktions- oder Saisonblock | ein befristetes Angebot mit Datum | einen zeitlichen Anlass sichtbar machen | unter den Produktbeispielen |
| 7 | Serviceblock | Versandkosten, Lieferzeit, Rückgabe, Zahlungsarten | Fragen vor dem Kauf beantworten | mittlerer Bereich |
| 8 | Vertrauensblock | Bewertungen, Herkunft, Kontaktwege | Unsicherheit nehmen | vor oder neben dem Serviceblock |
| 9 | Markenzeile | zwei Sätze zum Betrieb, Link auf die Über-uns-Seite | Herkunft und Ansprechperson zeigen | unterer Bereich |
| 10 | Fußzeile | Service- und Rechtsseiten, Kontaktwege, Zahlungsarten | nachschlagen und zurückfinden | unterster Block, auf allen Seiten gleich |
Zwei Beobachtungen aus den Quellen gehören zum Bauplan. Erstens bleiben die Kernaufgaben auf Rang 3 klein: Die Empfehlung lautet ein bis vier Aufgaben mit hervorgehobener Stelle, weil bei gleicher Betonung aller Elemente keines mehr auffällt (113 Design Guidelines for Homepage Usability, 31. Oktober 2001; 15. März 2024). Zweitens sammelt die Quelle Unternehmensangaben in einem Bereich, statt sie über die Seite zu verteilen.
Die Rechtsseiten in der Fußzeile hängen vom Zielland ab und sind je Land beschrieben: Impressum in Deutschland, Impressum in Österreich, Impressum in der Schweiz.
Was nicht auf die Startseite gehört
Die folgende Liste nennt Bausteine, die Aufmerksamkeit binden, ohne eine Kaufentscheidung vorzubereiten. Jede Zeile nennt die Quelle, aus der die Einschätzung stammt.
- Fenster und Startbildschirme (Splash-Screens) über dem Inhalt: Sie unterbrechen, bevor die Kundschaft etwas gesehen hat (Nielsen Norman Group, 15. März 2024).
- Karussells und Akkordeons mit automatischem Wechsel. In einer Nutzertestung von 2013 übersah eine Testperson ein Angebot, weil das Panel alle fünf Sekunden weiterlief (Nielsen Norman Group, 19. Januar 2013).
- automatisch startende Videos und automatisch abspielender Ton (Nielsen Norman Group, 19. Januar 2013; 15. März 2024).
- animierte kritische Elemente wie Logo, Angebotssatz (Tagline) und Hauptüberschrift (Nielsen Norman Group, 31. Oktober 2001).
- dekorative Stockfotos ohne Aussage über Sortiment oder Betrieb (Nielsen Norman Group, 15. März 2024).
- Willkommenssätze und Werbefloskeln in der Kopfzeile (Nielsen Norman Group, 15. März 2024).
- dieselbe Kategorie an mehreren Stellen der Seite; Wiederholung schwächt jede einzelne Nennung (Nielsen Norman Group, 31. Oktober 2001).
- generische Überschriften wie Produkt-Highlight über einem einzelnen Element (Nielsen Norman Group, 31. Oktober 2001).
- Inhalte für Mitarbeitende, etwa interne Richtlinien oder Intranet-Themen (Nielsen Norman Group, 31. Oktober 2001).
Für Fenster vor dem Inhalt nennt die Quelle einen Ausnahmefall: eine Einwilligung, die vor dem Laden des Inhalts eingeholt wird. Wie eine solche Einwilligung im Shop aussieht, ist je Land geregelt: Cookie-Einwilligung in Deutschland, Cookie-Einwilligung in Österreich, Cookie-Einwilligung in der Schweiz.
Schritt für Schritt: die Startseite aufbauen
Schritt 1: Rangfolge und Kernaufgaben festlegen
Notieren Sie jeden Kandidatenblock auf einer Karte und beantworten Sie zwei Fragen: Welche Aufgabe erledigt Kundschaft damit, und welche Kategorie oder welches Produkt öffnet der Block? Blöcke ohne Antwort fallen aus der Liste. Wählen Sie danach die ein bis vier Kernaufgaben und ordnen Sie jeder genau einen Block zu (Nielsen Norman Group, 31. Oktober 2001).
Prüfziel: Jeder Block lässt sich in einem Satz begründen, und kein Block hat dieselbe Aufgabe wie ein anderer.
Schritt 2: Kopfzeile bauen
Das Logo steht oben links, größer und auffälliger als seine Umgebung, und ist auf die Startseite verlinkt; zusätzlich gibt es einen ausgeschriebenen Link mit der Bezeichnung Startseite, damit der Weg zurück auch ohne Bild erkennbar ist (Nielsen Norman Group, 15. März 2024; 31. Oktober 2001). Suche, Konto und Warenkorb gehören sichtbar in dieselbe Zeile, weitere Punkte nur, wenn sie eine Kernaufgabe bedienen.
Für die Suche zählt der Name, der als Absender des Shops erscheint: Google bildet ihn automatisch aus dem Inhalt der Startseite und empfiehlt, ihn dort einheitlich zu verwenden und die WebSite-Angaben auf der Startseite der Domain zu hinterlegen (Site names, Stand 10. Dezember 2025). Verkaufen Sie in mehrere Länder, planen Sie Sprach- und Währungsumschalter in der Kopfzeile; die Preisangaben je Land behandeln die Länderartikel, etwa Preisangaben im Onlineshop in der Schweiz.
Schritt 3: Angebot und Aufmerksamkeit über der Falz
Was über der Falz steht, entscheidet mit, ob gescrollt wird; die Quelle nennt den Bereich ein Nadelöhr, das über das Weiterschauen bestimmt (Nielsen Norman Group, 15. März 2024). Blickaufzeichnungen mit 120 Teilnehmenden, über 130.000 Fixationen und Bildschirmen von 1920 × 1080 Pixeln ergaben 2018 diese Verteilung; die Messung umfasste mehrere Seitentypen, darunter Shop-, Nachrichten- und FAQ-Seiten, nicht nur Startseiten.
| Bereich der Seite | Anteil der Blickzeit |
|---|---|
| erste Bildschirmhöhe, über der Falz | 57 Prozent |
| erste zwei Bildschirmhöhen | 74 Prozent |
| oberste 20 Prozent der Seite, allgemeine Websites | über 42 Prozent |
| oberste 40 Prozent der Seite, allgemeine Websites | über 65 Prozent |
Daraus folgen zwei Layout-Aufgaben: die wichtigsten Inhalte so hoch platzieren, dass sie auf jedem Gerät ohne Scrollen sichtbar sind, und einen Hinweis geben, dass weiter unten Inhalt folgt. Ein randloses Bild ohne solchen Hinweis lässt Besucherinnen und Besucher annehmen, die Seite sei zu Ende (Nielsen Norman Group, 15. März 2024).
Schritt 4: Kategorieneinstieg und Produktbeispiele
Der Einstieg zeigt vier bis acht Hauptkategorien mit den Wörtern, die Kundschaft verwendet; die Methode dazu steht in Kategorien und Navigation. Unter den Kategorien stehen konkrete Beispiele: Die Quelle vergleicht einen Link mit der Bezeichnung Product Spotlight mit einer gezeigten Auswahl von Produkten und empfiehlt die gezeigte Auswahl (Nielsen Norman Group, 15. März 2024). Achten Sie darauf, dass Beispiele für das Sortiment stehen und nicht nur für eine Saison.
Für Suchmaschinen sind Links von der Startseite ein Signal: Google schließt aus der Verlinkung zwischen Seiten auf die relative Bedeutung einer Seite, empfiehlt Links mit a-Element und href statt JavaScript-Ereignissen und nennt als Beispiel, einen Bestseller von der Startseite aus zu verlinken (Help Google understand your ecommerce website structure, Stand 10. Dezember 2025). Prüfen Sie dabei die Ebene: Der Link soll zur Produktseite oder Kategorieseite führen und nicht auf eine Zwischenseite ohne Angebot.
Schritt 5: Service-, Vertrauens- und Markenblöcke einordnen
Service- und Vertrauensblock beantworten die Fragen, die vor dem Kauf offen bleiben: Versandkosten, Lieferzeit, Rückgabe, Zahlungsarten, dazu Bewertungen, Herkunft und ein Kontaktweg. Unternehmensangaben sammelt die Quelle in einem Bereich statt verteilt über die Seite; zum Linktext auf die Über-uns-Seite gehört der Firmenname (Nielsen Norman Group, 31. Oktober 2001). Wie Sie diese Seiten füllen, steht in Über-uns-Seite und Kontaktseite und in Vertrauenselemente im Shop.
Prüfziel: Für jede Frage aus Ihrer Support-Liste gibt es auf der Startseite eine Antwort oder einen Link mit sprechendem Namen.
Schritt 6: Bewegung, Fenster und Ladezeit begrenzen
Bewegung zieht Aufmerksamkeit auf sich und wird nach der Quelle für Werbung gehalten; animieren Sie deshalb keine kritischen Elemente wie Logo, Angebotssatz und Hauptüberschrift (Nielsen Norman Group, 15. März 2024; 31. Oktober 2001). WCAG 2.1 trennt in Erfolgskriterium 2.2.2 (Stufe A) zwei Fälle. Bewegt, blinkt oder scrollt sich Information, greift die Anforderung nach dem Wortlaut, wenn die Bewegung von selbst startet, länger als fünf Sekunden dauert und parallel zu anderem Inhalt steht: Dann braucht es eine Möglichkeit, sie anzuhalten, zu stoppen oder auszublenden.
Aktualisiert sich Information von selbst und steht parallel zu anderem Inhalt, gibt es keine Fünf-Sekunden-Grenze; hier genügt nach dem Wortlaut auch, die Frequenz der Aktualisierung steuern zu können. In beiden Fällen greift die Anforderung nicht, wenn die Bewegung oder Aktualisierung wesentlicher Teil einer Tätigkeit ist. Ein Slider, der auf Anforderung wechselt, erfüllt das; einer, der von selbst weiterläuft, braucht zusätzlich ein Bedienelement zum Anhalten.
Ladezeit ist Teil des Aufbaus: Ist die Hauptüberschrift Teil einer Einblendung, steht sie beim ersten Blick noch nicht da. Die Quelle nennt scroll-ausgelöste Textanimationen als Ursache dafür, dass Inhalte später gelesen werden (Nielsen Norman Group, 15. März 2024). Titel, Angebotssatz und Hauptbild sollten ohne Animation erscheinen.
Schritt 7: Barrierefreiheit prüfen
Die WebAIM Million hat im Februar 2026 eine Million Startseiten aus der Tranco-Liste automatisch geprüft: 95,9 Prozent hatten erkannte WCAG-Verstöße, im Schnitt 56,1 erkannte Fehler je Seite. Häufigster Befund war zu wenig Textkontrast (83,9 Prozent der Seiten), 16,2 Prozent aller Bilder hatten keinen Alternativtext, und auf 15,2 Prozent der Seiten standen mehrdeutige Linktexte wie click here (WebAIM, Erhebung Februar 2026).
Prüfen Sie an Ihrer Startseite:
- Alternativtexte für Logo, Bilder und Symbole, die eine Bedeutung tragen (WCAG 2.1, 1.1.1, Stufe A)
- Linktexte, die das Ziel benennen; Weiter oder Mehr fallen darunter (WCAG 2.1, 2.4.4, Stufe A)
- Überschriften, die ihren Abschnitt beschreiben (WCAG 2.1, 2.4.6, Stufe AA)
- Sprache der Seite im Quelltext (WCAG 2.1, 3.1.1, Stufe A)
- einen Mechanismus, der die wiederkehrende Kopfzeile überspringt (WCAG 2.1, 2.4.1, Stufe A)
- Darstellung ohne Scrollen in zwei Richtungen bei 320 CSS-Pixeln Breite (WCAG 2.1, 1.4.10, Stufe AA)
- Textkontrast nach 1.4.3, Stufe AA; die Werte und geprüfte Farbpaare stehen in Branding im Onlineshop
- die Bedienung am Handy mit Mobile Shop-Optimierung
WCAG 2.1 ist eine Empfehlung des World Wide Web Consortium in der Fassung vom 6. Mai 2025, kein Gesetz; verbindlich wird sie, wo Recht oder Vertrag auf sie verweist. Ob und ab wann für Ihren Shop Barrierefreiheitsanforderungen gelten, hängt vom Zielland ab: Barrierefreiheit nach BFSG für Deutschland, Barrierefreiheit in Österreich und Barrierefreiheit in der Schweiz.
So prüfen Sie das Ergebnis
- Kopfzeile, Angebotssatz und Hauptaufgabe sind auf einem Smartphone mit 360 CSS-Pixeln Breite ohne Scrollen sichtbar; die Kopfzeile ist auf jeder Seite identisch.
- Das Logo führt zur Startseite, und ein Link heißt Startseite, nicht Home.
- Eine Hauptaufgabe ist am deutlichsten; kein zweiter Block hat dieselbe Betonung.
- Jede Kategorie im Einstieg trägt einen Namen, der auch in der internen Suche hinterlegt ist.
- Jedes Beispiel zeigt Bild, Preis und Verfügbarkeit und führt zur Produktseite oder Kategorieseite.
- Automatisch bewegter Inhalt lässt sich pausieren, stoppen oder ausblenden, automatisch aktualisierter Inhalt ebenso oder in der Frequenz steuern; kein Video startet von selbst.
- Die acht Punkte aus Schritt 7 sind abgehakt, jeder mit einem Test am echten Gerät.
Wenn etwas nicht klappt
| Symptom | Ursache | Behebung |
|---|---|---|
| Kundschaft verlässt die Startseite schnell | mehrere Blöcke konkurrieren um dieselbe Aufmerksamkeit, die Hauptaufgabe ist nicht erkennbar | Rangfolge nach Schritt 1 neu festlegen und Blöcke mit gleicher Aufgabe zusammenlegen |
| Support bekommt Fragen zu Versand und Rückgabe | Serviceblock steht weit unten oder heißt nur Service | Versandkosten, Lieferzeit und Rückgabe im Serviceblock benennen und über die Kopfzeile erreichbar machen |
| Aktionen werden kaum gesehen | der Aktionsblock wechselt automatisch oder konkurriert mit dem Angebotssatz | ein Angebot statisch zeigen, Wechsel nur auf Anforderung |
| Bildschirmlesegeräte lesen Link oder Grafik | Bilder ohne Alternativtext oder Linktexte ohne Ziel | Alternativtexte und Linktexte nach Schritt 7 nachtragen |
| Besucher finden nicht zur Startseite zurück | Logo ohne Verlinkung oder unterschiedliche Kopfbereiche je Seite | einen Kopfbereich für alle Seiten verwenden |
| Auf dem Handy schiebt sich Inhalt seitlich | feste Breiten im Layout | Layout auf 320 CSS-Pixel Breite prüfen und Breiten freigeben (Mobile Shop-Optimierung) |
Wann Sie Hilfe holen sollten
Nutzerforschung kostet mehr als eine Prüfliste, beantwortet aber Fragen, die diese nicht beantworten kann: ob Kundschaft die Hauptaufgabe erkennt, ob der Angebotssatz verstanden wird und wo sie zuerst hinsieht. Beauftragen Sie eine Testreihe, wenn Sie zwei Varianten der Startseite vergleichen wollen, und lassen Sie die Blickverteilung messen, wenn die Rangfolge umstritten ist.
Für alles, was Rechtstexte, Einwilligungen und Barrierefreiheit betrifft, holen Sie fachliche Auskunft je Zielland ein. Dieser Bauplan sagt, welche Blöcke wo stehen; er sagt nicht, welche Angaben Ihr Land verlangt.