Ein Website-Header ist oft das erste, was ein Benutzer sieht. Es kann die Benutzererfahrung, Ihr Branding und vieles mehr beeinflussen oder brechen!
Um Benutzer zu binden und sie durch das Design zu bewegen, müssen Sie einen Website-Header erstellen, der beeindruckt. Und nicht nur auf der Homepage. Auf jeder Seite des Designs. (Denken Sie daran, dass eine beträchtliche Anzahl von Benutzern nicht zuerst auf Ihre Homepage wechselt.) So gehen Sie vor.
1. Verwenden Sie ein atemberaubendes Bild
Ein tolles Bild macht immer einen hervorragenden ersten Eindruck. Ob Sie sich für ein Foto, ein Video, eine Animation oder eine andere Kunst entscheiden? Element sollte jeder Header mit Bildern führen, die Benutzer betrachten möchten.
Das Kopfbild ist mehr als nur ein hübsches Bild. Es ist der Zugang zu allen Inhalten auf dieser Seite und möglicherweise sogar tiefer in das Design.
Ein Bild allein ist ein guter Ausgangspunkt, aber Sie müssen es mit anderen Elementen kombinieren, um den Inhalt optimal nutzen zu können. Andere Elemente, die in einer Kopfzeile angezeigt werden können, sind:
- Text oder Überschrift
- Logo oder Markenkennung
- Button oder Aufruf zur Aktion
- Navigationselemente
- Suche
Wählen Sie scharfe Bilder mit hoher Auflösung, die für andere Elemente wie Text oder Schaltflächen viel Kontrast bieten. Menschen lieben es, Gesichter zu sehen. Denken Sie also daran, Personen zu zeigen, die Ihr Produkt oder Ihren Service verwenden oder damit interagieren, wenn möglich. Möchten Sie Ihr aktuelles Portfolio-Projekt vorführen? Verwenden Sie eine Mockup-Vorlage, um sie interessanter und ansprechender zu gestalten.
2. Integrieren Sie Navigationselemente
Es gibt keinen Grund, sich die Kopfzeile und die Navigation als separate Elemente vorzustellen. Sie sind oft Teil desselben visuellen Konzepts. Unabhängig davon, ob Sie eine vollständige Menünavigation lieben oder etwas aus einem Hamburger-Symbol herausspringen, sollten Navigationselemente Bestandteil des Entwurfs für die Kopfzeile sein.
Wenn Sie über Kopf und Navi nachdenken, sollten Sie auch ein klebriges Navigationsmuster in Betracht ziehen. Selbst wenn sich Benutzer vom Hauptheader entfernen, der eine kleine Navigationsleiste oder eine große Bildschirmanzeige sein kann, können sie sich schnell mit dem Site-Design auseinandersetzen.
Navigationselemente in der Kopfzeile bewirken etwas anderes, was Sie möglicherweise nicht erwarten. Da es sich hierbei häufig um kleinere Textstücke oder Symbole handelt, kann dies helfen, eine Hierarchie innerhalb der Kopfzeile festzulegen, die den Benutzern zeigt, wie sie mit dem Entwurf interagieren.
3. Erstellen Sie Distinct Messaging
Es reicht nicht aus, ein großartiges Bild in der Kopfzeile zu platzieren. Was sagt es?
Überlegen Sie, wie die Nachricht des Headers an Benutzer kommuniziert.
- Sagt ihnen, was zu tun ist oder was von dem Inhalt der Seite zu erwarten ist?
- Kommunizieren alle Elemente eine einzige und einheitliche Nachricht, die leicht verständlich ist?
- Kann der Benutzer wissen, welche Aktion auf der Seite ausgeführt werden soll oder wo er als Nächstes klicken muss?
Stellen Sie sicher, dass Sie mehrere Elemente kombinieren, um mit einer einzigen Nachricht einen Gesamteffekt zu erzeugen.
4. Versuchen Sie es mit übergroßer Typografie
Übergroße Typografie ist eine großartige Möglichkeit, um einen Header hervorzuheben. Selbst wenn es sich bei den Wörtern um einfache Ortskennungen handelt, kann die Verwendung von Fettdruck dazu beitragen, den Blick auf den oberen Bildschirmrand zu lenken, bevor der Benutzer beginnt, andere Informationen zu lesen.
Während Typografie-Platzierungen variieren können, versuchen Sie, zwei grundlegende Platzierungen für Typografie in der Kopfzeile einzuhalten.
- Homepage-Option mit mehr Typografie oder dramatischer Schrift oder einem anderen Typ als auf anderen Seiten.
- Alle anderen Seiten sind mit einem einfachen Typ-Framework ausgestattet, das auf allen Innenseiten konsistent ist.
5. Betrachten Sie das Lesen von Mustern
Das Lesen auf Websites folgt nach Untersuchungen der Nielsen Norman Group tendenziell drei verschiedenen Mustern der Augenbewegung. Alle diese Lesemuster werden dann angepasst, um die Aufgabe zu berücksichtigen, auf die sich der Benutzer zum Zeitpunkt des Lesens konzentriert, was in einfachen Worten eine Gruppierung zusammengehörender Teile im visuellen Fluss ist.
Beide Studien, wie Benutzer Inhalte betrachten und verdauen, sind wichtig, da sie Ihnen helfen zu verstehen, wie und wo Elemente im Design und insbesondere im Header platziert werden.
Denken Sie zunächst an die Grundmuster:
- F-Muster: Benutzer lesen oben, halb auf der Seite und schließlich links in einer F-Form.
- Gutenberg-Diagramm: Es gibt vier aktive Zonen zum Lesen, beginnend mit zwei horizontalen Stopps von links nach rechts, dann von rechts oben nach links unten und von unten nach unten. (Bildet eine Z-Form.)
- Z-Muster: Das Auge bewegt sich von links nach rechts und zurück von oben nach unten im Design, wobei mehrere Z-Muster gebildet werden.
Platzieren Sie Elemente - insbesondere Schlüsselelemente - in den heißesten Zonen in den allgemeinen Lesemustern, um die Wahrscheinlichkeit einer Benutzerinteraktion zu erhöhen. Überlegen Sie sich dann, wo der Benutzer am wahrscheinlichsten als Nächstes suchen soll - nach einer Aktion, die sich auf den gerade verdauten Inhalt bezieht.
6. Fügen Sie ein anklickbares Element hinzu
Ist das Kopfbild Ihrer Website interaktiv? Enthält es anklickbare (oder anklappbare) Elemente, um die Einbindung der Benutzer zu fördern?
Ein Header kann der perfekte Ort für eine Call-by-Action-Schaltfläche oder eine einfache Aktion wie ein E-Mail-Adresserfassungsformular sein. Gehen Sie nicht zu viele Elemente über Bord, um zu klicken, da dies die Gesamtnachricht beeinträchtigen kann. In diesem Bereich des Designs kann jedoch ein einfaches Ein-Aktion-Element wirksam sein.
Nicht sicher, welches Element der Header enthalten soll? Stellen Sie sich eine gewünschte Aktion vor, die im gesamten Design konsistent ist, mit einer Schaltfläche, die immer verfügbar ist (ähnlich wie bei der Navigation). Ein Einkaufswagen-Button, Zugang zu Kontoinformationen oder ein Kontakt-Button sind gute Optionen.
7. Verwenden Sie einfache Ebenen
Wie ziehen Sie alle oben genannten Elemente (oder kleine Gruppen davon) in der Kopfzeile zusammen? Der Trick besteht in der einfachen Schichtung. Der beste Header - ein Header, der die Benutzer begeistert - sieht einfach aus. Es folgt den Regeln der Designtheorie und verwendet ein dominantes Element, um Benutzer und Designtechniken zu unterstützen, die ihnen dabei helfen, umsetzbare Ziele zu erreichen.
Das Schichten von Objekten ist eine Möglichkeit, dies zu erreichen.
Mit einfachen Ebenen können Sie nicht nur unterschiedliche Räume für jedes Element erstellen, sondern auch den visuellen Fokus für den Benutzer. Sie wissen, wo sie mit dem Design beginnen sollen und welche Elemente ihre Aufmerksamkeit verdienen und welche Elemente überflogen werden können.
Auch beim ersten Versuch ist es nicht immer erfolgreich. Oft sind mehrere Überarbeitungen und Tests erforderlich, um eine Gruppe von Elementen zu erstellen, die effektiv zusammenarbeiten und die Benutzer am oberen Rand einer Seite begeistern.
Fazit
Während das Erstellen eines Homepage-Headers häufig im Vordergrund des Designprozesses steht, geht das Arbeiten an Headern für Innenseiten oft verloren. Der Inhalt auf? Seiten können genauso wichtig sein wie die Startseite, da viele Benutzer dank einer Suche zu Ihrem Website-Design gelangen und nicht, indem Sie eine URL eingeben und den vom Design-Team vorgesehenen Navigationslinks folgen.
Überlegen Sie sich beide Kopfzeilen unabhängig voneinander und zusammen, um Harmonie, Einheit und ein visuelles Design zu erzielen, das die Benutzer beeindruckt, wenn sie auf der Seite landen.