Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Campixx 2018

480 views

Published on

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!

Published in: Marketing
  • Be the first to comment

Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Campixx 2018

  1. 1. Navigationsoptimierung
  2. 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. 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
  4. 4. CRO SEO UX DESIGN CONTENT SOCIAL
  5. 5. #1 RECAP
  6. 6. https://www.google.com/intl/de_de/about/company/philosophy/ “Der nutzer steht an erster Stelle”
  7. 7. “Das für den Nutzer beste Ergebnis verdient position 1”
  8. 8. https://www.contentmanufaktur.net/blog/allgemein/ranking-faktoren-user-verhalten- und-social-signals-wir-muessen-komplexer-denken
  9. 9. Monitoring EnginE
  10. 10. http://www.searchmetrics.com/de/knowledge-base/ranking-faktoren/
  11. 11. Search Experience OPtimization Search Engine Optimization
  12. 12. #2 Journey
  13. 13. Ankommen Umsehen/Suchen FindeN/Befriedigen Verweilen Speichern & Teilen & wiederkehren 01 02 03 04 05 Skepsis Ungeduld Desinteresse SERPS WEBSITE Fehlende Begeisterung
  14. 14. § Orientierung –you are here § Überblick – What else is there? § Hilfe – here’s what you need Zweck der Navigation
  15. 15. Wo wird navigiert? § Header (navigations-menu) – globales element § Sidebar § Footer – globales element § breadcrumb § vor- zurück § Pagination § (Text)-links, Bilder, CTA § Empfehlungen
  16. 16. erfolgsmetriken googles metriken
  17. 17. #Taskcompletion alias “search success” oder “Long Click”
  18. 18. #verweildauer alias “dwell time” oder “time on site” 75% 50% 25%
  19. 19. #engagement
  20. 20. • 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
  21. 21. #bounce Alias ”short click” oder ”Pogosticking” 85%
  22. 22. #sitespervisit
  23. 23. Navigation: Einfluss auf SEO § Interne Click-Through-Rate = Hierarchie & Relevanz § Klickverhalten = Nutzersignal § Z.B: ”Ayurveda Resort” § z.B. “Telefonanlage”
  24. 24. 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/
  25. 25. Unterstützende Patente § Old: Random surfer model (Pagerank) § New: Reasonable surfer model (1&2) § Long klick § Time label credit
  26. 26. 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/
  27. 27. Time label credit § Alias “Link Provision” § Implizite qualitätsmerkmale von unterseiten fliessen tragen zur qualitätsbewertung der verlinkenden seite bei
  28. 28. 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
  29. 29. § 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
  30. 30. § Nutzer sind 37% besser in Content- Zuordnung, wenn Icons die Inhalte unterstreichen/begleiten Do: verwende icons https://www.sistrix.de
  31. 31. Beispiele: § Unterstrich § Andere Farbgestaltung Do: Location signaling
  32. 32. § Gib Visuelles feedback, wo der nutzer sich aktuell befindet § Verhindert Frustration durch “doppelte” Klicks der gleichen Seite Do: Location signaling
  33. 33. Do: Inhaltliche Unterscheidung § Z.B. eine Task/CtA kontakt/Anfrage/Buchung als Butto § Produkt/dienstleistung § Wissen/contenT § Verwendung von Icons § https://teamescape.com/de/
  34. 34. Do: Visuell-Inhaltliche Unterscheidung § Es funktioniert! https://www.nngroup.com/articles/visual-indicators- differentiators/
  35. 35. § Noch notwendig? DO: Home/Start/Startseite
  36. 36. Die Grundlage
  37. 37. Zielgruppen Personas Beate Daniel Sven
  38. 38. Zielgruppen Personas Beate Daniel Sven Intern (Marketing Plan) Kundenbefragung Analytics (Daten)
  39. 39. Zielgruppen Personas https://www.usability.de/leistungen/methoden/personas.html http://www.zwp-online.info/de/zwpnews/wirtschaft-und- recht/psychologie/umgang-mit-unterschiedlichen- persoenlichkeitstypen
  40. 40. Drop down
  41. 41. Drop down
  42. 42. 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
  43. 43. § 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
  44. 44. § 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
  45. 45. https://www.morefire.com/seminare
  46. 46. Do: zeige, wo noch mehr zu finden ist
  47. 47. Information-heavy websites
  48. 48. § Universal Navigation § Mega-Menu § Sinnvoller einsatz der sidebar Information-heavy websites
  49. 49. § Universal Navigation (Secondary Element) § SubSites & Microsites § Ggf. Sogar mit eigenem Logo § Z.B. Shops, Marktplätze, banken, Bildungseinrichtungen, etc. Information-heavy websites
  50. 50. § 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
  51. 51. Universal Navigation § Wie wahrscheinlich ist navigation innerhalb der universal categories? § Nur darstellen, wenn häufig andernfalls einklappen oder weglassen
  52. 52. https://www.zoho.eu/de/crm/
  53. 53. https://www.bayer.com/
  54. 54. http://animalhealth.bayer.com/
  55. 55. https://www.postbank.de/privatkunden/aktion-postbank-wachstumsfonds.html
  56. 56. 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
  57. 57. https://www.postbank.de/privatkunden/aktion-postbank-wachstumsfonds.html
  58. 58. Mega Menu
  59. 59. https://www.sistrix.de
  60. 60. § 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
  61. 61. § Werden vertikal und dann horizontal gelesen § = Spalten, nicht Reihen Mega Menu
  62. 62. Recognising over memorizing “ ”Weniger ist mehr. einfach verständlicher = mehr Mega Menu
  63. 63. Navigation is more important than Search “
  64. 64. Cascading Menu
  65. 65. Cascading Menu https://www.internetwarriors.de/
  66. 66. Cascading Menu https://www.dr-wolff-shop.de/de/ALCINA/
  67. 67. Cascading Menu § Inhalte lassen sich fast immer übersichtlicher als “Mega Menu” darstellen § ”anstrengend” durch Zielgenauigkeit § Fehlende übersicht
  68. 68. § Übersichtliche Sitemap der wichtigsten Seiten (weiter geht’s) Footer Navigation https://www.xovi.de/2017/06/der-footer-meist-stiefmuetterlich- behandelt-und-stark-unterschaetzt/
  69. 69. Sidebar Navigation § Unterstützendes navigationselement Innerhalb einer inhaltskategorie § Sinnvoll für shops, blogs, große websites
  70. 70. *Gimmicks
  71. 71. § Klaue dem user nicht einen Teil seineS Aufmerksamkeitspotenzials Don’t: Steal my viewport
  72. 72. https://www.campixx.de
  73. 73. 1/6 des viewports werden dem Nutzer Geraubt https://www.campixx.de
  74. 74. https://www.searchmetrics.com
  75. 75. 1/5 des viewports werden dem Nutzer Geraubt https://www.searchmetrics.com
  76. 76. Do: Resizable Header § Top-Header klappt sich weg § Hautpnavigation wird kleiner/reduziert
  77. 77. 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)
  78. 78. Do: “Hovern” statt klicken § Nutzer ist sehr gehemmt/zaghaft zu klicken § Hovern gibt übersicht, nimmt “angst” neue Seite zu betreten – Lazy surfer model
  79. 79. Live CaseS!
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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”
  84. 84. 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
  85. 85. https://www.fashionette.de/
  86. 86. 89% höherer wieder- erkennungswert wenn oben links positioniert “ ” Do: platziere das logo oben links. Immer!
  87. 87. #Shops
  88. 88. Was kann man tun?
  89. 89. Visualisiere die informationsarchitektur
  90. 90. Priorisiere deine IA
  91. 91. #5 TOOLS
  92. 92. Hotjar: § Analytics § User-monitoring § Polls & Feedback § heatmaps § Scrollmaps § Beta: incoming FB § ...
  93. 93. #6 Schlusswort
  94. 94. Vielen Dank! & Viel Erfolg! www.bernardzitzer.com Search Experience Consultant
  95. 95. PS: Suche 2-Zimmer- Wohnung In berlin! info@bernardzitzer.com

×