Renaissance man in the Knowledge Age Achieving more with less

Monday, 12 February 2007

New GUI Methodology - XAML it..

Having recently completed a project where we handled the conceptual design and functional design in a new way I thought it would be of benefit to share some insights.

The application was for the visualisation and manipulation of large amounts of transactional data, besides the technical challenges which I will attempt to covering in another posting, we needed a method to explore and discover the optimum way a user could interact with the data.

Using a form or grid approach was out of the question due mainly to the vast amounts of data and the requirement to allow the user to turn that data into usable information quickly and build upon pass decisions as to the mean of certain data.
Traditionally I would have solved this problem with hand drawn story boards showing user interaction and application responses; from there we would proceed to UML or simular to formalise the application behaviour. As I have used this approach a number of times & I have rather perfected it, for example using a sketch artist rather then an analyst or GUI programmer is the key, due to redraw and exploration times, but that is the subject of another post.

This time we took a left field approach due to the complexity of the information model and need to reiterate UI design quickly, due to you guessed it time constraints. So we swapped out our time risk for some technology risk which we felt we had a better chance of managing and used Microsoft Expression Blend, which was still in beta at that stage.

Expression Blend is an IDE for generating XAML which is Microsoft’s new unifying technology to bring together such things Forms, MFC, etc. Again the XAML technology itself could fills its own posting easily but for now I will focus on the experience in using it to implement a commercial grade application.
Clearly to start off with we need to get out heads around the technology and the tool, luckily we had a head start in this area because we followed XAML’S development very closely. We then need to setup a work process so we could have very productive sessions we resulted in hard deliverables.

We commenced this by generating a template collection in Expression Blend covering everything from standard controls to colour schemes, as Blend uses a simular approach as style sheets for these petty bits it is quick an easy to swap them out to suit the users driving design.
After we generated some base templates which represented our first attempt at the GUI we sat with users over a number of sessions and build the GUI right in front of their eyes, we where able to build interactions and responses using the animation timelines in Blend.

Users could see how things would look and feel, how they would achieve certain task and how the application would dove tail into their processes.
What we learnt via the process is that the task of crystallizing functionality, merging simular functions and removing defunct functionality happened very quickly and another benefit was we achieve a user interface paradigm that was very tight something that you would not normally see until a few version down the line. This of course is to say nothing of the time/cost savings and the total removal of developer rage.

Once we achieved the desired outcome and by in that the GUI we developed represented the full set of functionality for the application, it was time to get our hands dirty to make this thing work.
This was the point where the approached delivered real benefits, during the early architectural stages we decided that the application was going to implemented using a MVC (Model View Controller) pattern so all work on the GUI did not have to thrown away, we could hook up objects in the GUI to Objects in the Controller.
The big difference here being the XAML assets we created in the user sessions could be directly contributed to the final application, no need to write from the ground up.

Looking back I would have to say that this approach was quicker then other approaches which I have tried, storyboarding, GUI prototyping and certain wins hand down over written GUI specifications. My greatest initial concern was that we would not have anything to test the GUI against, this was clearly not the case, we ending up with a working prototype that we could easily test delivered function A against Prototype Function A.

The downside was mostly related to the fact the EDI Expression Blend was beta version, since which time I have looked at the release candidate and have been impressed.

No comments:

Blog Archive

"It is not all about me"

View Ray King's profile on LinkedIn Add to Technorati Favorites Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.