Sie haben sich entschieden, Symbole mit Textbeschriftungen in Ihrer Navigation zu verwenden. Gute Entscheidung – die Daten sprechen dafür. Aber die nächste Frage ist weniger offensichtlich und genauso wichtig: Wie ordnen Sie das Symbol und die Beschriftung zueinander an? Vertikal übereinander? Nebeneinander? Beschriftung nur beim Hovern? Jedes Muster erzeugt messbar unterschiedliche Ergebnisse, je nach Kontext, und die falsche Layout-Wahl kann die Vorteile von Beschriftungen zunichte machen.
Die Anordnung eines Symbol-Beschriftungs-Paares beeinflusst drei Dinge gleichzeitig: Scanbarkeit (wie schnell Nutzer finden, was sie suchen), Tipp-Genauigkeit (wie oft sie das richtige Ziel treffen) und visuelle Dichte (wie viel Navigation Sie auf einem bestimmten Platz unterbringen). Um das richtige Gleichgewicht für die spezifische Navigation Ihres Shops zu finden, müssen Sie verstehen, was jedes Muster gut kann und wo es versagt.
- Vertikales Stacking (Symbol über Beschriftung) ist der Standard für mobile Tab Bars – verwendet von Apple, Google und jeder großen App.
- Horizontale Anordnung (Symbol links von Beschriftung) funktioniert beste für Schiebe-Menüs und Desktop-Navigation, wo vertikaler Platz begrenzt ist.
- Label-beim-Hovern funktioniert auf Mobilgeräten gar nicht und reduziert Desktop-Engagement um 22 % im Vergleich zu immer sichtbaren Beschriftungen.
- Das vertikale Stacking schafft eine 30–40 % größere effektive Tap-Fläche als reine Symbol-Navigation.
Muster 1: vertikales Stacking (Symbol oben, Beschriftung unten)
Das vertikale Stacking ist das häufigste Symbol-Beschriftungs-Muster in mobilen Oberflächen. Das Symbol sitzt oben, die Textbeschriftung direkt darunter, und die beiden bilden eine visuelle Einheit. Dies ist das Muster, das in jeder iOS Tab Bar, jeder Android Bottom Navigation Bar und praktisch jeder großen Mobile App verwendet wird.
Apples Human Interface Guidelines schreiben dieses Layout explizit für Tab Bars vor: Symbole bei 25x25 Punkten mit einer Textbeschriftung direkt darunter in der System-Schriftart. Googles Material Design Guidelines spiegeln dies wider und schreiben Symbole bei 24x24 dp mit einer 12 sp Beschriftung darunter vor. Beide Plattformen sind unabhängig zu denselben Layout-Lösung gekommen, weil das vertikale Stacking das fundamentale Mobile-Problem löst: begrenzte horizontale Breite.
Warum es auf Mobilgeräten funktioniert:
Ein Smartphone-Bildschirm im Hochformat ist typischerweise 375–430 Punkte breit. Eine mobile Tab Bar muss 4–5 Navigation-Elemente über diese Breite verteilen. Die Anordnung des Symbols über der Beschriftung ermöglicht es, mehr Elemente unterzubringen, weil jedes Element ungefähr 70–80 Punkte Breite benötigt, statt der 120–150 Punkte bei horizontaler Anordnung.
Das vertikale Stacking schafft auch eine natürliche Tap-Fläche, die größer ist als Symbol oder Beschriftung allein. Wenn Nutzer auf den allgemeinen Bereich eines Symbol-Beschriftungs-Paares zielen, erhalten sie eine Fläche von ungefähr 48–56 Punkten Breite und 44–52 Punkten Höhe – komfortabel über Apples 44x44 Minimum und Googles 48x48 Minimum. Das ist ungefähr 30–40 % fehlerverzeihender als ein reiner Symbol-Button bei 24–28 Punkten.
A/B-Tests auf E-Commerce Mobile Seiten unterstützen dies. Blend Commerce führte einen Test auf Shopify Shops durch, verwendete das vertikale Stacking Layout (das iOS Konvention entspricht) und maß einen Conversions-Lift von 10,37 % im Vergleich zu reiner Symbol-Navigation. Das vertikale Stacking ist nicht nur das häufigste Muster – es ist das am besten getestete.
Wann sollte man es nutzen:
- Mobile Tab Bars oder Bottom Navigation Bars (3–5 Elemente)
- App-ähnliche Navigation, wenn Sie iOS und Android Konventionen entsprechen möchten
- Jede persistente mobile Navigation, die über Seitenaufrufe hinweg sichtbar bleibt
Wann es versagt:
Das vertikale Stacking ist weniger ideal für Schiebe-Menüs oder Navigation Drawers, wo Elemente vertikal aufgelistet werden. In diesem Kontext verschwenden Sie vertikalen Platz, wenn Sie ein Symbol über die Beschriftung für jedes Menü-Element stapeln, und schaffen einen ungewöhnlichen visuellen Rhythmus. Schiebe-Menüs verwenden stattdessen das horizontale Muster.
Muster 2: horizontale Anordnung (Symbol links, Beschriftung rechts)
Die horizontale Anordnung platziert das Symbol links neben der Textbeschriftung auf derselben Zeile. Dies ist das Standard-Muster für Schiebe-Menüs, Sidebar-Navigation, Desktop-Navigationsleisten und Navigations-Listen.
Warum es für Menüs und Listen funktioniert:
Wenn Navigation-Elemente vertikal aufgelistet werden – wie in einem Hamburger-Menü, einer Sidebar oder einem Dropdown – dient das Symbol als visueller Ankerpunkt, der Nutzern hilft, die Liste schneller zu scannen. Forschung des MIT AgeLab zu visuellen Scanning-Mustern zeigte, dass linksbündige Symbole natürliche Scanning-„Landmarken” schaffen, die die Zeit, um ein bestimmtes Element zu finden, um 18–25 % im Vergleich zu reinen Text-Listen verkürzen.
Die horizontale Anordnung entspricht auch natürlichen Lesemustern. In Links-nach-rechts-Sprachen scannen Nutzer zuerst das Symbol (sofortige Erkennung), dann die Beschriftung (Bestätigung). Die Augenbewegung ist glatt und linear. Bei einem vertikalen Stacking muss das Auge von Symbol zu Beschriftung nach unten wandern, was langsamer ist, wenn man eine Liste mit vielen Elementen scannt.
Größe und Abstände, die funktionieren:
Material Design bietet spezifische Richtlinien für horizontale Symbol-Beschriftungs-Paare in Navigation Drawers: Symbol bei 24x24 dp, 16 dp Abstand zwischen Symbol und Beschriftung, Beschriftung in 14 sp mittelschwerer Schriftart. Die Gesamthöhe jeder Zeile beträgt 56 dp, was eine komfortable Tap-Fläche bietet.
Apples Richtlinien für listenähnliche Navigation sind ähnlich: Symbole bei 22–29 Punkten (abhängig von der Komplexität des Symbols), mit der Beschriftung rechts in der System-Schriftart. Die Mindesthöhe einer Zeile beträgt 44 Punkte.
Wann sollte man es nutzen:
- Schiebe- oder Hamburger-Menüs
- Sidebar-Navigation auf dem Desktop
- Dropdown-Menüs
- Einstellungsbildschirme
- Jede vertikal aufgelistete Navigation, wo Elemente von oben nach unten gestapelt werden
Wann es versagt:
Die horizontale Anordnung funktioniert nicht gut in Räumen mit begrenzter horizontaler Breite, wie mobile Tab Bars. Fünf Elemente, jedes mit einem Symbol und einer nebeneinander platzierten Beschriftung, passen einfach nicht in 375 Punkte Breite, ohne entweder Beschriftungen abzuschneiden oder den Text unlesbar klein zu machen.
Muster 3: Beschriftung beim Hovern (nur Symbol, Text erscheint beim Hovern)
Beschriftung beim Hovern ist ein zunehmend verbreitetes Muster auf dem Desktop, besonders in Sidebar-Navigation wie der von Gmail, Slack und verschiedenen Dashboard-Anwendungen. Die Navigation zeigt nur das Symbol in einer schmalen Spalte, und das Hovern über einem Symbol offenbart einen Tooltip mit der Textbeschriftung.
Warum es verlockend ist:
Der Reiz ist offensichtlich. Sie erhalten eine kompakte Navigation, die minimalen Bildschirmplatz benötigt, plus die Fähigkeit für Nutzer, Beschriftungen zu entdecken, wenn sie sie brauchen. Es fühlt sich an wie das Beste aus beiden Welten.
Warum die Daten eine andere Geschichte erzählen:
Beschriftung beim Hovern hat ein fundamentales Problem: es erfordert, dass Nutzer interagieren, bevor sie Navigation-Elemente identifizieren können. Das ist ein Schritt rückwärts von immer sichtbaren Beschriftungen, wo die Identifikation auf den ersten Blick passiert.
Nielsen Norman Group Tests zu hoverbasierten Tooltips zeigten, dass nur 15 % der Nutzer absichtlich über Navigation-Elemente hovern, um Beschriftungen zu offenbaren. Der Rest kennt entweder bereits den Ort (Power User) oder gibt auf und schaut woanders. Dies schafft eine steile Lernkurve für neue Besucher, was genau das Gegenteil ist von dem, was Sie für einen E-Commerce Shop möchten, wo die meisten Besucher Ersttäter sind.
Forschung des Baymard Institute zu E-Commerce Navigation-Mustern zeigte, dass Tooltip-abhängige Navigation 22 % weniger erfolgreiche Navigationsvollendungen im Vergleich zu immer sichtbaren Beschriftungen produzierte. Nutzer waren langsamer, neigten mehr zu Navigation-Fehlern und neigten mehr dazu, den Browser Back Button zu nutzen (ein Signal, dass sie an der falschen Stelle landeten).
Und dann ist da das offensichtliche Problem: Hovern gibt es auf Mobilgeräten nicht. Touchscreens haben keinen Hover-Status. Ein Tippen auf Navigation nur mit Symbolen triggert entweder die Aktion sofort oder öffnet einen Tooltip, der einen zweiten Tap erfordert – ein zusätzlicher Schritt, den Mobile-Nutzer nicht erwarten und nicht tolerieren.
Wann es möglicherweise akzeptabel ist:
- Interne Dashboard- oder Admin-Tools, wo Nutzer trainiert sind und die Oberfläche täglich nutzen
- Desktop-nur Anwendungen, wo Bildschirmplatz extrem begrenzt ist
- Sekundäre Toolbars (wie Formatierungs-Toolbars), wo Symbole standardisiert sind
Wann sollte man es vermeiden:
- Jede kundenorientierte E-Commerce Navigation
- Mobile Navigation jeder Art
- Primäre Navigation, wo Neu-Besucher ihren Weg finden müssen
Muster 4: Beschriftung unter aktiv-Status
Eine Variation, die an Zugkraft gewonnen hat, ist das Anzeigen von Beschriftungen nur beim aktuell aktiven Navigation-Element. Dies ist üblich in Material Design Implementierungen, wo die Bottom Bar Symbole für alle Elemente zeigt, aber den Textlabel nur auf der ausgewählten Tab anzeigt.
Der Tradeoff:
Dieses Muster spart horizontalen Platz, während es dennoch Kontext für den aktuellen Ort bietet. Googles Material Design Richtlinien boten dies als Option für Bottom Navigation mit mehr als drei Elementen an.
Allerdings haben Tests gezeigt, dass dieser Ansatz dem Anzeigen von Beschriftungen auf allen Elementen unterlegen ist. Eine Studie, die vom UX-Team bei Booking.com durchgeführt wurde (geteilt auf einer 2019 NNG Konferenz), fand, dass immer sichtbare Beschriftungen Navigation-Fehler um 15 % im Vergleich zum aktiv-nur-Beschriftungs-Muster reduzierten. Nutzer mussten sehen, welche Optionen es alle gab, nicht nur welche Sie bereits gewählt hatten.
Material Design hat seitdem seine Richtlinien aktualisiert, um gekennzeichnete Navigation für alle Ziele zu empfehlen, nicht nur die aktive.
Das richtige Muster für Ihren Shop wählen
Die Entscheidung kommt auf zwei Faktoren hinaus: den Navigation-Kontext und das Gerät.
| Kontext | Bestes Muster | Warum |
|---|---|---|
| Mobile Tab Bar (3–5 Elemente) | Vertikales Stacking | Entspricht Plattform-Konventionen, große Tap-Flächen, passt die Breite |
| Mobile Tab Bar (5+ Elemente) | Vertikales Stacking mit scrollbarer Bar | Immer noch vertikales Stacking, aber horizontales Scrollen erlauben |
| Schiebe-Menü | Horizontale Anordnung | Natürliches Scannen in vertikalen Listen |
| Desktop Header | Horizontale Anordnung oder nur Text | Ausreichend horizontaler Platz |
| Desktop Sidebar | Horizontale Anordnung (immer sichtbare Beschriftungen) | Nutzer müssen Optionen schnell scannen |
| Footer Navigation | Nur Text | Symbole fügen hier keinen Wert hinzu |
| Floating Action Button | Nur Symbol (mit Tooltip) | Einzelne Aktion, Symbol ist ausreichend |
Schneller TestÖffnen Sie Ihren Shop auf einem Telefon und versuchen Sie, jedes Navigation-Element zu identifizieren, ohne eine Beschriftung zu lesen. Wenn Sie auch nur bei einem Element zögern, gehört dort eine Beschriftung hin. Wenn Ihre mobile Tab Bar horizontale Anordnung nutzt und die Elemente wirken beengt, wechseln Sie zu vertikalem Stacking. Navi+ ermöglicht es Ihnen, zwischen Layout-Mustern im Menu Builder zu wechseln, sodass das Testen verschiedener Kombinationen Sekunden statt Stunden Theme-Bearbeitung dauert.
Die sicherste Standard-Wahl für die meisten Shopify Shops ist das vertikale Stacking für mobile Tab Bars und die horizontale Anordnung für Schiebe-Menüs. Diese Muster entsprechen dem, was Nutzer bereits von den Apps erwarten, die sie jeden Tag nutzen, und sie haben die stärksten Test-Daten hinter sich. Fangen Sie dort an und iterieren Sie basierend auf den Analytics Ihres eigenen Shops.
Dieser Artikel ist Teil des umfassenderen Ratgebers zu Symbole vs. Text in der Navigation: wann man welches einsetzt (und wann beide).