Dropdown- second level hover information

A scalable software platform for all budgets.

Recruit students, help parents stay connected, and empower your staff to easily update content with premium communications products and tools.

Award-winning designers bringing your school to life online.

Schools love how Finalsite finds what makes them unique and translates that into an authentic digital experience.

School marketing experts at your service.

Schools turn to Finalsite's consultants for their decades of experience developing and executing a digital marketing strategy.

Improve School-to-Home Communications with Password-protected Portals.

Portals provide a safe and secure place for your community to access information that's just for them on every device.

Sarah Gordon, Assistant Director of Communications
Choate Rosemary Hall

A best-of-breed approach to give you the "all in one" solution you need.

We focus on the critical function of marketing and communication, while leveraging relationships and integrations with 70+ partners to provide a more seamless experience between the school and your constituents.

A team of 200, Finalsite has been serving schools worldwide for 20 years.

Our business has been for and about schools since the beginning, which is why 95% of clients stay with us year over year.

Save Time and Enhance Data Integrity

Our secure integrations with popular SIS providers mean you can replace timely manual data uploads with our automatic transfers for a seamless solution.

Sarah Gordon, Assistant Director of Communications
Choate Rosemary Hall
  • General Best Practices
School Website Navigation: Top Strategies for an Improved User Experience
Julianne Hamilton

When I begin a school website redesign as part of the creative team here, we often ask the school to list three adjectives to describe the visual look they’re going for on the new site. We expect to hear terms like “traditional,” “colorful,” or “bold,” but one of the most common things we hear is “easy to navigate.” Not surprising, perhaps, but a tough one to wrestle down: how do we set up a site that’s “easy to navigate”?

A site’s navigation contains the tools we provide the user to move through the site, finding information and accomplishing tasks. The most important and basic form of navigation on your site is the main menu found in the header.

choate rosemary hall navigation on macbook and iphone

Other tools such as the section menu, search, breadcrumbs, sitemap, clickable images, and call-to-action buttons also aid in the users’ journey through the site.

There are reasons to break every good rule, but without a really good reason reason, I recommend sticking with these basic principles for good school website navigation:

1. Keep it Simple

As a designer, I love coming up with totally custom, unique designs for the schools I work with. However, the one area I don’t try to be “unique” with is the navigation structure. An unexpected design can delight the user, but there’s nothing delightful about struggling to find the directory or figure out where to mail a donation.

School homepage with footer of student shaking hands with teacher and navigation

On Phoenix Country Day School’s site, a simple and totally predictable (in the best way!) navigation is paired with a fun, original homepage design.


Thinking of improving your website's navigation? Find inspiration in our free eBook, the Website Redesign Playbook.

Download My Copy
 

2. Limit the Number of Options

When looking at your menu, it should be easy for a user to skim through all of choices very quickly. When users are overwhelmed with too many choices, they may not make any choice (except the choice to leave your site). Stick to eights or fewer main navigation items. When you have a group of buttons, limit yourself to three or four. Your navigation is not your junk drawer. Stand firm against other departments who want every little thing in the header.

School website with football field and navigation

When it comes to their main menu, Penn Charter sticks to the magic number: seven.

3. Use the Fewest Number of Clicks

For starters, use drop-down menus (or mega menus!) under your main navigation. This lets users jump directly to the page they’re interested in. It also allows users to find a page that might logically be in any number of sections without clicking on every page. For example, some schools place the faculty/staff directory under “About” others include it under “Academics.” Don’t send your families on the dreaded “guess and check” hunt for it.

Another popular way to organize navigation is via a "navicon" or "hamburger menu" on the desktop. While there are many virtues to this approach as a way to simplifying the homepage and making the media, photos and messaging more prominent, it's important to recognize that this some users may find this extra click or tap less intuitive. In short, hamburger menus help achieve the goal of "simpler" visually but it's not always the most proven way to make sure navigation is easy. If you like the hamburger navigation, it's just important to make sure alternate navigation is provided within pages, in the footer, etc. and done thoughtfully.

school website photo of sky and trees with shorter navigation

The community school uses a navicon (hamburger menu) on desktop, which places all of the emphasis on their amazing video and the key links they choose to place outside of the off-canvas menu: Login, Calendar, Search, Inquire, Tour, and Donate. Once a user opens the menu, they find it easy to navigate to more deeply nested pages by simply hovering the main landing pages.

community school expanded navigation

Once a user moves past the homepage, the page the section menu (tier 2 pages) are placed consistently on the right. Users can even expand the tier 2 pages to see additional pages without clicking.

the community school academics landing page

4. Be Consistent

If a user is on the “How to Apply” page, they should be able to navigate to the “Tuition” page using a section menu, rather than going up to the dropdown menu in the header each time. That section menu might be placed across the top, on the right, or on the left. If you decide to place it on the left, place it there consistently so users don’t have to hunt for pages.

School website about us page with navigation on the top and side

Highline Public Schools offers users several consistent ways to move through the interior pages: Their main menu, breadcrumbs, and section menu on the right.

5. Use Common Language

Your website is an organized collection of pages that serves to answer the questions and solve the tasks that users come to the site for. It’s not a replication of your school’s departmental structure and internal naming conventions. Use simple, common language. For example, page names like “Office of Advancement” or “Pedagogical Approaches” may not be universally understood — but terms like “Alumni” and “Our Approach” will be.

photo of alumni with navigation on school website

Alumni visiting Packer’s website can easily understand the options presented.

6. Don’t Forget Mobile!

Be sure users can access every page, including more deeply nested ones, just as easily on a phone as on the desktop. A major component of building a mobile-friendly navigation is by working with a company that understands mobile-first design. Designers who design “mobile first” rather than just think about “responsive” take the different device experiences into consideration from the get-go, making it easier to improve the mobile navigation experience for users.

school website navigation on mobile device

Diving deep into Westminster’s site is no problem on mobile thanks to their expanding menu.

7. Finally, Offer Guidance

If the navigation aids users along in their journey of your site, don’t forget that you can take a more active role in determining the path. If you use a megamenu design, consider including featured links to the pages you want users to visit. Include clear calls-to-action throughout your site as well, particularly to the pages such as apply, give or volunteer. In addition to the heavy-hitting calls-to-action, consider offering more exploratory guidance. Users don’t always know what they want to do next, so make sure you always give them somewhere to go. Consider linking to related stories or including associated news posts at the bottom of the page.

Photos of teachers and faculty with students for academic news

Agnes Irwin uses our robust Posts module to send just academic news to the bottom of their Academics landing page. This allows them to direct users to fresh, relevant content on this page with almost no additional work on their end!

Key Takeaway

With each individual school, there are additional considerations and nuances to consider with your design team, but following these guidelines will get you off to a great start.


click here for a free website audit


ABOUT THE AUTHOR

Julianne Hamilton

As a Senior Designer at Finalsite, Julianne partners with clients to create beautiful, user-centered websites. She is an avid traveler and spent a year teaching English in Japan — which explains why storytelling vibrancy are at the heart of her work. Julianne invites you to suggest an on-site design session with her – especially if your school is located in Hawaii, Alaska, or anywhere overseas.

  • Best Practices
  • Web Design
  • Website Redesign
There are no news posts to display

Explore More Blogs

Macbook mockup with The American School in London website homepage
Debbie Eisenach

The American School in London (ASL) continues to hold a leading reputation among international schools around the world with thousands of global daily site visitors. Learn how ASL updated their homepage to make use of images, interactive elements, and clear messaging to reflect their mission of an outstanding American education with a global perspective. 

Read More about International School Website Redesign: The American School in London