As a child, I can remember my parents using a fold out map during all of our family road trips. Whether it was to Ocean City, for our annual beach vacation, the occasional (and very long!) drive up to Maine visiting extended family, or the frequent ski trips we took with our cousins, that map was really the only way to ensure that we’d arrive at the correct location. 

Now, with two young children of my own, I admire the patience that it must have taken my parents during those long stints in the car. I get anxiety just thinking about my mom hunched over that map, trying to focus on the next turn, while simultaneously navigating my father and playing referee to the never-ending bickering between my siblings and I. Needless to say, I’m thankful that times have changed and there are now many different ways to get directions and ensure that we arrive at our final destinations.

Similarly, websites have undergone a change over the years, and likewise there are now many different ways that navigation can be delivered to users. Choosing the right navigation setup for your school website is one of the most important factors to consider as you begin a new web project with Finalsite. Ultimately, a well-thought-out navigation can help you to improve user experience and meet your goals.  

Navigation Considerations for Schools

Navigation comes in all types, shapes, sizes and locations. So where do you begin when deciding how your navigation should be structured? A good place to start is to look at some common navigation patterns or trends and to consider what’s best for your school or association. Keep in mind the purpose of your navigation, the type of content you’re presenting and the behavior that you are hoping to capture. And try to think about these factors from a user’s perspective. 

Four Common Navigation Patterns for Schools

Fixed or “Sticky” Navigation

A fixed navigation menu stays in place or “sticks” when a user scrolls so your menu options are never out of reach. Generally, we see sticky menus appear at the top of the page, however we’re seeing increased popularity of designers positioning these types of  menus on the side or even the bottom of screens. 

A sticky menu can be helpful on long-scrolling pages or single-page sites where the user might get confused or overwhelmed as they scroll or, as likely, irritated about having to scroll back to the top to find alternate pages. 

Since it’s taking up screen real-estate permanently, this type of navigation can sometimes seem obtrusive; it’s important to keep the sticky navigation as small as possible so as not to compete with your main content. 

Westminister and Sidwell Friends incorporated a fixed navigation into their design to ensure that main menu options were easily accessible from anywhere on the page.  

Left or “Jump-to” Navigation

A left navigation allows you to list important sections on the side when you need more space or links that otherwise won’t fit across a horizontal menu. Ideal for long-scrolling pages, this type of navigation also frees up the top and bottom of the screen for content, additional menu options or calls-to-action.

A “jump-to” option is also a nice feature on long pages where navigating to specific sections requires too much scrolling (or swiping, if you're on mobile). This type of navigation can include text links or icons, with a goal to save the user time. Generally, we see this type of menu positioned at the top or side of the page. However, lately we’ve seen designers adding a “return-to-top” button or link at the bottom of the screen on long or infinite-scrolling pages where content is loaded continuously as the user scrolls down the page to scroll them back up if they get lost or want to visit another section.

Keep in mind that it’s important to keep this type of navigation small and unobtrusive so it doesn’t interfere with the main content. 

Global Indian International School and American School of Bombay both include a Jump To navigation pattern on their homepage, which helps users navigate between sections.

Mega Menus

A mega menu is an oversized dropdown that generally takes up a large portion of the page, vertically and horizontally. These menus became popular among magazine-style blogs but have since gained popularity amongst brands that want to make a statement with their menus. 

This option is ideal for presenting multiple levels of navigation and will sometimes also include imagery, icons or even additional call-to-action links. 

Keep in mind that while there’s more space to use, it’s important to maintain an organized, column-based layout and present options clearly within these types of menus to ensure that the user can easily find what they need. Additionally, if the mega menu will only cover a portion of the screen, make sure to consider the content with which it will be competing. Ensure that there is sufficient contrast between your menu and main content so users don’t get overwhelmed.  

Lakeside School and The Awty International School Houston include Mega Menus for their main menu options.

Slide-out or Hidden Navigation

A slide-out (or hidden) navigation provides users with the options they want without sacrificing space. This option, commonly referred to as the “hamburger” navigation, originally gained popularity on mobile devices where space is generally limited, but recently has been crossing over and used for larger screens.

Slideouts are very flexible in the content they can include, from simple text links for small menus to icons and richer visuals for more complex menu options. 

A slide-out navigation is often associated with the hamburger icon (three stacked bars) because of its common usage on mobile websites. However, some designers have even started to explore alternatives to the slideout on smaller screens, especially for websites that offer fewer menu options. Some of these examples include tabbed or scrollable navigation at the top of the screen, sticky navigation bars at the bottom of the screen, or “Show More” options where the first few menu options are displayed with the ability to access “more”. 

Keep in mind that while flexible, a slide-out menu can make it harder for some users to find what they need. With this option, menu items are hidden and require an extra click for access, so make sure to use recognizable icons and even consider adding the word “Menu” for increased clarity. Many companies have opted to use a combination of a traditional and slide out navigation where the most searched for items or call-to-action links are displayed along the top of the screen and the remaining items are tucked away in a slide-out menu.

The Community School and Chadwick International make use of a Slideout Menu for their main menu options. 

Key Takeaway

Regardless of the type of navigation pattern (or combination of patterns) you end up choosing for your school website, it’s important to recognize that some users may still struggle to find what they need. So make sure to be as clear as possible with labels, call things what they are, and remember that consistency is key. Your navigation should appear on every page, in the same location, so users are able to find what they need from anywhere on your site. Lastly, make sure to include an easily accessible and functional search bar in case users do still get lost. 

As you gear up for your new web project with Finalsite or if you’re simply thinking about changing things up on your current site, consider incorporating one (or some!) of these navigation trends to help ensure that your users have the best possible experience. And remember, our team at Finalsite will be there along the way to help provide guidance and collaboration as you make decisions, prioritize goals and optimize your site.

ABOUT THE AUTHOR

As a Senior Designer at Finalsite, Kelly works closely with clients to craft unique and purposeful award-winning design solutions. Kelly has worked on numerous award-winning designs, including The Bear Creek School, Grace Brethren Schools, Punahou School, Gilman School, Frankin Road Academy, Awty International School, and many more! In her free time she is usually running after her daughters, spending time with family or upcycling furniture. The beach, running and coffee are a few of her favorite things.