When you're undertaking a school website project — whether you're creating a new website from scratch, or redeveloping an existing one — your number one concern should always be user experience. Users should be able to quickly and easily find the information they were looking for when they visited your school website. A big part of this is clear navigation that tells the user where they are, where they've been and where they are going.
But how do you ensure your school website has the best possible navigation to guide your users to their desired location? Here's a quick guide.
Plan your navigation first
Often when you're looking at creating a new website, it's tempting to start with your content, branding and images and then plan your web pages and structure around these components. Planning your navigation first helps your team to get an idea of all of the pages and features you want your website to have, and how they should be organised. This structure is known as a 'sitemap' and it contains all of your website pages and forms organised into a hierarchy to show different levels of information.
When you're developing your sitemap, you can use a spreadsheet, document or even sketch out a diagram that outlines how you'd like the information to be organised. This will also help you to identify any missing information or images that you can pull together while your site is being developed.
Consider your primary vs. secondary navigation design
Design is another crucial component of your school website’s navigation. While it is important that there is consistency with all other website components, it is even more important that the navigation fonts are clear and readable, that the colouring makes the text stand out and be visible to the user, and that functionality comes first.
Your primary navigation consists of the visible links in your main navigation. They usually sit along the top of your website, and can be centre, left or right-aligned depending on your website design. Some website designers play with main navigation by running the menu vertically down your website, either on the left or the right-hand side. As you scroll, some website menus become 'sticky' — that is, they append to the top of your browser as you scroll down the page, so they are always within reach, no matter where you navigate.
Your secondary navigation appears when you hover over a primary navigation item. These secondary, or 'drop-down' links help to keep your main menu clean and keep your pages organised. They usually follow your sitemap structure and are organised in a way that will make sense to a user. It's important to keep your secondary navigation items to a minimum as well, to stop your menu from becoming overcrowded and ensure the user doesn't become overwhelmed.
Label your links clearly
Not only is the design of your website navigation important, the words you use are equally important. Make sure your links are labelled clearly and accurately using the same language that your target audience uses — note: this is not necessarily the language your school uses. For example, you might use the word 'marketplace' when referring to a place on your website where parents can purchase books and uniforms. However, you might find that most parents simply refer to your marketplace as the uniform shop or the book shop. You should always match your visitor's language where possible to reduce the amount of time they need to spend guessing and clicking around to find what they're looking for.
Consider your mobile experience
There's a really good chance that the majority of your website visitors are arriving on your site via a mobile device (pull up your Google Analytics device stats to check!). This means, you need to ensure you're providing a good navigation experience on a mobile device as well as on a desktop. Enter the hamburger menu.
A hamburger menu is an icon made up of three horizontal lines that represents a hidden primary navigation. It gets its name because it looks like a hamburger with the lines representing the top and bottom buns and the meat patty in between. It's a much better experience than displaying all of your primary navigation items in tiny text, or allowing them to take up the majority of your screen upon load.
Make sure you A/B test!
If you decide to try out any of the ideas in this blog post, make sure you're continuously testing to find out what changes are making your website easier to navigate. A/B testing is a process where you run controlled tests to determine which design changes perform better.
Once you've run a few A/B tests, you'll have a better idea about which types of navigation changes help your visitors to easily navigate your website.
Remember that navigation is only one part of an effective website design and that it needs to be consistent in design and functionality with the rest of the site. Need some help working out the design of your school website? Digistorm has an expert team of UX/UI designers and web developers who can help. Talk to Digistorm today about a new school website!
.png)