In-app help for MyCSUMB

MyCSUMB 3 (based on Open Atrium) is coming out this summer, and we wanted to make sure that the transition was as easy as possible for folks. There's a whole slew of UI changes from our old version of MyCSUMB, and with the change happening over the summer we want to minimize the pain for both users and support staff as students return over the fall.

So using some tools already in Open Atrium (the built-in Help-as-modal-palette function) we built a module to provide contextual in-app help with an awesome twist. By shamelessly stealing some JS from jQuery Highlighter, and writing some other stuff for UI interaction, we have an in-app tour with highlighted page elements that is sure to make this transition a piece of cake for most folks. Check out what it looks like:

A quick note about accessibility as well - while there's a visual change on the page (an overlay hides everything and a clone of the object is floated above it with a halo), we also have a non-visible-but-keyboard-and-reader accessible link in each description that will jump to either an anchor of the element, or if the element itself is a link, just take the user to that link.

Update: Check out this video with an even better interface:

We're excited to see what our trainers come up with for content, and I think this will make everyone's transition a little bit easier this fall!