One of the projects I worked on at the Engineering IT Department of the University of Maryland (UMD), College Park was to develop a Search form for International & Leadership Programs (ILP) (See Figure I. below). Using this form, UMD students planning to study a term abroad could explore the various courses they could take up at the desired country of interest.
The form fields provided for text auto-prediction (see Figure II.), and easy un-selection. The word prediction helps the users (UMD students), as they may not always know in advance what they would be looking for. And the easy un-selection (the ‘x’ at the end of the field selection) serves for a better user experience. A jQuery plugin was used to achieve these features.
The field ‘UMD Course#’ also allowed for multiple value selection. Most of the fields provided help (the ‘?’ glyphicon next to most fields) through tooltip pop-ups, that briefly explained what that respective field represented (see Figure III.).
Similar to figure II, the figures in the slideshow below depict the word-prediction feature in the other fields.
As mentioned above, the UMD Course# field allows for multiple field value selection (see Figure IV. below).
These field value selections can be easily un-selected by clicking on the ‘x’ next to each of the values as show below (Figure V.)
On selecting the desired combination of fields, clicking the ‘Search’ button produces the corresponding search result (see Figure VI. below). The ‘Clear’ button clears the form field selections, if any.
The search results display the respective University logos and a default logo (a grey circle with the University name across it) if no logo is available (see Figure VII. below).
On clicking the blue links in the search results, further details about the desired University abroad is provided through a modal pop-up as show below (Figure VIII.).