Recently I attended the UGIALT.NET Conference and the first session was devoted to How to Design the User Experience, the speaker - Daniela Panfili - clearly stated some good points and she told us how she and her team spend a lot of time interacting with the end user and designing the user interface; the purpose is to try to offer the right functionalities in the right place to maximize the usability of the application, keeping however an eye on the look and feel to have a pleasant interface.

I have to admit I was always been focused in developing the architecture of an application first, that is the usual tasks: design application modules, glue them with an IoC container or a plug-in system, define some communication methods, use patterns like AoP and similar to inject logging function and so on...

Usually I left the interaction with the user as the last thing, or something that only the functional analysts have to care about at start (and if they are good they do their job well, if they are so so or inexperienced you often end up rewriting their job..which is a big loss of time)…in recent times I’ve however started to change my mind especially when I saw what came out from some designs: applications that have all the required features but they are ‘hidden’ or hard to be found by the users…so I started to draw some sketches by hand to figure out how the application should look and work.

The basic idea is to have a better picture of what the user want and how it should use it before starting to write any architectural code; in an ideal situation you should have two different design pipelines: one for the UI and UX and one for the architecture, they both can start work in parallel, while you are working on the generic infrastructure or framework on top of which you develop your architecture.

Having sketches of how the application should look (I’m not talking about astonishing graphic effects or animation, but the general disposition of the elements) also is very useful to integrate the documentation and give the client some immediate feedback on what the project will be.

Doing the whole job by hand can be fast but it has some drawbacks: you need to perform periodic scans of the sketches and put them in your repository, they get messy pretty fast (you don’t have any Undo feature when it come to the good old paper), only one person can have the original copies, and it’s hard for different people to work on the design (especially if they are in different locations).

Having a good tool that allow everyone to draw or modify a sketch is starting to be a necessity in teams that want to develop software seriously, it’s true we have a plethora of Paint-like and PowerPoint-like apps around; but they require skills that not all the developers have or have time to learn.

Here’s where Balsamiq come help us, this tool is specifically designed to allow even non-non professional graphic artists to design and prototype interfaces and functionality pretty fast. It’s very intuitive and easy to use and allows everyone – with a minimal effort – to draw a detailed scheme of what the UI will resemble to.

Using a tool like this can also help you realize if you are doing a good job in defining your UI...to test it a bit I tried to replicate an interface I’ve wrote for a warehouse designer tool to be used in a project; down here you can see the result.

While writing it in WPF I thought it could be a good interface design...well...giving it a second look here I realized that my job, even if it had all the required features, wasn’t good enough and I’m actually looking at how I can improve it.

Balsamiq comes with a quite complete library of common controls and it can be extended easily, there are in-fact a series of template freely available. Balsamiq allows you to add a level of interaction between different mockups and provide links to them, so you can simulate some navigation in the user interface. You can also export the mockup design in XML to process it with your custom utilities or generate a Flex application (a service offered by a 3rd party company).

In short a tool that can help raise your productivity, especially in the early stages of developing of a new project.

Related Content

• Silverlight / WPF: is it possible to bind to an explicit interface indexer implementation? (07/06/2010)
• More related document (1)