Das perfekte Navigations-Menü für jedes Device

elmex

Leider gibt es hier ja keinen Bereich "Onpage", daher hier

Ich möchte eine Diskussion zum perfekten Menü für jedes Device anregen! Ich stehe in letzter Zeit immer wieder vor der Herausforderung, komplexere Webseiten mit vielen Inhalten für Responsive Darstellung zu optimieren. Dabei stosse ich immer wieder auf das Thema Menü - insbesondere mit vielen Menü-Punkten.

Oft hat man ja auf älteren Webseiten ein Menü mit den Hauptpunkten, unter denen sich dann auf verschiedene Arten jeweiligen Untermenüpunkte öffnen. Ist ja noch recht nett, wenn das dann bei 5 Bereichen mit je maximal 5 Unterbereichen (oder so) endet - aber bei aktiven Seiten ist da dann ja doch schnell mal mehr Inhalt da und dann gibt es Hauptbereiche mit 20 oder noch mehr Unterpunkten - was auf mobilen Geräten ja schon schlecht auf dem Bildschirm passt

Und dann gibt es auch noch die psychologische Seite, dier erläutert, dass zu viele Wahlmöglichkeiten dazur führen, das nichts mehr gewählt wird (man surft halt weiter, anstatt sich xx Menüpunkte durchzulesen, um das Passende zu finden)

Wirklich schöne und nutzerfreundliche Lösungen habe ich für solche Navigationen bisher nicht wirklich finden können! Ist umstrukturieren die bessere Lösung? Wie löst ihr das?

nerd

In der derzeitigen version von bootstrap ist maximal eine unterkategorie pro menu erlaubt; alles andere waere auch quatsch weil es sich auf kleinen touchscreens nicht gut durch weit verzweigte untermenues navigieren laesst.
Bei meinem derzeitigen auftraggeber werden nur die kategorien im menu abgebildet. Im mobile menu ist der allererste eintrag oben ein "suchen"- eingabefeld.
Ansosnten werden auf der startseite die letzten x artikel aus jeder kategorie chronologisch aufgelistet. zusaetzlich koennen den artikeln noch tags (z.b. "mittagessen", "vegetarisch") zugewiesen werden, womit man aehnliche beitraege finden kann.

Funktioniert aber wohl nicht ueberall. Wir haben auch einen kunden der gerne "irgendwie responsive" will, aber derzeit in seinem javascript-aufklappmenu mit untermenues auf fast 300 eintraege kommt. Das funktioniert wohl dann auch nicht, wenn er wieder auf 8px fontgroesse im menu besteht ...

Was mir noch aufgefallen ist: Bei extrem vielen seiten (auch grossen anbeitern) ist das mobile menu diletantisch umgesetzt. Entweder es ist beim pageload geoeffnet und verdeckt die ganze seite ("schliessen" button fehlt ebenfalls oder ist nicht erreichbar!), oder es ist "statisch" und man kann das menu nicht nach unten durchscrollen, und sieht je nach bildschirmgroesse immer nur die obersten x eintraege.

elmex

Das mit dem "Suchen Feld" mehr in den Mittelpunkt zu rücken, habe ich mir auch schon überlegt. Aber wieder verworfen, denn mobile Nutzer suchen nicht wirklich gerne, musste ich erkennen

Das Zusammenfassen der Menüs auf die wichtigsten Hauptpunkte ist ja auf mobile schon fast Pflicht - bloss das ist ja schon geschehen auf den Seiten, es fehlt tatsächlich das Handling für die dann darunter liegenden Seiten. Jede Menülösung fängt da an "unhandlich" zu werden, wenn es viele Unterseiten werden. Vor allem weil auf Mobiles (oder besser Touchscreens) der "Hover-Effeckt" nicht wirklich nutzbar ist.

Es scheint weltweit an einer wirklich sinnvollen Lösung zu fehlen, denn genau das, was dir auch aufgefallen ist, ist anscheinend derzeit Usus: dilettantische mobile Menüs...

nerd

elmex hat geschrieben:Das Zusammenfassen der Menüs auf die wichtigsten Hauptpunkte ist ja auf mobile schon fast Pflicht - bloss das ist ja schon geschehen auf den Seiten, es fehlt tatsächlich das Handling für die dann darunter liegenden Seiten.

prinzipiell kannst du ja fuer ein grosses und verschachteltes menu im aufklappmenu oben den derzeitigen pfad als breadcrumb anzeigen (Haus & Garten -> Kueche -> Herd), und darunter eben alle aktuell zutreffenden untermenues auflisten (Gas, Elektrisch, Kohleofen).

Wenn du das mit einem kompletten page-refresh machst und es erlaubst das menu zu schliessen, kannst du auch fuer jede kategorie noch eine landing page darunter haben. Mit ajax nur die menu-eintraege und links zu laden waere aber wahrscheinlich schneller da du prinzipiell nur einen request machen muesstest ...

Aber ich weiss nicht ob das praxistauglich waere, das solche menues wohl vom user wohl nicht erwartet werden. Weiterfuehrende menues sollten wohl ein " > " symbol haben und beim klick das untermenuvon rechts nach links "reinziehen", um dem user visuell klarzumachen das er sich gerade durch ein menu hangelt und es hier und da noch weiter geht.

elmex

Ja, du sprichst mir aus der Seele...

Hier zum Beispiel derzeit: https://goo.gl/mqdgVK

Das ist die 2. Menüebene, aber da gibt es halt schon ein paar mehr in dem Bereich.

Es gibt die Breadcrumbs, das Menü scrollt rein (derzeitig auch keine wirkliche Lösung, weil das "hoover" bugt auf diversen Mobilgeräten, aber im PC-Browser geht es bestens), die Bereichseiten listen die Einträge des Bereiches, die Startseite die aktuellsten Beiträge etc - alles schon da. Bloss das Menü gefällt mir so in kleinen Ansicht eben irgendwie noch nicht....

Achso, Javascript will ich eher vermeiden! Also so Lösungen wo wegen dem Mobil-Menü extra erstmal paar 100kb JS Frameworks geladen werden, halte ich für keien dauerhaft sinnvolle Lösung!

Can

elmex hat geschrieben:Ja, du sprichst mir aus der Seele...

Hier zum Beispiel derzeit: https://goo.gl/mqdgVK

Das ist die 2. Menüebene, aber da gibt es halt schon ein paar mehr in dem Bereich.

Es gibt die Breadcrumbs, das Menü scrollt rein (derzeitig auch keine wirkliche Lösung, weil das "hoover" bugt auf diversen Mobilgeräten, aber im PC-Browser geht es bestens), die Bereichseiten listen die Einträge des Bereiches, die Startseite die aktuellsten Beiträge etc - alles schon da. Bloss das Menü gefällt mir so in kleinen Ansicht eben irgendwie noch nicht....

Achso, Javascript will ich eher vermeiden! Also so Lösungen wo wegen dem Mobil-Menü extra erstmal paar 100kb JS Frameworks geladen werden, halte ich für keien dauerhaft sinnvolle Lösung!

Das ist Bullshit.
Auf JavaScript sollte man nicht verzichten, wenn man die Aluhutfraktion dennoch abdecken will ist dies ganz einfach -> Nutzer ohne JS bekommen das Menü immer ausgeklappt inklusive eines Scrollankers auf Beginn des Contents.

Das du kein 100 KB Framework ausliefern willst: schon wieder Bullshit. sogar wenn du jQuery verwendest (1.11.3) hat gerade mal 38.5 KB. Wenn ein CDN verwendet wird liegt es vermutlich bereits im Cache des Anwenders. Vorteil von jQuery gegenüber einer nativen Umsetzung im JS: jQuery kümmert sich um die Kompatibilität in allen gängingen Browsern. Durch einen Custom Build kannst du die größe auch auf ~15KB veringern.

Du willst immernoch kein jQuery? https://responsive-nav.com/ (1.6 KB)

Fazit: Browserkompatibles Handling von Touch- sowie Klick-Events erfordert JavaScript. Eher noch sollte auf Touch Devices auch noch eine Unterstützung von Swipe Gesten implementiert werden um die Erwartungshaltung zu bedinen.