RSS Feed
May 14

Android GUI prototyping for Gnucash

Posted on Monday, May 14, 2012 in Coding, User

In developing the Android Gnucash Mobile, I decided to first do some UX prototyping (and also because I had to show it to the community). The experience reminded me of why prototyping is good in the first place, it forces you to think about what you want to include in your software and what to leave out. Where should the different UI elements go? How often will users use a particular functionality? How many steps are required to reach certain functionality (especially valid for mobile apps)? All these questions serve to provide a focus and eliminate any unnecessary stuff.

When I typically do prototypes for personal projects, a pencil and paper is typically enough to make rough outlines. But if you want to present your work somewhere (or to a client), it helps to have it look a bit professional (while avoiding the uncanny valley of GUI prototypes). So I started looking for Android UX prototyping tools. My needs were basic, I wanted an Android device frame and common Android interface elements (toolbar, menubar, actionbar, checkboxes, etc.) I went through a couple, most offered iPhone-oriented solutions. Then I came to Pencil, the Firefox addon/standalone GUI prototyping tool. There some stencils for Pencil which are provided (by Google, I think). But they are outdated and mostly incomplete. (Update 21.05.2012: Pencil released new stencils for Android 4.0 a few days after this post. Worth taking a look at.) But Pencil was free and I decided to give it a go. Here’s what I got:


Needless to say, I was less than thrilled with the results. It is ok, but not exactly what I had in mind. It may be due to my lack of skill (it was my first time using Pencil), but I was not so sure, so the search for a tool continued. I found the Android Stencil Kit and I was thrilled because I love drawing on paper. But shipping from US will take too much time. Moving on….

I contemplated just building a UI prototype with the eclipse ADT tools. But that would again be very realistic and I might as well just start coding. I checked the Android design website downloads, and sure enough, they have some stencils available. But they have them for Adobe® Fireworks®, Adobe® Photoshop® and Omnigraffle; none of which are free. However, the Adobe products are free to try. I downloaded Adobe ® Fireworks® trial version and the stencils to try and see what I could achieve. You can see the results below for yourself:


I must say I am very pleased with the results I got in one evening without any Fireworks experience. I wish there are more (and better) stencils available for Pencil and other open/free tools. I will be watching this space, but until then, it seems the paid tools enable doing a decent job of prototyping – if you can afford them. I guess there might be some free/open source software which allows you to use the Fireworks or Photoshop stencils (Gimp, Inkscape?). If you know of any, let us know in the comments!