Haris and I have been toiling away on feedback-related updates to the Union websites for what feels like an eternity. Luckily, the git merge wasn’t too bad, and we’re ready to rock and roll. We’ve implemented a couple pretty interesting user experience elements that I’d like to walk through. But first, check out the feedback box by doing the following:

1. Visit union.rpi.edu.
2. Scroll to the bottom of the page, and look under the “Any Questions or Comments” section.
3. Click on one of the buttons to open up the feedback form.

For this feedback system, we have both the front end form and some back-end administrative panels. Each feedback category is bound to a particular recipient, such as Rick Hartt (the Director of the Union) or the Web Tech Group. We can create these listings on-the-fly, and they appear within the administrative portion of the site with a nice big number of unaddressed comments.

jQuery Tools = WIN

jQuery Tools is a great new jQuery Javascript library that is brutally lightweight (5.8 kb!) and extremely useful. It has a number of insanely great UI tools that you can use simply by calling the Javascript file with this one line:

<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>

We’re using the following tools for the feedback form:

• Overlay: When Javascript is enabled on the visitor’s browser, a nice-looking box pops up. The starting position is tracked based on the element that is initial clicked, similar to how Mac OS X opens folders from the desktop. The background is simply a PNG with a transparent border that you can change at will. Everything is just controlled via one simple CSS file. Best of all, the overlay is just one div that can be included once anywhere within the page markup. However, the overlay element can be called from any element with a rel=”#overlay” attribute.
• Expose: When the user clicks on a target for the overlay box, the rest of the screen darkens automatically around the window. It’s a striking effect that helps the user focus on the modal box. There’s no confusion about where the visitor’s eyes should be focused.
• Tooltip: When the mouse hovers over a target, we call the jQuery Tools Tooltip control. This pops up a handy, subtle tooltip dialog box that is, again, based just on some CSS and a single PNG background image. We can create as many of these tooltips on the page as we want – we simply need to call the tip function on specific elements of the page, referenced by unique classes, tags, or IDs.

jQuery Tools really is a great library, but we also realize that we need to provide for graceful degradation. If a user doesn’t have Javascript enabled, the page does just that, falling back to a simple form on the page. And we also use reCAPTCHA for anti-spam human verification, which works (after MANY headaches, especially for poor Haris) on both the AJAX and non-AJAX versions.

Overall, I’m really happy with how this feedback system turned out, and I’m excited with the possibilities presented by our use of these advanced jQuery libraries. They really help improve the user experience.

Tags: jquery, jquery tools, union website, Web Design