Website Header: Der erste Eindruck zählt!

Header-Gestaltungstipps für eure Unternehmenswebsite

Der Website Header ist der oberste Teil eurer Website, der allen User:innen im Frontend angezeigt wird. In der Regel ist der Header das erste Seitenelement, das eure potenziellen Kundinnen und Kunden betrachten. Der erste Eindruck ist nicht nur im stationären Handel von Bedeutung, er spielt auch bei digitalen Angeboten eine bedeutsame Rolle. Ist das Header Design ansprechend und übersichtlich, steigt die Bereitschaft der Betrachter:innen, mehr Zeit auf eurer Site zu verbringen und die einzelnen Schritte der Customer Journey zu durchlaufen.

In diesem Beitrag gehen wir zu Beginn auf die wichtigsten Header-Funktionen ein. Im Anschluss beschäftigen wir uns mit Website Header Design und erklären euch, welche Elemente ihr in eurem Header platzieren könnt. Zum Abschluss geben wir euch Tipps mit auf den Weg, damit ihr überprüfen könnt, ob euer Header die gängigen Anforderungen erfüllt.

Die Wichtigkeit des Headers ist auf folgende Aspekte zurückzuführen:

• Logo: Das Firmenlogo platzieren UX- und UI-Designer:innen normalerweise in der linken Ecke oder in der Mitte des Headers. Diese Platzwahl ist eine unausgesprochene Regel, die sich verbreitet hat, da eine große Mehrheit der Internet-User:innen das Logo an einer dieser zwei Stellen erwartet und der User Flow negativ beeinträchtigt werden könnte, wenn dies nicht der Fall ist. Logos sind unabdingbar für die Wiedererkennung einer Marke, deshalb ist es von großer Bedeutung, dass diese prominent an der passenden Stelle im Header platziert werden.
• Inhaltsübersicht: Im Header sehen die User:innen die wichtigsten Menüpunkte eurer Website und erhalten dadurch einen allgemeinen Überblick, welche Inhalte sie erwarten können. Im besten Fall wecken die Punkte die Neugier eurer Zielgruppen, sodass diese sofort weiter navigieren möchten und bereit sind, sich viele Unterseiten anzusehen.
• Orientierung: Der Header stellt für eure Website-Besucher:innen eine wertvolle Navigationshilfe dar. Durch einen Klick, zum Beispiel auf einen Menüpunkt, euren Login-Bereich oder auf eure Suchleiste, können sie ihrer Zielseite schnell näher kommen. Vor allem Personen, die euren Webauftritt das erste Mal besuchen, sind auf eine sorgfältige Auswahl der Header-Elemente angewiesen, damit sie sich einfach orientieren können. Im Rahmen der User Flow-Optimierung kann es auch nach der Veröffentlichung einer neuen Website sinnvoll sein, die Auswahl der Header-Elemente anzupassen.
• Design: Die Optik des Headers vermittelt euren User:innen zudem ein erstes Gefühl für das das gesamte „Look and Feel“ der Website. Aufgrund dessen sollte die Gestaltung dieses vergleichsweise kleinen Seitenelements genauso ernst genommen werden, damit das UX- und UI-Design von euren Zielgruppen einheitlich und stimmig wahrgenommen wird.

Website Header Design: Bestandteile von professionellen Header

Header sind ziemlich schmal, deshalb könnt ihr nur eine begrenzte Anzahl an Elementen in ihnen platzieren. Welche Elemente ihr in eurem Header platzieren solltet, hängt stark von der Art eurer Website und von euren eigenen Online-Marketingzielen ab. Folgende Bestandteile befinden sich oft in Header von Unternehmenswebsites:

• Elemente für die Markenidentifikation: Euer Firmenname, euer Logo und gegebenenfalls euer Slogan sollten eine prominente Position in eurem Header erhalten, damit ihr das digitale Branding stärkt. Ebenso empfehlen wir euch beim Logo eine Verlinkung zur Startseite zu hinterlegen, da viele User:innen diese erwarten und sie somit leichter navigieren können.
• Menü: Auf vielen Unternehmenswebsites sind die wichtigsten Menüpunkte, zum Beispiel die „Über uns“- und die Kontaktseite, Teil des Headers. Je nachdem, wie eure Seiteninfrastruktur aufgebaut ist und wie umfangreich eure Website ist, kann sich die Erstellung eines ausklappbaren Burger Menüs positiv auf die Benutzerfreundlichkeit auswirken. Diese Art von Menü haben wir zum Beispiel für unseren Kunden, die Hotelgruppe Loisium, umgesetzt:

• Suche: Ein Suchfeld oder eine Suchleiste kann auch im Header eingefügt werden, um den User:innen eine Stichwortsuche zu ermöglichen. Dieses Element ist in erster Linie für Websites mit einem großen inhaltlichen Angebot sowie für Onlineshops und E-Commerce-Plattformen mit einem breiten Produktsortiment relevant.
• Mitgliederbereich: Verfügt eurer Webauftritt über einen Mitgliederbereich, solltet ihr im Sinne der einfachen Navigierbarkeit im Header eine passende Verlinkung bereitstellen (zum Beispiel „Login“, „Ihr Konto“ oder „Anmedung/Registrierung“).
• Einkaufswagen und Wunschliste: Wenn ihr im E-Commerce tätig seid, ist es wichtig, den Einkaufswagen und gegebenenfalls auch eine Wunschliste im Header zu platzieren. Dabei solltet ihr darauf achten, dass der Stil der Symbole zum Gesamtbild des UX- und UI-Designs passt.
• Sprachumschaltung: Um eine mehrsprachige Website bestmöglich für alle User:innen zugänglich zu machen, sollte der Button für die Sprachumschaltung leicht auffindbar sein. Eine große Mehrheit der Unternehmer:innen entscheidet sich für eine Positionierung im Header, aber in bestimmten Fällen kann auch der Footer die bessere Platzwahl sein. Dies hängt vor allem davon ab, wie bedeutsam die Ansprache von internationalen Kundinnen und Kunden für euer Unternehmen ist beziehungsweise in Zukunft sein soll.
• Call-to-Action Buttons: Call-to-Action Buttons, kurz CTA, beinhalten eine direkte Handlungsaufforderung an eure User:innen. Typische Beispiele für CTAs im Header Bereich sind „Termin buchen“, „Tisch reservieren“ und „Kontaktiere uns“. Wir empfehlen euch, nur ein bis zwei CTAs im Header zu platzieren, damit ihr eure Interessentinnen und Interessenten nicht mit zu vielen Aufforderungen konfrontiert. Auch hier gilt: Konzentriert euch auf eure wesentlichen Ziele!
• Social-Media-Icons: Wenn das Social-Media-Marketing eine wichtige Säule eures Onlinemarketing-Konzepts ist, könnt ihr auch Social-Media-Icons in den Header einfügen, die direkt auf eure Accounts verlinken. Social Media-affine Zielgruppen werden dadurch dazu motiviert, eure Profile zu besuchen und ihr könnt dadurch das User-Engagement steigern.

Tipps für die Gestaltung von Website-Header

Damit euer Header ein positiver Eye-Catcher wird, solltet ihr insbesondere auf Folgendes achten:

• Weniger ist mehr: Wir raten euch, eure Header-Elemente sorgfältig auszuwählen. Dies gelingt am besten, wenn euer Website-Konzept bereits steht und ihr wisst, welche konkreten Ziele ihr mit eurem Webauftritt erreichen möchtet. Zwischen den einzelnen Elementen sollte es ausreichend Abstand geben, damit die Übersichtlichkeit gewährleistet ist.
• Barrierefreiheit und mobile Ansicht: Beim Header-Design solltet ihr auch an die Prinzipien der digitalen Barrierefreiheit achten. Achtet auf die Wahl einer einfach lesbaren Schrift und auf einen deutlichen Farbkontrast zwischen der Schrift und dem Hintergrund. Darüber hinaus sollten sich CTAs visuell von den anderen Elementen abheben, damit die User:innen sofort verstehen, dass es sich dabei um anklickbare Buttons handelt. Ein weiterer bedeutsamer Punkt ist die mobile Ansicht eures Headers. Auch wenn eure Website responsiv ist, lohnt sich in vielen Fällen die Gestaltung eines mobilen Headers, damit der Kopfbereich der Website übersichtlich bleibt und auch mit Smartphones und Tablets leicht zu bedienen ist.
• Hover-Effekte: Hover-Effekte im Menü erleichtern die Navigation eurer Website-Besucher:innen. Allerdings müsst ihr darauf achten, dass der von euch ausgewählte Effekt sowohl für die Desktop- als auch für die Mobilversion funktioniert – zum Beispiel das Unterstreichen eines Elements oder ein Farbwechsel beim Anklicken.
• Transparenter Header: Wenn ihr den Header in den Homepage-Hintergrund integriert, empfehlen wir euch darauf zu achten, dass die ausgewählte Grafik gut zu eurem Tätigkeitsbereich passt, da die User:innen sonst zu stark von ihr abgelenkt sein könnten. Ebenso wichtig ist ein ausreichender Farbkontrast zwischen dem Hintergrund und den Header-Elementen.
• Sticky Header: Ein oben fixierter Header, der auch beim Scrollen seine Position nicht verändert, hat sich im Webdesign etabliert. Ein fixierter Header wirkt sich positiv auf die User Experience aus, wenn er nicht zu viel Seiteninhalt verdeckt und ein zu häufiges Scrollen verursacht. Achtet insbesondere beim mobilen Design darauf, dass der Sticky Header nicht zu viel Platz in Anspruch nimmt.

Fazit

Der Website Header ist ein wichtiger Bestandteil jedes UX- und UI-Konzepts, da er die Kennenlernphase eurer Kundinnen und Kunden mit eurem Online-Angebot prägt. Achtet primär auf eine gute Übersichtlich- und Lesbarkeit sowie auf eine visuelle Gestaltung, die zu eurem Corporate Design passt!