Prototype growing nicely

View the category Guerrilla Gardening for the full story

Here’re some screens of the new AJAX driven course finder. I’ll shortly add a hosted example but in the meantime the screens are sufficient to discuss some of the observations made now that development has begun.

First load

The Undergraduate Courses are pre-loaded on first view

A-Z Links – filtration and index

It became apparent quickly that having the A-Z links work the same as the Search Field (filtering by word beginning) could be confusing. For example with 5 Courses to view, a word-beginning filtration could show 5 courses who’s titles begin with A.

So the A-Z links operate as before, they filter purely on title starting letter.

I intend to change this however, from a filter that removes non-matches to a scroll mechanism: rolling the full Course List down to the starting letter, not unlike a thumb-tab in an address book.

Search Field Filtration

Typing in the Search Field removes any course that doesn’t contain the words being typed. It’s rudimentary right now, filtering only on complete phrases starting with word-beginnings, but the quantity of content being dealt with, and the nature of the search requirements could mean that this is lightweight approach could suffice.

Initial testing with a single volunteer was positive.

The … Iphone

The layout used for prototyping is deliberately flexible to cater for varying screen sizes and devices. Overall the layout worked well on the smaller screen, of course buttons sizes will need to be increased for SSDD users.

I had to test the initial offering on a device, and had made an oversight I won’t be repeating. Using the onscreen keyboard obscures the dynamically updating list of courses, until you click the ‘done’ button. Additionally, autocomplete was trying to make a word on my behalf when all I wanted was the first few letters to narrow my results.

The on-screen keyboard renders the dynamic as-you-type filter useless until you've finished typing

For mobile devices then providing just the A-Z Links will be a faster mechanism, and we can save the overhead of the periodic updater routine for those users too.

JS/DOM event handling

At present no controls are placed on the tabs aside from firing the AJAX requests, but the actions in the Search Fields and A-Z Links are mutually exclusive, especially with the periodic updater running, so require additional safety measures.

Clicking an A-Z Link disables the periodic updater. Actions in the Search Field restore the periodic updater and reset the visual state of the A-Z Links.

What’s Next

A live working example, more on the mobile usage, and a little user-acceptance testing.