Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Campixx 2018
•
6 gefällt mir•2,533 views
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!
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Campixx 2018
Ähnlich wie Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Campixx 2018 (20)
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Campixx 2018
- 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
- 3. AGEnda 1. Vorstellung 2. Short Recap (Happiness 2.0) 3. Navigation 4. Navigation & SEO? 5. Menu-Arten 6. Cases, Do’s and don’ts 7. Fragen
- 5. #1 RECAP
- 6. https://www.google.com/intl/de_de/about/company/philosophy/ “Der nutzer steht an erster Stelle”
- 7. “Das für den Nutzer beste Ergebnis verdient position 1”
- 13. Search Experience OPtimization Search Engine Optimization
- 14. #2 Journey
- 15. Ankommen Umsehen/Suchen FindeN/Befriedigen Verweilen Speichern & Teilen & wiederkehren 01 02 03 04 05 Skepsis Ungeduld Desinteresse SERPS WEBSITE Fehlende Begeisterung
- 16. § Orientierung –you are here § Überblick – What else is there? § Hilfe – here’s what you need Zweck der Navigation
- 17. Wo wird navigiert? § Header (navigations-menu) – globales element § Sidebar § Footer – globales element § breadcrumb § vor- zurück § Pagination § (Text)-links, Bilder, CTA § Empfehlungen
- 19. #Taskcompletion alias “search success” oder “Long Click”
- 20. #verweildauer alias “dwell time” oder “time on site” 75% 50% 25%
- 21. #engagement
- 22. • ET_KEY_PRESSED • ET_MOUSEWHEEL • ET_MOUSE_DRAGGED • ET_MOUSE_EXITED • ET_MOUSE_MOVED • ET_MOUSE_PRESSED • ET_MOUSE_RELEASED • MouseDown • MouseMove • MouseUp • BrowsingSessionDuration • NewTabPage.NumberOfMouseOvers • NewTabPage.SuggestionsType • NewTabPage.URLState • Omnibox.SaveStateForTabSwitch.UserInputInProgress • SessionRestore.TabClosedPeriod • SessionStorageDatabase.Commit • History.InMemoryTypedUrlVisitCount • Sync.FreqTypedUrls • Autofill. http://www.google.com/patents/US7716225 Patent aus 2010
- 23. #bounce Alias ”short click” oder ”Pogosticking” 85%
- 24. #sitespervisit
- 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
- 33. Beispiele: § Unterstrich § Andere Farbgestaltung Do: Location signaling
- 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/
- 36. Do: Visuell-Inhaltliche Unterscheidung § Es funktioniert! https://www.nngroup.com/articles/visual-indicators- differentiators/
- 37. § Noch notwendig? DO: Home/Start/Startseite
- 38. Die Grundlage
- 40. Zielgruppen Personas Beate Daniel Sven Intern (Marketing Plan) Kundenbefragung Analytics (Daten)
- 42. Drop down
- 43. Drop down
- 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
- 48. Do: zeige, wo noch mehr zu finden ist
- 50. § Universal Navigation § Mega-Menu § Sinnvoller einsatz der sidebar Information-heavy websites
- 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
- 60. Mega Menu
- 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
- 64. Recognising over memorizing “ ”Weniger ist mehr. einfach verständlicher = mehr Mega Menu
- 65. Navigation is more important than Search “
- 66. Cascading Menu
- 69. Cascading Menu § Inhalte lassen sich fast immer übersichtlicher als “Mega Menu” darstellen § ”anstrengend” durch Zielgenauigkeit § Fehlende übersicht
- 70. § Übersichtliche Sitemap der wichtigsten Seiten (weiter geht’s) Footer Navigation https://www.xovi.de/2017/06/der-footer-meist-stiefmuetterlich- behandelt-und-stark-unterschaetzt/
- 71. Sidebar Navigation § Unterstützendes navigationselement Innerhalb einer inhaltskategorie § Sinnvoll für shops, blogs, große websites
- 72. *Gimmicks
- 73. § Klaue dem user nicht einen Teil seineS Aufmerksamkeitspotenzials Don’t: Steal my viewport
- 75. 1/6 des viewports werden dem Nutzer Geraubt https://www.campixx.de
- 77. 1/5 des viewports werden dem Nutzer Geraubt https://www.searchmetrics.com
- 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
- 81. Live CaseS!
- 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
- 88. 89% höherer wieder- erkennungswert wenn oben links positioniert “ ” Do: platziere das logo oben links. Immer!
- 89. #Shops
- 90. Was kann man tun?
- 93. #5 TOOLS
- 96. Hotjar: § Analytics § User-monitoring § Polls & Feedback § heatmaps § Scrollmaps § Beta: incoming FB § ...
- 97. #6 Schlusswort
- 99. Vielen Dank! & Viel Erfolg! www.bernardzitzer.com Search Experience Consultant
- 100. PS: Suche 2-Zimmer- Wohnung In berlin! info@bernardzitzer.com