The iPad has quickly become the commuter’s computer of choice. The tablet seems de rigueur in the first class cabin and is slowly displacing MacBooks on my San Francisco Bay ferry ride each morning.
So naturally the design field is starting to adapt, and new apps and online tools are being created that complete the UX loop: apps designed for the tablet to design mobile apps.
New apps are coming out all the time, of course, and the other day I saw someone on the ferry building a clickable wireframe on his iPad, testing things as he went. I’ve looked at a few that vary in usefulness, a key differentiator being whether you’re trying to create lo- or hi-fidelity mockups.
It would make sense that the tool I use for wireframing on a daily basis would be the app of choice for iPad-based design as well. However, I have taken a couple of cracks at using OmniGraffle on the iPad and the menu depth issue in their current structure makes drawing and manipulating shapes too slow. The tools you need are buried under multi-level menus rather than at the top level in a palette
iMockups is the software my fellow commuter was using, and it’s blazing a trail for UX design for mobile and tablets, but smartly has allowed desktop compatibility through the export of balsamic files.
Balsamic itself is a low-fi sketch-looking wireframing tool for use on a regular (laptop or desktop) computer.
AppLayout is similar in some ways to iMockups, but with higher fidelity graphics and a less useful interface.
Check out AppLayouts youtube demo below for a quick overview. (Note: there is no voice-over, and the music is horrible, so I suggest hitting mute and turning up White Stripes before you watch.)
Obviously the rendered iOS look and feel (as with Blueprint and AppLayout) makes things seem more ‘real’ and loyal to the end result. On the down side, this can also lead to discussions of color and font minutia rather than the overall concept or UX. However, I think the interactivity quickly overcomes that, as once you have a clickable demo, discussion tends to focus more around function than form.
Still, most apps don’t look like the stock Apple interface, and although most of these protoyping apps allow customization of colors and related features, this can quickly bog you down with details like tweaking button gradients.
The most truly brilliant piece of software that has been developed for iPad mobile app creation is, unfortunately, having some sort of technical issue. Blueprint is a high fidelity iPhone prototyping tool that allows you to build and test realistic looking apps on your iPad, program a great deal of interactivity and then run the demos on your iPad or publish them for others to see and test.
Its interface is well organized and easier to use than many of the above apps, and brings the best of both hi-and lo-fidelity together. It’s offers high fidelity, like AppLayout, but has the depth and simplicity of iMockups. Their YouTube demo will give you a great overview.
(The only issue is that Apple has for some reason removed the full app from the app store. The ‘lite’ version is still available, and I suggest you grab it while you can. Groosoft’s Blueprint website says that as of May 23rd they are working with Apple to resolve whatever the issue is.)
Although I have been focusing on mobile apps for mobile apps, I would be remiss if I left out another tried and true way you can prototype on the run: paper. I just had to include the exact opposite of the above products — the DIY approach — with links to a paper prototyping kit, including a laser-cut stencil and a pad of iphone printed paper.
Whether the high fidelity or low-fi ‘sketch’ approach is better for your project certainly depends on your goals and process.
Next time I’ll return to the laptop with some other pieces of rapid prototyping software for more traditional users: the great unwashed masses of the iPadless.