Corvus Consulting

A few months doesn’t seem like very long to look for changes in the landscape of wireframing apps for the iPad. But this is the App Store where life moves fast. In the realm of apps for wireframing, those reviewed last time around have made steady progress while a snappy new player has entered the field to challenge their early dominance.

iMockups

Toronto-based Endloop has been making steady progress with iMockups. The overall look and feel of the UI hasn’t changed, putting most changes in the category of polishing and rounding out gaps driven by customer feedback. The approach is paying off, as I find iMockups increasingly easy to use, and it even has some features that I long for in other wireframing apps.

Far and away the most useful enhancement has been the ability add shapes to the canvas with a single tap. Once you experience that, going back to Omnigraffle to tap and then touch and drag a shape onto the canvas feels like going back to a rotary dial phone. Besides being way more usable, what jazzes me so much about this enhancement is the thinking behind it, which makes a more effective break from the mouse paradigm. I don’t think that same method of adding shapes would work on the desktop as well, it’s truly an interaction made for a tablet form factor.

Further enhancements around shape position alignment, guides, additional controls for adjusting shape properties, cloning and additional template shapes add up to a rapidly maturing product. Nice job, people of Endloop.

Where I get stuck with iMockups is not being able to take wireframes to the desktop for further work. While exporting to Balsamiq is supported, I’d really like to see Omnigraffle exporting for iMockups to really fit into my workflow. That aside, I do use iMockups once in a while to work on a concept, but only where the webpage elements are tried and true.

An area I’d like to see explored in iMockups is annotations to describe the actions around an interface element. That need may be moot if their roadmap includes, as I strongly suspect, a drive towards making its wireframes interactive for simulating the use of a design.

Still priced at $10 in the App Store, I can recommend iMockups more than ever for those middle-of-the-road needs, where the app or website you’re designing uses well-established design patterns.

OmniGraffle for iPad

I’m less forgiving with Omnigraffle for a few reasons: I use it more, it has a longer history behind it, and it cost 5x more than iMockups. Most of what follows will be griping about what Omnigraffle isn’t doing well on the iPad, but that speaks to how much it does and does quite well.

Comparing iMockups to Omnigraffle (OG to its friends) isn’t exactly comparing apples to oranges, but more like comparing oranges to super-oranges, or some kind of multi-fruit. OG has a much wider range of use and a far wider audience to satisfy. That said, even after several iterations there are gotchas that frustrate even casual use.

1. Two Common Actions in Hard to Reach Places

One aspect of OG that impressed me the most on first using it was how well it hid functionality until the moment you need it. The contrast between the number of controls that appear on the interface at any one time and the actual number of controls available still surprises me.

That rule of thumb goes too far, however, by tucking the delete function into the contextual pop-up menu. I seem to need delete a lot, maybe more than others, and having to do a tap with minor hold to invoke the pop-up menu makes the app feel slower than it is. Thankfully, the Undo button is in easy reach, a small grace I’m often grateful for.

In another case, one of the most common actions that I perform especially when starting a design from scratch is to duplicate and tweak shapes. Where iMockups has a Clone button to accomplish that, Omnigraffle opts for the traditional copy & paste routine. The other option of course is to drag another copy of a shape out of the stencil area, but repeated over many shapes that ends up being a lot of work, especially compared with iMockups. In performative terms, iMockups requires maybe a scroll and a single tap to add a shape, where OG needs a tap to invoke stencils, possibly more to get to the right shape, and then the drag out to the canvas. Touch-tone, rotary-dial.

2. Multi-Object Paste

OG boasts the most elegant and reliable means of selecting multiple objects on the canvas. The nice flow that sets up breaks, though, when pasting multiple objects, which are dropped un-selected (the desktop version keeps all pasted objects selected). Should your paste happen over top of existing objects that aren’t locked, good luck trying to untangle them. See above regarding the nice easy placement of that Undo button.

On its own that wouldn’t be so frustrating, but combined with the next item it becomes really unworkable.

3. Lack of Canvas Control

Omnigraffle’s canvas grows to hold the shapes that you drop on it. That means in order to get more space to work in, you need to drag some of your shapes to the edge. When the edge feels crowded, OG opens up more room to play. It’s a good idea, for the workspace to be responsive to the need, but the canvas is stingy in how much it will grow each time. This leads to repeatedly nudging a shape to the edge in order to get enough space to separate it from others around it.

Arg. And double Arg, when you realize that OG won’t let you zoom out the canvas far enough to drag a shape farther and to grow the canvas accordingly.

4. Fingers are Opaque

I can’t see under my finger, so I sometimes find resizing shapes tricky. That isn’t a problem unique to Omnigraffle, but it’s where I run into it the most on the iPad. I can imagine a future version of iOS providing a means of pulling a detail manipulation out from under the finger, as Apple did with the magnifying glass to position the text insertion point.

5. Stencils What-Now?

Currently I find myself using OG for little more than light sketching and gray-boxing starter wireframes that I then move to the desktop for expansion and refinement. The biggest roadblock to more in-depth wireframing is the lack of comprehensive custom stencil management and the dearth of modern stencils for software design. I mean, the UML stencil? Garrett IA? I don’t know how many years ago that so is, but it’s time for a refresh. I’m certain that OG could keep a lot of its lunch from being eaten by lower-priced players like iMockups with the addition of a solid modern UI stencil.

Like I say, I’m much harder on Omnigraffle because I expect more. That said, there have been some improvements, most notably in performance. As I wrote in the first review, I look at Omnigraffle for iPad as an investment in a long term development effort, and I’m happy to look over my bitch-list and see mostly things that are easy to address. With under-the-hood refinements taking the app a long way forward, careful study and iteration on the interactive flow of the app will steadily bring it up to par with the ease and flexibility of the desktop app.

But where the desktop app will never really catch up to its iPad counterpart is in Omnigraffle’s free sketch mode. I find myself in this part of the app more and more, and am interested to see freehand objects pivot into more normalized shapes with functions like line smoothing and straightening.

SketchyPad

With the incumbents addressed, let’s look at the new kid on the block: SketchyPad. Or, as it likes to be known on the iPad, Sketchy. The name could really use revisiting since you don’t sketch in the app at all, and there’s some serious namespace collision in the App Store.

Much like iMockups, SketchyPad is focussed on making interface wireframes. Also like iMockups, SketchyPad opts for the aesthetics of real-world materials. Where iMockups uses a wood panel in a non-ironic shade, Sketchy goes for the stitched-leather look… uh oh.

Interlude: On The Restoration Hardware Interface Movement

Hold on, SketchyPad, I’m gonna let you finish, but there’s something I gotta say.

While the “real materials” look in iMockups and SketchyPad are not my taste but tolerable, the leather treatment in Pages is far worse. Every time I notice it I feel the presence of a nameless silver fox in a smoking jacket, cigar and cognac in hand, telling me I’m in his Classics Reading Chair.

I blame Wil Shipley, creator of Delicious Library, not for embracing the real-world look of a wooden bookcase but for doing it so well that people thought they could just copy the idea and achieve the same sensibility. With rip after rip on the same idea, parts of the App Store begin to feel like shopping at Restoration Hardware.

Chair, or audio mixer app? You decide.

On the iPad too many developers, Apple included, are flogging the trope so hard they step outside the use of a metaphor and become set designers. Remember those absurd interfaces that tried to simulate a desk or a room, like MS Bob? Cue fireplace crackling in the corner and a golden retriever sleeping contentedly, because the App Store is bringing kitchy back, to some degree anyway.

App users of good taste, band together and say no to Restoration Hardware UI designs. End interlude.

Back to SketchyPad

SketchyPad is a competent take on wireframing and what you find inside is pretty much what it says on the tin. But there’s one place where Sketchy kicks the competition’s butt and takes its ice cream cone: shape selection, movement and resizing are incredibly smooth and responsive, so much so I wonder if it’s witchcraft. With other apps you tap to select a shape, then tap and drag to move it. SketchyPad makes selection and action work in a single gesture, which might sound like a small difference but it really makes its peers feel cumbersome and pokey.

SketchyPad is found with other similarly-named apps at cool price of $5, a total steal for an entry-level wireframing app.

Conclusion

So, which is the one wireframing app to rule them all? It really depends.

With SketchyPad and iMockups, an interface can be diagrammed to completion more easily, but it only really works when you’re doing stuff that ONLY uses well-established UI patterns. For interfaces that push the envelope in any way, you’ll want Omnigraffle for the flexibility, as well as the ability to move onto the desktop for in-depth design, richer functionality or simply more export options.

If you want to knock out some simple concepts with ease, iMockups and SketchyPad are the more affordable and nimble options. The lack of a modern UI stencil in Omnigraffle hobbles it in the comparison, and the price gap from $5 and $10 to $50 is hard to clear without a really good reason, and for me those reasons are flexibility and portability to the desktop.

That said, the evolution of wireframing on the iPad in just a few short months has been really encouraging. Apps like these make the platform feel much more mature than its few months than we could expect from any device on the market for just shy of six months, and that really makes you wonder and itch for the incredible things we’ll be seeing a year from now.