{"id":117,"date":"2013-09-02T23:56:55","date_gmt":"2013-09-02T21:56:55","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=117"},"modified":"2013-09-03T11:36:55","modified_gmt":"2013-09-03T09:36:55","slug":"planning-and-implementing-website-navigation","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/planning-and-implementing-website-navigation\/","title":{"rendered":"Planning and Implementing Website Navigation"},"content":{"rendered":"<h2>Common mistakes<\/h2>\n<p><em>From a Kissmetrics article:\u00a0<a title=\"common-website-navigation-mistakes\" href=\"http:\/\/blog.kissmetrics.com\/common-website-navigation-mistakes\/\">Are You Making These Common Website Navigation Mistakes?<\/a><\/em><\/p>\n<h5>Mistake #1: Non-Standard Style<\/h5>\n<p>Visitors expect to find horizontal navigation across the top or vertical navigation down the left side. Putting your navigation in standard places makes your site easier to use.<\/p>\n<p><!--more--><\/p>\n<h5>Mistake #2: Using Generic Labels<\/h5>\n<p>Labels like \u201cProducts\u201d or \u201cServices\u201d are generic to all businesses and do nothing to communicate with visitors. ..\u00a0Since your audience isn\u2019t searching for \u201cproducts\u201d or \u201cservices,\u201d navigation with these labels won\u2019t help you rank. Use labels that include popular keyphrases according to the <a href=\"https:\/\/adwords.google.com\/select\/KeywordToolExternal\">Google Keyword Tool<\/a>. <em>Pro Tip! The navigation throughout the site and the site\u2019s structure itself should be planned with search engines in mind.<\/em><\/p>\n<h5>Mistake #3: Drop Down Menus<\/h5>\n<p>Drop down menus are bad for two reasons. Depending on how they\u2019re programed, can be difficult for search engines to crawl. But there\u2019s another, bigger reason\u2026 Drop down menus <em>are annoying<\/em>, according to <a href=\"http:\/\/www.useit.com\/alertbox\/annoyances.html\">usability studies<\/a> from the NN Group. This is because as visitors, we move our eyes much faster than we move the mouse. When we move the mouse to a menu item, we\u2019ve already decided to click\u2026and then the drop down gives us more options. It\u2019s a moment of friction in our minds as visitors. Even worse, <em>drop downs encourage visitors to skip important top-level pages<\/em>. If your site uses drop down menus, you can see the problem right there in your stats: low visits on high pages. <em>Exception: really big \u201cmega drop downs\u201d with lots of options <\/em><a href=\"http:\/\/www.useit.com\/alertbox\/mega-dropdown-menus.html\"><em>test well in usability studies<\/em><\/a><em>. If you have a big site with many sections, they may improve usability.<\/em><\/p>\n<h5>Mistake #4: Too many items in your navigation<\/h5>\n<p>With fewer menu items, your visitors\u2019 eyes are less likely may scan past important items. Every time you remove a menu item, the remaining items become more prominent. Challenge yourself to limit your navigation to five items. <em>Pro Tip: This trick also works for the rest of the page, not just the navigation. Every visual element removed makes everything remaining more prominent. You can many anything \u201clouder\u201d by making other things \u201cquieter.\u201d<\/em> &#8230; When your navigation has too many links, less authority and trust passed down to the interior pages. The link juice is diluted. The more concise your navigation, the more home page authority will flow to interior pages, making them more likely to rank. Use the <a href=\"http:\/\/www.ecreativeim.com\/pagerank-link-juice-calculator.php\">Link Juice Calculator<\/a> to count the total number of clickable items on your home page. Amazon has around 100 and their site is bigger than yours, right?<\/p>\n<h5>Mistake #5: Getting the order wrong<\/h5>\n<p>Items that appear first or last on any list are most effective. Navigation is no exception. Psychology studies show that, attention and retention are highest for things that appear at the beginning and at the end. It\u2019s called the \u201cserial position effect,\u201d and it\u2019s based on the principles of <em>primacy and recency<\/em>.\u00a0\u201cContact\u201d should be the last item on the list, putting it at the far right in top-level horizontal navigation, a standard location.<\/p>\n<h6>Bonus Reminder! Always links, never buttons<\/h6>\n<p>In case you\u2019ve missed the web design trends from the last eight years and you\u2019re still tempted to use graphical, button-based navigation (rather than text-based links) here are five good reasons not to:<\/p>\n<ol>\n<li>Buttons are not search friendly, since the text within is invisible to search engines.<\/li>\n<li>Buttons are harder to update than links, requiring Photoshop and a new image for every update.<\/li>\n<li>Buttons load more slowly that links, making them especially bad for mobile visitors.<\/li>\n<li>Buttons are less accessible to the visually impaired.<\/li>\n<li>Buttons are unnecessary, even if you want to use non-standard fonts, thanks to tools like TypeKit.<\/li>\n<\/ol>\n<p><strong><em>TL;DR<\/em><\/strong> Make the labels descriptive. Limit the number of items to seven. Put the important stuff at the beginning. Avoid drop down menus.<\/p>\n<p>Beautiful Example:\u00a0<a href=\"http:\/\/www.thesmithbrothers.com\/\">http:\/\/www.thesmithbrothers.com\/<\/a><\/p>\n<p><a href=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-126\" alt=\"nav-example smithbros1\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros1-300x253.png\" width=\"300\" height=\"253\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros1-300x253.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros1-150x126.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros1.png 1010w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><a href=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-127\" alt=\"nav-example smithbros2\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros2-300x235.png\" width=\"300\" height=\"235\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros2-300x235.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros2-150x117.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/nav-example-smithbros2.png 1003w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2>\u00a0Site Map vs Navigation Map<\/h2>\n<p>From:\u00a0<a href=\"http:\/\/toolboxes.flexiblelearning.net.au\/demosites\/series9\/906\/ddw_respak\/ddw_e3\/html\/ddw_e3_hierarchy.htm\">http:\/\/toolboxes.flexiblelearning.net.au<\/a><\/p>\n<p>The site map (shown below) and the navigation map both provide a hierarchical view of the website and are developed in the early stages of the design process. They provide a means of visualising the content and navigation structures of the website and they facilitate a top down design approach.<\/p>\n<p><a style=\"color: #ea9629; text-decoration: underline; outline: #000000;\" href=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/sitemap_example_university.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-130\" alt=\"sitemap example of a university\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/sitemap_example_university-300x114.jpg\" width=\"300\" height=\"114\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/sitemap_example_university-300x114.jpg 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/sitemap_example_university-150x57.jpg 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2013\/09\/sitemap_example_university.jpg 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The navigation map provides the same information as the site map but includes information about which pages can be accessed from which locations.<\/p>\n<h2>Types of Website Navigation<\/h2>\n<p><em>\u00a0From:\u00a0<a href=\"http:\/\/www.webpagemistakes.ca\/website-navigation\/\">www.webpagemistakes.ca<\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Common mistakes From a Kissmetrics article:\u00a0Are You Making These Common Website Navigation Mistakes? Mistake #1: Non-Standard Style Visitors expect to find horizontal navigation across the top or vertical navigation down the left side. Putting your navigation in standard places makes your site easier to use.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20],"tags":[21,25],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/117"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":7,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/117\/revisions\/131"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}