{"id":497,"date":"2021-02-15T15:30:36","date_gmt":"2021-02-15T15:30:36","guid":{"rendered":"http:\/\/www.friezedesign.co.uk\/blog\/?p=497"},"modified":"2026-02-22T16:24:35","modified_gmt":"2026-02-22T16:24:35","slug":"is-your-website-easy-to-navigate","status":"publish","type":"post","link":"https:\/\/www.friezedesign.co.uk\/blog\/is-your-website-easy-to-navigate\/","title":{"rendered":"Is Your Website Easy to Navigate?"},"content":{"rendered":"<style>.wp-block-kadence-advancedheading.kt-adv-heading497_ae1f47-e8, .wp-block-kadence-advancedheading.kt-adv-heading497_ae1f47-e8[data-kb-block=\"kb-adv-heading497_ae1f47-e8\"]{text-align:center;font-weight:400;font-style:normal;font-family:Georgia, serif;text-transform:capitalize;color:#ea024d;}.wp-block-kadence-advancedheading.kt-adv-heading497_ae1f47-e8 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading497_ae1f47-e8[data-kb-block=\"kb-adv-heading497_ae1f47-e8\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading497_ae1f47-e8 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading497_ae1f47-e8[data-kb-block=\"kb-adv-heading497_ae1f47-e8\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h4 class=\"kt-adv-heading497_ae1f47-e8 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading497_ae1f47-e8\">&#8220;Don&#8217;t frustrate your Website&#8217;s Visitors: How to make it easy for people to find what they want on your website&#8221;<\/h4>\n\n\n\n<p>&#8216;Website Navigation&#8217; is a term used to encompass the simple idea of how visitors are able to find the things they are looking for on your website. In the context of &#8216;professional&#8217; web design, it&#8217;s about how to make this task as easy as possible for those using your website. The User Experience (UX).<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Structured Content &#8211; &#8216;Information Architecture&#8217;<\/h3>\n\n\n\n<p>The starting point in making sure your website is easy to navigate, is done in the &#8216;<a href=\"https:\/\/www.friezedesign.co.uk\/blog\/web-design-planning\/\" data-type=\"post\" data-id=\"111\">website planning<\/a>&#8216; phase. <\/p>\n\n\n\n<p>You need to consider what information\/content will be included on your website, and how that can be structured in a logical way. How the information should be classified and categorised, so that every website visitor can easily identify where the information they want is most likely to be found. If you have a large website with many pages, you need to also consider how content might be ordered hierarchically.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sitemap and Navigation &#8216;Menus&#8217;<\/h3>\n\n\n\n<p>When you&#8217;ve decided how your website&#8217;s content should be structured, it&#8217;s a good idea to create a graphical representation of this with a website &#8216;sitemap&#8217;. Remember,  the content structure needs to be flexible and &#8216;future proof&#8217;, as you may want to expand what your website offers visitors, at a later date. Try using &#8216;pyramid&#8217; structures, with more general (encompassing) subjects at the top, expanding to specific subjects at the bottom.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"361\" src=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/website-sitemap.png\" alt=\"Website Sitemap\" class=\"wp-image-551\" srcset=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/website-sitemap.png 580w, https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/website-sitemap-300x187.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption class=\"wp-element-caption\">Website Sitemap Example<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Website Menu Design : Primary Menu<\/h4>\n\n\n\n<p>Once happy with your content structure, you can use it to form your website&#8217;s primary navigation menu. The primary menu will be what most people use to navigate their way around your website, so it needs to be well designed. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"361\" src=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/primary-dropdown.jpg\" alt=\"Primary website navigation menu\" class=\"wp-image-553\" srcset=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/primary-dropdown.jpg 580w, https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/primary-dropdown-300x187.jpg 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption class=\"wp-element-caption\">Website Primary Navigation Menu with Exposed &#8216;Drop-Down&#8217;<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Follow Conventions<\/h5>\n\n\n\n<p>Follow conventions as to where you place your menu in the overall design &#8211; usually close to the top, horizontal orientation. Limit the number of options available on the top-level of your menu: no more than seven or eight items, and keep the menu text labels short. This will help ensure the menu remains well-defined on a single row (no wrapping) on all screen sizes.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Use Cues and Feedback<\/h5>\n\n\n\n<p>Use design &#8216;cues&#8217; to make your menu clear and obvious to the user: generous spacing, containing borders, colour, typographic styling, etc.<\/p>\n\n\n\n<p>Offer feedback to your visitors by having your menu indicate which &#8216;page&#8217; is currently being viewed. If for example, the user is on the site&#8217;s &#8216;Home&#8217; page, the menu&#8217;s &#8216;Home&#8217; item could reflect that by being a different colour.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"361\" src=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/cues2.png\" alt=\"Hierarchical website navigation menu with colour cues\" class=\"wp-image-555\" srcset=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/cues2.png 580w, https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/cues2-300x187.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption class=\"wp-element-caption\">Strong Navigation Cues &#8211; Hierarchy Indent and Colours<\/figcaption><\/figure>\n\n\n\n<p>Many hierarchical websites use &#8216;Drop-Down&#8217; menus that reveal sub-pages on &#8216;hover&#8217; (mouse-over). You need to make sure these menus work on all devices, including &#8216;touch&#8217; based devices. Many websites using drop-down menus don&#8217;t work correctly on Smartphones and Tablets.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Custom and Secondary Navigation Menus<\/h4>\n\n\n\n<p>It&#8217;s often a good idea to offer additional menus for your website visitors. An example would be to have a custom &#8216;Highlighting&#8217; menu &#8211; perhaps in the footer of your website &#8211; that groups a set of pages that you consider to be important.<\/p>\n\n\n\n<p>A secondary menu can help to &#8216;declutter&#8217; your primary menu. You could remove all your &#8216;small print&#8217; and &#8216;legal&#8217; pages from the primary menu  &#8211; Privacy Notice, Cookie Policy, Data Protection, Terms of Use &#8211; and place them in a separate menu of their own.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&#8216;Home&#8217; Page as &#8216;Front Cover&#8217;<\/h3>\n\n\n\n<p>Where possible, use your website&#8217;s &#8216;Home&#8217; page like a magazine would use its front cover. Use your home page to highlight the interesting and important content your website contains.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"361\" src=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/cta-social-media.jpg\" alt=\"Website Calls to Action, Content Highlights and Social Media 'Feeds'\" class=\"wp-image-557\" srcset=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/cta-social-media.jpg 580w, https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/cta-social-media-300x187.jpg 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption class=\"wp-element-caption\">Calls to Action, Content Highlights and Social Media &#8216;Feeds&#8217;<\/figcaption><\/figure>\n\n\n\n<p>Whilst browsing your website, people will often return multiple times to your home page, seeing it as the starting point for other interesting content they may wish to view.<\/p>\n\n\n\n<p>Make sure navigating to your home page is made easy. Perhaps differentiate the item in your primary menu. A common convention is to have your &#8216;logo&#8217; linked to your home page, as an additional means to return there.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"276\" src=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/home-icon.png\" alt=\"Unique 'Home' Icon and Logo Link to Home Page\" class=\"wp-image-559\" srcset=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/home-icon.png 579w, https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/home-icon-300x143.png 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><figcaption class=\"wp-element-caption\">Unique &#8216;Home&#8217; Icon and Logo Link to Home Page<\/figcaption><\/figure>\n\n\n\n<p>If you have something you wish people to do when they come to your website &#8211; make a purchase, make a donation, fill-in a form &#8211; help visitors to navigate by creating prominent &#8216;calls to action&#8217; (CTAs) on your home page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">News, Blog or Articles &#8211; Social Media Too<\/h4>\n\n\n\n<p>If you have any serialised content on your website, such as news or a blog, help visitors find them by &#8216;feeding&#8217; your latest two or three posts through to your home page. Do the same if you&#8217;re using social media channels &#8211; feed your latest YouTube video or Tweet to your homepage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumb Trail<\/h3>\n\n\n\n<p>If you have a large informational website, with a multi-level hierarchical structure, another navigational aid worth considering is a &#8216;breadcrumb trail&#8217;.<\/p>\n\n\n\n<p>Breadcrumb trails are a way of exposing the hierarchical structure on your website, allowing visitors to see clearly where they are, whilst additionally allowing them to easily move-up levels of the hierarchy (parent levels).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"276\" src=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/home-icon.png\" alt=\"Breadcrumb Trail : Showing Position in Hierarchy and 'Parent' Links\" class=\"wp-image-559\" srcset=\"https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/home-icon.png 579w, https:\/\/www.friezedesign.co.uk\/blog\/wp-content\/uploads\/home-icon-300x143.png 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><figcaption class=\"wp-element-caption\">Breadcrumb Trail : Showing Position in Hierarchy and &#8216;Parent&#8217; Links <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Context Based Navigation<\/h3>\n\n\n\n<p>An important, but often underused navigation technique, is adding contextual navigation links within your content. If for example, in our writing we use a term or phrase that is expanded upon elsewhere on our website &#8211;  say &#8216;<a href=\"https:\/\/www.friezedesign.co.uk\/blog\/website-usability\/\" data-type=\"post\" data-id=\"260\">website usability<\/a>&#8216; &#8211; then we link the term to that place.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Common Error &#8211; Avoid Using &#8216;Click Here&#8217;<\/h4>\n\n\n\n<p>When using context based links, don&#8217;t just write &#8216;click here&#8217;. Make the text that is linked meaningful. This will not only help with navigation, but also improves <a href=\"http:\/\/www.getawebsite.friezedesign.co.uk\/promo.htm\">Search Engine Optimisation<\/a>.<\/p>\n\n\n\n<p>Interested in seeing <a href=\"https:\/\/www.friezedesign.co.uk\/fse-test\/\">Usability\/UX in practice &#8211; Client Prototype<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Don&#8217;t frustrate your Website&#8217;s Visitors: How to make it easy for people to find what they want on your website&#8221; &#8216;Website Navigation&#8217; is a term used to encompass the simple idea of how visitors are able to find the things they are looking for on your website. In the context of &#8216;professional&#8217; web design, it&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[49,54,50,53,51,52,17,19,18,79,48,47,20],"class_list":["post-497","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-breadcrumb","tag-menu-design","tag-navigation-techniques","tag-primary-menu","tag-sitemap","tag-structured-content","tag-usability","tag-user-experience","tag-ux","tag-web-development","tag-website-menus","tag-website-navigation","tag-website-planning"],"_links":{"self":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=497"}],"version-history":[{"count":67,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/497\/revisions"}],"predecessor-version":[{"id":1055,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/497\/revisions\/1055"}],"wp:attachment":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}