Got content. Got concept.

View the category Guerrilla Gardening for the full story

On day one I had a rough plan of how to make the improvements to the Courses UI.

The various search, A-Z and listing interfaces, combined

How it’ll work

The pencil sketch above is a fair representation of my plan – each Course Type available is clearly visible near the top of the view. The Undergraduate courses tab is activated by default, and the full list of clickable Undergraduate Course titles appears in the ‘results’ box below.

Switching tabs loads the Course listings for that Course Type into the results box, and the A-Z and Search box now operate on the new listings.

Typing into the Search input box filters the current listings by the phrase you’re typing, but if you click ‘search’, you are taken to the search page and your query results are shown (I’ll return to this later).

In the absence of Javascript, the interface should be split back into the sequential copies of the A-Z links per Course Type, the way it appears now, and all functionality back to basics.

Refining the proposed UI

Looking at the diagram, I wonder how I’ll fit a whole alphabet in the space, alongside a search box and submit button. I may have to sacrifice the scant advantage it brings in order to make the page easier to understand.

However the A-Z links are a feature of the page as it now stands, so will be part of the original and non-javascript views at the very least. I could perhaps make the options (re-) appear when a control is moused over or clicked. For the moment the feature will be developed whether or not it makes it to the final cut.

As-you-type Course Filtering

If retained, the A-Z links will act as shortcuts to the filtering action of the Search input box. This will be an improvement over their current action, which returns pages of links based on the first letter of the course title.

Right now, clicking on ‘A‘ will give you Applied Psychology, but not History of Art and Museum Studies.

The javascript filtering should instead detect the chosen letter at both the string and word beginnings. Clicking on ‘A’Â would give you Nursing BA – Adult, Graphic Arts and Pharmaceutical Analysis.

It will also include every course with ‘and‘ in it, so some common word exclusion will be necessary too.

Returning Search results

Right now Search results are displayed in the Search context – our query takes you away from the current page to the search server and a web page is generated to show results. This new scheme’s aim is to keep navigation within the Course Area, retaining appropriate navigation.

Using the Search facility’s API, the results should be retrieved as XML, parsed and formatted then shown in the same Course listings ‘results’. This means we’ll need to highlight the difference between search results and Course listings.

The next stage will be getting some working examples going. First though I’ll need to note the order of the dynamic events incorrect rendering of the tabs and results.

Order of events in the JS driven UI

The page hinges on the Course Type, so switching Course Type can trigger resets of other elements such as the text in the search area. It’s probably best to clear the results area too – in readiness for new AJAX loaded data, and allowing the visual change in the tab from inactive to active to occur only on successful load of that data – otherwise network issues could result in a very confused page.

In addition to the clickable events, there’s the periodic routine checking the contents of the Search box and filtering the list accordingly.

I’ve tried to anticipate what should happen along with each event below:

That’s enough forward planning for the moment. It’s time to start prototyping.