Got content. Got concept.
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).
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.
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.
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:
||Disable A-Z links, disable periodic Search box routine, clear Search and results areas, display loading message/icon, load data into results area, use signal in results to switch to make tab active, make others inactive, re-activate A-Z links and periodic Search box routine, clear loading message, displaymessage/icon to denote listing type as ‘Courses’.
|A-Z link click
||Replace content of Search box with selected letter. Start the periodic search box routine.
|Search box focus
||Start the periodic search box routine.
|Periodic Search box routine
||Take contents, format for filtering (remove common words and inappropriate characters), set the display of matching/non-matching courses appropriately.
|Search Submit box click
||Disable A-Z links, ‘fade’ A-Z links buttons to show they’re not available in this context, disable periodic Search box routine, clear results area, load data into results area, use signal in results to switch to display message/icon to denote listing type as ‘Search Results’.
That’s enough forward planning for the moment. It’s time to start prototyping.