Die Idee, dass Navigationsmenüs oben in einem Website-Design festgelegt werden müssen, ist längst vorbei. Während viele Designer sich für die sichere, konsistente Navigation aller Caps mit Sans-Serif-Typografie am oberen Bildschirmrand entscheiden, brechen mehr Designs aus diesem Muster heraus.
Experimentelle Navigationsmuster können Spaß machen und interessant sein, wenn sie intuitiv genug sind, damit Benutzer einigermaßen schnell verstehen können. Unterschiedliche Navigationsstile können für Websites interessant sein, die klein sind, nicht viel Inhalt haben oder möchten, dass sich Benutzer auf bestimmte Weise bewegen.
Die experimentelle Navigation ist zwar nicht für jedes Design geeignet, kann aber für das richtige Projekt eine unterhaltsame Alternative sein.
Seitennavigation
Es gibt viele Möglichkeiten zur Seitennavigation. Es kann statisch oder dynamisch sein und kann fast jede Breite haben.
Obwohl es nicht so aussieht, als ob das Navi von oben nach oben verschoben werden sollte, ist das alles nur experimentell, aber es kann den Schlüssel ganz in Ihr Design werfen, da es das Seitenverhältnis der Leinwand verändert.
Dann müssen Sie überlegen, wie diese oft schmale Navigationsleiste auf anderen Bildschirmgrößen aussehen wird. Und was machen Sie, wenn das Navigationsmenü lange Wörter enthält (Sie möchten keine Navigationsleiste mit Bindestrichen)?
Es gibt viel zu beachten.
Die beste Seitennavigation ist einfach mit kurzen Worten und einem festen Platz. Zu viel Scrollen im Navi ist unangenehm und schwer zu verstehen. Das Beispiel von Sanctum oben ist einfach und sauber. Die Navigation bleibt an einem Ort, während der Benutzer einen Bildlauf durchführt, wobei der Text nur von hell auf dunkel eingestellt wird, wenn sich der Hintergrund ändert.
Das Schöne an diesem Beispiel ist, dass das vertikale Navigationsmuster den Benutzer dazu ermutigt, zunächst den Namen und das Logo zu betrachten und sich dann in einer geraden Linie auf dem Bildschirm zu bewegen, um zu sehen, welche Navigationsoptionen verfügbar sind. Es ist gut gestaltet und funktional.
Versteckt und Pop-Out
Pop-Out-Menüs sind eines der großen Dinge, die sich aus der intensiven Verwendung von Hamburgern und anderen versteckten Symbolen ergeben haben.
Klicken oder tippen Sie auf die Schaltfläche, und die Navigation wird auf dem Bildschirm oder auf dem gesamten Bildschirm angezeigt (häufig abhängig von der Bildschirmgröße).
An sich ist das nicht wirklich experimentell. Aber die Tatsache, dass so viele Designer es auf so unterschiedliche Weise tun, ist. Während sich Benutzer an Hamburger-Icons gewöhnen, sind diese Muster noch etwas ungewohnt. Und da Designer unterschiedliche Symboltypen verwenden, ist auch hier eine kleine Herausforderung.
Interessant ist jedoch der Pop-Out-Stil von Caava Design (siehe oben). Während die meisten Designer mit flachen, einfachen Pop-Out-Variationen arbeiten, hat diese mehr Tiefe. Das Design hilft Benutzern, die wichtigsten Teile der Navigation zu finden, um sie durch das Design zu führen.
Horizontale Bildlauf
Die ersten Male, die Sie über eine horizontale Bildlaufseite laufen, können etwas seltsam sein. Für diesen Fluss ist ein bestimmtes Design erforderlich, um sich aufgrund der merkwürdigen Unterschiede in der körperlichen und visuellen Bewegung richtig zu fühlen.
Um die horizontale Navigation durch Scrollen optimal zu nutzen, sollten Designer visuelle Hinweise verwenden, um die Idee für die Benutzer angenehmer zu gestalten. Pfeile oder andere Richtungswerkzeuge können hilfreich sein.
Norgram verwendet oben auch ein Teilbild als visuellen Hinweis darauf, dass sich auf der Bildschirmseite mehr Inhalt mit einem festen Blick von oben nach unten befindet. Der Inhalt ist so strukturiert, dass die horizontale Bewegung aufgrund der visuellen Hinweise viel natürlicher erscheint.
Keine Navigation
Einige Websites machen die Navigation komplett überflüssig und entscheiden sich für alles auf dem Bildschirmstil. Es kann sicher ein kniffliges Muster sein. Wissen die Benutzer, worauf Sie klicken und welche Maßnahmen zu ergreifen sind?
Die? Keine Navigation? Das Navigationsmuster funktioniert am besten für sehr kleine Websites, die Benutzer dazu auffordern, eine Sache zu tun. Es kann für eine in Kürze erscheinende Seite oder eine Website mit einem Dankeschön- / Wiederholungsstil wie der oben genannten Jahreszahl funktionieren. Mit nur einer Handvoll anklickbarer Elemente und einem kurzen Bildlauf ist es leicht herauszufinden.
Die einfache Animation im Design hilft auch. (Man könnte es wohl als "Navigation" bezeichnen, da dies die Bewegung der Benutzer fördert). Dies kann, gelinde gesagt, ein heikles Muster sein.
Einzelseite mit Markern
Viele der verwendeten experimentellen Navigationsmuster werden auf einseitigen Websites eingesetzt. Und das aus gutem Grund: Für Benutzer ist es viel schwieriger, sich im einseitigen Format zu verlieren.
Um Orientierung zu geben und den Benutzern das Gefühl zu vermitteln, dass sie Fortschritte beim Design machen, sind viele dieser einseitigen Navigationsmuster auf Markierungen angewiesen. Genau wie beim traditionellen Slider-Format mit einem Punkt oder einer Leiste, um den Fortschritt zu notieren, verwendet dieser Navigationsstil dasselbe Konzept.
Socius oben macht dies sehr gut, mit Markierungen auf der rechten Seite der Seite, die Hover-Text enthalten, der den Benutzern mitteilt, was jeder Punkt darstellt. (Dies ist eine Funktion, die bei dieser Art der Navigation häufig fehlt.) Benutzer können den Hover-Effekt und die Punkte verwenden, um zu bestimmten Informationen zu springen oder durch die sieben Bildschirme zu blättern.
Der Trick bei diesem Designstil ist, dass sich alles schnell anfühlt. Slick-Scrolling-Effekte und ein leicht verdauliches Design, wie in diesem Beispiel gezeigt, helfen den Benutzern, durch den Inhalt zu führen.
Subtle Edge Nav
Einige Designer drehen die Navigation um 90 Grad und verankern sie am rechten Rand der Seite. Es ist ein subtiler Trick, der vor allem für kleine Websites oder Portfolio-Websites gilt, die häufiger auftauchen.
Navigationselemente in diesem Stil sind meist nur Text, enthalten nur eine Handvoll Elemente und sind im Allgemeinen klein. Der gedrehte Navigationstext kann basierend auf anderen Elementen auf dem Bildschirm in das Design hinein oder aus ihm heraus zeigen.
Genau wie bei der vertikalen Navigation kann diese Idee das allgemeine Seitenverhältnis des Designs ändern, da zur Navigation ein Band von der Seite geschnitten wird. Die Sorge um diesen Stil ist, dass die Navigationselemente subtil und klein sind, sodass sie leicht übersehen werden können.
Fazit
Sind Sie eher ein Traditionalist in Sachen Navigation oder möchten Sie etwas anderes ausprobieren? Experimentelle Navigationsmuster sind einer der Trends, die scheinbar an Bedeutung gewinnen.
Je mehr Designer diese Art von Techniken ausprobieren, gewöhnen sich Benutzer an die Änderung und passen sich an. Aber es gibt immer die Sorge um die Benutzer, die es nicht verstehen. Ich würde gerne wissen, was Sie von den verschiedenen Navigationsstilen halten. Lass es mich auf Twitter wissen und @designshack taggen.