Die Slides zu meinem Vortrag: Das Navigationsmenu - selten voll augeschöpft. Finde die für deine Website passende Menu-Struktur inkl. DOs and DONTs. Die wichtigsten Infos gab es wie immer auf der Tonspur und Live im Workshop. Nicht umsonst gilt immer: Wer's verpasst, verpasst was! Dennoch viel Spaß damit!
2. Bernard Zitzer
Search Experience consultant
Marketing Management
Früher SEO Consultant @Netspirits
Wordpress Fan
herz für UX & Features und den User!
Aus köln - bald in Berlin
25. Navigation: Einfluss auf SEO
§ Interne Click-Through-Rate
= Hierarchie & Relevanz
§ Klickverhalten =
Nutzersignal
§ Z.B: ”Ayurveda Resort”
§ z.B. “Telefonanlage”
26. Links und ihr einfluss auf SEo
§ “a Link becomes more important
as it gets actual clicks”
https://www.sistrix.com/blog/how-google-evaluates-links-using-the-user-signals-
from-google-chrome-browser/
27. Unterstützende Patente
§ Old: Random surfer model (Pagerank)
§ New: Reasonable surfer model (1&2)
§ Long klick
§ Time label credit
28. Reasonable surfer model
„Not all of the links in a
document are equally
likely to be followed.”
https://www.hermish.com/effective-internal-linking-googles-reasonable-surfer-patent/
29. Time label credit
§ Alias “Link Provision”
§ Implizite qualitätsmerkmale von unterseiten
fliessen tragen zur qualitätsbewertung der
verlinkenden seite bei
30. Die Theorie:
§ Main navigation
§ Grobe kategorisierung der inhalte
§ Local navigation
§ Teilbereiche innerhalb der gleichen inhaltskategorie
§ Contextual navigation
§ Text-links
§ Das könnte dir auch gefallen
§ Weiterlesen
§ Zurück/nächster
31. § Halte oberste hierarchie klein
ideal: geringer als 7 reiter
§ Erste Reiter ist der wichtigste
§ Gestalte größer, was auch grösser ist!
§ Unterscheide verschiedene
inhaltskategorien auch visuell
Do‘s: allgemeiner Überblick
32. § Nutzer sind 37% besser in Content-
Zuordnung, wenn Icons die Inhalte
unterstreichen/begleiten
Do: verwende icons
https://www.sistrix.de
34. § Gib Visuelles feedback, wo der
nutzer sich aktuell befindet
§ Verhindert Frustration durch
“doppelte” Klicks der gleichen Seite
Do: Location signaling
35. Do: Inhaltliche Unterscheidung
§ Z.B. eine Task/CtA
kontakt/Anfrage/Buchung als Butto
§ Produkt/dienstleistung
§ Wissen/contenT
§ Verwendung von Icons
§ https://teamescape.com/de/
44. Drop down
§ Einfachste und simpelste form der navigation
§ Völlig ausreichend für kleine seiten
§ Sollte visuell gekennzeichnet werden (Pfeil)
§ Hierarchie und reihenfolge sind besonders wichtig
§ Wenn möglich, sinnvoll ordnen und kategorisieren
§ Umfangreiches auch umfangreicher darstellen
§ Übersicht nicht vergessen
45. § Wenn ein Dropdown vorhanden ist,
darf die Übersicht nicht vergessen werden
§ Link ist dann zwar da, aber die wichtigen
user-klicks für sitelinks o.ä. Fehlen ggf.
§ Xovi, campixx,
Don’t: dropdown ohne übersicht
46. § No-gos: burger-menu o.ä.
§ Wird weniger und später verwendet
§ Wenn die navigation sichtbar ist,
wird sie doppelt so häufig verwendet!
Don’t: verstecke niemals die navigation
Auf dem Desktop
51. § Universal Navigation (Secondary Element)
§ SubSites & Microsites
§ Ggf. Sogar mit eigenem Logo
§ Z.B. Shops, Marktplätze, banken,
Bildungseinrichtungen, etc.
Information-heavy websites
52. § Display it on every URL of the subsite
§ keep the focus on the subsite navigation
§ Sichere eine klare hierarchie
muss visuell unterscheidbar sein
§ Achtung, wenn Darstellung im Top-Header
§ Platzierung des Links “zur Main-Site”
in der nähe des Logos
Universal Navigation
53. Universal Navigation
§ Wie wahrscheinlich ist navigation innerhalb
der universal categories?
§ Nur darstellen, wenn häufig
andernfalls einklappen oder weglassen
58. Don’t: make me click too often
§ Klicktiefe gering halten
§ Je schneller der nutzer sein ziel erreicht
desto wahrscheinlicher ist die
“task complection”
§ Less klicks = mehr erfolg
62. § Werden als Drop down ausgelöst
§ Bieten optionen
§ Verlinken in die tiefe (several Links)
§ Geben kontext & Struktur (Sub-areas)
§ Geniale für UX & extrem hilfreich für den Nutzer
§ Variation: Mega-Flyouts
Mega Menu
https://www.asos.de
63. § Werden vertikal und dann horizontal gelesen
§ = Spalten, nicht Reihen
Mega Menu
69. Cascading Menu
§ Inhalte lassen sich fast immer übersichtlicher
als “Mega Menu” darstellen
§ ”anstrengend” durch Zielgenauigkeit
§ Fehlende übersicht
78. Do: Resizable Header
§ Top-Header klappt sich weg
§ Hautpnavigation wird kleiner/reduziert
79. Do: Remove by scroll (*nach Pixel)
§ Lasse ihm den vollen Viewport
§ Gebe ihm dennoch die möglichkeit,
weiterzugehen, wenn er möchte
(=Reveal by upscroll)
80. Do: “Hovern” statt klicken
§ Nutzer ist sehr gehemmt/zaghaft zu klicken
§ Hovern gibt übersicht, nimmt “angst”
neue Seite zu betreten – Lazy surfer model
82. Postbank
§ Gute universal navigation im Top-Header
§ Keine Visual Indicators - Man weiß nicht wo man sich befindet
§ Nutzt mega menu – inhalte sind bebildert
§ Keine icons zur unterstreichung
§ Eindeutige visuelle hierarchie
§ Sub-navigation mit dynamischen Anchor
§ Keine Footer-Sitemap
§ Gutes Wording
§ Einhaltung der „maximalen“ Reiterzahl
83. alpecin
§ Suboptimales wording aller inhalte
§ Einsatz von mega menu mit optimierungsbedarf
§ Keine icons oder symbole zur unterstreichung
§ Gute gliederung der produktkategorien
§ Fehlender deskriptiver text
§ Fehlende visual indicators - Keine orientierungshilfen
§ Keine inhaltlich-visuelleunterscheidung der reiter
§ Guter einsatz von „Sticky-resizable-header“
§ Gute visuelle unterscheidung des call-to-actions
§ Keine zusätzliche footer-sitemap
84. Asos
§ Guter Einsatz der universal navigation für Damen/herren neben logo
§ Geniales content-spezifisches mega menu
§ Gutes Wording der inhalte
§ Schwache inhaltlich-visuelle trennung und unterscheidung im reiter
§ Gute blickführung zum „Outlet“
§ fortschrittlich: einsatz von sticky Header nur bei upscroll
§ Fehlende visual indicators in navigation, dafür gute breadcrumb
§ Pro/con abwägung: Einsatz der sidebar
85. Sistrix
§ Wenige gut strukturierte reiter im menu
§ Sehr guter einsatz des mega menus
§ Inhaltlich-visuelle unterstreichung der inhalte im menu
§ Nutzung von icons Das hätte auf oberster ebene beginnen können
§ Beschreibender subtext für unterpunkte
§ Einsatz von location signaling
§ Teilweise inkonsistent “seminare” & “videos”
§ Es wurde Auf wiederholung der übersichtsseiten geachtet
§ Cta-focused “sticky header” nach scroll “Kostenlos testen”
86. Don’t: put the logo in the center
§ Geringere Marken-Wiedererkennung
§ 89% höherer wiedererkennungswert
wenn links im header positioniert
§ verSchlechterte “Home” und “Zurück” Navigation
§ Verringert ø-Verweildauer