Course Finder update

Posted on October 20, 2009 by Anthony

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

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

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

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

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.

Designing for Previews

Posted on September 29, 2009 by Anthony

For some time now I’ve been thinking about writing a post on designing for previews, those small boxes that pop-up over links on all kinds of sites.

My mind has been focussed by a few chance events that have lead to a striking example of the difference that adding a few design elements to a layout can make.

My (current!) blog layout is fairly simple, I’ve stripped back foreground images and simply have a title ‘tab’. For reading, it’s probably fine, but in a thumbnail preview at under 300 x 200 pixel dimensions, the layout does me few favours in grabbing and retaining viewer attention and inciting, inviting them to click.

We have precious little time to grab reader attention at higher resolutions, never mind when they’re taking a split-second to peek through the letter box.

So when you consider the great pains many of us go to create pixel-perfect, high usability, flexible or fixed layouts to get our brand, our ideas or our tone expressed it makes sense to make sure that when you have content worth linking to that it does the same.

So the story of this post goes like this: I took a photo on the Sunday at BathCamp, of the stencil they used to brand our complimentary camping chairs. A marketing masterpiece in their own right, snaps of these chairs bearing the BathCamp logo are turning up everywhere.

Blissfully.Me blog link preview

The next day I wrote up my thoughts on BathCamp, and sent them live. Shortly after publish (nothing’s ever really finished is it?) I added the stencil snap.

This morning I see a link to my post on Ann Oldroyd’s Blissfully.me blog, and saw my page appear in a pop-up when I hovered over the link.

Without that image the small type, small header, no medium-sized design elements would have made the page look simply like a page of text.

With it, it makes that one postÂ signify in no uncertain terms what the posts about and adds some visual interest to another otherwise textual page. In some ways image is enhanced by the lack of surrounding interface elements.

The previewed post

Words are useless when you can’t read them, so in my case previews clearly matter. In this instance the preview service understands this and has picked out keywords to aid the reader.

All of this will be considered with every new post, new site I develop and with any future redesigns I undertake.

BathCamp 2009, Buckland Dinham

Posted on September 28, 2009 by Anthony

Just back from BathCamp and keen to blog the things that most impressed me. This was my first time at BathCamp and my first ever BarCamp so was not sure what to expect.

Friday

Excellent meal at The Bell in good company then retired to the Media Barn for a spell before climbing under canvas nylon.

Saturday

Woke early helped with the registration prep’, thick coffee n’ Croissants then straight into talks.

Giles Turnbull’s talk about his part in the URL Shortening phenomenon was good, especially how he linked it to digital and hardcopy preservation and the ways in which we retain, discover and prize certain formats (papers, journals, newspapers) of old data. He then introduced the Newspaper Club to us, and how it’s helping create traditional format versions of digital content.

Dan Hilton talked about clients – how they understand and interpret digital media, often come to inappropriate conclusions on cross-media marketing; and agencies – how they’re often too willing to benefit from clients misunderstanding of the field, and ways that both can work better to make the most of the medium.

During questions Dan also pointed out the ways media providers are sharing cookie information to market recently viewed items on previously visited shop sites amongst similar content across other sites, reminding visitors of products they’ve examined.

Rick Hurst’s talk about the features and uses of JQuery interested me as it mirrored much of what I’ve been doing in recent weeks with the Guerrilla Gardening project, with the problems of access to data, hijacking HTML content for UI enhancement and problems formatting data from Content Management Systems.

I’m now reassured that switching to JQuery from Prototype will be trivial as DOM traversal, helpers, chaining, events and actions barely seem to differ between the two.

Caz Mockett showed us how she uses Blurb for high-quality self publishing of her photographic content. The results were impressive, something I may pursue for future art projects.

Rich Quick talks HTML Email

Chris Leonard presented his thoughts on providing publishing & discussion of scientific research outside of the conventional journal, using extant services as a starting point he discussed ways to provide effective peer review, reward schemes and metrics.

Rich Quick presented insights from his recent work on HTML emails for a number of clients. How we need to work HTML in ways that would make us sick to even to think about normally, considerations on the range of major desktop and web mail clients, quirks of each, how to make the best of the anticipated viewport with appropriate calls to action, A-B Split testing to provide feedback on more effective layouts.

Rich also discussed the issues of permission based marketing, legal and privacy concerns as well as the use of online services such as Campaign Monitor.

Saturday night saw a great barbecue, sponsored beer and cider, a band and a camp fire under a clear sky lasting into the early hours.Â Pleasing to meet such a diverse bunch of dedicated, motivated and knowledgeable people doing interesting work and more than willing to share it with their peers.

Camp fire beneath The Plough

Sunday

Excellent breakfast helped everyone recover from the night before, then I attended Alex T’s talk on the fun he’s been having using a PHP/MySQL API to track Forex currency trading.

Sunday's tracks

After which I gave my (first, ever) BarCamp talk about the work I’ve been doing to improve the University Course Finder using html hijacking techniques, making data sources from the CMS and using AJAX and JSON to provide an enhanced user-experience with zero impact upon the usual management of course information. More information on this ongoing project can be found in the Guerrilla Gardening category.

Shortly after we said our goodbyes and began to head home. In the last twenty-four hours I’veÂ probably gained more insight into the tools and techniques I use now and will go on to use than I have in months. it’s also good to see those areas where you’re exactly on track with your own developments and be able to help others with theirs.

More photos on Flickr of BathCamp09.

code and effect

@AM_Doherty

Tag Archives: BathCamp