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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

ABOUT THE AUTHOR

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.