Das Dokument bietet Tipps zur Verbesserung der Benutzererfahrung (UX) in der mobilen Navigation, insbesondere in Bezug auf die Gestaltung von Menüs. Wichtige Empfehlungen umfassen die auffällige Platzierung von Menüs, die Verwendung bekannter Icons, die visuelle Abgrenzung von Menühierarchien und die Einführung von Dropdowns. Es wird auch vorgeschlagen, Menüs einfach schließbar zu machen und zusätzliche Navigationselemente wie Breadcrumbs und interaktive Links zu integrieren.

1. S e i t e 1
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
8
.
0
1
.
2
0
2
0
X
E
I
T
G
M
B
H
|
W
W
W
.
X
E
I
T
.
C
H
|
I
N
F
O
@
X
E
I
T
.
C
H
UX-Tipps für mobile
Navigation: Hamburger-
Menü
presented by
www.xeit.ch
+41 44 240 15 00

2. S e i t e 2
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
«Man muss auch dessen
gedenken, der sich nicht
bewusst ist, wohin der
Weg geht.»
- Herakleitos, griechischer Philosoph

3. S e i t e 3
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 1: Menü auffällig platzieren
Menü im oberen
Seitenbereich
Menü vom Website-
Inhalt abheben

4. S e i t e 4
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 2: Bekannte Icons verwenden
Hamburger-Icon (3-
Striche) nutzen
Für Suchfeld Lupen-Icon
nutzen
Neben Symbol den Begriff
«Menü» für besseres
Verständnis ergänzen
Für Warenkorb ein Icon
Einkaufswagen oder
Einkaufstasche
verwenden

5. S e i t e 5
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 3: Elemente genügend gross darstellen
Breite von 1cm ideal,
mindestens 7mm
Abstand zwischen
Elementen einbauen
Klickbare Elemente wie
Links und Buttons
sollen problemlos
angetippt werden
können

6. S e i t e 6
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Sie möchten die UX Ihrer (mobile) Website
aufs nächste Level bringen?
Wir beraten Sie gerne.
ANFRAGEN

7. S e i t e 7
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 4: Menü-Hierarchien visuell abgrenzen
Aufbau des Menüs resp.
der Hierarchie muss
verständlich sein
Menüpunkte von
Unterseiten visuell
abheben
Abgrenzen durch
unterschiedliche
Schriftgrössen
und/oder
-farben

8. S e i t e 8
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 5: Dropdowns kennzeichnen
Menüs kompakt
abbilden mit Dropdown-
Funktion
Dropdown-Funktionen
visuell abheben
Pfeil nach unten = Ebene
öffnen
Pfeil nach oben = Ebene
schliessen
Pfeil nach rechts = Seite
öffnen

9. S e i t e 9
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 6: Menü einfach schliessbar machen
Menü mit Kreuz (X)
schliessen
Durch Swipe-Option
unterstützen

10. S e i t e 1 0
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
Tipp 7: Weitere Navigationselemente ergänzen
Breadcrumbs
Interne Verlinkungen im
Text
Call-to-Action
Teaser-Boxen
Suchfunktion

11. S e i t e 1 1
©
2
0
1
8
X
E
I
T
G
M
B
H
©
2
0
2
0
X
E
I
T
G
M
B
H
www.xeit.ch
blog.xeit.ch
www.facebook.com/xeitgmbh
www.twitter.com/xeitgmbh
+41 44 240 15 00
Wir empfehlen uns als erfahrenen,
kompetenten und zuverlässigen Partner.
Vielen Dank!