Gamification in IT operations and process management is one of the big buzz-words of the help desk and IT service management industries. Gamification uses game mechanics and game design techniques in non-gaming contexts, where it becomes a powerful tool to engage employees, customers and the public to change behaviors, develop skills and drive innovation.
For the IT department, this means that animations and cool graphics need to play a greater role in your service request user interfaces. So what’s the best and easiest way to do this?
Adobe Flash animations are great if you’re an expert or your viewership is ok with waiting around for your animation to load and happens to use a device that support Flash formats. (A whole slew of browsers and devices still don’t support Flash animations.) Your best bet for providing cross-platform compatible animations, that load in a reasonable amount of time, is to hard-code your animations with jQuery.
Flash, of course, has many features and capabilities that jQuery does not offer. These include 3D capabilities, unfailing appearance in supported browsers, built-in User Interface, supporting vector artworks, a large array font options, and many additional free and commercial tools.
But even though it doesn’t have 3-D and vector based graphics, jQuery is amazingly versatile, and it’s a much better alternative to Flash in some scenarios such as Slide shows, form, drop down menus, pop ups, and expandable or collapsible menus – all of which are familiar in help desk or IT service management user interfaces.
With jQuery, the file size is substantially smaller than Flash and numerous free, professional-quality programs are available. It’s also possible to add various types of interactivity to the web page elements. A major advantage over Flash is jQuery’s broad compatibility with multiple devices and programs, including iPhone, cell phones, PS3 and PSP.
For some, the thought of “hard-coding” anything seems a bit rough; however, jQuery makes hard-coding animations so simple that it should be called soft-coding. With jQuery animation you animate any objects on the page (the commonly-used term is DOM objects), which can be anything from an image to a DIV box.
There are two parts to a simple jQuery animation: the canvas, and the moving animated object. The canvas is just a DIV box that provides a specified area for the animated object to roam around in. More complex animations simply have more objects floating around a single canvas.
For those of you who, like us, prefer to learn through example, the jQuery UI site has a lot of great examples.