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

2016-08-09
Seokratie
Seokratie GmbH
Main address: Blutenburgstr. 18 D-80636 München, Deutschland ,
Tel:089 - 219098411 , E-mail: mail[@]seokratie.de
13. Jun 2016 Usability 7 Kommentare

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 Online Shops 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 Online Shop 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 Online Shops 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.

Gefällt Dir dieser Blogpost? Wenn Du regelmäßig die neuesten Trends im Online Marketing mitbekommen willst, dann abonniere jetzt unseren Newsletter und erhalte neben aktuellen Seokratie-Beiträgen ein kostenloses E-Book! Hier geht es zum Anmeldeformular.

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 Online Shops 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.

Ihr habt nur eine kurze Frage oder seid Euch unsicher, was eine bestimmte Maßnahme angeht? Wir helfen Euch unter Seokratie hilft!

E-Book: Der Weg zum erfolgreichen Online Shop
Seokratie E-Book
  • Das 139-seitige E-Book mit konkreten Tipps für Deinen Online Shop
  • Einmal wöchentlich exklusiver Content für das Marketing Deines Shops
  • Unser Newsletter (1-2x pro Woche)
Jetzt kostenlos downloaden
7 Kommentare
    1. Dieter-Michael Last 13. Juni 2016, um 13:34 Uhr

      Sehr informative Zusammenstllung. Vielen Dank.

      Eigentlich sollt man es dabei bewenden lassen. Denn die Informationen sind wertvoll und wirklich klar und verständlich aufbereittet Aber so eine kleine Nörgelei muss ich doch noch anbringen. Gerade auch weil sie etwas mit dem Thema dieses Blogposts, mit der Übersichtlichkeit und schnellen Orientierung, zu tun hat: Viel Stoff wird mir zugemutet. Wenn er nützlich ist, dann her damit. Aber warum ist er nicht übersichtlicher gegliedert? Dass ich mich schneller zurechtfinden kann? Dass ich querlesen kann?

    2. Luisa 13. Juni 2016, um 14:00 Uhr

      Hallo Dieter-Michael,

      Vielen Dank für dein Feedback. Es tut mir leid, dass dir mein Post unübersichtlich erscheint.
      Ich habe versucht mit den Zwischenüberschriften und den Beispielen eine klare Struktur in den Artikel zu bringen. Ein Inhaltsverzeichnis und Sprungmarken habe ich diesmal nicht für notwendig erachtet, wären aber bei näherer Betrachtung tatsächlich sinnvoll gewesen – manchmal neigt man zur Betriebsblindheit. 😉

      Ich behalte deine Kritik für meinen nächsten Post im Hinterkopf und werde sie dort berherzigen. Vielen Dank!

    3. Benedikt 13. Juni 2016, um 14:14 Uhr

      Ich habe heute euren Eintrag zum Thema der Header Gestaltung gelesen und muss sagen: 5-Sterne!

    4. Michaela Schwarz 13. Juni 2016, um 22:25 Uhr

      Hallo Luisa!
      Toll, für deine schnelle und aufmerksame Reaktion auf ein Kommentar zu diesem Blog von Dieter-Michael.
      Finde ich gut!

      Ich bin erst seit kurzem Newsletter-Abo-Leserin… Qualität und Einfachheit ist hervorragend!
      DANKE!
      Schönen Abend!
      LG Michaela (Weinviertel Österreich) 😉

    5. Luisa 14. Juni 2016, um 09:02 Uhr

      Vielen Dank, Michaela und Benedikt!

    6. Jermaine 17. Juni 2016, um 17:55 Uhr

      Top Artikel zum Thema Usability Optimierung

    7. Torsten Schrimper 23. Juni 2016, um 16:02 Uhr

      Vielen lieben Dank für den guten Beitrag. Ich habe wieder etwas gelernt. Liebe Grüße aus Essen. Torsten Schrimper

    Schreibe einen Kommentar

    Deine E-Mail Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    Willst Du fit in Online Marketing werden?
     Mit unserem kostenlosen Newsletter bekommst Du 1-2 Mal pro Woche unsere besten Artikel aus den Bereichen SEO, Content Marketing, Social Media, Adwords und Usability zugeschickt. Kein Spam - versprochen! Über 9.000 E-Mail-Abonnenten vertrauen uns bereits.
    Anmelden
    close-image

    Send this to a friend