15+ Schöne Website-Header und warum sie so gut funktionieren

Was ist das erste, was ein Nutzer auf Ihrer Website sieht?

Genau, der Header.

Wenn dieser nicht ansprechend genug ist, wenn er keine Klarheit bringt, könnten Ihre Nutzer einfach weggehen und vielleicht nie wiederkommen.

Das wollen wir doch nicht, oder?

Website-Header sind ein zentraler Teil der Gestaltung einer Website. Sie spielen eine Schlüsselrolle, wenn es darum geht, die Aufmerksamkeit der Nutzer zu wecken und eine Verbindung zu den Besuchern der Website herzustellen.

Deshalb werden wir in den folgenden Zeilen einige Prinzipien des Header-Designs behandeln, die Sie bei der Gestaltung eines Website-Headers beachten sollten.

Zu beachtende Prinzipien für das Header-Design

Forschungsstudien haben ergeben, dass sich die Augen der Nutzer auf einer Webseite nach einem der 3 Muster bewegen:

• Das Gutenberg-Muster

Bildquelle: https://vanseodesign.comThe Das Gutenberg-Muster kann auf textlastige Inhalte angewendet werden. Es suggeriert, dass die Augen des Lesers in einer Reihe von horizontalen Bewegungen über die Seite und nach unten wandern.

Beispiel:

• Das Z-förmige Muster

Das Z-Muster definiert den Pfad, dem die Augen der Nutzer beim Scannen einer Seite folgen, einen Pfad, der die Form eines Z-Buchstaben hat. Es wird für die Gestaltung von Landing Pages empfohlen, die Leser schnell überfliegen.

Beispiel:

• Das F-förmige Muster

Dieses Muster beschreibt den am häufigsten verwendeten Stil beim Lesen von Inhaltsblöcken im Online-Medium. Benutzer scannen eine Webseite schnell, und ihre Augen folgen einem F-Muster.

Beispiel:

Ohne auf weitere Details zu diesen Mustern einzugehen, möchten wir betonen, dass bei jedem dieser Modelle die obere horizontale Linie der Punkt ist, an dem die Besucher mit dem Scannen einer Seite beginnen.

Was sollte in eine Kopfzeile einer Website integriert werden?

Diese Muster zeigen, warum ein Webdesigner sorgfältig entscheiden muss, was die Benutzer zuerst sehen sollen. Die Kopfzeile sollte als Aufhänger dienen, der ihre Aufmerksamkeit erregt und sie dazu einlädt, den Rest der Seite zu erkunden.

Es gibt keine Chance, einen zweiten Eindruck zu hinterlassen. Deshalb sollten Sie sich gut überlegen, was Sie in den Header aufnehmen:

• Starkes Heldenbild

Ein Heldenbild ist ein sehr großes Banner, das auf einer Webseite oberhalb der Falz angezeigt wird. Es befindet sich in der Kopfzeile und ist das erste, was die Nutzer sehen, wenn sie auf einer Website ankommen. Heldenbilder haben auch den Zweck, die Aufmerksamkeit der Besucher auf das Alleinstellungsmerkmal (USP) des Unternehmens zu lenken. Eine Best-Case-Praxis besagt, dass die Verwendung von Gesichtern echter Menschen in den Heldenbildern den Besuchern helfen kann, sich besser mit der Marke zu identifizieren. Die Kommunikation wird menschlicher und persönlicher.

Quelle: Drift.com

• Unique selling point (USP)

Der USP ist ein Satz, der erklärt, warum ein Unternehmen existiert. Er sollte aufzeigen, was das Unternehmen tut, warum und für wen. Er sollte auch die einzigartigen Merkmale und Vorteile hervorheben, die die Marke von der Konkurrenz abheben. Ein starker USP ist von entscheidender Bedeutung, wenn es darum geht, den Besuchern der Website die richtige Botschaft zu vermitteln und sie letztlich in Kunden zu verwandeln.

Quelle: miro.com

• Markenname

Der Markenname sorgt dafür, dass sich die Menschen an die Identität der Website gewöhnen, oder verstärkt das Bild, das die Menschen von der Identität Ihres Unternehmens haben.

Das Bild sollte Ihre Markenpersönlichkeit widerspiegeln und sicherstellen, dass Ihre Markenstimme auf der gesamten Website konsistent ist. Es sollte leicht erkennbar sein, auch wenn es aus dem Header der Website ausgeschnitten ist. Und wenn es im Header der Website platziert ist, sollte es eine Schlüsselrolle dabei spielen, eine persönliche Verbindung zu jedem Nutzer herzustellen.

Quelle: carolinaherrera.com

• Produktvideo

Da es nur 50 Millisekunden dauert, bis sich Nutzer eine Meinung über eine Website bilden, bedeutet dies, dass Sie die wichtigsten Botschaften im Header haben sollten. Aus diesem Grund warten viele Unternehmen nicht darauf, dass ihre Nutzer nach unten scrollen, um zu den Merkmalen ihres Produkts/ihrer Dienstleistung zu gelangen, sondern sie nutzen die Kraft von Videos, um ihre Botschaft besser zu vermitteln. Vergessen wir auch nicht, dass 78 % der Menschen jede Woche Online-Videos ansehen und 55 % jeden Tag.

Quelle: wistia.com

• Call to action (CTA)

Ein CTA ist eine Nachricht (normalerweise auf einer Schaltfläche), die eine bestimmte Reaktion bei den Website-Besuchern auslöst. Der Call-to-Action sollte klar definiert und für den Website-Besucher leicht zu verstehen sein. Natürlich erhöht ein CTA in der Kopfzeile, genau dort, wo die Besucher ihre Reise in die Website beginnen, die Chancen, die gewünschte Aktion von den jeweiligen Nutzern zu erhalten.

Quelle: creatopy.com

• Produktvorstellung

Wenn Sie einen eCommerce-Shop betreiben, werden Sie die Qualität und den Komfort eines bestimmten Produkts hervorheben wollen, und der beste Weg, dies zu tun, ist, dieses Produkt in die Kopfzeile aufzunehmen. Die Aufmerksamkeit der Nutzer wird auf das beste Angebot gelenkt, und sie werden geneigt sein, in den Kaufprozess einzusteigen.

Quelle: amazon.com

In jedem der oben genannten Fälle gilt die allgemeine Faustregel: Halten Sie es einfach, halten Sie es klar, machen Sie den Header ansprechend! Untersuchungen zeigen, dass „der durchschnittliche Unterschied in der Art und Weise, wie Nutzer Informationen oberhalb und unterhalb der Falz behandeln, 84 % beträgt.“ Es ist also am besten, sich darauf zu konzentrieren, diese Zahlen so weit wie möglich zu reduzieren. Und das geht am besten, wenn Sie sich Ziele setzen, was Sie übermitteln wollen.

Große Websites wie www.youtube.com beschränken den Platz für die Kopfzeile auf einen kleinen Teil. Dies geschieht absichtlich, um die Aufmerksamkeit der Nutzer auf etwas Wichtigeres zu lenken, wie Produkte, Dienstleistungen oder Videos (z.B. YouTube).

Manchmal braucht man nicht einmal eine Kopfzeile, oder wenn doch, dann nur eine kleine.

Es hängt alles von den Besonderheiten der Website ab. Denken Sie darüber nach und geben Sie Ihrer Website die Persönlichkeit, die sie braucht, unabhängig davon, was die Webdesign-Trends Ihnen hin und wieder „sagen“.

Was soll Ihre Website-Kopfzeile bewirken?

Neben der Übermittlung bestimmter Botschaften können Sie auch in Betracht ziehen, bestimmte Emotionen bei den Lesern zu wecken. Je nach dem Zweck, den Sie der Kopfzeile geben, kann sie bei den Lesern eine der folgenden Emotionen hervorrufen:

• Neugier

Für bestimmte Websites wäre es geeignet, eine Kopfzeile einzurichten, die bei den Lesern Neugierde weckt. Sie werden mehr erfahren wollen, sie werden sich nach mehr sehnen, sie werden sich darauf stürzen, den Rest der Geschichte zu erforschen.

So geht es mir mit diesem Header von Canva. Sie machen dort ein großes Versprechen: „Design anything“. Und Sie sind eingeladen, das zu testen. Können Sie widerstehen?

• Aktion

In manchen Fällen ist es besser, direkt im Header zur Aktion aufzurufen. Mit einem Call-to-Action können Sie die Nutzer dazu auffordern, auf eine Schaltfläche zu klicken oder eine andere Interaktion mit der Website durchzuführen, und zwar sofort. Im Fall von Planable ist der USP direkt mit dem unten stehenden CTA verbunden. Wenn Sie noch nicht bereit sind, etwas zu kaufen, gibt es außerdem die Möglichkeit, eine Demo zu vereinbaren.

• Vertrauen

Es kann sinnvoll sein, zunächst Vertrauen bei Ihren Besuchern zu wecken. Sie wollen, dass sie später etwas unternehmen, und dafür müssen sie das Gefühl haben, dass sie die richtige Entscheidung treffen.

Lassen Sie uns sehen, wie Salesforce das macht. Sie behaupten, dass sie das größte CRM der Welt sind. Okay, Sie könnten sagen, dass 99 % der Unternehmen da draußen nicht die ersten in ihrem Bereich sind. Und Sie hätten Recht. Aber wenn Sie weiter unten lesen, gibt es definitiv etwas, das Sie nutzen können. Es gibt eine Fallstudie, die zeigt, wie effizient das Produkt ist. Sie können eine solche Fallstudie selbst nutzen.

• Schmerzen

Warum um alles in der Welt wollen Sie bei den Lesern Schmerzen hervorrufen, besonders in der Überschrift? Nun, viele Unternehmen haben ihr Marketing auf das FUD-Prinzip (Fear, Uncertainty, Doubt) ausgerichtet. In einem frühen Stadium des Konversionsprozesses löst Angst/Schmerz die Entscheidung aus, sofort eine Lösung anzuwenden und den Schmerz auszublenden.

Dies kann ein Ansatz für Cybersecurity-Dienste, physische Sicherheitsdienste, aber auch im Gesundheitswesen oder bei Pensionsfonds sein.

Ein solcher Ansatz kann in Kampagnen genutzt werden, die darauf aufmerksam machen wollen, dass man sich gegen COVID impfen lassen oder einen Sicherheitsgurt anlegen sollte.

• Laughter

Vielleicht möchte man von Anfang an eine emotionale Verbindung zu den Besuchern herstellen. Und es gibt keinen besseren Weg, dies zu tun, als sie zum Lachen zu bringen. Und zwar laut lachen. Es entsteht ein Gefühl der Verbundenheit, und Sie werden Ihre Benutzer an Ihrer Seite haben, während sie die Website erkunden.

• Vertrautheit

Die Verbindung der Situation der Benutzer mit einer ähnlichen Situation, die in der Kopfzeile dargestellt wird, kann ein gewisses Maß an Vertrautheit schaffen.

Typen von Kopfzeilen für verschiedene Arten von Websites

Abhängig von den Besonderheiten der Website wird eine Kopfzeile besser zum Gesamtdesign passen als eine andere. Dementsprechend sollten Sie eine klare Vorstellung davon haben, welche Art von Header am besten zu Ihrer eigenen Website passt (sei es eCommerce, Blog, Portfolio, Online-Zeitung usw.).

• CTA-fokussierter Header

Im Fall von Blue Apron verwendet der Website-Header ein großes Video anstelle eines großen Heldenbildes. Es vermittelt ein Gefühl von Gemütlichkeit, Vertrautheit und Appetit.

Als Nächstes haben wir einen CTA, der den Nutzer einlädt, Maßnahmen zu ergreifen, um von der gleichen gemütlichen und leckeren Erfahrung zu profitieren.

Die CrazyEgg-Website verfügt über einen Header, der den Nutzer einlädt, das Produkt live zu testen. Ihr Produkt eignet sich perfekt für solche Echtzeit-Demonstrationen. Und es beweist sofort die Vorteile des Produkts. Die Hand des Mannes im Ballon lenkt das Auge auf die Schaltfläche.

• Markenorientierter Header

Dies ist ein schönes Beispiel für eine Website mit einem Header, der sich auf die Markenidentität und Markenelemente konzentriert. Er enthält das Logo, eine Replikation der Farben des Markenlogos im oberen Teil, sowie ihren Slogan.

• Inhaltsorientierter Header

Dieser ist sehr geeignet für Blogs und Magazine, die Artikel und Geschichten bewerben.

Aber ich habe auch einige Ausnahmen gefunden.

Patagonia wirbt auf der Homepage nicht für seinen Shop, sondern für Geschichten, die sein Engagement für eine Veränderung der Welt zeigen. Die aktuelle Geschichte im Header der Website handelt von Sklaverei und Aktivismus.

Im Fall von Ikea werden die Besucher auf der linken Seite des Bildschirms zu einem der Online-Shops geleitet, während sie auf der anderen Hälfte die Geschichte von Ikea lesen können.

• Videohintergrund fokussierter Header

BUKWILD hat 3 verschiedene Videos in den Header der Website integriert. Jedes der Videos kann abgespielt werden, wenn man mit der Maus über den entsprechenden Bereich fährt. Interessant ist dabei die kreative Art und Weise, wie die Videos als Teil eines größeren „Bildes“ eingesetzt werden, das ihre Marke repräsentiert.

• Produktfokussierter Header

Im Fall von Cropp, einem Online-Modegeschäft, werden die neuesten Kollektionen im Header vorgestellt.

Threadless.com stellt Wandkunst in einen Kontext und bietet ein CMYK-Kader. Der Header enthält auch einen klaren CTA, für all diejenigen, die sich in irgendeiner Weise zu dem Szenario zugehörig fühlen, das der „Squad“ im Header präsentiert.

• Personal Branding-fokussierter Header

Im Fall des Reiseblogs Alex in Wanderland sehen die Nutzer im Header der Website neben einem Foto von Alex den Beginn einer Geschichte in diesem Header: „Five years and counting on the road…“. Dies ist eine Einladung an die Leser, weitere Geschichten zu erkunden.

Zum Schluss…

Header tragen wesentlich zum Erfolg oder Misserfolg einer Website bei. Technisch gesehen ist dieser obere Teil natürlich das erste, womit die Leute auf der Website interagieren.