Surfing. Browsing. The words used to describe visiting web pages reflect the dynamic nature of the web. Users who come to your site will need your help to guide them as they explore your site content. 


Like any journey, navigation is key. Clear directions are a must. Navigation labels are the signposts, and labels should be simple, intuitive, descriptive, and indicative of where the link will take the visitor. 


Users should be able to move freely within your site (move back, forward, through steps), and should not leave your site prematurely.



Expectations for Website Navigation


  • Navigation should be predictable with consistent menus and obvious navigation cues that give users a clear connection between action and outcome.
  • Keep users in one window/tab while on the WSU website (www.winona.edu) and open in a new tab when navigating away. 
    • When links always open in new windows, the user gets a bunch of windows or tabs open. This is annoying, confusing and makes it impossible for the user to “go back.”
    • When directing users to an external site, you don’t want them to “close” their interaction with WSU. If you set external links to open in a new window, you are able to connect them to another site in a separate window, while still keeping their interaction with the WSU “open” in the original window.
  • Link name and destination page name should match. 
    • For example: If the link is going to the Dining Services page, the link text should be “dining services”.



Top Navigation


Part of the header used on all WSU pages, the Top Navigation offers content-based navigation through broad categories of information. There is limited space available in the Top Navigation, so curtain items often link to landing pages that give an overview of the topic and directs users to related, more specific webpages. 


For example: Safety & Security (category of info) is on the curtain while Sexual Violence (a specific page) is not. 


The Top Navigation is edited in rare circumstances, and only the Webmaster has the ability to make such changes.



Breadcrumbs


Breadcrumbs are the series of links located just under the Top Navigation that show how a user reached a webpage. This is important because it gives web visitors a clear path, so they can backtrack if they would like, and avoid getting lost in a tangle of webpages.

  • All webpages must have accurate breadcrumbs that match the page names and navigation path
  • The first breadcrumb link should be the “umbrella” that your site falls under. 
    • For example: Academic departments should have their first breadcrumb link to their respective college. (E.g., College of Science & Engineering | Physics)



Primary Site-Navigation (Left Navigation)


Primary navigation is built out of broad, top-level categories so that website visitors can quickly see the main topics addressed on your site. The primary navigation remains consistent on the left side of each of your webpages, which helps anchor visitors as they explore a website.


A website's left navigation is edited infrequently, and a request to add or remove webpages will be carefully considered by the Web Team.

  • All left links should link to your pages on your own site. Do not include links to other WSU sites or non-WSU websites.

  • The menu label should match your site name (e.g., Business Office)

  • Left navigation must be present and remain consistent throughout entire site

  • Label links with primary categories of information found on the site (broad, “evergreen” labels)

    • For example, use the category label “Student Resources” instead of listing separate links for Internships, Tutoring, Research Tools, etc.

  • There must be between 2-8 links total
  • Link titles must be 25 characters or less (25 with spaces)
  • Link titles should use common language and avoid jargon, acronyms or formal, verbose titles



Secondary Site-Navigation (Right Navigation)


There is the option of adding a second set of links along the right side of a webpage, which can be used to direct people to further information about a webpage’s topic. Just as the Primary Navigation links are site-specific, the Secondary Navigation links are page-specific.


A website's right navigation is more flexible and open to editing, as long as the links remain helpful and relevant. 

  • Include links that are relevant to the page contents 
    • For example: A Student Resources page might include links to Internships, Tutoring, Research Tools, etc.
  • Links must remain consistent from page to page in the group (do not change or remove the left navigation from grouped pages)
  • The menu label should match the category “Student Resources” instead of “Quick Links”
  • There must be between 2-8 links total
  • Link titles must be 25 characters or less (25 with spaces)



Links in the Content


Links within the content on a webpage make it easy for people to find additional information as they might need it, rather than trying to search or navigate for relevant webpages. 


Links also play a role in search engine optimization (SEO), which can help your page appear higher in a list of search results.