Back in 2009, I examined the way in which courses could be listed and searched for at my University and developed a prototype user-interface to increase the visibility of each course we offer.

Things began as a personal project carried out in spare time – an ‘unofficial, unbidden and unapproved endeavour’ I described it back then – with the aim of creating something demonstrably useful that could be further developed.

Revisiting the basics

The design and prototyping was extensively blogged at the time, and the first prototype demo’d (to a packed tent ) at BathCamp BarCamp 2009. You can read more about the UX design in the following posts tagged guerrilla-gardening. In 2011, development of the interface has finally begun in earnest.

Available Data

The greatest limitation at inception was available data. Course information was coming from a content-managed JSON source and provided only course title and web-page URL. It must also be understood that while there is knowledge of formal course data formats, we have none in use that combine course and marketing information. Thankfully, a separate project to manage course web-page delivery through Microsoft Sharepoint has allowed full database access to extensive course information.

New design and UX considerations

Here’s how things looked in 2009:

Scrolling the Course Listings by starting letter

The first change is that we’ll be concentrating on undergraduate courses, so no tab structure.

Secondly, we had a rather ugly switch from course title lists to a title + summary listing from the Ultraseek search API, but the more reliable data source has changed that.
The latest incarnation treats course listings as definitive course records, so when an as-you-type filter phrase is searched for with a click of the search button, the results aren’t re-presented but they’re used to augment the existing course listing with a summary of text from the live page.

Thirdly, stakeholders in the project agreed that being able to update the list the moment you type a letter means we can do away with the row of alphetic teeth that previously mirrored the Content Managed A-Z list pages (they’re days are numbered too).

One new feature on-the-cards is sorting/grouping by faculty, again afforded to us by better data. This should allow for a lightweight, low overhead means of seeing related courses, grouped by faculty and highlighted by the corporate faculty colour.

As-you-type filtering narrows the list as before, but also updates a match count and six other course counters for each displayed faculty.

Type ‘engineer’ for example and you see the bulk of courses under the Faculty of Technology, where you may find other courses related to your area of interest. Type ‘forensics’, and you see courses across Business, Technology and Science, inviting you to examine their differences.

Under the hood

The bulk of the code is still classic ASP (I know, I know). jQuery has replaced Scriptaculous/Prototype for the client-side interaction, a design choice primarily, but also a matter of support knowledge.

Basic course listings are served in an unordered list for static-page accessibility, and they’re then enhanced with JSON-based detailed course information. We’ll be popping the scrolling list to full height for compatibility with mobile devices in the short term.

Of course, the JSON formatting of detailed course information by faculty is an opportunity in itself.

We’ll be using Google Analytics, our tracker of choice for some time now to see if this makes a difference, which given the tens of page loads we’re saving ought be significant. Track Events will also be used to assess every client-side interaction with the Course Finder to inform its future development.

New advantages

It is hoped that as-and-when it goes live, faculties should be able to link directly to their own listings in the main marketing courses area, so eliminating the need for duplicated content in the CMS. An upgrade to IISÂ affords the opportunity finally get course titles in the URLs using something akin to Apache mod_rewrite.

Deployment is imminent.

Effect.Morph simply examines current CSS values and calculates new ones, iterating through a number of transforms according to the duration of the morph. Colour values are handled appropriately, but for positioning only a single value is anticipated. As the second value of background-position is never parsed, you’re limited to horizontal animation.

see a demo of the problem.

So I’ve created an extension, similar to Alexander Farkas’ for JQuery, to manipulate background-position both vertically and horizontally using the same syntax as Effect.Morph.

See it in action on Horizontal and Vertical background animations and Vertical only.

Using the Effect.Morphbgpos extension

Include in the <head> the Prototype and Script.aculo.us libraries as usual. Download the extension and include it after the main libraries:

<script src="bgposeffect.js" type="text/javascript"></script>

Jonathan did a great job describing his HTML and CSS markup (including how to show the final states of the animation using CSS just in case Javascript is not present) so I won’t repeat it all here. Suffice to say this is very similar: an unordered list with an id, containing three items, containing only links.

<body>
...
<ul id="a">
	<li><a href="#">Rivera</a></li>
	<li><a href="#">Miro</a></li>
	<li><a href="#">Varo</a></li>
</ul>
...

Then (somewhere after the list) include the code observers that restyle your links on mouseover and mouseout:

<script type="text/javascript">
$$('#tabs a').each(
	function(s) {
		s.observe('mouseover', function(s){
			this.setStyle( {backgroundPosition: "0px 5px"});
			new Effect.Morphbgpos(this, {
			  style: 'background-position:0px -40px;color:#cc0000',
			  duration: 4.3
			});
		});
	 	s.observe('mouseout', function(s) {
			this.setStyle( {backgroundPosition: "0px -40px"});
			new Effect.Morphbgpos(this, {
			style: 'background-position:0px 5px;color:#c0c0c0',
			duration: 4.3
			});
		});
	});
</script>

Note that in the example each of the observer methods sets the state directly before animating it. Mouseover begins from the original state set in the CSS while Mouseout sets the finished state (as in the CSS link hover state ) before animating back to the original state.

How it works

Very simple. Effect.Morphbgpos is a modified version of Effect.Morph that anticipates having to handle two sets of pixel values. It reads the current states into x and y variables, manipulates them and writes out the appropriate CSS, repeating until the final state is reached.

Handling Other Effect.Morph CSS properties

The extension will pass any CSS that isn’t a background-position property to a new instance of Effect.Morph.

You should be able to replace all Effect.Morph calls with Effect.Morphbgpos, and then simply find+replace them when this functionality becomes available in a future version of the framework.

Limitations

This first version only handles explicit background-position statements, using pixel values, and duration is the only supported option.

As it’s only extending Script.aculo.us by a fraction it seems to be robust across the browsers I’ve tested.

Download & usage

Download the js file here (or here as text). Use just as you would Effect.Morph by settings CSS property-value pairs, and a duration.

Loading the site up, I get no body text where I would expect it to load. The beta doesn’t seem to contain a Script debugger either. Reading through the docs for Safari I have to add the debug menu via terminal window (so no Win specific help then!).

I’m stuck now with a site I need to be exceptionally Safari friendly, but can’t debug. So am also stuck with a browser beta I can’t test any further.

It’s not rocket science, in fact it’s probably not even breadmaker science, but it’s useful. Detects if there’s a history to return to before adding a back button to a menu of your choosing.

Our CMS generated breadcrumb trail reflects the site structure, not an individual user’s path into the site – this was one possible solution to the loss of adequate return navigation when you go from one site area (say a school) to another (a service team perhaps).

Fiddling with Scriptaculous earlier today I had an idea for a CAPTCHA mechanism. Cycling through the $_POST array in PHP gives you the form data, in order of submission.Scriptaculous’ sortable feature allows you to change order of items in a List, so adding an image with corresponding hidden input field gives you a basic puzzle to satisfy the CAPTCHA requirement.

Still comes with all the same accessibility problems most mechanisms have (with the added JS requirement), but saves the need for image generation.This version *can* use any naming convention for the images and input field names, they’re generated and checked by an array so don’t need to be numerically ordered – which could be a giveaway.