Frohes neues Jahr an alle unsere Leser! Heute werden wir uns drei wichtige Navigationstrends ansehen, die 2015 dominieren werden.

Man könnte denken, dass wir jede mögliche Variation der Navigation im Internet erforscht haben, und doch sehen wir fortgesetzte Erforschung innerhalb dieser sehr spezifischen Nische. Es ist wirklich erstaunlich, wie viele Variationen des Designs auf eine bescheidene Liste von Links angewendet werden können.

Hier möchte ich 3 populäre Trends im Bereich der Navigation betrachten: erstens, wie sich das Navicon (oder Hamburger-Icon) verändert, zweitens ein neuer Ansatz mit Vollbild-Menüs und schließlich, was ich für die Perfektion des Mega-Drop-Down-Menüs halte. Lassen Sie uns eintauchen und diese Ansätze bei der Arbeit sehen.

Lang lebe / Tod an, das Navicon!

Facebook wird dafür belohnt, dass es die Verwendung von Navicons popularisiert, um Navigationsoptionen außerhalb des Bildschirms oder außerhalb der Leinwand auszublenden. Mit der Geburt des responsiven Webdesigns war die Webdesign-Community verzweifelt nach einer Lösung für die Navigation. Es war eine attraktive Lösung, alles in ein Navigationsfeld zu packen, das sich auf der Leinwand befindet und bei der Auswahl des Navicons einsteigt. Es scheint, dass die Community sich als etwas einfache Lösung einklinkte, die dem Designer und Entwickler das Leben viel leichter machte. Damit ist das Navicon zu einer ersten Wahl für mobile Apps und Websites geworden.

In letzter Zeit wurde das Navicon jedoch angegriffen. In vielen dieser Debatten scheint ein wichtiges Detail ausgelassen zu werden. Die Industrie für mobile Apps bewegt sich leicht von der Bildschirmnavigation zugunsten der Bildschirmoptionen. Dies ist der Trend zu fokussierten Single-Zweck-Apps. Dies macht die Änderung vernünftiger. Im Gegensatz dazu kann sogar eine kleine Website mit Dutzenden, wenn nicht Hunderte von Links in der Navigation gepackt werden. Nehmen Sie zum Beispiel eine Website wie Sony, oder auch diese Website. Diese Websites haben Navigationsanforderungen, die weit über das hinausgehen, was mit einem einfachen Tab-Strip möglich ist. Aus diesem Grund scheint es mir, dass Navicons und Off-Screen-Menüs hier zu bleiben sind. Wir müssen uns lediglich ihrer Grenzen, möglichen Probleme und so weiter bewusst sein. Denken Sie immer an die Verwendung: Ist es eine mobile App oder eine mobile / responsive Website? Weil sie nicht gleich sind.

01

Die Website der Designagentur Long Story Short ist ein schönes Beispiel dafür, wie man das Navicon sinnvoll und eingeschränkt nutzen kann. Diese Seite nutzt das Navicon, um alle Navigationsoptionen zu verbergen. Dies gilt sowohl für die mobile Version als auch für die Desktopversion der Website. Die Verwendung von Navicons auf dem Desktop ist hier eigentlich ein ganzer Nebentrend. Was diese Seite zu einem erstklassigen Beispiel für den Ansatz macht, ist, dass die kritischsten Elemente der Navigation außerhalb des Menüs erscheinen . Die Homepage ist ein Portal zu den drei wichtigsten Bereichen der Website. Auf diese Weise ist das versteckte Menü nicht die primäre Navigation, sondern eine sekundäre, die die Lücken ausfüllt.

02

Die Squarespace-Site ist ein weiteres schönes Beispiel dafür, wie man versteckte Menüs effektiv einsetzt. Auf dieser Seite sind die Tour- und Login-Optionen immer sichtbar. Im Slide-Out-Menü sind insgesamt ca. 23 Menüoptionen enthalten. Ehrlich gesagt, ist die Verwendung von versteckten Menüs, um die wichtigsten Navigationsoptionen in den Vordergrund zu stellen, einfach genial. Ich habe eine Phase durchgemacht, in der ich wirklich keine Navicons auf dem Desktop hatte; es schien wie ein Miss Gebrauch der Technik. Nachdem ich jedoch gesehen habe, wie Websites es nutzen, um Nutzer zu den kritischsten Elementen zu treiben, kann ich nicht anders, als es zu lieben.

Schließlich, wenn Sie sich Sorgen über die Verwendung von Navicons machen, oder versteckte Menüs nehmen Sie kein Wort dafür. Führen Sie stattdessen eigene Usability-Tests durch, um zu sehen, ob es für Ihre Site funktioniert. Eine große Faustregel ist es, Diskussionen zu vermeiden und stattdessen zu testen.

08
09
10

Vollbildnavigation

Der zweite Trend, den ich betrachten möchte, ist die Verwendung von Vollbildnavigationsmenüs. Diese Menüs werden normalerweise durch eine Schaltfläche oder einen Link eines bestimmten Typs aktiviert. ziemlich oft ein Navicon. Der Unterschied besteht darin, dass anstelle eines kleinen, sich herausziehenden Panels die Navigation den gesamten Bildschirm einnimmt. Auf dem Handy fühlt sich das normal an, aber auf dem Desktop ist das ein neuer und interessanter Ansatz.

03

Die Navigation auf dieser Seite ist wirklich interessant, da das Navigations-Overlay viel Punch in das Menü packt. Hier haben sie die erwarteten Menü-Optionen, aber da es im Vollbildmodus ist, haben sie auch Platz für ein vollständiges Kontaktformular, Kontaktinformationen, Social-Media-Links, einen aktuellen Blog-Post und einen prominenten Aufruf zum Handeln.

Es ist interessant zu bedenken, dass ein Benutzer, der jederzeit ein Menü startet, nach einer Richtung sucht. Dies macht es zu einer idealen Gelegenheit, um sie zu dem zu führen, was sie wollen. In diesem Fall möchten sie, dass der Benutzer sich mit ihm in Verbindung setzt oder seinen Projektplaner besucht.

04

In diesem Beispiel sehen wir auch das Muster bei der Arbeit, aber auf eine viel minimalistischere Art und Weise. Anstatt zusätzliche Optionen einzupacken, haben sie sich dafür entschieden, eine sehr übersichtliche Liste von Navigationsoptionen zu präsentieren. Außerdem erhalten sie Bonuspunkte, um das Navicon in ein "x" zu animieren, um das Menü zu schließen.

05
06
07

Perfektion des übergroßen Menüs

Schließlich möchte ich das super große oder mega Dropdown-Menü betrachten. Die Verwendung von übergroßen Menüsystemen ist nichts Neues. Was ich interessant finde, ist der Inhalt, der in ihnen steckt. In meiner Einschätzung der Dinge haben Designer diesen neuen Raum wirklich in kraftvolle Bahnen gelenkt.

11

Die Lowes Website zeigt perfekt, was ich vorhabe. Hier sehen Sie, dass das Menüsystem zu einem Ort für Inhalte geworden ist. Dieser Inhalt kann verwendet werden, um den Benutzerfluss durch die Site zu steuern. Am wichtigsten ist, dass sie sie zum wichtigsten Inhalt führen können. Die Frage wird, was ist der wichtigste Inhalt? Vielleicht ist es das profitabelste Produkt in Ihrem Geschäft. Und auf diese Weise agiert die Navigation als ein Verkäufer, der die profitabelsten Produkte schiebt. Oder vielleicht wird es verwendet, um Benutzer zu den beliebtesten Artikeln zu führen.

12

Eine andere Website, die diese Option auf eine etwas andere Weise verwendet, ist die New Balance-Website. Hier sind die ersten drei Dropdown-Listen groß, aber im Wesentlichen Listen von Links. Die letzte Option zum Erstellen von benutzerdefinierten Schuhen erzeugt jedoch die oben gezeigte Dropdown-Liste. Diese Menüoption ist ein einzelner Link. Ich liebe es, dass sie die Gelegenheit genutzt haben, um aus diesem einzelnen Artikel ein wirklich überzeugendes Intro für den Inhalt hinter dem Link zu machen.

13
14
15
16

Fazit

Diese drei Trends, obwohl wir sie getrennt diskutieren können, haben viele gemeinsame Merkmale. Die wichtigste dabei ist, wie sich die Navigation im Laufe der Jahre verändert hat. Dropdown-Menüs waren im Allgemeinen eine organisierte Liste von Links. Zum größten Teil waren sie insofern neutral, als alle Dinge gleich vorgestellt wurden. Jetzt stellen wir fest, dass Navigationssysteme eine Schlüsselfunktion haben, um Benutzer zu wünschenswerten Zielen zu führen.

Für mich ist die Herausforderung klar. Wir sollten unser Denken in Bezug auf die Navigation verbessern und den Einfluss auf die Erfahrung der Nutzung der von uns erstellten Websites wirklich einbeziehen. Allzu oft finde ich, dass die Navigation ein bisschen nachgedacht ist. In der Tat sollte es zu den kritischsten und raffiniertesten Elementen im Design gehören.