Ist die Ära der Drop-Down-Hover-Menüs vorbei? Es könnte gut sein. Dieses Entwurfsmuster funktioniert für heutige Benutzer nicht. Das Konzept ist unübersichtlich und lässt sich nicht immer gut auf kleinere Bildschirme übertragen.
Benutzer wünschen sich Menüs und Navigationsoptionen, die einfacher zu bedienen sind, einfach zu verstehen sind und nicht mit mehr Optionen ausgestattet sind, als sie sich in wenigen Sekunden vorstellen können. Navigationsmenüs sollten geräteunabhängig sein und auf dieselbe Art und Weise funktionieren, so dass ein einheitliches Erlebnis für alle Gerätetypen entsteht. Was können Sie also tun, um sich von diesen Dropdown-Menüs zu verabschieden? Wir haben fünf Alternativen.
1. Scrolling Panels
Unabhängig davon, wie Sie Ihren Bildlauf mögen, ist die Verwendung von Bildlaufeffekten wie Parallaxe oder Panels, um Benutzer zu einem anderen Teil der Website zu führen, ein effektiver Navigationsstil. Während viele von uns (ich selbst eingeschlossen) vor einigen Jahren die Schriftrolle für tot aufgegeben haben, können kleinere Bildschirme dazu beitragen, die Scrollenmuster als äußerst benutzbare Funktion für alle Gerätetypen wiederzuentdecken.
Benutzer haben keine Angst, sich auf der Seite nach unten zu bewegen, so dass Sie nicht jeden Link oder jede Information auf diesem ersten Bildschirm stauen müssen. Nutzen Sie HTML5 zu Ihrem Vorteil und erstellen Sie eine Website, die die Navigation zu einem umfassenden Benutzererlebnis macht. (In der Tat so eindringlich, dass Benutzer die Navigation möglicherweise nicht einmal als das erkennen, was sie ist.)
Damit es funktioniert, müssen Sie mehr als nur eine lange Seite mit einer Reihe von Links erstellen. Das Design muss Wirkung zeigen. Informieren Sie die Benutzer darüber, was Sie tun. Erstellen Sie eine visuelle Trennung mit Farbe zwischen den Bildschirmen. und umfassen große anklickbare Bereiche, die den Benutzern genau sagen, wohin sie als Nächstes gehen sollen.
Wenn Sie Bedenken haben, dass einige Benutzer dieses traditionellere Menü mit Site-Map-Elementen benötigen, sollten Sie es in der Fußzeile ablegen. Sie erhalten ein schlankeres Design und bewahren diese verknüpfbaren Elemente an einem einzigen Ort für Benutzer der alten Schule auf.
2. Versteckte Hamburger
Bevor Sie in die "Ich hasse Hamburger Symbole" springen? schimpfen, denk einen Moment darüber nach. Wie es oder nicht, dieses kleine Symbol hat sich in ein Symbol eines Pop-Outs, eines Swing-Down-Menüs oder eines anderen verborgenen Menüs verwandelt. Die Benutzer scheinen es zu verstehen. Und während viele Designer dies zu scheuen scheinen, werden Sie sie wahrscheinlich trotzdem verwenden.
Also hör auf damit zu kämpfen.
Entwickeln Sie stattdessen bessere Möglichkeiten, um das Symbol in Ihren allgemeinen Navigationsbereich einzubinden. Ich grabe total nach Hamburger-Icons, die sich jetzt zu minimalistischen Vollbildmenüs öffnen, wie zum Beispiel Trivium Art History oben.
Der Trick hier ist die Einfachheit. Das Menü ist fett, bietet dem Benutzer nur wenige Auswahlmöglichkeiten und ist auf jedem Gerät einfach zu bedienen. Wer braucht überhaupt noch Dutzende Menüoptionen? Ein erheblicher Teil der Nutzer landet auf Ihrer Website über eine Suchmaschine auf einer Innenseite. Die Anzahl der Benutzer, die Ihre URL direkt eingeben und anschließend durch die Navigation vor Ort navigieren, nimmt ständig ab.
3. Navigation im Kartenstil
Karten, Karten und mehr Karten. Es scheint, als könnten Designer (und Benutzer) genug davon bekommen. Warum also nicht Karten zu Ihrer bevorzugten Navigations- / Menüoption machen?
Beginnen Sie mit einem Kartenmuster auf der Startseite, das ein Vollbild-Erlebnis ist. Jede Karte führt Benutzer zu einem anderen Teil der Site. Die Idee ist so einfach und intuitiv, dass jeder Benutzer in der Lage sein sollte, mit Leichtigkeit zu navigieren und zu finden, wonach er sucht.
Als zusätzlicher Bonus werden reaktionsfähige Karten dann eingesetzt. auf Bildschirmen für mobile Geräte, so dass das Erlebnis auf Plattformen ähnlich ist. (Benutzer werden dich dafür lieben.)
Um das Design zu verwechseln, denken Sie mit Ihrer Kartenschnittstelle über den Tellerrand. Mischen Sie verschiedene Kartenstile (Text, Bilder, Video), damit die Benutzer über den Bildschirm sehen und mit mehreren Elementen interagieren können. Katvig (oben) macht es gut, mehrere Kartenstile, Farben und einfache Animationen zu integrieren, um auf bestimmte Elemente aufmerksam zu machen.
4. Klebrige Menüs
Einfach und benutzbar. Klebrige Menüs sind eine einfache Möglichkeit, Benutzern den Weg durch Ihre Website zu erleichtern. Erstellen Sie eine einfache Menüstruktur mit nur wenigen wichtigen Elementen und stellen Sie sicher, dass das klebrige Element eine bestimmte Position auf dem Bildschirm findet und einrastet.
Meist sind diese Menüleisten groß und werden dann auf jeder Seite in einer kleineren Version als dem oberen Rand des Bildschirms angezeigt. (Es ist schwer, benutzerfreundlicher zu werden als dies.)
Die Bloomberg Mayors Challenge-Seite leistet mit ihrem klebrigen Menü hervorragende Arbeit. Die Position des Menüs wird von der Mitte des Bildschirms zum oberen Rand der Startseite (und auf allen Menüseiten der obersten Ebene) verschoben. Dadurch werden alle anderen Seiten der Website sichtbar. Darüber hinaus enthält das Menü einige andere Dinge, die Benutzer möglicherweise möchten, z. B. Social-Media-Symbole für den schnellen Zugriff und eine schnelle Auswahl für die Sprache.
Diese einfache Lösung ist eine der benutzerfreundlichsten Funktionen, die Sie tun können. Deshalb sind klebrige Menüs eine beliebte Verkaufsfunktion für viele? Boxed? Website-Themen. (Es ist etwas überraschend, dass mehr Websites sie nicht verwenden.)
5. Vertikales Seitenmenü
Es ist eine beliebte Funktion für zwei der beliebtesten Websites der Welt - Twitter und Facebook -, aber nicht viele andere Websites nutzen die vertikale Navigation durch das Seitenmenü. Vielleicht ist es Zeit zu beginnen.
Beide Social-Media-Sites stecken wichtige Elemente in seitenähnliche Navigationselemente. Die dünne vertikale Spalte ist ideal, um viele einfache Textinformationen zu speichern und die Dinge auf einen Blick gut sichtbar zu machen.
Ob Sie sich für ein Menü auf der linken oder rechten Seite des Bildschirms entscheiden, bleibt Ihnen überlassen. (Bei beiden Optionen gibt es Vor- und Nachteile.) Ich würde darüber nachdenken, wie die Navigation mit anderen Bildern funktioniert. Hat der Rest der Site einen Richtungszug nach der einen oder anderen Seite? Könnte die dominante Bildsprache den Benutzer dazu bringen, sich die Navigation anzusehen? Stellen Sie sich die Elemente in einem großen Bild vor, um Stücke zu schaffen, die für ein einzigartiges, einheitliches Gefühl zusammenwirken.
5 großartige Ressourcen
- Best Practices für das Web-UI-Design
- CSS-Snippets: Einfache horizontale Navigation
- Dropdowns sollten die Benutzeroberfläche von Last Resort sein? und wie man bessere Formen schafft
- NavNav Responsive Navigation Beispiele
- 10 beeindruckende HTML-Menüvorlagen zum Herunterladen?
Fazit
Navigationsmuster und Menüstile sind ein sich entwickelnder Bestandteil des Website-Designs, aber viele Trends entwickeln sich langsamer als anderswo. Dies kann auf die Komplexität beim Entwerfen verschiedener Stile für dieses wesentliche Element zurückzuführen sein oder auf die Vorsicht von Designern, die sich zurückhalten, um zu sehen, welche Ergebnisse akzeptabler sind.
Die Lektion hier lautet: Einfache Navigation ist besser. Wenn Sie klobige, überwältigende Dropdowns verwenden, ist es Zeit für eine Änderung. Tue es.