Using Activity Descriptions to Generate User Interfaces for ERP Software 22 nd July 2009

Who is Revelate?  Small Independent Software Vendor, based in Geneva and Munich  Developer of tailor-made business management systems.  Each project requires a large amount of custom designed screens and printed reports  Customers range from one person start-ups to large multi-nationals

The problem we’re trying to solve

How we handled UI development before  Previously our projects required Manual layout of screens in Visual Studio Manual layout of printed reports in Crystal Reports  -> Time consuming and error-prone  -> Visual and user interaction consistency were hard to enforce across the development team  -> Locked customer specifications into a specific technology

How we approached the problem  Let’s generate a UI from the data model !  User interaction designer was skeptical  Paper prototype of the generated user interface was tested…  …it wasn’t any good  Didn’t match the user’s mental model  User’s regularly lost context

Our designer proposed a different approach  Ex-nihilo design of a module (project mangement)  Designed using the process described in Adam Cooper’s About Face  Storyboard, paper prototype and finally interactive prototype  User testing was very successful  But the complexity of the UI skyrocketed

A typical screen from the new UI

Delivering the new user experience  Was going to require a major investment in widget development or purchase  And we had to figure out the forces behind every minor UI decision  This led to analyse existant applications and identify the patterns behind them  Hopefully we could figure out a way to generalize with a minimum amount of code

We ended up with two domain specific languages

DSL #1 breaks the UI down in a fairly obvious fashion

So the data model is straight forward

DSL #1 covers « simple » widgets  The editable list below complete with inline editing and folding panel is entirely described in DSL #1.

But we wanted to generate more complex widgets…

…hence the birth of DSL #2

Everything is a projection  We project an n-dimensional object space onto the x-y axis of the screen space.  Forms, Lists, Pivot tables, Trees, Bar charts. These screens appear to be completely different Yet they can all display the same dataset

A list and a pivot table

A gantt chart

A hierarchical pivot table

Zooming on the data structure

Viewing the screen space as coordinates  Provides a simple structure for client server communication.  The server maintains a screen space to object space map.  The server informs the client of changes to the screen space  Changes on the client can be mapped to object space by the server

DSL #2 enabled us to generate the visual editor for DSL #1

Conclusion  We currently use both DSL to generate complete Rich Internet Applications (using « Ajax »), as well as high quality printed reports in PDF and Excel formats.  DSL 2 is still evolving. We’re still working to identify all useful interaction forces.  Medium term DSL 1 will be replaced by templates using DSL 2

Thank you