Neue Wege für eine bessere Kommunikation im Header

Eine durchschnittliche Corporate Homepage sieht seit einigen Jahren so aus: Unterhalb von Logo und Navigationsleiste befindet sich ein Fullwidth-Slider, der ein Set an Bild-Text-Bannern rotieren lässt. Website-Besitzer lieben Slider, weil sie dynamisch und modern wirken. Vor allem machen Slider es scheinbar möglich, mehr als nur ein Thema in Form eines Hero-Images im prominenten “Above the Line” -Blickfeld zu kommunizieren. Im ersten sichtbaren Screen nach Seitenaufruf also, von dem sie erwarten, dass er die Aufmerksamkeit der User besonders auf sich zieht.

Slider werden häufig ignoriert

Untersuchungen zeigen jedoch, dass ein Großteil der User inzwischen gelernt hat, dass Slider in der Regel Marketing-Inhalte und keine für ihn relevanten Informationen enthalten. Sie werden darum ebenso wie Ad-Banner häufig übersprungen. 99% der Interaktionen mit Slidern beschränken sich zudem auf den ersten Screen - die übrigen werden gar nicht wahrgenommen. Wichtige Informationen sollten also besser nicht ausschließlich in einem Homepage-Slider untergebracht werden.

Slider können dem Ranking schaden

Slider im Header haben noch andere Nachteile: Weil sie in der Regel mit Javascript und großen Bildern funktionieren, müssen eine Menge Daten geladen werden, bevor die Inhalte der Website überhaupt angezeigt werden. Dies ist wiederum schlecht fürs Suchmaschinenranking. Auf Smartphones kommen Einschränkungen der Usability sowie gestalterische Probleme beim Skalieren des Sliders auf kleinere Viewports hinzu - Texte verdecken z. B. wichtige Bildteile oder brechen unkontrolliert um.

Welche Möglichkeiten gibt es, im Homepage-Header simultane Inhalte prominent und bildstark zu kommunizieren?

Das fragt uns einer unserer Kunden, eine private Hochschule in Hessen. Wir haben uns darum Lösungen im Bereich Corporate Websites für Hochschulen näher angesehen.

Teaser-Grids

Grids teilen den Screen in mehrere Bildbereiche auf. So lassen sich simultan mehrere Themen kommunizieren und durch Größe und Position unterschiedlich akzentuieren. Die Reihenfolge, Position und Größe eines jeden Bereichs ist flexibel - für mobile User können also andere Prioritäten gesetzt werden als auf dem Desktop.

Das Beispiel der Bob Jones University kombiniert starke Fotos mit kurzen Stichworten. Hier wird eine gute Übersicht über ein Themenspektrum geboten, ohne dass es überladen wirkt.

News-Cards

Wie bei einem Teaser-Grid können News-Cards neben und untereinander stehen und sich in verschiedenen Viewports anders verhalten. Cards sind Info-Boxen, typischerweise bestehend aus einem Bild, einem Link und einem Textanriss. Bei einem Cards-Layout geht es häufig darum, Nachrichten gleichgewichtig zu präsentieren. Über Widgets fügen sich Social Media Inhalte nahtlos ein.

Im Beispiel der LSE wird kein Thema besonders priorisiert. Dem User darf die für ihn wichtigen Inhalte selbst wählen, verliert möglicherweise aber auch schnell den Überblick.

Slider/Teaser-Grid-Kombination

Eine interessante Möglichkeit, die Vorteile von Teaser-Grids auf einen Slider anzuwenden, zeigt die Seite der New York University. Das Grid ist horizontal scrollbar und so in der Breite unendlich verlängerbar. Dadurch können mehr Themen above the line gefeatured werden. Der Nachteil besteht freilich im Slider als solchen: ob der User ihn benutzt und zu den nicht im ersten Screen liegenden Inhalten gelangt, ist fraglich.

Eine Variante hiervon ist ein Teaser-Grid, das nur innerhalb einzelner Bildflächen einen Slider enthält, in den übrigen normalen Content.

Hero-Cards-Kombination

Eine verbreitete Lösung besteht darin, im Header ein einzelnes Hero-Image oder auch ein Video zu platzieren, das nur etwa die Hälfte der Viewport-Höhe einnimmt. Darunter sind News Card platziert. Auf diese Weise wird der visuelle Schwerpunkt auf ein einzelnes Thema gesetzt, andere Themen sind aber ebenfalls above the fold im Blickfeld.

Eine Variante hiervon ist ein Teaser-Grid, das nur innerhalb einzelner Bildflächen einen Slider enthält, in den übrigen normalen Content.

Fazit:

Slider können in bestimmten Kontexten durchaus ein geeignetes Instrument sein, um auf kleinem Raum eine Auswahl von thematisch ähnlichen Inhalten anzubieten, z.B. bei Produktpräsentationen. Im Header von Corporate Websites werden sie vom User in der Regel ignoriert und sind mehr schädlich als nützlich.

Auf die Bedürfnisse des Users fokussieren

Es ist immer sinnvoll, zu überlegen, was genau der User wirklich von der Website erwartet und diesen Inhalt zu verstärken - auch indem anderes weggelassen wird. Ein einzelnes starkes Keyvisual mit einer fokussierten Botschaft ist immer effektiver als ein Set an Bildern und Bannern, die möglichst alle Facetten eines Unternehmens abdecken sollen.

Wenn dennoch mehrere Themen simultan im Header kommuniziert werden sollen, sind Teaser-Grids eine interessante Option. Sie besitzen unter anderem dem Vorteil, für mobile User optimiert werden zu können. Fokussierung auf die für den User wichtigsten Themen sowie ein reduziertes, nicht-bannerähnliches Bilddesign sind auch hier entscheidend für den Erfolg der User-Interaktion.