RSS Feed

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:

home_thumb

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:

home_transactions_edit_transition_th

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!

Share and Enjoy:
  • Twitter
  • Google Bookmarks
  • Digg
  • del.icio.us
  • Facebook

Bring on the comments

  1. Kiran Rao says:

    I had a similar need for prototyping the UI for an Android app. I’ve been down most of the paths you mentioned and some more. I downloaded about a dozen different tools.I even tried a couple of web-based solutions (proto.io, Fluid UI mobile) and others.

    The conclusion was the same: Only the paid ones are even half-decent. The rest are just not worth.

  2. Carl Geib says:

    I’ve tried Fluid UI, and found it had some nice features, but overall limiting. I haven’t tried Pencil yet, I might give it a try. Part of me is tempted to create my own stencils in Inkscape and use those for mockups, but I don’t think I have the time for that undertaking.

  3. […] for Android project goals and accomplishments. There have been twists on the road – choosing  the UI right prototyping tools, styling time and date inputs, issues with asynchronous loaders, representing money and number […]

Leave a Reply to Kiran Rao

Click here to cancel reply.