Hohe User Experience beim Website-Logo durch responsives Verhalten

Betrachtest du einzelne Elemente einer Website, die auch positiv auf die User Experience einzahlen, so ist das Logo markenstiftend und verdient eine eigene Betrachtung. In diesem Artikel möchte ich dir ein paar Tipps aus unserer Agenturpraxis mitgeben, wie du beim Umgang mit deinem Website-Logo eine hohe User Experience für deine Website-Nutzer sicherstellen kannst.

Das Website-Logo ersetzt den Startseiten-Menüpunkt

Das Logo ist oft in der Navigationsleiste platziert und es sollte IMMER mit der Startseite verlinkt sein. Nutzer erwarten heute auch, dass der Klick auf das Logo zurück zur Startseite führt. Das Logo ersetzt damit auch den Menü-Link "Home", der manchmal heute noch auf Websites sichtbar ist, um auf die Startseite zu verlinken. Eine Home-Verlinkung als eigenen Menüpunkt in der Navigation ist unnötig. Und damit wird auch wertvoller Platz gespart.

Die Stadt Waren (Müritz) in Norddeutschland, wo unser Unternehmen ansässig ist, hat sich entschieden, dem Nutzer mit dem Haus-Icon eine Hilfestellung zu geben als Interaktionsmöglichkeit zurück zur Startseite. Aus zwei Gründen wurde es hier vermutlich eingesetzt: Einerseits wurde neben dem Logo auch noch ein weiteres Logo platziert, wodurch die Klickfreudigkeit auf das Logo abnehmen könnte. Andererseits geht man vielleicht davon aus, dass die Nutzer dieser Website weniger vertraut sind mit dem Internet. Ehrlicherweise erhöht dieses Haus-Icon die User Experience nur bedingt, denn bei dieser Website gibt es viele auffällige Mängel hinsichtlich der Informationsarchitektur, des User Interfaces und auch der Barrierefreiheit (insbesondere die Kontraste zum Lesen von Links und Texten). Die Website der Stadt Waren (Müritz) bleibt damit ein Negativbeispiel.

Responsive Logo: Anpassung des Logos nach Auflösung des Geräts

Während in Desktop-Ansichten viel Platz verfügbar ist und daher der Unternehmensname oder Claim im Logo mit aufgeführt werden kann, sollte in der mobilen Ansicht aus Platz- und Aufmerksamkeitsgründen das Logo in reduzierter Form platziert sein.

Bei Logos hat sich, wie bei Websites auch, schon seit Jahren der Trend zur Anpassung an Größe, Medium und Umgebung durchgesetzt. Man spricht hierbei auch von Responsive Logo, was bedeutet, dass das Logo dem Umstand der Umgebung Rechnung trägt und sich auch auf kleineren Medien perfekt präsentiert, wodurch es ggf. auch in einigen Ansätzen anders dargestellt werden muss. Im Gegensatz zu starren Logos, die auf allen Geräten und Bildschirmgrößen gleich aussehen, passen sich responsive Logos an die jeweiligen Anforderungen an und bieten so eine konsistente und optimierte Benutzererfahrung über verschiedene Endgeräte hinweg. Dabei reduziert sich das Logo nur in seiner Form, aber nicht in seiner Markenbotschaft.

Ein positives Beispiel bietet das Schweizer Unternehmen Victorinox. Als Erstansicht erhält der Nutzer das große Icon angezeigt. Einziger Minuspunkt: Das Logo ist als PNG-Datei eingebunden statt als SVG.

Im Scrolling wird nur noch das Bildelement angezeigt. Im Hintergrund ist ein Berg zu erkennen, der die Schweizer Herkunft unterstreicht. Im ersten Viewport ist also die Markenbildung wichtig. Der Nutzer soll verstehen. Du bist hier bei Victorinox genau richtig. Scrollt der Nutzer herunter, werden die Inhalte wichtig. Das Logo reduziert sich in der Darstellung und gibt den Hauptinhalten mehr Platz. Die Navigation bleibt oben angeheftet, was auch Usability-Sicht sehr sinnvoll ist.

Ein weiterer Ansatz wird von der Guinness-Website verfolgt: Das Logo ist mit dem Unternehmensnamen platziert. Im Scrolling wird das Logo etwas kleiner bei weiterhin sichtbarer Navigation. Sobald ein Nutzer beginnt hochzuscrollen, wird Logo und Navigation wieder größer, weil erwartet wird, dass der Nutzer weitere Seiten besuchen möchte.

Nicht optimal gelöst hat es die Commerzbank mit ihrer Website. Das Logo ist mit dem Unternehmensnamen sichtbar und als SVG platziert, was gut gelöst ist. Allerdings konkurriert es sehr stark mit den nebenstehenden Navigationspunkten. Im Scrolling verschwindet die Navigation komplett und der Nutzer muss erst wieder ganz hochscrollen, um die Navigation zu sehen. Besser wäre es gelöst, wenn sofort mit Beginn des Hochscrollens die Navigation erscheint, wie es etwa zeit.de gelöst hat.

Sehr gut gelöst aus Sicht der Conversionoptimierung ist bei der Commerzbank das große Bild mit der Blickführung der beiden Personen. Sie gucken in Richtung des Buttons, was automatisch auch die Blickführung des Besuchers auf den Button lenkt. Derartige Blickführungen auf den Call-to-Action zu lenken sind sehr wirkungsvoll. Gut gemacht, Commerzbank!

Interessant wird es, wenn wir uns die Beispiele in der mobilen Variante anschauen.

In der mobilen Variante wird das Logo von Victorinox noch kleiner dargestellt und dafür mittig, um die Interaktionsmöglichkeiten für den Nutzer besser zu strukturieren. Guiness hat den Text rechts vom Logo statt unterhalb platziert. So hat die Harfe mehr Platz und die oberste Navigationszeile wird nicht zu groß. Die Commerzbank blendet hingegen einfach nur den Text aus in der Smartphone-Auflösung.

Die Rolle von responsive Logos in der User Experience ist wichtig, da sie helfen, die visuelle Konsistenz und Markenidentität aufrechtzuerhalten, unabhängig davon, wie Benutzer auf die Website zugreifen.

Wenn ein Logo gar nicht responsive auf sich ändernde Auflösungen reagiert, kann ein Logo auch zu stark die Aufmerksamkeit des Nutzers anziehen. In folgenden Beispiel der Hypovereinsbank konkurriert das sehr präsente Logo zu stark mit dem rechtseitig platzierten Call-to-Action – insbesondere in der Smartphone-Ansicht. Die Navigationspunkte im mittleren Grau werden leicht übersehen in der Desktop-Ansicht. Generell weist auch diese Website einige weitere UX-Fehler auf.

Designer müssen also, um responsive Logos zu gewährleisten, mehrere Logoadaptionen bereitstellen. Das Logo muss auch auf verschiedenen Hintergründen gut funktionieren, und eben auch in verschiedenen Größen. Das Logo wird also, je kleiner die Auflösung ist, in seiner Detailliertheit reduziert. Dabei darf es aber nicht den Markenkern verlieren. Das ist die hohe Kunst beim Einsatz von Responsive Logos. Wenn du also einen Marken-Relaunch beauftragst, denke bereits an diese Anforderung beim Einsatz deines kommenden Logos.

Das Dateiformat des Website-Logos

Der Einsatz von Responsive Logos ergibt Sinn, weil je nach Auflösung die richtige Größe geladen wird. Bei kleineren Auflösungen, also zum Beispiel bei einem Smartphone, wird auch nur die kleinere Grafik geladen. Das spart Ladezeit. Den größten Effekt auf deine Ladezeit wirst du allerdings erzielen, wenn du:

1. das Logo in der richtigen Auflösung einbindest (auch mit Angaben zu height und width). Oft sind Logos in einer zu hohen Auflösung eingebunden und werden dann für die Ansicht heruntergerechnet.
2. das Logo im Vektorformat SVG einbindest statt PNG oder JPG.

Website-Logo als Favicon einsetzen

Nutze auch die reduzierte Form deines Logos, um es als Favicon einzusetzen. Dabei verzichte auch auf Texte oder andere kleine Elemente, die in der kleinen Auflösung des Favicons nicht erkennbar sind.

Während die Guinness-Website aus dem obigen Beispiel das Logo responsiv für die Website sehr gut einsetzt, ist es als Favicon nicht optimal. Der kleine weiße Guinness-Text ist nicht erkennbar und reduziert im Rahmen des Favicons den Gesamteindruck. Der Kontrast ist niedrig. Der Eindruck wäre ohne Text und rein reduziert auf die Harfe des Logos deutlicher besser. Das haben die anderen Beispiele aus diesem Artikel alle besser gelöst als Guinness.

Falls du eine Agentur suchst, dir einen Fokus auf responsive Logos setzt, nimm gern Kontakt mit uns auf. Wir von der 4eck Media sind Profis für User Experience.

Wenn dir eine professionelle Positionierung wichtig ist, sind vielleicht auch folgende Icon-Pakete und Corporate Design Vorlagen für dich interessant: