Designing college and university website navigation using UX design
By: UX designer Robyn Bragg
Visitors come to higher education websites for all kinds of different reasons. It’s your job to make sure they can find exactly what they’re looking for in a way that is fast and efficient.
Creating a navigation scheme for a higher education website can be a challenge. They tend to be large, complex, content heavy sites that serve incredibly diverse audiences. Home pages in particular can easily fall prey to competing priorities. In fact, this can be such a problem that web comic website XCKD created this rather apt depiction of a university website:
http://xkcd.com/773/
http://imgs.xkcd.com/comics/university_website.png
So, who are your audiences?
When it comes to the homepage of your college or university website, the list of audiences is extensive. You must find the best way to provide content for your student population — prospective, current and international — along with the institution’s staff and faculty as well as alumni, donors, the media, job seekers, and so on, and so on. Ultimately, you want to design the page in such a way that each visitor leaves your site having found exactly what they were looking for, in a quick and painless way. And the only way to do this is to think long and hard about whom your site serves and what information they come looking for.
It’s important to clearly identify no more than 3–4 primary audience groups, and keep the site focused on their needs. Secondary audience groups shouldn’t be neglected, but should not be the focus of your site’s navigation and home page. If the site tries to be everything to everybody, it will serve no one well.
There are two questions you must ask yourself before embarking on a navigational redesign:
1) What are your visitor’s key tasks?
Before developing a navigation scheme, it’s essential to think through the key tasks for each of your primary audience groups. Ideally, you would do this by conducting user research and asking real site visitors about the kind of information they came to the site looking for, as well as what they may find frustrating or unintuitive on your site or other similar sites.
For example, prospective students might come to the site with some of the following questions:
- What programs do you offer?
- I want more information about program X
- What scholarships and financial aid are available?
- What extra-curricular activities are offered?
- How much does it cost to live in residence?
- How do I arrange a campus visit?
- How do I apply?
Alumni, on the other hand, will have very little interest in that information and may instead want to know how to change their contact information, details of upcoming alumni events, or how to donate money to the school.
2) What are your institution’s high-level goals?
For any website, finding a balance between your organization’s online goals and your user’s needs is essential. While you may need to add additional content to support institutional goals like communications, fund-raising, or increasing enrollment, this should never be to the detriment of your users’ key tasks. If you do end up going that route, you could find yourself the subject of web-comics like the one above.
But don’t worry! We’re here to help.
Navigation approaches
Persona-based: This type of navigation zeros in on your audiences and tailors the site navigation directly to them. It guarantees that visitors to your site won’t be stuck wandering around trying to find what they’re looking for, as the content most relevant to them has been conveniently grouped together.
Topic-based: You will see topic-based navigation in some form on most college or university websites as it easily supports access to key information from across the organization. While some aspects of this approach are necessary, it may not always be the easiest way for users to access all of the information that they need.
Topic-based
Topic and persona-based hybrid
Task-based: This approach presents common site activities to users (e.g. “review programs,” “book a campus tour”). The types of activities or tasks will vary depending on the institution and who you have identified as your key audiences.
Mega menus: The goal with this approach is to provide the visitor with a high-level overview of the site without having to dig too deeply into the site. Mega-menus can be a great way to surface a lot of information immediately and help them jump directly to the most relevant item. But it is important to make sure that they don’t become a dumping ground and are structured so that they aren’t too overwhelming.
Microsites: In order to simplify the navigation of your higher ed site, it’s worth considering a site structure consisting of relatively independent microsites. Contrary to popular belief, it is not essential for users to be able to access every page on the website directly from every other page. For instance, a high school student researching isn’t likely to be interested in the information geared towards alumni or university staff. This means that each microsite can have its own unique top navigation relevant to the site’s audience and content meaning that those audiences can find relevant content more easily.
Navigation Best Practices:
- Use language that makes sense to the user. it’s easy to forget that outside users may not be familiar with jargon, or institution-specific terms. Search logs are a great place to see which are the most common terms used by your users, and it’s worth usability-testing your navigation to double-check that the labels make sense.
- Present information in a way that is intuitive to the user. This doesn’t mean in a way that is intuitive to you. As someone intimately familiar with your content it’s easy to forget how those outside your organization conceptualize the information. Again, usability testing is your friend.
- Ensure that users can quickly and easily complete their most important tasks.
- At all costs avoid “org-chartitis” Just because your institution is structured a certain way does not mean that your website should mirror your organization’s hierarchy. Users don’t know (or care!) which department is responsible for which kind of information — all they want is the information they need to get on with their day.
If you take away one thing…
Usability testing is key; this point cannot be over-emphasized. No matter how well-thought-through your navigation scheme is, it’s essential to test it with real users from each of your primary audience groups, preferably early in your design/development process. Higher-ed sites are complex, and there are bound to be aspects of the navigation which don’t work as well as you hoped. Usability testing allows you to catch major issues before you go live.
