Usability

Der erste Eindruck zählt: Das muss in den Header!

Luisa DzikiSEO-Expertin

Bevor Ihr Eure Nutzer überhaupt mit Euren guten Inhalten überzeugen könnt, bewerten sie innerhalb von Millisekunden Eure Webseite. Ein besonders wichtiges Kriterium ist dabei die Gestaltung des Headers. Deswegen werde ich genau diesem heute einen eigenen Blogpost widmen – anhand vieler tierischer Beispiele!

Header Meme Bob Ross

Innerhalb von zwei Zehntelsekunden verschaffen wir uns einen ersten Eindruck von einer Webseite. Die folgenden 2,6 Sekunden scannen wir sie und bilden uns unbewusst eine Meinung. Erst dann – und nur, wenn uns die Seite bis dahin überzeugt hat – fokussieren wir den Inhalt. Zumindest sprechen die Auswertungen einer Studie der Missouri University of Science and Technology für diese These.

Was ist der Header und warum ist er so wichtig?

Laut dem Wiki von Selfhtml.org enthält der Header „den sichtbaren Kopfbereich einer Webseite oder eines Teils einer Seite.“ Wenn wir vom Header sprechen, meinen wir damit also den oberen Bereich der Seite bis zum Hauptmenü.

Der Header ist nicht das tag <head>!

Nicht zu verwechseln ist der Header mit dem Kopf-Element <head> eines HTML-Dokuments. Dieses steht am Anfang eines HTML-Dokuments, darf nur einmal vorkommen und ist im Gegensatz zum Header nicht sichtbar, sondern enthält die Kopfdaten eines  HTML-Dokuments: Es sorgt also dafür, dass die Inhalte des nachfolgenden <body>-tag richtig dargestellt werden können – wie zum Beispiel eben der Header, der erst außerhalb des <head>tags auftaucht.

Beispiel Unterscheid head und header

Was sehen wir zuerst?

Wenn wir auf eine Seite gelangen, folgen unsere Augen in der Regel dem sogenannten  „F- “: Wir beginnen oben links, schweifen nach rechts ab, kehren zum Ausgangspunkt zurück, blicken weiter nach unten und  richten unsere Aufmerksamkeit anschließend wieder nach rechts, zurück und schließlich nach unten. Würde man unsere Augenbewegungen verfolgen, entstünde dabei ein „F“. Die obere „Querstrebe“ des „F“ entspricht dabei in den meisten Fällen dem Header. Im Umkehrschluss heißt das, dass der Header der erste Bereich ist, den wir wahrnehmen und mit dem Ihr Eure Webseitenbesucher bereits überzeugen könnt!

Header Beispiel Eye tracking F

Die rote Farbe zeigt den typischen Blickverlauf. Futalis nutzt die Blickführung optimal aus, indem es im Headerbereich – das ist hier der obere Strich des „F“ – Usability-Konformitäten einhält und so Vertrauen erzeugt; die untere Querstrebe nutzt Futalis für seine Alleinstellungsmerkmale und gewinnt so weitere Sympathien. Clever!

Ein übersichtlicher Header erzeugt Sympathie und Vertrauen!

Früher haben Webmaster versucht, möglichst viele Informationen wie bestimmte Links, wichtige Inhalte und die Navigation in den oberen Bereich der Webseite zu packen. Möglichst alles Relevante sollte „above the fold“ zu sehen sein.

Das gilt heute nicht mehr in diesem Ausmaß. Natürlich sollten besonders wichtige Elemente nach wie vor above the fold auftauchen, aber inzwischen gibt es so viele gute Inhalte im Web, dass User regelrecht verwöhnt sind. Sie möchten möglichst schnell die folgende Information finden: „Ist diese Seite seriös und hat sie das Potenzial, meine Frage zu beantworten?“.

Unser Unterbewusstsein trifft diese Entscheidung in Millisekunden, bevor Ihr überhaupt die Chance habt, mit Eurem Content die Aufmerksamkeit zu fesseln und mit Expertise zu punkten. Ein klar und übersichtlich designter Header mit der Einhaltung bestimmter Standards ist hier das Stichwort!

Was gehört in den Header?

Logo und Slogan

Das Logo sollte auf jeder Seite Eurer Website zu sehen sein, und zwar immer an derselben Stelle: Oben links. Auch wenn der User durch Unterseiten navigiert, gibt ihm das Logo die Sicherheit, dass er sich immer noch auf der gleichen Website befindet. Übrigens muss ein Klick auf das Logo immer zurück zur Startseite führen! Unter oder neben dem Logo sollte außerdem Euer Slogan zu finden sein, sofern Ihr bereits einen habt.

Beispiel Header bzgl Logos

Beide Onlineshops halten sich an die richtige Platzierung von Logo und Slogan.

Utilities

Laut Steve Krug sind Utilities „die Links zu den wichtigsten Elementen der Website, die nicht Teil der inhaltlichen Hierarchie sind.“ Das klingt ja ganz gut, aber was bedeutet das? Utilities sind „nützliche“ Links für den User, die ihm entweder bei der Navigation helfen oder ihm mehr über das Unternehmen verraten. Beispiele für Utilities im E-Commerce sind:

  • Warenkorb
  • Merkzettel
  • FAQ
  • Kontakt
  • Über uns
  • Check Out
  • Registrieren/Login
  • Ihr Konto
  • Hilfe
  • Startseite

Wichtig: Übertreibt es mit den Utilities im Header nicht! Verwendet nur die vier bis fünf am häufigsten benutzten Links. Auch sollten sie nicht zu groß sein – auf jeden Fall dürfen sie nicht von der Hauptnavigation ablenken. Idealerweise platziert Ihr die Utilities im rechten Header-Bereich.

Utilities Header Beispiel

Zooplus, Major Dog und Alsa Hundewelt haben alle im rechten Bereich ihre Utilities aufgeführt, Zooplus zusätzlich noch welche links oben. Alle drei haben sich auf einige wenige beschränkt und stehlen der Hauptnavigation nicht die Schau. Positiv hervorzuheben ist, dass sowohl Alsa Hundewelt als Major Dog anzeigen, ob der Warenkorb gefüllt und wie groß sein Wert bisher ist.

 

Eine kleine Frage zwischendurch: Wusstet Ihr im zweiten Beispiel gleich, was das Logo von Major Dog ist? Nein? Dann ging es Euch genau wie mir. Die Erklärung ist einfach: Das Logo ist nicht der oberste Punkt links und dadurch nicht als solches zu erkennen.

Sonderfall Warenkorb

Der Warenkorb zählt zwar zu den Utilities, er nimmt unter ihnen aber noch einmal einen Sonderstatus ein. Wer einen Onlineshop hat, der muss (!) oben rechts einen Link zum Warenkorb haben, der von jeder Seite aus erreichbar ist. Idealerweise zeigt er live an, wie viele Produkte in ihm liegen und welchen Preis sie haben. Außerdem solltet ihr ein kleines Warenkorb-Bildchen verwenden – das sind die Webnutzer mittlerweile so gewohnt.

Das Suchfeld

User lassen sich in zwei große Kategorien unterteilen: Diejenigen, die auf eine Seite gelangen und sich durch die Kategorien klicken sowie diejenigen, die sofort das Suchfeld ansteuern. Letztere enttäuscht ihr maßlos, wenn ihr das Suchfeld an der falschen Stelle eingebaut habt, es nicht als Suche zu erkennen ist oder gar keines anbietet.

Laut Jakob Nielsen erwarten die Nutzer das Suchfeld oben rechts im Header. Laut einer Studie von 2014 des Usabilityblogs wandelt sich die Erwartung allerdings dahingehend, dass immer mehr User nach einem zentralen Suchfeld Ausschau halten. Den Grund vermutet Jan Schultze darin, dass große Onlineshops wie Amazon oder Ebay eine mittig platzierte Suchfunktion anbieten.

Beispiel zentrales Suchfeld

Die Besucher suchen übrigens nach einer „Suche“, nicht nach „finden“, „stöbern“ oder anderen Begriffen! Verwendet also wirklich „suchen“ und keine anderen Formulierungen. Die Verwendung eines Lupenbilds ist laut Steve Krug auch legitim.

Eine gute Suchfunktion hält sich an folgende Punkte

  • Platzierung oben rechts oder oben mittig
  • Ein ausreichend großes Feld, in das die Nutzer ihre Suche tippen können
  • Einen Button mit dem Begriff „Suchen“ oder eine Lupe zum Starten der Suchfunktion

Header Beispiel Suchfeld

Platinum und Wolfsblut setzen auf ein Suchfeld oben rechts, während sich Pets Premium für eine zentrale Platzierung entschieden hat. Beide Möglichkeiten sind praktikabel.

Bei Wolfsblut fehlt allerdings die Schaltfläche zum Starten der Suchfunktion.

USPs – Unique Selling Points

Wenn Ihr wissen wollt, was USPs sind und wie Ihr sie für Euer Unternehmen definiert, lege ich Euch diesen Blogbeitrag von Steffi sehr ans Herz. In ihm erklärt sie ausführlich alles rund um Alleinstellungsmerkmale.

Mit geht es heute nur um die Platzierung der USPs im Header – denn genau dort gehören sie hin. Aber auch hier ist wieder Vorsicht geboten: Packt nicht zu viele Alleinstellungsmerkmale in den Header, sondern beschränkt euch auf die wichtigsten zwei bis vier. Die Restlichen könnt Ihr auf der Startseite oder auf einzelnen Landingpages unterbringen.

Usps im Header

Durch vorangestellte Grafiken könnt Ihr die USPs gut voneinander abgrenzen und Euren Nutzer die Einordnung der USPs erleichtern. Besonders gut umgesetzt haben das Hundeland und Futtermedicus, aber auch hundeshop.de nennt seine Alleinstellungsmerkmale im Header.

Kontaktinformationen

Viele User erwarten eine Kontaktmöglichkeit im Header. Idealerweise gebt Ihr Eure Telefonnummer oder wenigstens eine E-Mail-Adresse an. Das Minimum ist ein Link zu einem Kontaktformular. Übrigens solltet Ihr auch immer Eure Telefonnummer mit einem Link zur Kontaktseite hinterlegen! Eure Nutzer erwarten das und sind enttäuscht, wenn es nicht funktioniert. Wenn Ihr wissen wollt, wie Ihr eine Kontaktseite am besten aufbaut, lest Steffis Beitrag dazu.

Optional: Gütesiegel und Social Icons

Verfügt Euer Shop über Gütesiegel oder Auszeichnungen? Wenn ja, dann wählt die besten zwei bis drei davon aus und packt auch diese in Euren Header! Sie stärken das Vertrauen Eurer Webseitenbesucher in Euren Shop. Bevor Euer Header aber zu vollgepackt erscheint, führt sie lieber in Eurem Footer auf.

Wenn ihr soziale Netzwerke nutzt, könnt Ihr die Icons dazu auch in den Header packen.

Beispiel für Header Kontakt

Vetconcept verlinkt nur die Kontaktseite, während city4dogs eine Servicehotline direkt im Header anzeigt. Zusätzlich zeigt das Beispiel von city4dogs die Verwendung von Gütesiegeln.

Fazit

Es gibt viele Gestaltungsmöglichkeiten für den Header. Bewährt für Onlineshops haben sich aber vor allem ein klares Design und die Einhaltung der oben genannten Usability-Standards. Zum Schluss habe ich noch eine kurze Checkliste für Euch, was in Eurem Header auftauchen sollte:

  • Logo und Slogan
  • Utilities
  • Suchfeld
  • USPs
  • Kontaktinformationen
  • Klares Design
  • Gütesiegel
  • Social Icons

Fehlen Euch Elemente in meiner Liste, die Eurer Meinung nach noch unbedingt in den Header gehören? Ich freue mich auf Eure Kommentare!

Ihr seid Euch nicht sicher, ob Euer Header richtig gestaltet ist und wollt darüber hinaus auch noch den Rest Eurer Seite auf UX & Usability untersucht haben? Kein Problem, wir bieten auch eine UX- und Usability-Analyse an.

Über Luisa Dziki
Luisa leitet das Search-Team bei Seokratie. Dabei steht sie unseren Kunden und Mitarbeitern bei allen Belangen rund um SEO mit Rat und Tat zur Seite. Hier findest Du alle Beiträge von .
Kontakt

Wie können wir Dir helfen?

Dein Erfolg ist nur einen Klick entfernt. Verbinde Dich jetzt mit unseren Experten und lass uns gemeinsam Deine Ziele erreichen. Wir sind bereit, auf Deine individuellen Bedürfnisse einzugehen.

Lass und miteinander sprechen - kostenlos & unverbindlich

Karin Wagner

Deine Ansprechpartnerin:
Karin Wagner

Erstberatung

Kontaktformular für Landingpages FW

  • Lass uns miteinander sprechen

    kostenlos & unverbindlich

    Karin Wagner, Seokratie Österreich
    Deine Ansprechpartnerin in Österreich:
    Karin Wagner
  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Werde fit in SEO und Content Marketing!
Unser kostenloser SEO-Kurs bringt Dir 5 Tage lang täglich SEO-Wissen in Dein E-Mail-Postfach und unseren Newsletter.
Abonnieren
​Du kannst Dich jederzeit wieder abmelden.
close-link