{"id":57968,"date":"2021-11-04T23:01:57","date_gmt":"2021-11-04T15:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=57968"},"modified":"2022-06-02T22:24:22","modified_gmt":"2022-06-02T14:24:22","slug":"designing-excellent-web-nagivation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designing-excellent-web-nagivation\/","title":{"rendered":"Designing Excellent Website Navigation (5 Ideas)"},"content":{"rendered":"

One thing a well-designed navigation feature will do is give visitors a high-level overview of what they can expect to find. At the same time, it will help visitors orient themselves so they can maneuver about the site quickly and easily, not get lost, and take quick action when obliged to do so.<\/p>\n

Smoothly functioning navigation is also good for SEO.<\/p>\n

In short, when designing site navigation elements, visitors\u2019 wellbeing should be the top priority.<\/p>\n

In this article, we will explore in some detail five best practices to keep in mind when designing website navigation elements. BeTheme<\/a> examples have been included so you can get a clear picture of what these best practices involved.<\/p>\n

How to design great website navigation \u2014 with examples<\/h2>\n

It is easy to take website navigation functionality for granted. Home, About, Products, etc., appear at the top of the page, each with an appropriate link that will take you to where you expect to be going.<\/p>\n

It couldn\u2019t be simpler, and that\u2019s the way we want it, but it has to be designed with care. The last thing you want a visitor to see is \"Page Not Found<\/em>\", or something similar.<\/p>\n

Here then, are five tips that you should know and heed.<\/p>\n

Tip #1: Make the logo prominent<\/h2>\n

The logo serves as a company\u2019s digital face. It can be seen as a welcome, and it plays a key role in building brand recognition and establishing trust and loyalty.<\/p>\n

The logo can represent the company on a variety of different platforms \u2014 social media and email signatures to name a couple.<\/p>\n

Consequently, it needs to be properly placed in the website\u2019s header.<\/p>\n

    \n
  1. Link<\/strong>: The logo needs to be linked to the home page.It should generally be placed in the top left corner since that is where people tend to look for it, according to a study conducted by NNG<\/a>.<\/li>\n
  2. Placement<\/strong>: Placing the logo in the center can be an acceptable alternative, in which the Home link is placed to the far left. The BeBaker 3 pre-built site<\/a> illustrates an example of this.<\/li>\n
    \"BeBaker<\/a><\/figure>\n
  3. Size<\/strong>: The logo should be large enough for the details to be easily seen or read. 250 x 100 pixels and 160 x 160 pixels are ideal sizes for rectangular and square logos, respectively. Check to make sure the navigation links in the header are not crowded.<\/li>\n<\/ol>\n

    As an example, the BeDentist 4<\/a> logo is 166 x 60 pixels, it is to the far left, and there is plenty of room for the navigation links.<\/p>\n

    \"BeDentist<\/a><\/figure>\n

    Placing and sizing the logo can be an exercise in balance. If the logo is large, the font size of the navigation links may need to be increased so they do not become \u201clost in space,\u201d while at the same time they should not appear to be crowded.<\/p>\n

    Tip #2: Use a sticky header<\/h2>\n

    This can apply to any website featuring a great deal of content. To avoid visitors having to read the content like they were reading it from a book, the content should be broken up into manageable sections separated by a judicious use of white space.<\/p>\n

    A sticky header can make it easy for a reader to scroll back to the top of the page.<\/p>\n

    Using a sticky header can be even more important when content is being viewed on a smartphone.<\/p>\n

    BePizza5<\/a> provides an excellent example of how to effectively employ a sticky header.<\/p>\n

    \"BePizza5\"<\/a><\/figure>\n

    As the visitor scrolls down the page the distinctive navigation bar shrinks up; yet it remains legible and usable.<\/p>\n

    An alternate approach, as illustrated in the Cottage 2 pre-built site<\/a>, uses a sticky left-aligned navigation.<\/p>\n

    \"Cottage<\/a><\/figure>\n

    The logo is still nicely placed and doesn\u2019t interfere with the content, as are the navigation links, which remain visible.<\/p>\n

    Tip #3: Highlight the page being visited<\/h2>\n

    When you are navigating a website, or most anything else, it is helpful to know where you are. The content of the page being visited would normally give a clear indication, but that may not always be the case.<\/p>\n

    A visible navigation marker could provide a reference point that would help visitors find out where they are and help them get to where they want to go next, like a map in a shopping mall that tells you that \u201cYou Are Here.<\/em>\u201c<\/p>\n

    There are a number of ways to highlight \u201cYou Are Here\u201d in a website. BeTheme gives you a variety of approaches to work with. One such approach is to change the text color for the page currently being visited as in the Be Ebook 3<\/a> navigation example.<\/p>\n

    \"Be<\/a><\/figure>\n

    Or you could elect to place a colored line beneath the current page.<\/p>\n

    For some audiences, a bolder method of highlighting the current page would be appropriate; like the method shown in the Nursing Home pre-built site<\/a>.<\/p>\n

    \"Nursing<\/a><\/figure>\n

    For a site targeting older users this approach could make sense.<\/p>\n

    Tip #4: Use recognizable icons, and only recognizable icons<\/h2>\n

    Icons can be helpful web design elements. They can be paired with text to communicate\n the meaning of certain points or used as standalone elements.<\/p>\n

    Standalone icons must be used with caution however since their meaning must be obvious and there are only two dozen or so icons that are immediately recognizable to most people, and only a few of them have anything to do with navigation.<\/p>\n

    Four icons that do make sense can be found in the BeDietShop pre-built site<\/a>:<\/p>\n

    \"BeDietShop<\/a><\/figure>\n

    They are, reading from left to right:<\/p>\n