Tag Archives: AJAX

Course Finder update

Posted on by
Reply

Work on the Course Finder has increased, now it has been positively received. I’m now working to improve the usability even more, and ensure reliable data sources can be put in place, along with workflows to manage them. Here’re some annotated shots of the current state of development.

First Load

The default view will load Undergraduate Courses, or the previously chosen award type if you’re returning from other pages. The Course List will be to view.

What you'll see on first load

What you'll see on first load

Where previously A-Z Letter links would filter out non-matches, they now simply scroll down to the selected point in the alphabetised course list.

When the Course JSON file is first loaded, and on each subsequent load, checks are performed to see which letter of the alphabet is not represented (we have few courses beginning with ‘K’, for example), and those letters are greyed out.

Scrolling the Course Listings by starting letter

Scrolling the Course Listings by starting letter

As you Type Filtering & Highlighting

As planned typing in the box filters the Course List. Now a message appears reporting on the number of courses visible compared to the total count. Clicking the ‘X’ in the field will clear it, and restore the full list. Clicking an A-Z letter will restore the full list and scroll as required.

As you type, the part of the Course Title where your phrase appears is highlighted in the text.

Filtering the Course Listings by key words

Filtering the Course Listings by key words

Inline Search Results

This feature has been a long time coming. Search results are loaded via an XML-to-JSON filter script adapted to limit the search to the selected award. Title, relevance score and a basic summary are displayed. The JSON data contains everything needed to paginate the results, a feature that will follow. The script returns the data within an XJSON header which is then parsed into place on the page.

Rendering live search results inline

Rendering live search results inline

Showing Course search results gives rise to layout issues: where to put the Course listings and how to differentiate between them. Sub-tabbing was one option which was discarded, and in the end the choice was to shift the Course listings down the screen and to put Search results in their place, with a button to close them and restore the prior layout.

Search results use an alternate list style too, to highlight the expanded information available.

Switching to another Award Type hides (gently…) any visible Search results and restores the default listings view, loading the appropriate set of Courses.

Course Finder Demo

Posted on by
Reply

Here’s the presentable, standalone variant of the demonstration Course Finder I showed at BathCamp.

note: Compatibility View required for IE8, I’m working to fix this now.

It’s probably best viewed on this project’s category page.

Tested in a handful of browsers including IE8, Firefox, Chrom and Opera.

The Iphone demo web application will follow shortly.

Planting courses in the Guerrilla Garden

Posted on by
Reply

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

The Undergraduate Courses are pre-loaded on first view

A-Z Links – filtration and index

4coursefinder_byfirstletter

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

3coursefinder_searchfilter_

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

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.