Entwerfen eines erfolgreichen Navigationsmenüs Ideen und Inspirationen
Das Navigationsmenü auf einer Website ist wie ein Straßenschild in einer Straße oder ein Ebenenverzeichnis in einem Einkaufszentrum. Sie können Ihr Ziel nicht erreichen, ohne zu wissen, wo Sie sich befinden. Wie im wirklichen Leben ist die Navigation im Webdesign sehr wichtig und spielt eine wichtige Rolle für die Benutzerfreundlichkeit einer Website sowie für die Benutzererfahrung.
Heutzutage können Sie viele verschiedene Arten von Navigationsmenüs mit interessanten, kreativen und ungewöhnlichen Designs sehen. Aber wie wäre es mit einer effektiven Navigation in einer Website? Wie würde sie aussehen? wie soll es aussehen??
Heute möchte ich meine Beobachtungen und mein Wissen über die Bedeutung der Navigation im Webdesign teilen. Ich werde ein paar einfache Tipps verraten, mit denen Sie die Navigation und Benutzerfreundlichkeit Ihrer Website verbessern können. Es gibt auch einige Beispiele für effektive Navigationsmenüs, die Ihnen eine Vorstellung davon geben, wie Sie Ihr nächstes Design planen.
Informationsarchitektur
Die Navigationsplanung sollte mit der Informationsarchitektur beginnen. Es ist wichtig, sich hinzusetzen und Brainstorming über die Informationsarchitektur einer Website. Sie müssen herausfinden, welche Funktionen die Website bietet, was am wichtigsten ist und was in den unteren Ebenen der Informationshierarchie platziert werden kann.
Informationsarchitektur umfasst Funktionen, Benutzeranforderungen, Sitemap, Tests und Wireframes. Weitere Informationen zur Informationsarchitektur finden Sie im Artikel von Cameron Chapman in Informationsarchitektur 101: Techniken und Best Practices.
Verwenden von benutzergestützten Technologien
Vermeiden Sie beim Erstellen Ihrer Navigationsleiste die Verwendung von Flash, JavaScript, jQuery oder anderen Elementen, die den Zugriff auf Ihre Website-Navigation behindern könnten, oder stellen Sie zumindest sicher, dass sie sich ordnungsgemäß abbauen können.
Weitere Referenzen auf grazile Degradierung von Javascript, In diesem Beitrag finden Sie 10 nützliche Fallback-Methoden für CSS und Javascript.
Verwenden Sie einfache, benutzerfreundliche Begriffe
Es ist besser zu benutzen einfach, naheliegend und leicht verständliche Begriffe als sich an die branchenüblichen Bedingungen für Ihr Navigationsmenü zu halten. Jeder Link, der Benutzer mehr als ein oder zwei Sekunden benötigt, um herauszufinden, ist wahrscheinlich nicht für die Verwendung geeignet.
Wenn ein Benutzer auf einen Link klicken muss, um herauszufinden, worauf der Link hinausgeht, führt dies zu einer schlechten Benutzererfahrung für Ihre Besucher.
Beispiele
Die Begriffe im Navigationsmenü der Website von Larissa Ness sind leicht verständlich und gebräuchlich. Benutzer werden es nicht verwirrend finden, da sie bereits Erfahrung mit solchen Menüs haben.
Hier ist ein weiteres gutes Beispiel für ein sauberes und klares Website-Navigationsmenü mit gebräuchlichen Begriffen bei csupport.
Die Kreativagentur Eighty8Four verwendet den Begriff "Showroom", was für Besucher verwirrend sein kann. Dieser Begriff kann Portfolio oder Arbeit bedeuten, aber es ist nicht klar, und die Besucher haben keine andere Wahl, als einzuchecken, um sie zu überprüfen.
Standardisieren Sie das Navigationsdesign
Verwenden Sie dasselbe Navigationsmodell in allen Ihren Seiten. Dies ist sehr wichtig, da ein Benutzer ohne ein einheitliches Design tatsächlich der Meinung ist, dass er sich auf einer anderen Website befindet. Stellen Sie sicher, dass Sie dasselbe Navigationsmodell verwenden, damit Benutzer Ihre Website problemlos abrufen können, ohne verloren zu gehen.
Bluegg, Im Folgenden wird ein einfaches und sauberes Navigationsdesign verwendet, das auf allen Unterseiten gleich bleibt. Der einzige Unterschied ist der Farbindikator, der die Seite anzeigt, auf der sich der Besucher gerade befindet.
Geben Sie an, wo Sie sich befinden
Es ist wichtig, den Benutzer jederzeit wissen zu lassen, wo er sich befindet. Sie können dies durch Ändern des Hintergrunds des Links und der Farbe des Seitennamens oder mach den Text fett im Navigationsmenü, um es von anderen zu unterscheiden.
Austin Eastciders verwendet eine andere Farbe und einen anderen Hintergrund, um anzuzeigen, auf welcher Seite sich der Benutzer befindet. Dieser Indikator kann auch als subtile Designänderung verwendet werden, z. B. mit a anderer navigationshintergrund Dadurch entsteht das Gefühl, dass andere Menüpunkte vertieft sind.
Medienchirurgie verwendet eine dunklere Farbe als Indikator für eine geöffnete Unterseite. Einfach aber effektiv.
Verwenden Sie Webkonventionen
Es geht um eine benutzerfreundliche und intuitive Website-Navigation. Webkonventionen erleichtern Designern die Arbeit mit ihren Designs. Die meisten Benutzer würden auf das Logo der Website klicken, um zur Startseite zurückzukehren. Gestalten Sie daher Ihr Logo.
Wenn nicht, Sie lassen sie Zeit verbringen, um etwas Neues zu lernen oder in einigen Fällen unbequem, indem sie nicht das liefern, was sie als allgemein akzeptierte Navigationsnormen erwarten.
Mehr über Webkonventionen erfahren Sie hier:
- 10 Webdesign-Konventionen
- Das Webdesign-Rad nicht neu erfinden
- Design mit Webkonventionen
Inject Design platziert das Logo in der oberen linken Ecke, was zu einer der heute am häufigsten verwendeten Webkonventionen passt.
Adams Creation verwendet eine der häufigsten Webkonventionen - das Logo befindet sich in der linken oberen Ecke der Website und enthält Links zur Startseite.
Testen Sie es: Binden Sie eine dritte Partei ein
Testen Sie Ihr Navigationsdesign immer mit Personen, die zuvor das Internet genutzt haben. Möglicherweise möchten Sie Personen einbeziehen, die nicht mit dem Entwurfsprozess in Verbindung standen, um ihn zu testen. Beachten Sie ihre Vorlieben bei der Navigation durch Ihre Website und analysieren Sie die Zeit, die sie brauchten, um die Seiten zu finden, nach denen sie gesucht haben.
Für bessere genauigkeit, mehr Menschen einbeziehen, Daten sammeln, analysieren und zusammenfassen für eine bessere Passform. Führen Sie nach dem Test eine Umfrage durch, wenn dies erforderlich ist. Sie erhalten möglicherweise unerwartete Ideen und Eingaben, die ohne diesen Testlauf möglicherweise nicht erkannt würden.
Kontext bereitstellen
Um konsistent mit Ihrem Inhalt und Ihrer Navigation zu sein, bieten Website-Benutzer einen gewissen Kontext, um die benötigten Dinge schnell zu finden. Sie können kleine Symbole für den von Ihnen verknüpften Inhalt oder kurze Beschreibungen platzieren, um einen Überblick über die Inhalte der Seite zu erhalten.
Mein eigenes Fahrrad verwendet einfache Symbole, um den Benutzern mehr Informationen darüber zu geben, was auf bestimmten Unterseiten zu finden ist.
Sarah Parmenter verwendet kurze und nette Beschriftungen unter Hauptnavigation, um Informationen zu den Unterseiten zu erhalten, zu denen die Hauptnavigation verlinkt.
SEO-Zwecke
Google mag eine konsistente Navigation. Es ist gut, eine konsistente Navigation zu haben, nicht nur für Benutzer, die verstehen, wie sie durch Ihre Website navigieren, sondern auch für Suchmaschinen, um Ihre Website zu indizieren.
Suchmaschinenroboter werden durch Ihre Website gecrawlt, um Ihre Website zu indizieren und die Links in die Ergebnisseite der Suchmaschine zu setzen. Wenn Sie sichtbar sein möchten, achten Sie auf ein gutes Navigationsdesign und erhalten Sie mehr Verkehr.
Kostenlose Navigationsskripte (CSS und jQuery)
Hier finden Sie eine kurze Liste der neuesten Navigationsmenüs, die für Ihre Projekte nützlich sein könnten. Diese Skripte machen die Benutzererfahrung Ihres Produkts noch besser, indem Sie einige nützliche Funktionen hinzufügen und die Verwendung zum Vergnügen machen.
XML-gesteuertes Vertical News Scroller-Skript mit HTML und jQuery: vScroller
Filtrieren
Page Scroller
Zeitleisten-Portfolio
HorizontalNav
CSS3 Minimalistisches Navigationsmenü
Kreis-Navigationseffekt mit CSS3
Rasternavigationseffekte mit jQuery
Ascensor
Erstellen Sie ein elegantes CSS3-Navigationsmenü
Schaufenster der schönen horizontalen Navigation
Und nicht zuletzt einige inspirierende horizontale Navigationsmenüs. Überprüfen Sie diese erstaunlichen Websites und ihre Navigationsmenülösungen, um neue Ideen für Ihre Projekte zu finden.
Ch3mical
Bloom Search Marketing Inc..
Alex Perez
Libor Zezulka
Hauska!
Goldene Inseln
Neil Carpenter
Marc Thomas
3D-Polystyrol
Liechtenecker
Abenteuerwelt
Arbutus-Fotografie
OMDRL
4 Kiefern Bier
Jäger Weine
Hoffentlich finden Sie diesen Artikel hilfreich und informativ. Wenn Sie irgendwelche Gedanken haben oder nicht einverstanden sind, teilen Sie bitte Ihre Meinung in den Kommentaren.
