Stadium is our rapid application development (RAD) tool. Our vision with Stadium is to simplify business application development as much as we possibly can. We want to make business people’s lives easier. At the same time, we have to consider the needs of the end-users of those (rapidly developed) web apps and try to make their lives easier too!
Existing Stadium apps address the needs of banks and investment managers, who typically process massive amounts of transactional data daily. The users of these applications often work in Dilbertesque, cubicle office environments under a great deal of pressure. The tasks they perform are generally routine batch processes that need to be completed within very strict timeframes.
For example, a user will import a few thousand transactions, run a validation check on all of them, export exceptions to one system and back up data to another. In this case, the user is notified of task completion by some kind of message (e.g. “Import completed successfully!”) and has little interest in individual record details.
Another kind of task involves individual records, such as data maintenance tasks. In this case, the user needs to find a specific record. He filters the data according to some known criteria and then he scans the filtered data until he somehow recognises the record he’s looking for.
Data in Stadium is presented to users in tables we call datagrids. It is extremely important that the information displayed to users is legible and easy to scan. We also want the data to be presented in such a way that it conveys a sense of order and calm. In addition to this, Stadium clients demand that their brands should be communicated by using very specific colour palettes.
How does one visually design a datagrid so that the information it displays:
- is legible,
- is easy to scan,
- conveys a sense of order and calm and
- conforms to client branding rules?
Here’s the slightly longer answer.
We want to show as much data in as small a space as possible, without compromising on the other aspects. To convey a sense of order and calm, we tried to strive for as much visual consistency in our Stadium output apps as possible.
A surprisingly large proportion of our current end-users are stuck with older versions of IE and Windows. We decided to stick with Verdana as our default typeface, as it is one of the handful of typefaces guaranteed to display consistently across (older) browsers and operating systems, and was designed to be readable at small sizes.
The datagrid row height in Stadium 3 was 23px by default:
We thought this looked a little crowded and busy, with the congestion increasing when dropdowns or datepickers were added to grid, and increased the line height:
The additional whitespace adds some breathing room to the design. Dropdowns, textboxes and datepickers can be added into the datagrid and ample padding remains. For example, if we added a dropdown and a datepicker column into the datagrid, the datagrid’s rows needn’t stretch and some space remains between the controls and the grid lines:
For clients with very specific brand colours, the datagrid appearance can be changed to the desired theme. For example, the above datagrid in our Scarlet theme looks like this:
Information design is not an exact science. It is a field of study that aims to discover how we can make data easier to use and to interpret. It aims to derive principles we can apply in different use cases and scenarios, making the data under those unique circumstances more useful, and in so doing to add value to people’s lives.
It’s a process of optimisation where we strive to improve upon our existing designs within a framework of constraints. While we know that users will have to scroll more in certain cases, the new visual design lends itself out to more consistency and is tidier and more elegant.
Let us know what you think.
No comments:
Post a Comment