Eine nutzerfreundliche Mobile Website Navigation erstellen (gute UX!)

Wie sieht eine optimale User Experience beim Thema mobile Navigation aus?

Insgeheim weiß jeder Webdesigner, dass die Position eines so genannten Hamburger Menü Icons, den Button, den du drücken musst, um eine versteckte Navigation hervorzurufen, im Header nicht wirklich gut platziert ist. Zumindest wenn es um die responsive Website Layout Adaption auf Smartphonegröße geht.

Warum ist das so?

Seit einigen Jahren ist der Trend von Smartphones klar sichtbar: Displays werden größer und somit auch die Geräte, die wir in den Händen halten, um Webseiten zu bedienen.

Für unsere Header Navigation heisst das, dass sie sich automatisch immer weiter von dem Bereich entfernt, der mit dem Daumen einfach erreichbar ist.

Die meisten Webdesigner platzieren eine Navigation auf Desktop und Tablet Geräten oben im Header. Und keine Frage, das ist ein guter Platz so lange wir ihn einfach mit dem Curser oder beim Tablet mit der ganzen Hand erreichen können.

Sobald die Geräte aber kleiner werden, passt auch die Navigation ausgeschrieben irgendwann nicht mehr dort hin und wir verstecken sie hinter einem sogenannten Toggle, also einem Umschalter. Dieser bringt auf Klick oder Tap die Navigation zum Vorschein.

Da der Platz der Navigation ursprünglich auch schon im Header Bereich war, lassen wir ihn in den meisten Fällen einfach dort und das bringt vor allem ein Problem mit sich: Eines der wichtigsten Elemente auf einer Website, nämlich die Navigation, ist nicht mehr optimal zu erreichen.

Und schauen wir uns die User Interface Guidelines von beispielsweise einer Plattform wie iOS an, so wird hier für Apps klar eine Tab Navigation im UNTEREN Bereich empfohlen, so das man möglichst schnell mit nur einem Klick von einer Seite zu anderen kommt.

Und Auch bei einer Website sollte eine Navigation so einfach wie möglich mit nur einer Hand erreichbar sein und sich deshalb eher im unteren Bereich befinden.

Da ich die Navigation auf meiner Website sowieso mal überarbeiten wollte, mach ich dafür heute und hier einfach mal einen guten Vorschlag.

Eine optimale mobile Website Navigation bauen und animieren

Schritt 1: Layout

Ich habe in Sketch zügig drei Varianten ausprobiert um eine gute Vorlage für die Entwicklung in Webflow zu haben.

Der Grundgedanke war einfach: ein Toggle Button zentriert im unteren Bereich der auf jeder Seite mitscrollt. Optional könnte hier auch ein Hamburger Icon platziert werden aber ich habe mich entschieden das Menü textlich auszuschreiben, damit die Funktion dahinter auf anhieb schnell verstanden wird.

Im Hintergrund habe ich einen Verlauf platziert um sicherzugehen, dass der Button auf unterschiedlichen Website Inhalten auch immer gut sichtbar bleibt.

Der Menü-Button transformiert bzw. tauscht sich nach klick einfach mit einem Schließen-Button aus. Am Ende habe ich mich dabei für ein alleinstehendes X entschieden. Die gleiche Position aber eben nur ein Symbol.

Gedanken über die Animation und wie sich das Navigations-Overlay rein und raus fährt, wollte ich mir später direkt in der Umsetzung machen. Ein visueller Editor wie Webflow eignet sich dafür für mich hervorragend, da er mir verschiedene Ideen auch direkt anzeigt und wiedergibt.

Webdesign Tutorial Empfehlung:
→ Eine eigene Dropdown Hauptnavigation in Webflow bauen und animieren

Schritt 2: Das Grundgerüst in Webflow bauen

In Webflow habe ich erstmal ein bisschen Dummy-Content platziert um die Navigation später besser testen zu können.

Die eigentlichen Navigationsinhalte habe ich zu Beginn von Grund auf selbst gebaut, dass heisst erstmal keine Webflow Navigation oder Ähnliches als Vorlage verwendet (eine Entscheidung, die ich später nochmal verworfen habe). Für den Menü Button nutzte ich also ein Link-Block mit einem Div-Wrapper außen herum.

Zusammen mit dem Verlauf im Hintergrund habe ich beide Elemente auf position fixed am unteren Bildschirmrand platziert.

Das nächste war das Schließen-Icon, welches ich vorerst einfach auch in den Menü-Button platzierte. Der Plan war, das Icon standardmäßig auszublenden und bei klick das ganze umzudrehen. Sprich den Text auszublenden und das Icon einzublenden. Die Idee war gut, hat nur nicht gut funktioniert, aber dazu später mehr.

Für das Menü-Overlay habe ich in einem weiteren Div-Wrapper ganz old school alle Navigationspunkte in einer Liste verpackte.

Schritt 3: Navigation animieren

Da der Toggle-Button im unteren Bereich platziert ist und auch die Navigationspunkte möglichst in Daumennähe sein sollen, denke ich es wäre ganz natürlich, auch das Menü von unten rein animieren zu lassen.

Du erinnerst dich an das Schließen-Icon, welches im gleichen Button platziert ist, wie der Menü Text und das fühlt sich irgendwie nicht so gut an. Ich schätze es wäre besser, den Button nach Klick direkt ganz verschwinden zu lassen und einen neuen schließen Button rein zu animieren.

Dafür muss ich den Toggle einfach dupliziert und standardmäßig auf display none setzen. Und in der Animation kommt der schließen Button dann von unten reingefahren.

Das ganze muss natürlich auch noch rückwärts passieren also erstelle ich eine neue Animation und gehe die ganzen Schritte wieder Rückwärts. Das sieht im Video alles ziemlich zügig aus aber der Animations-Teil hat mich am Ende doch eine Stunde an Zeit gekostet.

Schritt 4: Feinschliff

Am nächsten Tag wollte ich also nur noch bisschen Feinschliff machen und bin deshalb zuerst den Schließen-Button angegangen, der noch etwas oval war, aber eigentlich ja auch sehr gut rund aussehen könnte. Da habe ich also noch so ein bisschen mit den Größen rumgespielt und auch das Icon sowie den Button an sich etwas verändert. Aber immer noch optimal für den Finger zum tippen.

Als nächstes kam nochmal die Slide-Out Animation optimiert.

Schritt 5: Responsive Anpassungen

Wenn man mal ehrlich ist, wäre die Mobile Navigation so eigentlich schon fertig. Aber wer gut aufgepasst hat, bemerkt schnell, dass je mehr Navigationspunkte hinzukommen, auch die Liste immer höher wird. Und da ich die Navigation jedem von euch zu verfügung stellen möchte, muss ich eigentlich auch dafür eine Lösung parat haben.

Das Ding ist, dass es auch noch Smartphones mit kleineren Displaygrößen gibt oder manche halten ihr Smartphone ja auch quer. Und da würde die Navigation durch ihre absolute Positionierung dann einfach im Nichts verschwinden.

Die Lösung dazu liegt auf der Hand. Ab einem bestimmten Punkt wird die Navigation einfach vertikal scrollbar.

Was sich allerdings in dem Zuge noch als schicke Design Entscheidung herausstellte, waren zwei Verläufe von transparent zu dunkel, die ich am oberen und unteren Rand der Navigationsbox platzierte. Das gibt dem User jetzt auch gleichzeitig früh genug den Hinweis, dass darunter Elemente verschwinden können und deshalb auch noch mehr Navigationspunkte vorhanden sind.

Am Ende habe ich dann noch den Verlauf auf der Seite von einem dunklen Gradient in einen hellen verändert. Das wirkt auf verschiedenen, zum Teil auch farbigen Inhalten wie Bilder etc., einfach besser.

Und das ist sie, die Alternative wie eine Mobile Website Navigation auf Geräten wie Smartphones sein könnte.

Schau dir die fertige Mobile Navigation hier an:
https://website-mobile-navigation.webflow.io

Mobile Navigation in Webflow clonen:
https://webflow.com/website/website-mobile-navigation

Worauf ist allgemein bei einer responsive Website Navigation auf Smartphones zu achten?

Die mobile Nutzung von Websites und Apps ist heutzutage für viele Nutzer zum Standard geworden. Die meisten Menschen greifen auf ihre mobilen Geräte zurück, um schnell und einfach Informationen abzurufen oder Aufgaben zu erledigen. Daher ist es umso wichtiger, dass die mobile Navigation auf diesen Geräten so gestaltet ist, dass sie die Bedürfnisse und Erwartungen der Nutzer erfüllt.

Eine optimale User Experience bei der mobilen Navigation sollte auf Einfachheit, Schnelligkeit und Responsivität achten und kontinuierlich verbessert werden, um den Bedürfnissen der Nutzer gerecht zu werden. Hier sind einige wichtige Faktoren, die zur Gestaltung einer effektiven mobilen Navigation beitragen können:

1. Einfache und intuitive Navigation: Die Navigation sollte einfach und intuitiv gestaltet sein, sodass Nutzer schnell und mühelos durch die Website navigieren können. Eine klare Struktur mit einem eindeutigen Menü und Kategorien kann hierbei helfen. Die Navigation sollte einfach und übersichtlich sein und nicht zu viele Elemente auf einmal anzeigen. Andernfalls kann es schnell unübersichtlich werden und die Nutzer verlieren das Interesse.
2. Mobile-First-Design: Eine gute mobile Navigation sollte in erster Linie für Mobilgeräte optimiert sein. Dazu gehören größere Schriftgrößen, einfachere Navigationselemente und optimierte Bilder und Videos. Eine langsame Ladezeit oder unscharfe Bilder können den Nutzer frustrieren und dazu führen, dass er die Website verlässt. Daher sollte die mobile Navigation so gestaltet sein, dass sie schnell lädt und reibungslos funktioniert.
3. Kürzere Ladezeiten: Nutzer erwarten schnelle Ladezeiten auf Mobilgeräten. Daher sollte die mobile Navigation so gestaltet sein, dass sie schnell lädt und reibungslos funktioniert. Schlechte Ladezeiten sind ein häufiger Grund für eine hohe Absprungrate und können zu einer schlechten UX führen. Eine schnelle Navigation kann hingegen die Nutzerbindung erhöhen und die Zufriedenheit steigern.
4. Responsives Design: Die mobile Navigation sollte responsiv sein und sich automatisch an verschiedene Bildschirmgrößen und Auflösungen anpassen. Ein responsives Design sorgt dafür, dass die Website auf jedem Gerät gut aussieht und einheitlich funktioniert. Dadurch können Nutzer leicht auf der Website navigieren und sind nicht durch unerwartete Design- oder Funktionsprobleme beeinträchtigt.
5. Suchfunktion: Eine integrierte Suchfunktion kann Nutzern dabei helfen, schnell und einfach das zu finden, wonach sie suchen. Die Suchfunktion sollte leicht zu finden sein und eine klare Benutzeroberfläche haben. Auch die Funktionalität sollte einfach sein und schnell Ergebnisse liefern. Eine effektive Suchfunktion kann den Nutzer schnell und einfach zu den gewünschten Inhalten führen.