![](\"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2017\/11\/11-Create-website.png\")
\n <\/figure>\n <\/a>\n <\/figure>\n <\/a><\/p>\nWebsite navigation encompasses every aspect of how users interact with your website. From scanning through menus to clicking on call-to-action buttons – website navigation helps your users to get around easily. In turn, the idea is that your business goals are more likely to be reached, because the journey from A to B has been made to feel as natural not to mention as convenient as possible.\u00a0<\/p>\n
The simple fact is that if your website isn\u2019t easy to navigate, users won\u2019t hang around. If a website has a high bounce rate, impressions, visits and conversions will all be affected. Therefore, it\u2019s essential that as a website owner, or a website designer or developer, you understand how to nail your website\u2019s navigation.<\/span><\/p>\n \u00a0<\/p>\n Ready to find out how to best facilitate conversions on your website, and which deadly web design sins to avoid? Here are our best and worst website navigation practices. <\/span><\/p>\n It\u2019s easy to jump into chucking links in a line at the top of your pages before you\u2019ve fully considered the structure of your website.<\/p>\n Starting at a high level and thinking about the overall information architecture of your website is important to give your navigation a hierarchy and ensure you don\u2019t forget important links that may be overlooked.<\/p>\n In larger companies, it\u2019s easy to jump to the assumption that the the website should follow the way the company is structured, but this is a dangerously non-customer-centric approach to information architecture.<\/p>\n Instead, try a technique called \u201cCard sorting\u201d with as many stakeholders as you can \u2013 with your team, your friends, your family, and most importantly, your customers.<\/p>\n There are two key types of card sorting:<\/p>\n Open card sorting is when participants are given cards containing the content you need to organise, and are asked to categorise them entirely independently. Participants aren\u2019t given any information beforehand, and they are responsible for naming the groups.<\/p>\n This is the most appropriate technique if you\u2019re approaching a new website, without an existing structure in place.<\/p>\n Closed card sorting is just like open card sorting, except participants are given the categories to put cards into, as well as the content to sort. Participants are not responsible for naming the cards, so this technique is handy if you have an existing website with established categories and core concepts.<\/p>\n Smashing Magazine has a great article on using card sorting to improve your information architecture<\/a>.<\/p>\n There are many well-trodden paths for website navigation.<\/p>\n Knowing when to break the rules is important, but for the most part it makes sense to stick to the basics and avoid rethinking the rules just to be different.<\/p>\n It sometimes can be tempting to design navigation with the goal of getting noticed, and being featured for a fancy web design award, but more often than not the best website navigation just works \u2013 it doesn\u2019t shout for attention or have crazy shiny animations.<\/p>\n You can obviously place your navigation anywhere \u2013 top, bottom, left, or right on the page.<\/p>\n Almost every time, it makes sense to keep your navigation at the top of your pages. The top of pages is the first thing your visitors see, it\u2019s where their cursor is already positioned if they\u2019ve been entering a web address or search term with their browser, and as with many recommendations in this article, it\u2019s also by far the most common and well-understood place for navigation to be located.<\/p>\n In the same vein as putting your navigation at the top of pages on your site, it\u2019s common place to put your logo in the top left of your site.<\/p>\n Not only should your logo take visitors back to the homepage (more on that in a moment), but the top left is usually the first part of the page a visitor will naturally see first. Over centuries of reading written words, we\u2019ve always been trained to read left to right, and top to bottom, so it makes sense for the logo to be the first thing you see on every page of a website.<\/p>\n Placing your homepage link in the top left is logical because desktop browsers place their back button just above this location, so assuming your visitors are already used to hitting their back button (we\u2019re will to bet they are), then placing your homepage link in the top left is a no brainer.<\/p>\n Aside from the back button, Mac users will also be used to hitting the \u201cClose window\u201d button in the top left, so there\u2019s a natural sense of \u201cto get out of what I\u2019m doing, I move my cursor to the top left of the screen\u201d.<\/p>\n This might sound obvious, but it\u2019s often overlooked \u2013 ensure you prioritise your most important and helpful pages as high as possible in your navigation.<\/p>\n Defining your \u201cmost important\u201d pages is always a challenge, but a good place to start is to look at the most popular pages already on your site and to understand the reasons why people are going to those.<\/p>\n A little plug for GoSquared here, but you can use Live Chat Prompts<\/a> to understand more about why visitors are going to specific pages of your site, and go beyond just the numbers.<\/p>\n Drop-down (or popover) menus are a good way to enable visitors to discover a large number of pages in a small amount of space.<\/p>\n Drop-down menus enable you to consolidate a bunch of links under one top level heading, and can be shown by hovering or clicking on the heading.<\/p>\n Drop-down menus seem to be showing up on an increasing number of sites as they become easier to implement with just HTML and CSS \u2013 there\u2019s no need to use horrible old technologies like Flash, or even JavaScript any more to implement drop-down menus in most modern browsers.<\/p>\n For those more technically inclined, we recently wrote about how to build a semantic, responsive website navigation in just HTML and CSS<\/a>.<\/p>\n A few things to watch out for with dropdown menus:<\/p>\n The burger menu is a tried and tested technique to condense navigation into just one small, easy-to-place element.<\/p>\n Burger menus are an acceptable way for many websites to condense a large navigation system on mobile devices, but it\u2019s hard to understand the justification for using such a technique on desktop websites.<\/p>\n The downside of using burger menus is they hide all the links behind just one icon. They fail to give the visitor a hint or understanding of the global structure of the site until the button is clicked. On desktop you have all the space you need to at least show a handful of links without needing to hide all the clutter away.<\/p>\n Burger menus on the desktop may give the visual appearance of simplicity<\/a>, but make the browsing experience more complex for the visitor.<\/p>\n Most SaaS websites have a primary Call-to-Action<\/a> \u2013 often it\u2019s to start a trial, or to book a demo with the sales team.<\/p>\n Ensuring this CTA is consistently in the same position on all pages of the website, with the same copy and the same appearance will undoubtedly ensure visitors know where to go if or when they decide the product is right for them and want to make their first commitment.<\/p>\n The website navigation is obviously not the only place for a Call-to-Action, but the navigation can act as a reliable, consistent place to go wherever you are on the website.<\/p>\n A popular place for the CTA is the top right \u2013 you see this on many SaaS websites, but also on popular ecommerce sites. Everyone knows you hit the blue \u201cbuy now\u201d button at the top right of a page on Apple.com to exchange your hard-earned dollars for a new shiny piece of aluminium and glass.<\/p>\n Check out our extensive guide for more information on how to create effective Call-to-Action buttons (CTAs)<\/a>.<\/p>\n Search can be a hugely valuable feature for website visitors, but it can also be a source of learning for you as a website owner.<\/p>\n Visitors can always head to a search engine like Google or Bing to find something, but sometimes they\u2019re already on your site and trying to find a specific product or page like a support doc.<\/p>\n Use site search to help your visitors help themselves, but ensure it\u2019s easy to access and available consistently throughout your site to avoid confusion.<\/p>\n Tracing basic metrics on your site can also give you a ton of information about how to improve your own navigation and naming conventions.<\/p>\n A few examples of how site search can help you improve your website navigation:<\/p>\n You don\u2019t need to place every link to every page on your website in your navigation bar at the top of the page. In fact, if you try to place every single link in your website navigation, you\u2019ll probably end up in chaos.<\/p>\n Instead, think about how you can use your footer and navigation in conjunction with each other to enable visitors to get to where they need without having to head back to a Google search.<\/p>\n A few handy tips here:<\/p>\n Sites that have huge numbers of pages will often adopt a secondary navigation bar to offer a series of links to other pages on the site.<\/p>\n This is a good tactic for separating content-related links from other product and company related links, for example. The downside of this approach is it can be overwhelming, and doesn\u2019t translate to mobile well.<\/p>\n Visually differentiating these two tiers of navigation is important, so ensure you at least use different shades and font sizes to emphasise the primary and secondary navigation.<\/p>\n Designing website navigation is just half of the story \u2013 thinking about how visitors navigate your site on mobile is more important than ever.<\/p>\n While some sites choose to direct visitors to download and install a native app instead of using their website, there\u2019s always going to be a significant number of people who will choose to view your site on their mobile browser.<\/p>\n Here\u2019s a few tips for ensuring your navigation works well on mobile:<\/p>\n We obviously don\u2019t know how well any of these sites perform from a business perspective, but we\u2019ve picked out a few great examples of website navigation from around the web \u2013 chosen by us as visitors and users.<\/p>\n We\u2019ve all heard of Amazon, but they\u2019re listed here because their navigation has to deal with a huge number of challenges \u2013 they have millions of products to list and categorise, they have an increasing number of departments and services, and they have a huge and diver base of customers.<\/p>\n The navigation on the Amazon site is extremely fast and easy to jump around; it\u2019s well ordered and categorised; and it\u2019s backed up by a huge and effective search experience to get you where you need to be fast.<\/p>\n Check out Amazon\u2019s website navigation<\/a><\/p>\n Apple\u2019s site is vast, and contains thousands upon thousands of product pages, company information pages, and support articles, but they\u2019ve condensed it down into a beautiful and simple navigation bar with an easy-to-scan number of links.<\/p>\n The site is categorised by product areas, which each contain landing pages to direct you off to specific products. Apple also relies on search heavily to drive you to niche pages such as specific support documents.<\/p>\n In addition, Apple\u2019s website navigation works well on mobile \u2013 it scales down and still animates in smoothly, and the tap areas are generous enough for most fingers and thumbs.<\/p>\n Check out the navigation on Apple\u2019s site<\/a><\/p>\n Atlassian\u2019s family of software products is growing all the time, and their website navigation breaks each product area down in a logical way. Coupled with bright new icons, the Atlassian website navigation makes a complex bunch of tools dramatically easier to understand.<\/p>\n View the Atlassian website<\/a><\/p>\n Baremetrics recently redesigned their site and introduced a beautiful new aesthetic with bright new icons and a refreshing colour palette. The new site introduced a drop down navigation system that allows you to jump to feature pages in a single click.<\/p>\n Check out the Baremetrics website<\/a><\/p>\n Basecamp\u2019s site is simple and easy to navigate. They\u2019re listed here because they\u2019re often a go-to source of inspiration for aspiring B2B SaaS businesses, and their one line of links proves your navigation doesn\u2019t have to be crazy or shiny to be successful.<\/p>\n View the Basecamp website<\/a><\/p>\n Casper sell mattresses online. They\u2019re an increasingly popular brand, and they\u2019ve always shown care on their website, especially as their product lines have grown. The latest version of the Casper site introduces a simple drop down menu on a few product categories so you can jump to a product page easily.<\/p>\n Check out the Casper website<\/a><\/p>\n DigitalOcean have a huge array of technical services and options, but they\u2019ve condensed an otherwise complex array of pages into a simple and elegant navigation bar. They\u2019ve also clearly differentiated their primary CTA of \u201cSign Up\u201d with a bold dark blue button on the far right.<\/p>\n View the DigitalOcean site<\/a><\/p>\n The Dropox brand recently got a major visual overhaul \u2013 some love it and some hate it, but it\u2019s an interesting site to look at nonetheless!<\/p>\n Dropbox certainly breaks from convention with their homepage design, and has a sparse navigation with just a few links. The action buttons are on the right as one would expect, but are also visually differentiated by the bold background colours.<\/p>\n See the Dropbox website<\/a><\/p>\n Framer is a prototyping tool for designers, and they\u2019re always iterating on their public marketing site. The latest version of the Framer site features a few dropdown so you can quickly jump to key pages from anywhere. We love their primary CTA for featuring a bold blue button coupled with a lovely little icon to infer the action you\u2019re about to take.<\/p>\n Check out the Framer website<\/a><\/p>\n GitHub\u2019s navigation is extremely simple and heavily features a search bar to get you to the interesting stuff \u2013 the actual code! They’ve strictly stuck to a grayscale colour palette but have used a number of shades to effectively differentiate the prominence of text.<\/p>\n View GitHub\u2019s website navigation<\/a><\/p>\n Of course, this is us. We\u2019re proud of the navigation we have on the GoSquared site, but perhaps a more useful thing to mention here is our post on how we implemented a beautiful drop-down menu system without using JavaScript just using HTML and CSS.<\/p>\n View the GoSquared website navigation<\/a>, and see how we built the navigation system<\/a>.<\/p>\n Hubspot recently updated their site to remove one of their secondary navigation bars. The current site features a series of drop down menus, but also keeps the primary CTA in a bar above the primary navigation links.<\/p>\n View the Hubspot website<\/a><\/p>\n MailChimp\u2019s site navigation is another example of simple, clean, focused links. There\u2019s nothing fancy here, but it\u2019s clear and obvious. A place for everything, and everything in its place.<\/p>\n View the MailChimp website<\/a><\/p>\n Marvel has kept their navigation clean and simple, and they\u2019ve pushed all links over to the right, along with their CTAs. The logo hangs out on the left on its own, making it stand out on all pages. Hovering over the Marvel logo is fun and engaging \u2013 try it out yourself!<\/p>\n Check out the Marvel site<\/a><\/p>\n Microsoft\u2019s website is of course huge, and has many thousands of pages. They\u2019ve made huge steps to simplify the chaos, and the current navigation is clear and easy to jump around. Thankfully their search is also great at jumping you to the support documents you need too!<\/p>\n View the Microsoft website<\/a><\/p>\n Segment\u2019s website is always evolving, and their navigation has developed as their product has evolved. The latest navigation is great for jumping you to key product pages, but the drop down menus only show on click, rather than on hover, so are not as discoverable as they could be.<\/p>\n Check out the Segment website<\/a><\/p>\n Shopify\u2019s site utilises a few drop down menus to jump you to areas of the site that are important, but not worthy of their own link, emphasising the significance of their pricing and blog. A nice visual touch \u2013 they\u2019ve used (but rotated) the same arrow they use to indicate the drop down menus to also indicate the help centre will open as a separate section of the site (outside of the current navigation structure).<\/p>\n View the Shopify site<\/a><\/p>\n There\u2019s no denying Stripe\u2019s influence on other marketing sites, especially in the tech world. Stripe\u2019s navigation is beautiful fluid, and is snappy while also looking visually slick. They\u2019ve prioritised a few key sections to frame an otherwise confusingly large number of products and pages. Interestingly, Stripe left aligns their logo, while entering their key nav items, and keeps key CTAs over on the right.<\/p>\n Check out the Stripe website<\/a><\/p>\n Wistia\u2019s navigation certainly areas the mould \u2013 their key sections are listed along the top, but they also show a sub nav at all times that changes depending on which top level navigation item you\u2019re on. Their CTAs on the far right take the full height of both the primary and secondary navigation bars. There\u2019s also a third level of navigation once you\u2019re hovering over a sub item, that displays below as a grid. It\u2019s different but we love it!<\/p>\n View the Wistia website<\/a><\/p>\n Xero has a huge number of pages on their site, but their navigation structures the information in an easily scannable way. They also ensure the primary CTAs are easy to see, and include a search bar that is exactly where you\u2019d expect it, without fighting for attention with the \u201cFree trial\u201d CTA.<\/p>\n Check out the Xero website<\/a><\/p>\n Congratulations on successfully navigating\u00a0<\/em>to the end of this post!\u00a0We\u2019d love to hear about your website navigation or design challenges, and see any examples of website navigation you think are truly great.\u00a0<\/p>\n In the meantime, did you know here GoSquared we provide business owners with heaps of free resources<\/a> to help you supercharge your marketing efforts? Click the image below to be taken to one of our resources, which is a free e-book on ‘The fundamentals of web analytics’.\u00a0<\/p>\nWebsite navigation terms<\/b><\/h3>\n
\n
#15 website navigation best practices & worst mistakes to avoid<\/h2>\n
<\/a><\/p>\n#1 – Do define your information architecture<\/h2>\n
<\/p>\n#2 Open card sorting<\/h2>\n
#3 Closed card sorting<\/h2>\n
#4 – Don\u2019t reinvent the wheel<\/h2>\n
<\/p>\n#5 Keep navigation at the top<\/h2>\n
<\/p>\n#6 Put your logo in the top left<\/h2>\n
<\/p>\n#7 Make your logo clickable<\/h2>\n
<\/p>\n#8 Order navigation items based on importance<\/h2>\n
#9 Carefully choose when to use drop-down menus<\/h2>\n
\n
#10 Don\u2019t hide behind a burger menu<\/h2>\n
<\/p>\n#11 Pick a primary global Call-to-Action button<\/h2>\n
<\/p>\n#12 Integrate search into your website navigation<\/h2>\n
<\/p>\n\n
#13 Consider your website footer in conjunction with your top level navigation<\/h2>\n
<\/p>\n\n
#14 Two-tier website navigation<\/h2>\n
<\/p>\n#15 Design your navigation for both mobile and desktop – responsive web design<\/h2>\n
<\/p>\n\n
20 examples of excellent website navigation<\/h2>\n
Amazon<\/h3>\n
<\/p>\nApple<\/h3>\n
<\/p>\nAtlassian<\/h3>\n
<\/p>\nBaremetrics<\/h3>\n
<\/p>\nBasecamp<\/h3>\n
<\/p>\nCasper<\/h3>\n
<\/p>\nDigitalOcean<\/h3>\n
<\/p>\nDropbox<\/h3>\n
<\/p>\nFramer<\/h3>\n
<\/p>\nGitHub<\/h3>\n
<\/p>\nGoSquared<\/h3>\n
<\/p>\nHubspot<\/h3>\n
<\/p>\nMailChimp<\/h3>\n
<\/p>\nYou may also be interested in: Email automation \u2014\u00a0the beginner\u2019s guide<\/a><\/strong><\/h3>\n
Marvel<\/h3>\n
<\/p>\nMicrosoft<\/h3>\n
<\/p>\nSegment<\/h3>\n
<\/p>\nShopify<\/h3>\n
<\/p>\nStripe<\/h3>\n
<\/p>\nWistia<\/h3>\n
<\/p>\nXero<\/h3>\n
<\/p>\nWant to learn even more about the best website navigation tips and tricks? Download your free E-Book!\u00a0<\/h2>\n
<\/a><\/p>\n\n\n\n\n\n\n \n <\/figure>\n <\/a>\n <\/figure>\n