Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

7 UX-Tipps für mobile Navigation: Hamburger-Menü

108 Aufrufe

Veröffentlicht am

Damit User:innen auch mobile einfach navigieren können, haben wir ein paar wertvolle Tipps zusammengestellt.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

7 UX-Tipps für mobile Navigation: Hamburger-Menü

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!

×