By Ngewi Fet on May 14, 2012
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. 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!
Posted in Coding, User | Tagged gui; prototyping; gnucash |
By Ngewi Fet on May 11, 2012
The uncanny valley in robotics and computer animation is a …
… hypothesis states that as the appearance of a robot is made more human, a human observer’s emotional response to the robot will become increasingly positive and empathic, until a point is reached beyond which the response quickly becomes that of strong revulsion. However, as the robot’s appearance continues to become less distinguishable from that of a human being, the emotional response becomes positive once more and approaches human-to-human empathy levels
Something similar can be said for GUI prototyping. It is often good to keep it simple and use wireframes. The goal is to study transitions in the software and user interactions, figuring out which interface elements to include and where to include them. Hence, removing distracting detail like color, gradients and other stuff that does not contribute to this goal is necessary. I now state my hypothesis for the uncanny valley of GUI prototyping 
:
As appearance of a GUI prototype is made to look more like the final product, it is generally more liked by the client until a reaches a point where it is missing just enough detail to cause strong revulsion. However, as the prototype further improves, it becomes liked again and it morphs into the final product.
- Coding User
Depending on the purpose of the GUI prototype, you have to choose the appropriate tools for the job. If you are a lone developer who just wants to have an idea how the app should look like, a rough hand-drawn sketch may suffice. If you have a multimillion-dollar contract with a client, you may want to go for professional prototyping tools or even full-fidelity prototypes. Whatever works….! Beware of the uncanny valley though, presenting almost-finished-but-not-final designs may make your client focus on the incorrect hue of the color in the logo.
In the next blog post, I will discuss choosing the Android GUI prototyping tools used for Gnucash.
Posted in Uncategorized |
By Ngewi Fet on May 10, 2012
So I was accepted into the Google Summer of Code (GSOC) 2012 program under the GNOME Foundation. I will be working on extending Gnucash to the Android platform through the development of a mobile application for expense tracking. Thanks to the Gnucash folks and my mentor (Muslim Chochov) for guidance through the application phase . Much appreciation also goes to the GNOME foundation for enabling this opportunity.
The mobile application codenamed ‘Gnucash Mobile’ will enable users to be able to record financial expenses which are made on-the-go. A lot of expenditure happens in cash and can amount to much over time. Therefore, being able to track how and where expenses are made is important to building a complete picture of one’s finances. The expenses can later be exported to an Open Financial Exchange (OFX) file and can be imported into the Gnucash for the desktop.
The GSOC program is currently in the community bonding and preparatory phase for the actual coding which begins on the 21st May 2012. Accordingly, I have created a Google document outlying my design proposal for both the data model and the user experience of Gnucash Mobile. The application seeks to support the modern Android design guidelines, while maintaining compatibility with Android devices from API level 7 and above. The photo on the left is a mockup of how the main accounts page of Gnucash mobile should look like.
The application will make use of the ActionBar pattern in Android pervasively. Since the ActionBar is only available from Honeycomb upwards, backwards compatibility will be maintained through the use of the Android compatibility library and the ActionBarSherlock library. ActionBarSherlock enables the use of modern Android design paradigms on older Anrdroid API levels (7+).
Going forward, I will be writing about my experiences with developing Gnucash Mobile. Join me for the ride! You can follow Gnucash on Google+ and my Google+ account for updates .
Posted in Coding | Tagged gsoc2012; gsoc; gnucash; android; |
