How would you prefer to navigate to an unfamiliar location?

a) Using an old-school map 
b) Using printed directions
c) Using a smartphone app like Waze or Google Maps

I'm assuming that's a resounding "c" unless sitting in unexpected traffic and possibly getting lost doesn't frustrate you in the slightest. Over the past couple of years, Waze and Google Maps have spoiled us. They've turned navigation into an experience, creating a more enjoyable journey by making drivers aware of traffic, accidents, speed traps,  and alternate routes to find their end destination simple.

I challenge you to think about your school's website navigation in the same way. Too often, schools think about their site map as just that — a map: it's just a way to help website users get from point a to point b. But, it can also be used as a strategic marketing tool.

Think about the navigation of your school's website design as an interactive experience that guides prospective and current families down an intuitive path that eventually leads them where you want them: converting or connecting with the piece of information they need.

What are website navigation best practices?

• Create a mobile-friendly navigation to ensure the experience on a mobile device is optimal and encourages visitors to stay on your site.
   
• Don't use words or terms that are unfamiliar to your website visits. School-specific jargon in your navigation can confuse first-time website visitors, lowering page views and engagement.
   
• Your main navigation or top-level primary navigation is where you'll have pages like Admission and Academics. Your utility navigation is most often used to provide current families easy access to their portals, and quicklinks are often a dropdown menu where most visitors need one-click access to top pages. 
   
• Follow the two-click rule by making important content available in 1-2 clicks from anywhere on the website.
   
• Try to maintain a two-tier navigation site-wide. For example, Academics > Science is two tiers. Attention spans are short and there’s more mobile traffic, so navigation should be completed in as few clicks as possible.
   
• Make your tier two navigation elements appear on hover. No one wants to click and wait for a second page to load to learn what's in that section.

Cincinnati Country Day School is a great example showcasing the main three elements of a well-designed navigation. Take a look for yourself!

Now that we have the basics covered — here are a few strategies to improve the user experience and the schools that are reinventing website navigation.

Focus on mobile navigation and not just desktop

In working with schools around the world, our data shows that over half of a school’s website traffic comes from mobile devices. We also see that many schools have not prioritized mobile experiences for their school community and prospective families. Who wants to spend time on a website that just doesn’t meet our expectations? No one.

A mobile-friendly site is no longer a luxury, it’s a necessity. Schools that don’t embrace a mobile-friendly school website with responsive images, responsive designs, and larger font size, miss the opportunity to engage parents and attract prospective students. 

Stuart Country Day School of the Sacred Heart offers an engaging user experience with images, animation, clear calls-to-action, and structured navigation. It’s purposeful, thoughtful, and provides a great mobile experience.

Create a navigation element to say what sets your school apart

Why send prospective families digging for what makes your school unique when you can put it at the forefront? Rather than just using your site's navigation as a way to find what's special about your school, you can use it to your advantage.

Frankfurt International School’s Discover FIS highlights key elements of their school that speak to prospective students, parents, and faculty and staff.

And in this example, The Harvey School showcased its Signature Programs that really set their school apart from other schools.

Create a mega-navigation to guide users quickly

It's important to capitalize on every opportunity to guide visitors quickly and one way to do this is by using a mega navigation — a menu that makes all options visible at once. This lets users jump directly to the page they’re interested in and also allows users to find a page that might logically be in any number of sections without clicking on every page.

The Episcopal School of Dallas’ mega navigation is well designed and also includes main elements underneath, including a prominent and important site search feature.

Use navigation to identify with a particular student segment

Whitgift, an independent day and boarding school for boys in the United Kingdom, has had great success with its “I am Whitgift” page, accessible via the sub-navigation and a call-to-action on the homepage. This interactive page showcases the diversity of its student body and helps prospective young men see themselves as part of this story.

Similarly, the Cannon School organizes content by student leader school sections and drives visitors to “You Belong Here” with at-a-glance highlights.

Use navigation to simplify the website visitor's journey

Have you ever visited a web page and scrolled all the way to the bottom, only to realize that the page didn't have what you're looking for and you needed to scroll back to the top again? 

Your navigation needs to optimize the user journey so that visitors can jump around your site seamlessly. Sticky menus are navigation elements that stay in one location on a site even when the user moves a webpage up or down. Visit Loomis Chaffee’s website and notice how the navigation stays at the top of the screen as you venture through the site. It’s hard to get lost on this site.

Use your navigation to prompt a call-to-action

When creating your navigation, it is important to put yourself in your visitor's shoes and ask yourself: If they wanted to visit a particular section, what is the action they would want to take? Better yet: what action would we want them to take? Placing calls-to-action in your navigation bar, or in your mega-navigation is a great way to provide website visitors who are ready to take a course of action with a quick route to do so.

For example, Canterbury School has a Request Information CTA in numerous tabs in their navigation.

Lower Canada College's navigation also features a subtle Apply Now CTA docked on the left-hand side of the navigation on hover.

Key Takeaway

Having a beautiful website is important but it can’t be the only focus of your site. Before you redesign your next school website: think about how your navigation can provide an experience, rather than just a means to an end. With great navigation, you can lower bounce rates, further communicate what sets your school apart, delight your website visitors, and ultimately get them to take action and continue their journey with your school. 

ABOUT THE AUTHOR

As part of Finalsite's marketing team, Debbie has worked with international schools for the past 11 years while living in both Asia and Europe. She helps schools understand how they can maximize their web presence while partnering with Finalsite. As a parent of three children who graduated from IB World Schools, she has keen insights into the marketing and communication needs of international schools.