Optimale Header & Footer für Online-Shops

von Michael Feike
| Lesedauer 3 Minuten |

Immer mehr Konsumenten gehen per Smartphone ins Internet. Dabei sind die Zeiten, in denen die Konsumenten sich mobil nur informiert und dann am Desktop-PC bestellt haben, inzwischen vorbei. Stattdessen wird oft die ganze Customer Journey einschließlich Bestellung am Smartphone durchlaufen. Dass die mobile Ansicht Deines Online-Shops deshalb immer wichtiger wird, versteht sich dadurch von selbst. Dabei kommt auf dem kleinen Bildschirm jedem Element eine besondere Bedeutung zu. In diesem Artikel erfährst Du alles, was Du zum Thema Header und Footer in Online-Shops wissen solltest.

Der mobile Header muss eine gute Orientierung bieten

Der Header ist in der Regel das Erste, was der Besucher von Deinem Online-Shop auf dem mobilen Bildschirm zu sehen bekommt. Gerade weil wenig Platz ist, gebührt dem Header deshalb Deine besondere Aufmerksamkeit. Dabei ist in einem Online-Shop weder ein spartanischer Header ohne Informationswert noch eine Überfrachtung des Headers sinnvoll.

Folgende Elemente sollte der mobile Header enthalten:

  • Logo/Firmenname
  • Menü
  • Suche
  • Warenkorb

Folgende Elemente kannst Du optional mit aufnehmen:

  • Kontakt (Click-to-Call oder Link zur Kontaktseite)
  • Store Locator (Filial- und/oder Händlersuche)

Wenn es Dein Webdesign zulässt, sind auch noch folgende Elemente möglich:

  • USPs (= Alleinstellungsmerkmale des Shops)
  • Kundenkonto
  • Merkliste

Wäge dabei genau ab, was speziell für Deinen Online-Shop und Deine potenziellen Kunden von besonderem Interesse sein könnte. Achte allerdings immer darauf, dass der Header nicht zu überladen wirkt und dass sich der Besucher noch gut zurechtfinden kann.

Gestaltungshinweise für Deinen mobilen Shop-Header

Eindeutige Icons nutzen: Icons nehmen nur wenig Platz weg und zeigen trotzdem auf den ersten Blick, was den Nutzer hier erwartet. Trotzdem ist es empfehlenswert, das Icon mit einem Stichwort zusätzlich zu beschriften, damit wirklich jeder Nutzer den Sinn der Icons verstehen kann.

Suchfeld richtig darstellen: Die Suche ist ein wichtiges Element in einem Online-Shop. Denn oft besuchen Nutzer einen Online-Shop mit einer bestimmten Kaufabsicht. Deshalb sollte das Suchfeld auch im mobilen Header direkt zu sehen sein und nicht erst durch einen Klick auf das Lupensymbol aufgeklappt werden müssen.

Unwichtige Links ins Menü integrieren: Der Header sollte möglichst übersichtlich sein. Deshalb kannst Du weniger wichtige Links, wie Socia Media, Kontakt, Login, Merkzettel o. Ä., mit ins ausklappbare Menü integrieren. So sind diese Infos zwar über den Header erreichbar, nehmen aber keinen Platz dort weg.

Wichtige Menüpunkte separat zeigen: Während Du Unwichtiges am besten aus Platzgründen im Menü versenkst, solltest Du besonders wichtige Menüpunkte, wie besonders beliebte Shop-Kategorien, noch mal separat darstellen. So sehen die Besucher aufs Stichwort, welche Schwerpunkte Dein Shop hat.

Der mobile Footer dient zur umfassenden Kundeninformation

Der Footer ist traditionell der Bereich, der alle wichtigen Informationen für den Kunden bereitstellt. Hier gehen Nutzer suchen, wenn Sie etwas über Deinen Online-Shop erfahren wollen, z. B. über die Zahlungsmöglichkeiten oder die Versandkosten. Der Footer muss also Informationen bieten, die Vertrauen wecken, sodass der Besucher vom Kauf überzeugt wird.

Folgende Informationen sollte der mobile Footer enthalten:

  • Versandinformationen
  • Zahlungsarten
  • Rückgabe
  • USPs/Shopvorteile
  • Kontaktdaten
  • Trust-Symbole, Auszeichnungen usw.
  • Links zu Impressum, Datenschutz, Widerrufsbelehrung

Folgende Links kannst Du optional mit aufnehmen:

  • Social Media Buttons
  • Newsletter-Anmeldung
  • Kategorien
  • FAQ
  • Über uns
  • Stellenangebote

Beachte dabei, dass mobile Nutzer durch das typische Wischen schnell im Footer landen. Er sollte also ähnlich einladend und übersichtlich wirken wie der Header. Sinnvoll ist es auch, dass an irgendeiner Stelle hier auch noch mal Dein Shop-Name auftaucht, damit der Besucher weiß, dass er noch richtig ist.

Gestaltungstipps für den mobilen Footer Deines Online-Shops

Klare optische Abgrenzung schaffen: Der Footer ist ein etablierter Bereich auf Websites und wird von dem meisten Nutzer erwartet und oft direkt angesteuert, um bestimmte Informationen zu suchen. Deshalb sollte der Footer klar erkennbar und vom Rest der Seite abgegrenzt sein, etwa durch eine andere Hintergrundfarbe oder durch eine Linie.

Übersichtliche Struktur verwenden: Innerhalb des Footers sollten die Elemente und Links in verschiedene Bereiche aufgeteilt sein, damit die Besucher die gewünschte Information schnell findet. Hier kannst Du zum Beispiel auch mit Überschriften arbeiten, wie Service, Unternehmen etc. Dabei solltest Du immer auf besondere Übersichtlichkeit achten und gegebenenfalls lieber auf das ein oder andere Element verzichten oder nur einen Link setzen, statt alle Informationen aufzuzählen.

Keine längeren Textbausteine nutzen: Verzichten solltest Du im Footer auf längere Texte. Denn der Footer ist auf jeder Deiner Unterseiten gleich. Taucht hier immer wieder der gleiche Text auf, kann Google das als Duplicate Content werten, was Deinem Ranking schaden kann.

Fazit: Nutzersicht, Nutzersicht, Nutzersicht!

Wie immer gilt auch bei der Gestaltung des Headers und Footers für Deinen Online-Shop: Betrachte diese Seitenbereiche immer mit den Augen Deiner Websitebesucher. Was ist potenziellen Kunden wichtig? Was erwarten sie an welcher Stelle? Fehlen wichtige Informationen? Sind wichtige Informationen auf den ersten Blick zu finden? Dabei bietet der Header eine erste Orientierung für den Besucher: Wo bin ich?, Was wird hier verkauft?, Wo finde ich mein gewünschtes Produkt? usw. Der Footer hingegen muss zusätzliche tiefergehende Fragen beantworten: Wie viel kostet der Versand?, Kann ich die Ware zurückgeben? usw. Damit sind Header und Footer nicht nur optisch der Rahmen Deines Online-Shops, sondern können Dir dabei helfen, Deine Besucher zu Kunden zu machen.

Weitere Artikel zum Thema