UX best practices for higher education program lists
By: UX designer Robyn Bragg
Higher ed website program lists are one of the first stops along a student’s pathway. Ensure that prospective students are able about to find out about the programs you offer in an easy, intuitive way.
It’s a well-known truth in web design that to make a site user-friendly, you must highlight and optimize the most important user tasks. Higher education program listings are a prime example. Prospective students will come to higher education websites with several specific questions about your school and its program offerings: what programs do you offer? do you offer program X? What are the program admissions criteria, course offerings etc. for program Y? Ensuring that users can find answers to these questions should be top-of-mind when considering the user experience of your website.
List design guidelines
While schools will differ in the way their program lists are designed, here are some tips to make your program lists usable, intuitive and informative:
- Easily Scannable: Users are on a mission to find out if you have the program they are looking for. Make it as easy as possible to scan the list and find out.
- No pagination: This speaks to our first tip about scanability. Pagination makes scanning much much harder — instead of quickly scanning one long list, users must click several times to determine whether you offer the program they want.
- Add whitespace: The more information you have, the more important the design and organization of the page becomes. Adding space between items helps reduce visual clutter and distinguishes each item from the other, making your list more scannable.
- Keep each list item short: Program lists need to communicate a lot of information quickly and easily. Make the list items short, and don’t overwhelm users with too much information up front. Use “Chemical Engineering” to represent the whole discipline, instead of showing multiple items such as “Chemical Engineering, Biomedical Engineering Option” and “Chemical Engineering, Environmental Engineering Option” at the top level. Users can learn about program details and sub-specialties once they click through to the program details.
- Put important keywords first: Users generally only read the first couple of words on each line. Keep the items relevant by putting the most important information up front: e.g. “English” rather than “Bachelor of Arts, English.”
- Use sentence case: Tempted to catch visitor attention by using ALL CAPS? Avoid it and instead choose sentence case — studies have shown it’s easier to read.
- Break up the list: Rather than having one long list of dozens of items, divide it into manageable chunks of information like alphabetized groups or by faculty.
Higher education program list UX approaches
Choosing the right UX approach for your institution will depend on a number of factors, including: how many programs your institution offers and how much information you want to provide at a glance. Be sure to carefully consider each of these factors.
A note on using dropdowns for program lists: Higher ed program lists should avoid dropdowns unless the list is very very short, as research shows that there are usability challenges associated with selecting items from long dropdown lists.
Simple list
A simple list is exactly what it sounds like: a comprehensive list that includes all of your program information. If you’ve decided to take this approach, your best bet is to logically group the list items under headings. Grouping by faculty, college, or alphabetically are all good options. The biggest pitfall to avoid is listing without grouping; unless your list is very short this can be overwhelming to users.
Ungrouped program list
Grouped by college/faculty
A-Z listing with anchored links or filter
This is one of the more common approaches to program lists because it is both easy to use and easy to implement. Clicking a letter either jumps the user down the page, or filters the list to show only programs starting with that letter.
There is one challenge to be aware of if you’re thinking of choosing this option: visitors may not know the exact title of the program they want, as program names tend to vary from school to school (i.e. Fine Arts vs. Studio Arts) and there is a risk users could miss programs.
Progressive discovery
The progressive discovery option tries to avoid overwhelming visitors with too much information, and requires them them to select a higher-level category, like faculty, first, and then displays the programs within the category. There are two ways to do this:
- Links to category pages: Programs are listed on individual category pages. To view a list of programs, users must first select a category from a landing page. This is a very common web UI approach. However, there are some potential usability issues, as a visitor must know which faculty houses a program to find the correct information — and as departments and faculties vary from institution to institution it could be confusing. If they select the wrong category, they then have to click back to the landing page and select a new category, adding additional steps.
- Accordions: This approach is a great option for schools with a lot of program information as accordions allow visitors to expand list items by faculty to reveal specific program names. I would recommend this hide/reveal approach over the category page option as keeps the page looking clean and facilitates easy browsing and scanning, while avoiding the “pogo-stick” effect where users have to jump back and forth between pages.
Filters
Filters allow visitors to drill down into your program list. Clicking a filter reveals a sub-set of the main list e.g. faculty, degree type, etc. This option allows visitors to quickly narrow the list to show only the programs which interest them i.e. all programs in the faculty of Engineering.
There are two types of filters to choose from:
Simple filters- visitors filter on one dimension (e.g. faculty)
Complex filters- visitors are able to filter on several dimensions at once (e.g. faculty and degree type)
Search
Search gives visitors freedom to use their own vocabulary to find the information they need, in a way that’s familiar and easy to use. With search, visitors are able to experience a speedy interaction that begins delivering results almost immediately.
Conventional search- a traditional search engine experience: visitors type in a phrase, and results are shown upon a results page upon page refresh
Filter-as-you-type search- filters the list dynamically as the user types- one of my favorite options as it’s easy to implement and provides the visitor with a speedy and immediate search experience (users don’t even have to finish typing their query to receive results).
Table style
Whether you’re looking to show a simple list of all majors, or a list with degree types, minors, campus locations, etc. a table is a good option. This approach is especially helpful for very large institutions that offer many programs across different disciplines and at multiple campuses.
Hybrid approach
Many sites use a combined approach, allowing visitors the freedom to navigate to the program they’re looking for in whichever way they find easiest.
A-Z letter options + search
A-Z letter options, filter-as-you-type, filter by campus, accordions, progressive discovery
Finding the best approach for presenting your program list in a way that is simple, easy to navigate and visually appealing is a challenge for any school. My best is advice for those exploring their program list options is this: focus on clarity, simplicity and scannability, and most importantly, test your solution in front of real users before launch. The best thought through solutions are only as good as their usefulness to users.
