11 UX-Tricks für eine optimale Menüleiste

Unser Ziel: die Steigerung Ihrer Conversions. Wir wollen Ihnen helfen, mit unserer innovativen Technologie – und kleinen Tipps, die manchmal große Wirkung zeigen. Heute knöpfen wir uns ein besonders wichtiges Element der UX-Optimierung vor: die Menüleiste.

Besucher, die zum ersten Mal auf Ihrer Webseite landen, brauchen gute Wegweiser, um sich nicht zu verlaufen und das zu finden, was sie suchen. Diese Wegweiser sollten klar und präzise sein, und bestenfalls auch nett anzusehen. Genau diese Funktion übernimmt die Menüleiste Ihrer Webseite. Sie führt den Besucher durch Ihre Seiten, und wie eine Landkarte sollten Inhalt, Formular und Design dem User helfen, sich schnell und einfach zurechtzufinden.

1 So viele Formate, gibt es keine Zauberformel?

Horizontal, vertikal, sticky: es gibt viele Arten von Menüleisten, allesamt interessant und kreativ. Aber sind sie auch effizient? Wie sollte ein Menü aussehen? Vor allem: Wie sollte IHR Menü aussehen, um die User Journey der Besucher Ihrer Webseite zu verbessern? Wenn Sie Inspirationsquellen für Ihr Menü suchen, sind Sie hier genau richtig.

In diesem Artikel möchten wir 11 wichtige Elemente teilen, die Ihr Menü benutzerfreundlicher machen, es den Bedürfnissen Ihrer Besucher anpassen und Ihre Conversions steigern.  

2 11 Tricks für optimierte Menüleisten

1. Dem Besucher zeigen, wo er sich befindet

Ihr Menü sollte interaktiv sein und dem User jederzeit zeigen, wo er sich gerade befindet. Besonders wichtig ist das für Erstbesucher. Ein kleines visuelles Element reicht, um den Komfort des Surfens ungemein zu steigern. Die neue Navigationsleiste von LinkedIn ist ein gutes Beispiel :

Die Meinungen über das Design sind geteilt, man muss aber zugeben, dass die neue Menüleiste des professionellen sozialen Netzwerks das Surfen wirklich vereinfacht. Im Gegensatz zur alten Version sieht der User auf einen Blick, in welcher Rubrik er sich gerade befindet. Erinnern Sie sich? So sah die Leiste vorher aus:

2. Die Menüleiste sichtbarer machen

Wie schon erwähnt, ist die Menüleiste quasi das Herzstück Ihrer Webseite. Sie muss erstens klar und zweitens leicht erkennbar sein, damit der Besucher intuitiv auf sie zugreift, um von A nach B zu gelangen. Außerdem sollte der Besucher nie öfter als dreimal klicken müssen, um auf der gesuchten Seite zu landen (z.B. Produktseite), wo immer er sich gerade befindet. Deshalb muss das Menü sehr klar organisiert sein.

Anbei das Beispiel einer besonders klaren und dynamischen Menüleiste, vom Spezialisten für Kultur und Elektronik fnac.com:

3. Zu lange Dropdown-Menüs vermeiden

Ist das Dropdown-Menü zu lang, kann das den Besucher verwirren. Wo soll er hinsehen, wo klicken? Ein zu langes Menü strengt an und kann den Besucher verärgern. So geht es mir jedenfalls regelmäßig auf Amazon.

Zum Glück macht das Unternehmen diese Anstrengung durch seinen Service wett… Nebenbei sei bemerkt, dass Amazon seinem Mega-Menü sogar eine Extra-Seite gewidmet hat. Allerdings ist sie ein Design-Albtraum, außer Riesen-Unternehmen wie Amazon kann sich wohl keine Webseite eine so unangenehm anzusehende Seite leisten.

Der Tipp vom Experten:

„Alle Kategorien Ihres Menüs müssen anklickbar sein, sonst ist der Besucher potenziell frustriert. Manchmal interessiert er sich für eine Rubrik, ohne genau zu wissen, was er sucht. Kann er alle Produkte problemlos aufrufen, steigert es Ihre Verkaufschancen!“

-Pauline Rommelaere, UX-Consultant, Kameleoon.

4. Stellen Sie Ihre Suchmaschine in den Vordergrund

Auch hier ist fnac.com sehr gut aufgestellt. Scrollt man auf den Seiten von fnac.com, bleibt die Suchmaschine trotzdem sichtbar (was bei Konkurrenten wie z.B. eBay oder Amazon nicht der Fall ist).

Dabei ist inzwischen bekannt, dass 30% der Internetuser interne Suchen durchführen, und dass diese Gruppe bis zu sechsmal höhere Conversion-Raten  aufweist als der Rest.

Ein gutes Beispiel für die Wichtigkeit der internen Suche, wenn auch nicht speziell in der Menüleiste: routard.com

Zusätzlich zur internen Suche innerhalb der Navigationsleiste hat der Reiseführeranbieter routard.com die Relevanz von Suchmaschinen auf seiner Homepage A/B-getestet - die Absprungrate sank um 14%, die Exit-Rate um 17%!

5. Kontextualisieren Sie Ihr Menü

Wenn der User auf den falschen Button klickt, landet er nicht da, wo er will. Das kann ihn frustrieren und zum Verlassen Ihrer Webseite bewegen. Setzen Sie alles daran, diese Fehlerquelle zu vermeiden. Zum Beispiel indem Sie die Menüleiste kontextualisieren. Ein kleines Symbol hilft, dem Besucher den Weg zu weisen.

Die Webseite von Apple bietet ein einfaches, effizientes Beispiel.

Nebenbei bemerkt sieht der User die Symbole nicht, wenn er die Maus über die Rubriken zieht, sondern erst, wenn  die Rubrik wirklich angeklickt wird. Der Tipp vom Experten:

„Wenn Sie es nicht bereits gemacht haben, empfehlen wir einen A/B-Test von statischen vs. dynamischen Elementen, die im Hover-Mode erscheinen.“

-Géraud Bornet, UX-Consultant, Kameleoon

6. Personalisieren Sie Ihr Menü für jedes Besuchersegment

Personalisierung darf heute in keiner Marketingstrategie fehlen. Die Erwartungen der Besucher steigen ständig. Allein ein Blick auf die  Homepage von Google vor 20 Jahren zeigt, wie sehr sich die Ansprüche der Besucher verändert haben! Heute erwarten sie einfach eine personalisierte Erfahrung, die auf sie zugeschnitten ist.

Das zeigt auch unser nächstes Beispiel, von… raten Sie mal… schon wieder Fnac. Das Marketing hat die mobile Webseite A/B-getestet um zu ermitteln, inwieweit ein personalisiertes Angebot relevant und verkaufssteigernd ist. Variante A zeigt die ursprüngliche Version, Variante B ein auf Besucherinteressen basierendes Sonderangebot direkt in der Menüleiste.

Variante B steigerte die mobilen Transaktionen um 8,5%. Sie könnten auch das Menü direkt personalisieren, ohne große optische Änderungen vorzunehmen.

Hier ein fiktives Beispiel: Ein Kunde besucht regelmäßig Produktseiten Objets Connectés (High-Tech-Produkte) auf darty.com. Da könnte man doch die Rubrik Bons Plans (Sonderangebote) für ihn personalisieren. Das Gleiche würde auch für Besucher mit Vorliebe für Küchengeräte, Kühlschränke, usw. gelten.

Fiktives Beispiel.

7. Einen „Fat Footer“ einfügen

Ein Fat Footer ist, wie sein Name schon sagt, ein besonders dicker Footer. Hier findet man alles, was Sie sonst noch wissen möchten. Ein Fat Footer bringt zwei Vorteile mit sich:

1. Er ergänzt ein komplexes Menü.
2. Er verbessert die Verlinkung Ihrer Webseite.

Was man alles in einem Fat Footer finden kann:

Der „Fat Footer“ von Hubspot.

 Im Gegensatz zu normalen Footern enthält die „fette“ Variante nicht nur die AGB (wie bei Google oder Apple), sondern auch ergänzende Informationen über Ihre Aktivitäten, Produkte oder Dienstleistungen :

• Ihre Werte,
• eine Suchmaschine,
• Event-Informationen,
• Ressourcen (White Papers, E-Books, usw.),
• Demoanfragen,
• Social-Sharing-Symbole,
• eine Zusammenfassung Ihrer meistgelesenen Blogartikel,
• neu eingestellte Produkte,
• meistverkaufte Produkte,
• Social Proof,
• usw.

Sie merken es: ein Fat Footer kann voller wertvoller Informationen stecken!

8. Ändern Sie die Position der Elemente

Ihr Menü ist vielleicht bereits gut aufgestellt und braucht nicht komplett neu gestaltet zu werden. Manchmal bringt aber schon der Test eines Details erstaunliche Ergebnisse.

IKKS, kleiner Test, große Wirkung

Die Modemarke IKKS testete die Ergonomie ihrer Menüleiste dank Heatmaps und stellte fest, dass der Tab ihrer Kollektion „I-code“ nur selten angeklickt wurde. Das Unternehmen führte einen A/B-Test durch, um die Position des Tabs zu ermitteln, die die meisten Klicks auf sich zieht.

Zwei Varianten wurden getestet:

Zwei Varianten wurden getestet: Eine von ihnen steigerte die Klicks um satte 16,5%. Hier können Sie erfahren, welche es war, und die gesamte Success Story herunterladen.

9. Das Menü dynamisch gestalten

Ein dynamisches Menü wird automatisch aktualisiert. Für eine E-Commerce-Webseite kann das heißen, dass Produkte im Warenkorb abgelegt oder entfernt werden können, ohne dass die Seite neu geladen werden muss.

Das ist in diesem interessanten Beispiel von zavvi.com der Fall. Wenn ein Artikel im Warenkorb landet, wird die Seite nicht neu geladen, und der Artikelzähler des Warenkorbs wird in Echtzeit aktualisiert.

Es ist ein echter Vorteil, auf der Seite bleiben zu können, nachdem ein Artikel in den Warenkorb abgelegt wurde. Und es ist bei weitem nicht die Regel.

Bei CDiscount ist alles viel komplizierter: Um die Einkäufe fortzusetzen, muss man zwei Seiten passieren und 2 Pop-ups über sich ergehen lassen.

Kurz: Gestalten Sie Ihr Menü schlicht und dynamisch!

10. Menü-Elemente klarer und gestalten und ggf. umformulieren

K.I.S.S. Keep It Short and Sweet ! Über graphische Elemente hinaus sollte auch das Wording Ihres Menüs getestet werden. Vielleicht verlieren Sie jeden Tag zukünftige Kunden, ohne es zu merken, nur weil die Anordnung und die Texte Ihres Menüs nicht klar genug sind. Das wollte Einbauküchenhersteller Schmidt in einem A/B-Test prüfen. Die ursprüngliche Version des Menüs wurde mit zwei Varianten verglichen. Auch wenn man nicht französisch spricht, sieht man klar, dass die Formulierungen stark verkürzt und damit der gesamte Aufbau vereinfacht wurde, von der Referenz zu Variante 1, aber ganz besonders mit Variante 2.

Variante 2 war ganz eindeutiger Sieger, mit 130% mehr Klicks auf „Kataloge“, 40% mehr Klicks auf „Geschäfte“ und über 300% mehr Klicks auf „Projekte“! Ganz zu schweigen von der Zahl der Terminvereinbarungen, die ebenfalls stieg.

Einmal mehr ist bewiesen, dass ein einfacher Aufbau gewinnbringend ist. Sie sollten A/B-testen, welche Umformulierungen oder klärenden Elemente bei Ihren Besuchern am besten ankommen. 

11. Mobile Menüs nicht vergessen

Wir liegen Ihnen seit Monaten damit in den Ohren: Investieren Sie in Ihre mobilen Seiten! Es ist einfach schrecklich, mit dem Smartphone auf Seiten zu surfen, die nicht responsive sind (d.h. deren Design sich nicht automatisch auf das benutzte Endgerät anpasst).

Anbei noch ein französisches Beispiel, dessen Bilder für sich sprechen:

Links eine Webseite für einen Freizeitpark, die nicht responsive aufgestellt ist. Wie soll man da den Weg zur Buchung finden? Rechts die Webseite von Freizeitpark Futuroscope. Die Teams von Futuroscope wollten die User Experience für mobile Besucher optimieren, die gesamte Webseite ist responsive gestaltet. Das Menü an sich ist in Form eines „Burgers“ präsent - diese drei Striche, hinter denen sich die Menüleiste platzsparend verbirgt – ist eine Methode, die seit einigen Jahren auf mobilen Endgeräten genutzt wird.

Mehr Tipps für qualitative Menus auf mobilen Endgeräten finden Sie in diesem Artikel von sitesforprofit.com. Auch hier gibt es keine Zauberformel, aber Sie können sich von zahlreichen Beispielen inspirieren lassen um das Menü auszuarbeiten, das auf Ihre Webseite zugeschnitten ist.

3 Wie weiß ich, was funktioniert?

Indem ich teste!

„Die Idee des Experiments kann das Experiment nicht ersetzen.“  

-Émile Chartier, Philosoph

Sie müssen experimentieren, um zu sehen, wo Optimierungspotenzial liegt. Führen Sie A/B-Tests durch, um die Lösungen zu finden, die der Mehrheit Ihrer Besucher gefallen. Auf jeden Fall sind ein paar Punkte unumgänglich, sei es auf Desktop oder mobilen Endgeräten: Ihr (anklickbares) Logo, einfache Gestaltung, usw. Testen, testen, testen…

Testen Sie auch unsere Lösung und fordern Sie eine kostenlose Demo an!