Subscribe:   Posts   |   Email   |   Facebook   |   Twitter

Internet Marketing and Web Development in Higher Education and other tidbits…

Rethinking the UX of the Program Listing

10 Apr 2012

written by Michael Fienen

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!

The content of this post is licensed: The post is released under a Creative Commons by-nc-sa 3.0 license

About the author

Michael Fienen

For six years, Michael served as the Director of Web Marketing at Pittsburg State University. Currently, he is the Senior Interactive Developer at Aquent and is also CTO for the interactive map provider nuCloud. When it comes to web communication, he focuses very heavily on interpersonal communication components of websites, as well as content considerations that must be taken into account when building usable sites.  He is an active supporter of the dotCMS community, accessibility advocate, consultant, internationally featured speaker on web issues, and general purpose geek who wears many hats.

Michael's Facebook Michael's LinkedIn Michael's UWebD Profile Michael's Twitter Michael's Flickr Michael's YouTube Michael's FoursquareProfile Michael's Lanyrd Profile Michael's Tumblr Account Michael's Slideshare Profile

This post was written by - who has written 99 posts on .eduGuru

  • Kevin Miller

    Hate to ruffle my own feathers, but I think the Cal State Monterey Bay academics page is pretty sweet too:

    Note that we also added a ton of synonyms for our programs, as they have funny cross-curricular names, so if you search “history” you get three programs that offer history. All this is a long HTML comment in each program’s list.

    • Michael Fienen

      Ruffle away! It’s okay to show off around here. I’m glad you’ve considered synonyms for your programs, understanding users don’t necessarily use the “official” words for things is so important.

      I might suggest, if you want to invite engagement with your filter tool, make it a little more obvious that it’s interactive. For instance, maybe a glow or or bit of color on hover over the search box. Or perhaps adding a magnifying class icon or such. Issue being, at first glance, I scanned right over the search box the first time through. It looks a bit like a label or header instead of a search box. Think about how users discover features on a website, visually and by moving the mouse around, and use that to your advantage.

      It’d be neat to see you leave it as is for a month and track usage, realign it a little to make it more apparent, then compare a month afterwards and see how it affects usage numbers.

  • E. James Ford

    Well, as long as we’re ruffling feathers here :-) … This filter style of program listing is exactly what we integrated into the NYU Steinhardt program listings a couple of years ago.  It allows you to filter by different tags/categories using the sidebar and inline content.  The result has been EXTREMELY successful with three big metrics:1) This is, by far, our most popular page on the website… But that’s no surprise.2) The average time on the page is less than 1-minute (this is good, because the idea is for students to find the program they want *quickly* and then get them off to the program website.3) The bounce rate for the page is around 30%… Below the site-average of 43%.And… Its kind of fun to use, too.

    • Michael Fienen

      Love this. Great job.

  • lastguy

    Great article and nice examples. Here’s one we launched at Towson University last October:

    The stats are thus far are promising: avg time on page :28 secs, bounce rate 1.37% and it’s  #3 page on site after home page and admissions main.

    We’re already preparing refinements to it, but user testing also confirmed that it appears to be giving users what they want.

  • Christopher Gabel

    Great article.  I noticed that BU is doing this type of filtering with isotope for their engineering directory.

  • Dan Jackson

    Really nice article. There’s a lot of really excellent information about search patterns, and faceted navigation in particular, at 

    And on the topic of feather ruflfing:

  • Kim Campbell

    WOW! Such a great post on a topic that’s really important. I read the Noel Levitz reports on web content each year, and so we know this is an important section for users, but it’s also a minefield of disastrous proportions (speaking from my own experience!). New to this site but really enjoying the content – nice to see a fellow Kansan with this post. 

  • chen guoxin

    We declared that we were deeply interested. The Professor went on : 
    In his hand, the golden Papa has a letter; Cheap MBT Shoes or Cheap Toms Shoes all them onl  and after he has made his excuse for disturbing us in our Infernal Region with the common mortal Business of the house, he addresses himself to the three young Misses, and begins, as you English begin everything in this blessed world that you have to say, with a great O. O, my dears,” says the mighty merchant,  MBT Shoes I have got here a letter from my friend, Mr –” (the name has slipped out of my mind; but no matter; we shall come back to that; yes, yes — right-all-right). So the Papa says, I have got a letter from my friend, the Mister; and he wants a recommend from me, of a drawing-master, to go down to his house in the country.” My-soul-bless-my-soul! MBT Shoes Sale and Toms Shoes Sale store online  when I heard the golden Papa say those words, if I had been big enough to reach up to him, I should have put my arms round his neck, and pressed him to my bosom in a long and grateful hug! As it was, I only bounced upon my chair. My seat was on thorns, and my soul was on fire to speak; but I held my tongue, and let Papa go on.  Discount MBT Shoes online sale and Toms Outlet too Perhaps you know,” says this good man of money, twiddling his friend’s letter this way and that, in his golden fingers and thumbs, perhaps you know, my dears, of a drawing-master that I can recommend?” The three young Misses all look at each other, and then say (with the indispensable great O to begin) O, dear no, Papa!  MBT Shoes But here is Mr Pesca –” At the mention of myself I can hold no longer — the thought of you, my good dears, mounts like blood to my head — I start from my seat, as if a spike had grown up from the ground through the bottom of my chair — I address myself to the mighty merchant, and I say (English phrase), Dear sir, MBT Outlet shoes and Toms Shoes Online Store Sale  I have the man! The first and foremost drawing-master of the world! Recommend him by the post tonight, and send him off, bag and baggage (English phrase again — ha!), send him off, bag and baggage, by the train tomorrow!” Stop, stop,” says Papa; is he a foreigner, or an Englishman?”

Proud Member of BlogHighEd University Web Developers eduStyle

© .eduGuru - Internet Marketing and Web Development in Higher Education and other tidbits…. Powered by Wordpress. | Advertiser policy