/* ---------------------------- HTML STARTS HERE----------------------------------------------------------------------------------------------------- */

Mobile Community Design
Research and design information for mobile community developers.

Sunday, January 11, 2009

How to Prototype a Mobile App

One of the long-standing problems in the design process has been the lack of digital tools to support early GUI design work. Surprisingly, one of the most useful tools to come about recently to aid this process was the digital camera. The point-and-shoot camera (or the camera phone for impromptu work) meant that any design that was scrawled on the back of a napkin or the nearest whiteboard, could be captured and distributed to others for remote collaboration. This works great for initial concepts, but it can become tedious as the design becomes more solid and where re-drawing complex parts of the design repeatedly becomes inefficient.

Up until now there have been very few digital tools that supported low-fidelity (think napkin-like resolution and speed) prototyping. People have often told me that Visio, Visual-basic, Axure, Photoshop, Dreamweaver, etc, can fulfill this role - but they can't. The problem is that they are either too high-resolution or too code-focused. What is needed is a tool that is very very fast to use. It needs to be informal. The user shouldn't have to worry about exact alignment of objects, and they shouldn't have to edit complex tables of variables for components. They should just be able to *think* about an object and have it there on the page in the 2 seconds it would take to draw it.
So, I've been waiting for this type of tool to come into existence, but the problem is that most programmers don't think like designers. Thus, the tools that they create don't have 'laser-like-focus' on the requirements of the intended users. Fortunately it appears that Peldi, the developer of Balsamiq does understand what is needed.

Here is a little fictional iPhone app concept that took me about 2 mins to "draw" in Balsamiq. This tool is very interesting in that it has a very minimalistic UI and can be installed from the same executable on either a Mac or a PC.

The software uses a nice hybrid of direct object manipulation and programming. The programming side of it is extremely minimal and most users won't even realize what it is doing behind the scenes. Instead of having pop-up boxes with fields to edit to modify objects, there is a simple scripting language to modify objects. In this case, it is a list of table labels separated by commas. This has the advantage of being extremely fast to modify. This is critical since prototyping essentially happens at the speed of thought and needs to keep pace with collaborative conversations.

Another awesome feature that should be included in more applications is a hybrid of search and object manipulation. In this case the user wants to *very* rapidly get a new object on the page. Since they have used it before, they know the name of it. By typing 'note' or other search terms, they can have that object automatically dropped onto the active page.

The real brilliance of the app is in what Peldi has *not* chosen to do with it. The objects aren't designed to look perfect - they look like sketches and set viewer expectations accordingly. There aren't a huge number of options for each GUI component. There is also nothing standing in the way of rapidly getting the appropriate objects laid out on the page - which is the point of the application.

It's a nice simple tool, and there's something to be said for not loading it down with features. However, things that might be considered:
  • The GUI component library is awkward, and horizontal scrolling is bad. Possibly smaller icons and a right-hand vertical display of objects might work better.
  • More GUI objects are needed. For iPhone development, many of the standard components look different and some of them act differently. Being able to import additional widget libraries, or to allow expert users to code their own components and share them would be great.
This is a great tool and I'm planning to start using it as a possible replacement for whiteboarding, or possibly as the immediate stage after whiteboarding. Whiteboards still support extremely rapid generation of ideas without the need to select objects types prior to creation of objects. If I were to think about further optimization around the use-case of 'rapidly get desired objects on the page' I would look at how to start expressing ideas without prior selection of object types - which is not an easy problem to solve.

You can download a trial copy of Balsamique or try a web-based version here.