Friday, April 24, 2009

Using Balsamiq Mockups to design a Windows Mobile app UX

UPDATE (7/17/2012): Please use this link for downloading the template.

As you probably already know, or are just about to realize, the success of any mobile application mostly depends on the user experience it provides. Besides how functional is a device which can be easily transported with you, the reduced size and autonomy required makes it a resources constrained machine not only in terms of processor, battery life and memory, it’s constrained also in terms of screen size and user interaction capabilities.
In fact, most of the mobile applications should interact with users without a mouse, a full sized hardware keyboard or even without any hardware keyboard at all. What’s worst, the apps should show the information and allow input in a very small screen. If you take in account that the scenario is even more complex because your UI would need to target several form factors and orientations, the UX design is something that you should be focused on and work on very seriously from the beginning of your development.
A great way to get the feeling of a UX before of building it is drawing mockups. You can do it by hand or using some tools around there, like Microsoft Office Visio and some custom stencil add-ins available on the web.
One tool I really like is Balsamiq Mockups. You can build mockups having a relaxed hand-drawn look’n feel which is great for sending a clear UX message without the noise of design specific elements like icons and so on. This way, the customer knows that you’re showing a just a mockup, not screenshots, and at the same time he gets clearly what is the UX you’re proposing.
A sample mockup of a login screen with the keyboard open can look like this:
image
And an Outgoing Orders list screen can look like this:
 image
Really cool stuff, isn’t it? You can understand clearly what are the space constraints in your design and how the user should interact with the UI elements. Building a mockup you’re actually designing the real full User eXperience for your app.
Unfortunately, Balsamiq doesn’t include Windows Mobile mockups templates out of the box. But I did the homework, and included the template I built for default WM Professional Edition into their MockupsToGo templates site.
You can have a look at it and download it following this link: Windows Mobile Professional Edition Mockups.  (The old link doesn't work anymore, please use this for download it.)
I’ll add some extra form factors later so we can build mockups for square screen and Standard Edition also.
I really like this tool, but I should also say that there are a couple of things that I don’t like about Balsamiq:
  • It relies on Adobe Air
  • It doesn’t have any freehand drawing tool.
  • It lacks of some basic UI and annotation elements.
The good news is that it stills growing up, and having custom templates you can use it as a great mocking tool for windows mobile applications.
Hope you find it as useful as I do!

1 comment:

webspinner said...

I discovered today Balsamic Mockups surfing in your blog. It's really cool! Thanks.