Rethinking the UX of the Program Listing

Take a moment and think about your listing of majors and minors. Really think about it. Is it good? Does it reflect how great your offerings are? Is it even accurate? Is it just a stupid, boring, damned list (if you’re interested in something a bit off the beaten path, check out RIT’s Pathfinder system or look at what the University of Arizona is doing)? If the answer is yes, I want to kick you an idea. Filtrify.

On its face, Filtrify is just another jQuery plugin that you can use for atomic control of a collection of DOM elements. Which is cool enough I suppose. But check out this example on their demo site. Now, instead of movies, imagine it’s student action photos from different programs, or some other visual representation of the program. Instead of genres and actors and directors as filters, you have schools and interests and jobs. It would leave you with an interactive program listing that invites a user in to play and explore. In this particular case, Filtrify is serving as an extension of the live filter design pattern – enabling a user to see all the available options, and then selectively removing that which isn’t relevant to them. People like toys, and they are inherently curious. Create an environment that promises an opportunity for exploration, and you’ll net some explorers.

But wait, it doesn’t have to be Filtrify per se, either – that’s just one idea. Something like filtering blocks would work just as well. As would something you come up with entirely on your own. The trick is, you need to start rethinking the UX of the program listing (and probably a lot of other stuff on your sites, too), and really consider how your tools may be impacting prospective students’ ability to see you as the right institution for them. Jakob Nielsen pointed out how bad lists could be nearly a decade ago (see #7), yet schools seem to be married to them for lack of the desire to construct a better way. People don’t find long, unfilterable lists to be user-friendly at all. We already know that 17% of students will drop a school from their list if they can’t find what they want on your site. Even more will mark a school down if they have a bad experience. What is that risk worth?

The underlying issue here is that schools need to start putting more effort into the next step of their web design processes, and start looking at the user experience of what they are making. It’s easy and fast to slap stuff together and move on, but there is enormous value in usability testing. It’s part of the overall process that is too frequently skipped, since a webpage published is frequently seen as “good enough.” While the old fashioned linked list may be functionally adequate for the data being displayed, it’s a terrible way to encourage interaction and leave a good impression on your visitor.

Even if you didn’t want to use a library like Filtrify, you can still come at the problem of filtering content in a user friendly way by falling back on some basic principles like LATCH. LATCH is a content filtering methodology that most users are, consciously or not, readily able to adapt to. That makes it a great place to start when trying to solve the problem of helping people find what they need in any large archive of structured information.

So how could we apply LATCH to a set of link filters for our program listings? Here’s one example (and there are plenty others):

  • Location: This could be a physical campus location, online programs, or a more meta concept like a college or school.
  • Alphabetical: This pretty much goes without saying. But keep in mind your taxonomy might not be the same as the visitors. Don’t be afraid to overload topics and point them to the same overall detail page.
  • Time: This one can be harder, but could be length of the overall program, number of credit hours, or number of total semesters.
  • Category: Think generalized subject or job areas here. For instance, “teaching” will likely return a number of different specializations.
  • Hierarchy: You could use this to break down by schools and departments, or requirements, or to set up graduate tracks

The insane part about all this is that in many cases it would only take a little work to make fairly significant usability improvements over the current lists of programs. Something as basic as a live search filter would provide users with at least a little empowerment over the current model for many schools. Empowered users will be engaged users. And it’s much easier to get an engaged user to fill out an application. And on the other hand, if the technology you’re employing on your website doesn’t instill them with faith in you to be modern and student-centric, then they’ll move on.

Majors, minors, and programs are just one of many examples that could benefit from a little of this kind of TLC. I mention it as the focus of this post mainly because it tends to be really high in the funnel though. But how about:

  • Student organizations
  • Offices and departments
  • Faculty listings
  • Events
  • Courses

How many things could you improve with just a few hours work, and a little focus on the overall UX of the content you are trying to present? Which do you think your visitors would get better use out of? Are you particularly proud of your program listing page? Share it in the comments below for others to see. And if anyone actually does build a site based on Filtrify, let me know, I’d love to see how it turns out!