Tag Archives: UI

Mobile Web, done well: m.ox.ac.uk

Leave a reply

I’ve read a few things in the last week about Oxford’s Mobile App – mainly tweets about #ucisa10 and various follow-up blog posts – so thought I’d have a look. I am particularly pleased to see that their well put together and well received mobile provision is a web app rather than a native app or proprietary service offering.

Critically this development route and the technologies applied affords them every opportunity to improve, amend and react to criticism and suggestion both quickly and simply.

Even better, they’re using services such as Open Streetmap for their location services, various location code mechanisms and the supplemental use of QR Codes and barcodes.

Looking around the m.ox.ac.uk app site you find some interesting solutions.

For the Iphone and browsers such as Opera Mini (for Windows Mobile), they’ve re-used their homepage iconography to create short, meaningful breadcrumb navigation as you drill deeper.

m_dot_ox_breadccrumb

The risk of lengthy trails is eliminated with the use of ellipsis characters ( … / …).

They’ve a desktop site for previews, information on data costs and usage. A very thorough approach.

More info’ about developments on m.ox.ac.uk can be found at: http://m.ox.ac.uk/desktop/#blog.

Course Finder Demo

Leave a 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

Leave a 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.

Guerrilla Gardening, day two

Leave a reply
View the category Guerrilla Gardening for the full story

Adapting the Course page content

Any hopes of getting hold of a clean and complete data source of every course’s details were soon dashed. The CMS – which of course thinks in pages in most instances. This is great as it makes updates and devolving of content submission far easier, but I need to work around it.

Title, URL, and Course Type

The CMS will easily give up Course Title and URL, but accessing award, availability for clearing and other attributes of the pages would require far more work, possibly HTTP spidering.

The structure we gave to the Courses area when last reworked thankfully lends itself well to grabbing these additional attributes -Â denoted by their publication. Each of the three Course Types are published to a location determined by its award type:

<site root>/courses/undergraduate/

<site root>/courses/postgraduate/

<site root>/courses/cpd/

With a new templated page in the CMS connected to the content of the Course pages, I can quickly generate a rough data source for Course Title and URL into a list. I can bypass the Compliance and tidy management tools for the template, allowing me to make whatever document format I need from the source.

Availability for Clearing

For a short time each year the Clearing attribute comes into play. The courses available for Clearing are a subset of undergraduate courses, created by adding an attribute to each page.

Another great feature of the CMS is keyword assignment, which allows pages to be aggregated into lists of links and titlesfor use elsewhere.

Keyword assignment list creation in the CMS

Keyword assignment list creation in the CMS

The Clearing keyword allows me to create such a list, giving me my final data source.

For the moment I’ll leave each output page as a simple HTML list of the format:

<ul>
  <li><a href="courseurl_1">Course Name 1 <a/></li>
  <li><a href="courseurl_2">Course Name 2 <a/></li>
</ul>

With a snapshot of data output to files, I can begin to put together some of the proposed components. An added bonus here is that my simple data sources have by necessity been separated by Course Type, which is no bad thing as that’s the fisrt fork in the road for most visitors to the Courses pages.

With luck, more tomorrow.

Guerilla Gardening, day one

Leave a reply

Plot Chosen. The Courses area.

View the category Guerrilla Gardening for the full story

It’s a high traffic part of the site presenting probably the most important pre-application content we have. Over the years it’s had gradual improvements, most notably a modified mooTools accordion feature to accommodate the various Course Types in easily identified compartments which open and close with a click.

The page content is fully accessible without Javascript, and is fine for screen readers.

By Default all accordion boxes are closed, except the Search All Courses box

By Default all accordion boxes are closed, except the Search All Courses box

The Course Page

The purpose of the page is – unsurprisingly – to effectively get a prospective applicant to the course or courses that interest them, it should be so usable, you don’t even know how you arrived at the course you came for.

When first loaded four compartments are visible, with Undergraduate courses, Postgraduate courses and CPD (Continuing Professional Development) all represented in a closed state.

By default the bottom box is open, providing a course search facility.

The Undergraduate Section open, showing the A-Z Listings links

The Undergraduate Section open, showing the A-Z Listings links

Opening any Course Type shows a clickable alphabet, clicking on the letter ‘A’ in Undergraduate takes you to the undergraduate ‘A’ Listings page.

While only one set of A-Z links is ever visible, there are three sets of Alphabetised links embedded in the page.

The Course Search does not filter by Course Type as the alphabetised links do. As it employs the website-wide search facility, it temporarily navigates the user away from the courses area to display search results within the usual search page, related side links, which makes return navigation problematic.

A typical use case involving searching for multiple courses might take a user across two pages before reaching the course page and the a single return step to the Courses Home.

The (Rough) Plan

Rough Draft of the proposed layout

Rough Draft of the proposed layout

Off the top of my head, I’d like to:

  • remove the repeating elements presented on the page
  • develop a dynamic single-view for all courses, with minimal clicks or page loads
  • keep the search results within the Courses part of the site
  • show links to courses from the outset, with no A-Z pages required
  • Maintain the usual editing and update regime via the CMS
  • Maintain accessibility

Whether or not it results in a deployable application doesn’t yet concern me so much as the steps necessary to achieve it – which in themselves will be useful later on.

As all the information resides in the Content Management System or its published pages, the first steps involve overcoming retrieval and formatting.

For starters I’ll need to:

  • Adapt the current Courses area content into some sort of re-usable data source
  • Use the data sources to populate an easy-to-use course selector
  • Justify my own time by developing some ideas for re-using the data elsewhere