Der erste Eindruck zählt! – Wann ist ein Header-Redesign in einem Onlineshop sinnvoll?

Innerhalb von nur zwei Zehntelsekunden hat sich der Besucher eines Onlineshops einen ersten Eindruck von Ihrem Onlineshop gemacht. Ob er mehr Zeit auf Ihrer Seite verbringt, entscheidet er in 2,6 Sekunden. Was steht dabei im Fokus? Genau, der Header! – Ein Grund mehr, sich dieses Element einer Website mal genauer anzusehen.

Der Header ist die Visitenkarte eines jeden Onlineshops

Einfach gesagt ist der Header eine Art Visitenkarte für jeden Besucher eines Onlineshops. Wenn der Header ansprechend gestaltet und interessant ist und damit zum weiteren Verweilen auf der Seite einlädt, ist die erste Hürde bereits geschafft. Der User wird die Seite vorerst nicht verlassen und sich das Produktsortiment näher anschauen.

Studien der Nielsen Norman Group haben bewiesen, dass User eine Website vor allem beim ersten Besuch nicht ausführlich erkunden. Vielmehr wird die Seite gescannt und nach Ankerpunkten gesucht, die die Aufmerksamkeit wecken. Das am häufigsten angewendete Muster beim Scannen von Websites ist das F-Muster: Die Augen beginnen oben links, wandern weiter nach rechts, kehren zum Startpunkt zurück, blicken weiter nach unten und wandern erneut nach rechts, zurück und schließlich wieder nach unten. Dadurch entsteht das namensgebende F-Muster. Die oberste Linie dieses F’s entspricht hierbei meistens dem Header. Kurzgefasst: Der Header ist der erste Bereich, der vom User gesehen wird.

Was gehört in einen Header?

Gehen wir einen Schritt zurück und klären die Frage, was ein Header überhaupt ist: Der Header wird auch Kopfzeile genannt und bezeichnet, wie der Name schon sagt, den obersten Teil einer Website. Er ist der Teil der Website, der von einem Websitebesucher als erstes gesehen wird. Das Gegenstück dazu ist der Footer, also die Fußzeile, die den Abschluss der Website bildet.

Die folgenden Elemente sind Standard in jedem Header:

• Logo und/oder weitere Elemente zur Identifizierung der Marke, wie z.B. ein Slogan
• Durchdachte Navigation, die einfache und verständliche Klickwege ermöglicht
• Login
• Merkliste
• Warenkorb
• Suchfunktion
• FAQ
• Kontaktinformationen

Neben den Standardinhalten kann der Header Elemente beinhalten, die relevant für das jeweilige Unternehmen oder die jeweilige Branche sind. So kann beispielsweise für Unternehmen mit stationären Geschäften ein Hinweis auf Filialen vor Ort auch in den Header gehören.

Alternative Gestaltungsmöglichkeiten des Headers – Sticky Header & Co.

Neben den Standardfunktionen, die jeder Header erfüllt, können noch zusätzliche Funktionen integriert werden. Diese sind allerdings kein Must-have und sollten nur verwendet werden, wenn sie zum Onlineshop passen und die Usability nicht einschränken.

Hierzu gehört zum einen der Sticky Header: Bei dieser Funktion bleibt der Header oben fix positioniert, d.h. beim Runterscrollen bleibt der Header am oberen Bildschirmrand stehen. I.d.R. wird zusätzlich zum normalen Header eine reduzierte Variante geplant, die oben haften bleibt.

Auch die Darstellung der Suche kann im Header variieren und nur durch ein Icon dargestellt werden. Das Eingabefeld der Suche öffnet sich dann erst beim Klicken auf das Icon. Dadurch ist die Suche im Header nicht so prominent und der Platz kann für andere Funktionen wie die Navigation gespart werden.

Das macht einen guten Header aus!

• Der Header entspricht den Gestaltungsstandards. User haben bestimmte Erwartungen daran, welche Elemente im Header zu finden und wo diese platziert sind. So wird ein Warenkorb i.d.R. rechts erwartet, das Logo des Onlineshops hingegen auf der linken Seite.
• Alle aus User- und Händlersicht relevanten Elemente sind vorhanden.
• Ein Header sollte übersichtlich gestaltet sein, d.h. die User können sich intuitiv und ohne Probleme zurechtfinden. Dazu gehört z.B. eine passende Benennung der Navigationspunkte.
• Wenn Icons verwendet werden, sollten diese für die Zielgruppe nachvollziehbar sein. Das Icon für einen Warenkorb sollte demzufolge ein Einkaufskorb, Einkaufswagen oder etwas Ähnliches sein.
• Der Header ist jeweils auf Desktop- und Mobilgeräte angepasst.

Ausgehend hiervon kristallisieren sich folgende Vorteile eines gut gestalteten Headers heraus:

1. User erhalten sofort alle wichtigen Informationen und können so entscheiden, ob der Onlineshop ansprechend und damit einem weiteren Verweilen würdig ist. Ein guter Header erzeugt sowohl Sympathie als auch Vertrauen.
2. Eigentümer eines Onlineshops werden mehr Menschen von ihrer Website überzeugen. Sie erhalten die Möglichkeit, sich den Usern als Unternehmen und ihre Produkte vorzustellen. Im Idealfall führt dies im Umkehrschluss zum Kauf.

Erfüllt der Header in Ihrem Onlineshop dafür nicht die nötigen Voraussetzungen, ist ein Redesign in jedem Fall zu empfehlen.

Sind Onlineshop- und Website-Header dasselbe?

Der Unterschied eines Onlineshop-Headers zu einem Website-Header ist, dass andere Standard-Elemente im Header vorhanden sind. Da in einem Onlineshop der Fokus auf den Produkten und deren Präsentation liegt, befinden sich in dessen Header andere Elemente als in einem Website-Header.

Der Warenkorb nimmt nochmal einen besonderen Status ein: Onlineshops müssen oben rechts einen Link zum Warenkorb haben, der von jeder Seite aus erreicht werden kann. Gleichzeitig wird an dem entsprechenden Warenkorb-Icon angezeigt, wie viele Produkte bereits im Warenkorb liegen und ggf. auch zu welchem Bestellwert.

Neben den obligatorischen Funktionen enthält ein guter Header sogenannte USPs – Alleinstellungsmerkmale, die einen Onlineshop von der Konkurrenz abheben. Besitzt der Shop noch Gütesiegel oder ähnliche Auszeichnungen werden diese ebenfalls in den Header hinzugefügt. All diese Punkte tragen maßgeblich dazu bei, dass der Besucher der Seite Vertrauen zum Shop aufbaut.

5 Gründe für ein Header-Redesign

Es kann viele Gründe dafür geben, ein Header-Redesign vorzunehmen:

Grund 1: Die Corporate Identity des Unternehmens hat sich verändert.

Der häufigste Grund ist eine Änderung der Corporate Identity, also des Erscheinungsbildes eines Unternehmens. Dabei gehen häufig eine Änderung des Logos, der Farben, Schriftarten etc. einher. Anhand dessen ist ein Redesign des gesamten Onlineshops und damit auch des Headers erforderlich.

Grund 2: Der Header ist nicht für Mobilgeräte optimiert.

Das Kaufverhalten im Onlineshop hat sich geändert. Ein Beispiel hierfür wäre die zunehmende Nutzung von Mobilgeräten. Der Erstkontakt mit dem Onlineshop erfolgt mittlerweile immer mehr über das Smartphone. Das muss auch entsprechend in der Gestaltung des Headers berücksichtigt werden (Mobile first!). Das bedeutet allerdings nicht, dass die Desktopansicht gänzlich vernachlässigt werden kann. Vielmehr sollte ein Zusammenspiel stattfinden: Wie kann aus dem designten mobilen Header ein ansprechender Desktop-Header gemacht werden und andersherum?

Grund 3: Die Zielgruppe hat sich geändert oder wurde erweitert.

Zu Zielgruppen gehören demografische, geografische und psychografische Merkmale. Neben Merkmalen wie Alter und Geschlecht werden auch Punkte wie der Lebensstil, Wünsche und Werte der potenziellen Kunden immer relevanter. All das sollte bei der Umgestaltung des Headers mitberücksichtigt werden.

Grund 4: Das Produktsortiment hat sich gewandelt oder erweitert.

Mit zunehmendem Wachstum eines Unternehmens kommen eventuell auch neue Produkte hinzu. Ggf. hat die Zielgruppe auch zusätzliche Bedürfnisse, die gestillt werden können. Dementsprechend verändert sich auch das Sortiment und macht eine Anpassung des Headers erforderlich. Neue Produkte müssen in vorhandene Kategorien eingeordnet oder neue Kategorien angelegt werden. Dadurch verändert sich die Navigation. Hat der Onlineshop sehr viele Ober- und Unterkategorien, bietet es sich an, ein Mega-Dropdown-Menü zu erstellen, um alle Kategorien in der Navigation unterzubringen und dennoch Übersichtlichkeit zu gewährleisten.

Grund 5: Die Unternehmensstrategie hat sich verändert.

Bevor Sie direkt mit Ihrem Header-Redesign loslegen, sollten Sie ein Websitekonzept erarbeiten. Das beinhaltet die Ziele, den Zweck der Seite (im Falle eines Onlineshops ist es der Verkauf) und das gesamte Erscheinungsbild. Sobald diese Punkte feststehen oder sich ändern, muss auch der Header angepasst werden.

Beispiel für ein Header-Redesign

Nach dem theoretischen Teil folgt nun ein Beispiel aus der Praxis, ein kleiner Einblick in das Header-Redesign unseres Kunden ALPHA Buchhandlung.

ALPHA ist ein christlicher Online-Buchhandel. Neben christlichen Büchern werden hier Deko- und Geschenkartikel, Filme und Musik angeboten. Zusätzlich besitzt ALPHA 32 stationäre Filialen in Deutschland. Die Gründe für ein Header-Redesign waren eine bessere Zielgruppen-Ansprache und die Optimierung des Headers für eine mobile Ansicht.

Kommen wir zu den Änderungen in der Desktop-Ansicht:

Die Kombination aus dem Schwarz und dem ALPHA-Rot wirkten nicht sehr ansprechend. Das Ziel hinter dem Redesign war, genau das zu ändern. Zwei Drittel der Käufer im Onlineshop sind weiblich. Aufgrund dessen wurde intern eine Umfrage durchgeführt. Diese hat ergeben, dass der Großteil der ALPHA-Mitarbeiterinnen den Header unpassend fand. Dementsprechend sollte der Header jetzt femininer und trotz dem grellen Rot ästhetisch ansprechender wirken, weshalb die Farbgebung im neuen Header deutlich zurückhaltender ist.

Als Buchhandlung verfügt ALPHA über zahlreiche Filialen, die im Onlineshop prominent präsentiert werden sollen. Diese werden jetzt durch ein passendes Icon neben den Standard-Icons wie Warenkorb etc. hervorgehoben. Grundsätzlich werden im neuen Header erstmals Icons für das Kundenkonto etc. verwendet.

Des Weiteren wurde das Logo in der Höhe verringert, wodurch mehr Platz für die Kategorien geschaffen wurde. Die Suche wurde nun ebenfalls mehr in den Vordergrund gestellt.

Vorher:

Nachher:

Ebenso wurde auch die mobile Ansicht angepasst, da über die Hälfte der Nutzer über das Smartphone auf die Seite gelangen. Auch hier lassen sich die Icons aus der Desktopansicht wiederfinden, vor allem die Filialen der ALPHA Buchhandlung, die zuvor nicht vorhanden waren.

Zudem wurde auch das Suchfeld angepasst und vergrößert. Die Kategorien befinden sich im sogenannten „Burger-Menü“. Beim Drauftippen werden die Kategorien seitlich herausgefahren. Besonders auf kleineren Mobilgeräten wird das Zurechtfinden im Onlineshop dadurch vereinfacht.

Vorher:

Nachher:

Abschließend lässt sich feststellen, dass ein guter Header das A und O in einem Onlineshop ist. User entscheiden hierdurch in dem Bruchteil einer Sekunde darüber, ob sie in Ihrem Onlineshop verweilen wollen und bauen Vertrauen zu Ihrem Unternehmen auf. Haben sich Faktoren wie die Zielgruppe, Corporate Identity, das Produktsortiment oder auch die Gerätenutzung geändert, sollte auf jeden Fall ein Header-Redesign vorgenommen werden. So haben Sie nicht nur zufriedene Onlineshop-Kunden, sondern sind selbst ebenfalls zufrieden, weil der Header Ihr Unternehmen ideal wiederspielgelt und zum Stöbern und Kaufen anregt.

Haben Sie noch weitere Fragen zu diesem Thema oder wünschen Sie sich eine Beratung zu Ihrem Onlineauftritt? Dann nehmen Sie gerne mit uns Kontakt auf!