When done right, school website navigation shouldn’t even be on your visitor’s radars. Poor navigation, on the other hand, sticks out like a sore thumb. It’s confusing, clunky, and will likely lead to a devastating drop in website traffic.
Website navigation should be simple and intuitive, allowing visitors to explore your school website with ease, locate the information they’re after, and eventually, convert into a lead. Understanding the intricacies of website navigation best practices can be a hurdle, but luckily you have the help of the Beyond Web design team. In this post, we’ll share our tips for creating better school website navigation and wrap it all up in five easy steps.
Laying the foundation
Well-designed navigation encourages visitors to stay on your school website for longer, ensuring that no content goes unnoticed. As a general rule of thumb, less is more. Your website structure should enable visitors to land on any page and be able to find the information they’re after in just three clicks.
The least amount of clicks families make on your website, the better experience they’ll have. Just like your content should be crisp and concise, we recommend keeping your pages to a minimum as well. If you can, try to combine relevant content onto the same page and take advantage of internal links and buttons to direct visitors to other areas of your website.
Another key navigation consideration is ensuring that your target audience understands the language or terminology you’ve selected for page headings and categories. This is more important than you might think! All headings need to be easily recognized and understood to allow for easy navigation, so be sure to use clear, simple language.
Of course, you’re in good hands when it comes to navigation if your school has a Beyond Web site! Our team guarantees that your website will be built according to the latest in website best practices and will be there to guide you every step of the way. Let’s jump into a few examples of how we’ve created optimal website navigation for some of our schools.
Minimal top navigation with Richmond High School
The Richmond High School website is a stellar example of how to make use of a simple top-level main navigation. This navigation style provides visitors with a quick overview of what they can expect to find on your website and allows them to easily jump to other sections. To keep things simple, the school has categorised its content into five main categories: About, Learning, Life@RHS, Our Team & Enrolment.
Sticky navigation
The website also features sticky navigation (a fixed menu that doesn’t disappear when a user scrolls down the page) for extra accessibility. Usually, this menu will be a condensed version of the main navigation, providing quick access at all times without having to scroll back to the top of the page.
Navigation breadcrumbs
Breadcrumbs (not the edible kind) are a trail of secondary navigation items, usually displayed at the top of the page, which helps visitors understand where they are within a website. Richmond High School’s website uses breadcrumbs across the entire website to increase both usability and user experience. Essentially, it means visitors can easily go back to the previous page or return to the homepage.
Exploring hamburger menus with Prahran High School
The Prahran High School website features a ‘hamburger’ menu – an icon that usually appears stacked up just like a tasty hamburger would. This menu style is a great way to create a clean, minimalist look, especially if your website has many top-level pages that would otherwise appear too cluttered.
You might notice that hamburger menus commonly appear on mobile and tablet designs as navigation space is often limited. The school has also added portals and key call to action buttons into the menu for easy access.
Advantages of two-level navigation
Prahran High School’s hamburger menu provides two-level navigation, helping to simplify the user experience and avoid confusion. Two-level navigation means that once visitors reach a content page on the website, sub-navigation is used to allow them to further explore the site.
What to include in a website footer
The importance of a website footer is often underestimated. They’re an essential navigational tool containing key information that improves your website’s overall usability. Not every footer needs to be jam-packed with long lists of every page, we can see how the Lower Plenty Primary School has successfully used theirs to provide just the highlights.
When planning what to include in a footer, we include elements like; contact details, social icons, your school logo, and affiliate logos, copyright notices, and T&Cs. Your footer holds a lot of important information, but it’s usually content that doesn’t need to appear in the main navigation or above the fold.
5 steps to better school website navigation
1. Get into character
It’s important to think about who is going to be using your school website. What are they looking for? What are their goals? What are the most important messages to convey? Try to get into character and think like a prospective family so that you can better understand how they might navigate your website.
2. Categorise your content
Start by arranging your pages into top-level groups and remember, less is more! You can always use sub-categories to provide your visitors with additional information.
3. Structure second and third level pages
Depending on the extent of your content, you may choose to structure your content across two or three levels. Try to stick to two levels wherever possible, as content deeper within your navigation is harder to find.
4. Consider your navigation options
Keep your options open when it comes to navigation styles. Think about using sticky navigation, breadcrumbs, and sidebars to help your audience navigate through your website with ease.
5. Do your research
Take the time to review other Beyond Web sites to see which style you think would best work with the content you have on your website. If you’re unsure, we’re always happy to lend a hand.
