Designing web software

Lightbox

　Lightbox is an open source JavaScript library that allows you to easily create a modal window that overlays on top of a web page. Originally the lightbox was created to easily display image galleries on a page, but lately has become a way to have a dialogue box to perform tasks that are self contained like uploading pictures and managing files or managing the sentences that are attached to an item in a list, in our case. One of the benefits of the modal window is that it allows you to break out of the architecture of the current page, providing another layer of independent interface space whilst maintaining the connection to the screen below.

　Previously these types of interactions would have taken place in a popup window, however, since most modern web browsers have some sort of popup window blocking feature, this interaction has become more and more problematic. Requiring a user to manually approve popup windows for a site is a big barrier to a smooth seamless user experience and most times leads to the inability to use a particular feature.

　When first incorporating the lightbox script in iKnow! we became aware of some of it's limitations. We were interested in not only throwing images at the lightbox but code snippets as well. We were also interested in using Ajax within the lightbox. In response to these needs we developed an extension to lightbox that we call Lightdiv. Lightdiv allows us to populate our modal window with HTML snippets, Ajax responses as well as images. The use of Lightdiv and Ajax has had its benefits and can be seen in various screens throughout the iKnow! web application.

The features of Ajax

　I'm assuming that most of you reading this will have at least heard of Ajax and have some idea of what it is. Essentially, Ajax stands for asynchronous JavaScript and XML, which is a technology that allows an application to easily send and receive data to the server without the need to refresh an entire page. It has been noted that the same ability is possible by using iframes, however, this is not always the case, especially when requests are being made to and from individual elements within a page. The Ruby on Rails framework comes with native support for Ajax and we use it extensively throughout the iKnow! application.

　One of the main benefits of Ajax, and the reason I would recommend that people stay away from effects and animations, is that it is quick. The feedback loop between performing an action and getting a result is very quick, a lot quicker than the time it would tke to reload an entire page each time. This is critical when there are a number of actions to be performed on a single page. Some people tend to confuse Ajax with script effect libraries like Scriptaculous. I would recommend using these effects sparingly if used at all. Any transitional effect that takes place over time, if used before access to information, as in the case of a fade-in, will take that time away from the user performing the next action. Moving interfaces and fade-ins may look good in presentations, but in interfaces where you spend a lot of time these become irritating and detract from the overall experience.

　There are also some disadvantages to using Ajax and understanding these disadvantages will give you an idea of how to best use Ajax. Ajax-rendered pages do not respond to traditional browser controls like the back button. Moreover, dynamically rendered parts are difficult to bookmark and are not indexed by search engine crawlers. This means that Ajax is probably not the best solution for pagination of content or the main or sub level navigation within an application. The place where it is probably most appropriate and where we use it most in the iKnow! application is for updating preferences, adding items to a list, uploading pictures, updating a status message and posting comments. As you can see, wherever instant feedback adds value to the user experience is a good place to use Ajax.