{"id":1738,"date":"2017-01-26T16:53:29","date_gmt":"2017-01-26T15:53:29","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1738"},"modified":"2024-11-25T09:06:54","modified_gmt":"2024-11-25T08:06:54","slug":"webseiten-navigation","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/webseiten-navigation\/","title":{"rendered":"Die Evolution von Webseiten-Navigation"},"content":{"rendered":"<p>In unserem heutigen Artikel geht es um das Thema <strong>Webseiten-Navigation<\/strong> und deren Entwicklung in den letzten Jahren.\u00a0 Seitennavigation ist eines dieser kleinen Dinge, die einen gro\u00dfen Unterschied machen. Denn wenn Ihre Navigation schlecht ist, werden Besucher Ihrer Seite vermutlich frustriert sein und nicht allzu lange dort verweilen.<\/p>\n<p>Wir geben Ihnen daher ein paar Tipps, wie eine nutzerfreundliche Navigation heutzutage aussieht.<\/p>\n<p><!--more--><\/p>\n<h2><strong>Ein paar Thesen zum Thema Website-Navigation<br \/>\n<\/strong><\/h2>\n<ul>\n<li>Die Struktur und Beschriftungen Ihrer Navigation sind sehr wichtig<\/li>\n<li>Navigation beeinflusst Traffic. Je h\u00f6her Ihr Rang ist, desto mehr Traffic bekommen Sie von den Suchmaschinen<\/li>\n<li>Navigation beeinflusst Ihre Konvertierungen. Je einfacher Ihre Seite zu nutzen ist, desto h\u00f6her wird der Anteil der Besucher sein, die zu Leads oder Kunden konvertiert werden.<\/li>\n<\/ul>\n<p>Aber lassen Sie uns endlich zur Entwicklung von Webseiten-Navigation kommen.<\/p>\n<h2><strong>1. Vergleich der Website-Navigation: Fr\u00fcher und heute<br \/>\n<\/strong><\/h2>\n<p><em>Welche Standardbeschriftungen kommen Ihnen in den Sinn, wenn Sie \u00fcber die Hauptleiste der Navigation nachdenken?<\/em><\/p>\n<p>\u201eWas wir tun\u201c, \u201eProdukte\u201c, \u201eDienste\u201c, \u201eL\u00f6sungen\u201c usw. W\u00fcrden Sie sagen, dass diese W\u00f6rter und S\u00e4tze wirklich beschreiben, was Sie tun, welche Produkte, Dienste und L\u00f6sungen Sie anbieten? Nat\u00fcrlich nicht. Die Labels sind <strong>nicht beschreibend<\/strong>, was bedeutet: <strong>nutzlos f\u00fcr SEO<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1754\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/website-menu.png\" alt=\"website-menu\" width=\"1000\" height=\"74\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/website-menu.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/website-menu-300x22.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/website-menu-140x10.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Heute streben clevere Online-Unternehmer nach beschreibender Navigation. Solche Navigation nutzt Schl\u00fcssels\u00e4tze, um SEO und Konvertierungen zu erh\u00f6hen.<\/p>\n<p>Denken Sie dar\u00fcber nach: Ihre Navigationsleiste ist ein Schl\u00fcsselelement, das Relevanz f\u00fcr die Suchmaschinen signalisiert. Ihre Navigationsleiste erscheint auf jeder Seite und ihre beschreibenden Labels lassen Google verstehen, um welches Thema es bei Ihrer Webseite geht.<\/p>\n<p>Zus\u00e4tzlich werden beschreibende Labels nicht nur von Google bevorzugt, sondern auch von viele Nutzern. Wenn Ihre beschreibende Navigation Ihre wichtigsten Produkte oder Dienste auflistet, dann versteht der User sofort, dass er oder sie am richtigen Ort ist.<\/p>\n<p>Erz\u00e4hlen Sie Menschen und Suchmaschinen direkt von Ihrer Navigationsleiste aus, was Sie wirklich machen. Hier ist ein Beispiel anhand von <a href=\"https:\/\/www.templatemonster.com\/prestashop-themes.php?aff=usersnap&amp;utm_campaign=blog_site_usersnap&amp;utm_source=10.05.2016_guestpost&amp;utm_medium=ev1nav\"  target=\"_blank\"  >TemplateMonsters PrestaShop Themes<\/a>:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1753\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/descriptive-navigation.png\" alt=\"descriptive-navigation\" width=\"1000\" height=\"545\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/descriptive-navigation.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/descriptive-navigation-300x164.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/descriptive-navigation-140x76.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Sie k\u00f6nnen das <a href=\"https:\/\/adwords.google.com\/KeywordPlanner\"  target=\"_blank\"  >Google Keyword Tool<\/a> benutzen, um relevante S\u00e4tze f\u00fcr Ihre Besucher und popul\u00e4re Schl\u00fcssels\u00e4tze f\u00fcr Ihre Labels zu finden.<\/p>\n<p>Labels wie \u201eProdukte\u201c oder \u201eDienste\u201c bringen nichts f\u00fcr Ihre Rankings, weil niemand nach ihnen sucht. Sehen Sie, es ist ganz einfach. Die oberen Navigationslabels sind veraltet. Also vergessen Sie sie besser.<\/p>\n<h2><strong>2. Formatbasierte Navigation kann auch nicht als beschreibend bezeichnet werden.<\/strong><\/h2>\n<p>Verwenden Sie W\u00f6rter wie \u201eVideos\u201c, \u201eFotos\u201c und so weiter? Das Problem ist, dass diese dem Besucher das Format Ihres Inhalts verraten, aber nicht das Thema.<\/p>\n<p>Leute browsen nicht auf Websites nach Videos oder Fotos. Sie suchen nach Antworten und Informationen. Hier ist ein <a href=\"http:\/\/usersnap.com\/blog\/website-navigation\/\"  >hilfreicher Link<\/a> dar\u00fcber, wie Sie formatbasierte Navigation vermeiden k\u00f6nnen.<\/p>\n<h2><strong>3. Modernes MegaMen\u00fc statt dem veralteten Drop-Down-Men\u00fc. <\/strong><\/h2>\n<p><strong>Wir wissen, dass Drop-Down-Men\u00fcs immer noch popul\u00e4r sind. Trotzdem ist es keine gute Idee, sie auf Ihrer Webseite zu benutzen. <\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1752\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/megamenu.png\" alt=\"megamenu\" width=\"1000\" height=\"672\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/megamenu.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/megamenu-300x202.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/megamenu-140x94.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><strong>Drop-Down-Men\u00fcs<\/strong> k\u00f6nnen f\u00fcr Suchmaschinen schwer zu crawlen sein und so zu unerwarteten Problemen f\u00fchren.<\/p>\n<p>Drop-Down-Men\u00fcs k\u00f6nnen f\u00fcr Ihre Besucher nervig sein. Stellen Sie sich zum Beispiel vor, Sie haben die Webseite bereits \u00fcberflogen und sich dazu entschieden, das Men\u00fc-Label zu klicken, aber dann gibt Ihnen das Men\u00fcobjekt auf einmal noch mehr Optionen per Mouse-Over.<\/p>\n<p>Was noch schlimmer ist, Drop-Downs ermutigen Besucher dazu, die wichtigen Seiten zu \u00fcberspringen. Sie benutzen noch immer ein Drop-Down-Men\u00fc? Dann werfen Sie nur einen Blick auf Ihren Analytics-Account, und Sie werden das Problem sehen.<\/p>\n<p>Was das Mega-Drop-Down-Mem\u00fc angeht, so bringt dieses ziemlich gute Resultate. Man sieht dabei auf einen Blick nicht einzelne Punkte, sondern wie bei gro\u00dfen E-Commerce-Seiten beispielsweise eine \u00dcbersicht \u00fcber alle Kategorien der Sektion &#8220;Wohnzimmerm\u00f6bel&#8221;.<\/p>\n<p>MegaMen\u00fc ist eine tolle Option f\u00fcr gro\u00dfe Webseiten mit einer Menge Seiten und einem vielf\u00e4ltigen Set an Produkten oder Diensten. Und noch weiter, MegaMen\u00fc erh\u00f6ht die Anzahl der Links von Ihrer Homepage dramatisch<\/p>\n<h2><strong>4. Reduzierte Anzahl an Men\u00fcobjekten<\/strong><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1751\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/reduced-number-of-menu-items.png\" alt=\"reduced-number-of-menu-items\" width=\"1000\" height=\"658\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/reduced-number-of-menu-items.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/reduced-number-of-menu-items-300x197.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/reduced-number-of-menu-items-140x92.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Die veralteten Webseiten hatten\/haben hunderte von Links auf ihrer Homepage. Diese Zahl zu verringern ist aus den gleichen Gr\u00fcnden sinnvoll, die f\u00fcr die beschreibenden Links gelten.<\/p>\n<p>Falls Ihre Homepage sehr viele Links hat, schw\u00e4cht das die Autorit\u00e4t, die von ihnen auf Ihre inneren Seiten weitergegeben wird. Dies verringert die Wahrscheinlichkeit, dass Ihre inneren Seiten ranken werden, entscheidend.<\/p>\n<p>Kurz gesagt, je genauer Ihre Navigation ist, desto mehr Autorit\u00e4t wird auf jede innere Seite weitergeleitet.<\/p>\n<p>Hier ist ein <a href=\"http:\/\/www.ecreativeim.com\/pagerank-link-juice-calculator.php\"  target=\"_blank\"  >tolles Tool<\/a>, das die Anzahl der Links auf jeder Seite z\u00e4hlt und die Erh\u00f6hung der Autorit\u00e4t einsch\u00e4tzt, die Sie durch Verringern der Anzahl der Links bekommen k\u00f6nnten.<\/p>\n<p>Aber welche Anzahl von Objekten in Ihrer Navigation ist optimal f\u00fcr Ihre Besucher?<\/p>\n<p>Unser Kurzzeitged\u00e4chtnis kann sich nur sieben Objekte merken (+\/- 2). Das bedeutet: je mehr Objekte sich in Ihrer Navigation befinden, desto schwieriger ist es f\u00fcr Ihre Besucher, sich die Informationen zu merken und zu verarbeiten.<\/p>\n<p>Leider ist es manchmal unm\u00f6glich, weniger als 7 Objekte zu benutzen. In solchen F\u00e4llen wird empfohlen, diese in Gruppen (Kategorien) zu unterteilen.<\/p>\n<p>Vermeiden Sie lange Listen. Unterteilen Sie Ihre Navigation in Gruppen von f\u00fcnf bis sieben Elementen. Denken Sie daran: jedes Mal, wenn Sie ein Men\u00fcobjekt, oder jedes andere Objekt, entfernen, wird alles \u00dcbrige visuell prominenter und wird eher bemerkt und bedacht.<\/p>\n<h2><strong>5. Achten Sie auf die Reihenfolge Ihrer Men\u00fcobjekte.<\/strong><\/h2>\n<p>Bedenken Sie, dass die Objekte am Anfang und am Ende am wichtigsten sind. Hier ist die Aufmerksamkeit am h\u00f6chsten. Dieses Ph\u00e4nomen hat einen Namen: \u201e<a href=\"https:\/\/en.wikipedia.org\/wiki\/Serial_position_effect\"  target=\"_blank\"  >Serial Position Effect<\/a>\u201c<\/p>\n<p>Objekte am Anfang und am Ende einer Liste bleiben eher in Erinnerung.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1750\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/serial-position-effect.png\" alt=\"serial-position-effect\" width=\"1000\" height=\"563\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/serial-position-effect.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/serial-position-effect-300x169.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/serial-position-effect-140x79.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Setzen Sie die beliebtesten, wichtigsten Elemente an den Anfang der Navigation. Falls Sie sich nicht sicher sind, was zuerst kommen sollte, werfen Sie einen Blick in Ihre Analytics.<\/p>\n<h2><strong>6. Nutzen Sie Technologie um Ihre Navigation zu verbessern.<\/strong><\/h2>\n<p>Im Moment ist das Design der Navigation nur der Anfang. Warten Sie ein paar Wochen und evaluieren Sie dann Ihre Navigation mithilfe von Analysetools.<\/p>\n<p>\u201eNavigation Summary\u201d oder \u201eIn-Page\u201d im Behavior Report bei Google Analytics wird Ihnen zeigen, welche Navigationselemente am meisten von Ihren Besuchern verwendet werden. Die anderen sind die \u201eBehavior Flow \/ User Flow\u201c Berichte.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1749\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/analytics.png\" alt=\"analytics\" width=\"1000\" height=\"657\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/analytics.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/analytics-300x197.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/analytics-140x92.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Basierend auf analytischen Daten k\u00f6nnen Sie dann vielleicht Entscheidungen wie diese treffen:<\/p>\n<ul>\n<li>Objekte entfernen, die nur selten angeklickt werden, falls diese nicht kritisch sind.<\/li>\n<li>Objekte neu benennen oder neu kennzeichnen, die selten angeklickt werden, falls diese wichtig sind.<\/li>\n<li>Objekte, die oft angeklickt werden, an den Anfang verschieben<\/li>\n<\/ul>\n<h2><strong>7. Navigation f\u00fcr mobiles Browsen optimieren.<\/strong><\/h2>\n<p>F\u00fcr mobile Ger\u00e4te optimierte Navigation kann in zwei Worten zusammengefasst werden: \u201eHamburger Icon\u201c.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1756\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/burger-menu.png\" alt=\"burger-menu\" width=\"1000\" height=\"531\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/burger-menu.png 1000w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/burger-menu-300x159.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/01\/burger-menu-140x74.png 140w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Der Fortschritt von Responsive Design hat dieses Icon, das aus drei horizontalen Linien besteht und ein bisschen einem Sandwich \u00e4hnelt, zur g\u00e4ngigen Benutzung gemacht.<\/p>\n<p>Obwohl es ein Standardicon ist, kann das Hinzuf\u00fcgen des Wortes \u201eMen\u00fc\u201c den Besuchern dabei helfen, diese Art von \u201eversteckter\u201c Navigation zu finden.<\/p>\n<h2><strong>Fazit<\/strong><\/h2>\n<p>Wir haben gerade die Entwicklung des Webseitenmen\u00fcs mit Tipps, bew\u00e4hrten Methoden und Beispielen vorgestellt. Es kann kaum als Leitfaden bezeichnet werden, da jede Regel Ausnahmen beinhaltet. Auf jeden Fall ist das Ziel dieses Artikels, dass Sie einen frischen Blick auf das Navigationsmen\u00fc Ihrer Webseite werfen. Vielleicht braucht es ein paar Ver\u00e4nderungen, die Ihren Traffic erh\u00f6hen und Ihre Konvertierungsrate verbessern werden.<\/p>\n<p><strong>Die Hauptidee diese Blog-Posts ist es, dass Ihre Navigation auf dem neuesten Stand ist und sowohl f\u00fcr Menschen wie f\u00fcr Suchmaschinen funktioniert.<\/strong><\/p>\n<p>Und vergessen Sie nicht die mobilen Nutzer! Ihr Bankkonto wird es Ihnen danken.<\/p>\n<p>Sie haben Frage, Erg\u00e4nzungen oder Anmerkungen? Hinterlassen Sie uns gerne einen Kommentar!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In unserem heutigen Artikel geht es um das Thema Webseiten-Navigation und deren Entwicklung in den letzten Jahren.\u00a0 Seitennavigation ist eines dieser kleinen Dinge, die einen gro\u00dfen Unterschied machen. Denn wenn Ihre Navigation schlecht ist, werden Besucher Ihrer Seite vermutlich frustriert sein und nicht allzu lange dort verweilen. Wir geben Ihnen daher ein paar Tipps, wie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1757,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[85,12],"tags":[],"class_list":["post-1738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1738"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1738\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1757"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}