Open RIA

In this video, see the superior user experience in action

IBM is committed to open standards and open source design and development. Naturally, when it came time to choose a toolkit for creating Rich Internet Applications (RIAs) in 2005, we assessed the open source toolkits available at that time. Dojo met all of our core requirements. We adopted Dojo and also decided to make significant contributions to make it even better. IBM worked on the Dijit widget set; core APIs; overall performance; and very importantly, globalization and accessibility. As result of the latter, Dojo was the first toolkit to appropriately address these critically important capabilities and Dojo remains the only RIA toolkit that is fully globalized and accessible.

Many IBM products have been built with Dojo and many of our customers build their systems using the Dojo capabilities provided in our products. Given the extensive use of the toolkit and its expected further increased use, our corporate user experience design team carried out user research during 2009 with the Dojo community outside of IBM as well as with the product teams inside the company. This work identified areas of the toolkit with the greatest opportunity for enhancement from user experience and visual design perspectives. Those areas included: data grid, charting, a new Dojo visual theme, and CSS restructuring.

(Click the image to enlarge it.) We started work on the design and development of these high priority/value opportunities for improvement. The first of these, data grid, will be described here and the others will be featured in future Design Gallery stories. The data grid is perhaps the most pervasive user interface component used in Rich Internet Applications (RIA). You encounter grids all the time. For example, on-line e-mail services use grids to present your in-box to you. Grids present large sets of objects along with key properties and functions to the user very efficiently, meaning that they don’t take up a lot of space.

(Click the image to enlarge it.) We designed and developed an EnhancedGrid which adds a number of really useful end-user features. Grids normally allow the user to sort the grid contents on only one property or column at a time. The column header of our enhanced grid is split into two regions: one for selecting the column and the other for controlling the column sort. You can do multiple sorts and nest one within the other. Another highly valuable design feature is the ability to select multiple rows or columns with a simple swipe action and then drag and drop to move them around the grid. For rows, you can swipe through row headers or the checkboxes. We also enhanced the ease of developing applications with grids: rather than forcing developers to write the scripts for checkboxes or radio buttons every time they want to use them, the EnhancedGrid actually produces them simply by including an attribute/value pair in the grid markup.

We worked extensively with users and user interface developers and designers from IBM, as well as the Dojo community to prioritize widgets, features, and to evaluate the user experience of the EnhancedGrid. These activities included interviews, on-line surveys, usability evaluations of prototypes, and evaluations of early milestone drivers.

For more information on these and other features of the EnhancedGrid, see it in action by playing the movie included above, try it out yourself using the Demo tab (above), and take a look at the EnhancedGrid documentation in the Dojo Campus. For more information on the Dojo open source project, visit the Dojo Toolkit site or check out Dojo with additional IBM extensions.

Stay tuned to this section of the design gallery to keep up with IBM's contributions to open RIA technologies.