Wesentliche Navigationsmuster im Jahr 2016
Ihr Navigationsmenü macht oder bricht die UX Ihrer Website, auf die Sie in erster Linie zu jeder Zeit hinarbeiten sollten. Es gibt keinen besseren Service, den Sie Ihren Kunden als Designer bieten können, als dafür zu sorgen, dass die Websites, die Sie für sie erstellen, eine beeindruckende und hochfunktionale Benutzererfahrung bieten.
Ein großartiges UX garantiert, dass die Websites Ihrer Kunden mehr Interessenten, Besucher und Leser bekommen, ganz zu schweigen von regelmäßigen Besuchern. Dies ist der wichtigste Teil beim Erstellen einer Website. Sie haben eine große Kontrolle darüber, wie Sie das Navigationsmenü Ihrer Website gestalten.
Leider legen nicht alle Designer großen Wert auf ein Design für eine hervorragende Navigation, was Kunden und Besuchern einen schlechten Dienst erweist.
Um einen sehr glaubwürdigen Ruf als Designer zu schaffen und ein gefragter Designer zu sein, müssen Sie eines der grundlegendsten Aspekte des Webdesigns beherrschen. Dadurch wird eine stellare Navigation für die Websites Ihrer Kunden erstellt.
Hier ist wie.
Klebrige Navigation
Klebrige Navigation ist ein wesentlicher Bestandteil der Navigation, da es Ihren Benutzern ermöglicht, sofort auf das Menü zuzugreifen und auf Ihrer Website leicht zu finden, was sie wollen. Die navigierte Navigation bleibt während des Scrollens auf einer Seite fest. Es gibt nichts frustrierenderes - vor allem im Fall von Seiten mit langen Scrollseiten - als noch einmal ganz nach oben scrollen zu müssen, um zu einer anderen Seite der Site zu navigieren.
Denken Sie daran, dass Geschwindigkeit im Internet alles ist (Laden von Seiten, Suchen nach dem gewünschten Inhalt usw.), sodass Benutzer schneller auf das Navigationsmenü zugreifen können.
Durch die Verwendung einer übersichtlichen Navigationsleiste tragen Sie auch dazu bei, die kognitive Belastung Ihrer Nutzer zu reduzieren, indem Sie ihre Navigationsmöglichkeiten ständig vor sich hinstellen.
Alternative Presse bietet ein gutes Beispiel dafür, wie Sie Sticky-Navigation in Ihre Seiten integrieren können. Beachten Sie, dass alle wichtigen Abschnitte in der Navigationsleiste durch einen effektiven Farbkontrast leicht zugänglich und identifizierbar sind, unabhängig davon, wie weit Sie die Seite nach unten scrollen.
Offensichtlicher Hypertext
Hypertext ist eine Textreferenz auf Ihren Seiten, auf die Benutzer klicken können, um zusätzliche Informationen zu erhalten, normalerweise auf einer anderen Seite, unabhängig davon, ob sie sich auf derselben oder auf einer anderen Website befindet. Hyperlinks sind wahrscheinlich das am besten identifizierbare Beispiel für Hypertext.
Da Hypertext Informationen enthält, die dem Benutzer durch die Bereitstellung von mehr Informationen helfen, ist es nur logisch, dass solche hilfreichen Verweise sehr auffällig gemacht werden. Insgesamt trägt dies zur Navigationsfähigkeit der von Ihnen erstellten Site bei.
Ich empfehle Hypertext durch zwei einfache, Design-Features:
- Unterstreichen
- Ändern der Farbe
Wenn Sie ein beliebiges Wort auf Ihrem Seiteninhalt unterstreichen - sagen wir, es handelt sich um einen Hyperlink zu Ihrer Kundenseite -, werden sofort die Besucher der Website darauf aufmerksam, was ihnen hilft, leichter zu wichtigen Informationen zu navigieren.
Wenn Sie die Farbe von Hyperlinks anders als den Text und den Hintergrund Ihrer Seiten festlegen, heben Sie diese wiederum auf der Seite hervor, damit Benutzer sie leicht identifizieren und darauf klicken können.
Marketing-Website Das tägliche Ei verwendet für seinen Hypertext sowohl Unterstreichungen als auch unterschiedliche Farben, wodurch es für Benutzer sehr einfach ist, Links zu identifizieren.
Mega-Menüs
Mega-Menüs sind eine großartige Idee für die Navigation, insbesondere wenn die Website, die Sie für Ihren Kunden entwerfen, viele Inhalte und Kategorien enthält. E-Commerce-Läden kommen mir in den Sinn. Hierbei handelt es sich im Wesentlichen um riesige Drop-down-Panels, die zusätzliche Navigationsebenen öffnen, damit Ihre Benutzer schneller das Gewünschte finden.
Solche Menüs verbessern die Benutzerfreundlichkeit durch die Einbeziehung von Vorteilen wie:
- Beseitigung des Scrollens;
- Tooltips;
- geordnete Strukturierung von Inhalten durch Icons, Layout oder Typografie.
Alles in allem erleichtern diese Funktionen die Verwendung des Navigationsmenüs.
Für ein solides Beispiel eines Mega-Menüs gehen Sie zu Nahrungsmittelnetzwerk 'S Website. Beachten Sie, dass das Flyout-Menü eines der am meisten gesuchten Teile des Inhalts der Website anzeigt - die Rezepte - in einem einfach zu erkennenden Format, in dem Benutzer sofort wählen können, wohin sie gehen möchten, anstatt für mehr Optionen zu scrollen oder zu paginieren.
Muster- und Sprachaffordanzen
Eine Musteraffordanz verwendet ein herkömmliches Symbol, das die Mehrheit der Website-Besucher sofort versteht, wie beispielsweise ein Haussymbol, das die Startseite Ihrer Website darstellt. Ein Sprachangebot ist die ausdrückliche Verwendung eines Wortes wie "Zuhause", um zu verdeutlichen, dass ein Klick auf diesen Tab die Nutzer auf die Startseite der Website bringt.
Affordances kommunizieren mit Benutzern, wie sie mit den Elementen in Ihrem Design interagieren können. Während dies sicherlich Design Basics 101 ist, ist es immer noch so wichtig zu üben, wie es in den frühen Tagen des Internets war.
Ein funktionelles Navigationsmenü sollte das Haussymbol oder das Wort "home" auf der ersten Navigationsleiste links haben. Während einige Entwerfer stattdessen entscheiden können, ein Firmenlogo als das "Haupt" -Symbol oder den Knopf einzuschließen, lässt das noch zu viel Raum für Benutzerfehler.
eTailer Rahmenlager demonstriert dieses Design-Prinzip zu einem Tee, mit seiner Verwendung von "Home", um keinen Zweifel zu lassen, wo dieser Tab Website-Besucher nehmen wird.
Schnelle Ladezeit
Geschwindigkeit = großartige Benutzererfahrung. Designer aller Couleur sollten das als eine der wichtigsten Designregeln notieren, die sie einfach nicht haben können und sollten. Laut Wired Magazine Fast 50% der Käufer möchten, dass die durchschnittliche Seite in zwei Sekunden oder weniger geladen wird! Anders ausgedrückt, wenn die Seiten, die Sie für Ihre Kunden entwerfen, länger als zwei Sekunden zum Laden benötigen, besteht eine sehr gute Chance, dass sie die Websites Ihrer Kunden verlassen und nie wieder zurückkehren, was zu schweren Alpträumen führt.
Dies ist zwar eine besorgniserregende Statistik, aber Designer können etwas dagegen unternehmen, um sicherzustellen, dass sie ihren Kunden eine qualitativ hochwertige Seitenleistung bieten. Testen Sie einfach die Seitengeschwindigkeit der Seiten, die Sie entwerfen. Es gibt eine Reihe zuverlässiger Tools, mit denen Sie die Seitenladezeiten bestimmen können:
Für ein Beispiel einer sehr schnellen Seitenladezeit gehen wir zu Enchanted Learning Was ist ein Wal? Seite. Das Design könnte einige Arbeit benötigen, aber die Seite lädt in etwas mehr als einer Sekunde, laut der Alexa Analytics-Toolbar.
Gute Navigation ist großartig UX
Ein großer Teil einer großartigen Nutzererfahrung ist die Navigation Ihrer Website. Es ist die Grundlage, auf der die gesamte Benutzererfahrung beruht, wenn Sie wirklich darüber nachdenken. Wenn sich Ihre Benutzer nicht mit Leichtigkeit auf der Website Ihres Kunden zurechtfinden, wird es für sie frustrierend und veranlasst sie, in Eile zu gehen. Daher sollte eine ausgezeichnete Navigation es den Benutzern erleichtern, eine von Ihnen erstellte Website zu verwenden. Das ist der Maßstab für eine gute Benutzererfahrung.
Während es verlockend sein kann, die Navigation in den Designphasen kurz zu machen - wegen neuer Designtrends, die ständig auftauchen - ist es nicht ratsam. Ihre Benutzer werden dies ebenso bemerken wie Ihre Kunden. Um Ihren Kunden zu gefallen, müssen Sie ihren Benutzern gefallen. Das können Sie nur tun, wenn Sie in erster Linie für ein großartiges Benutzererlebnis sorgen, wobei die Navigation von Anfang an im Vordergrund steht.