Mocking Up with Mockingbird

    Matthew Magain

    Mockingbird Logo

    Mockingbird is a tool for creating wireframes for your web site or web app, in the same vein as Axure or Balsamiq (read Alex’s write-up in Design View #59).  There are, however, several features that, in my opinion, really set Mockingbird apart as an outstanding tool for creating wireframes:

    • It’s free (for now, anyway): While this may change once Mockingbird moves out of beta, at the moment it costs nothing to use the app. Always a good selling point!

    • Online and cross-browser: Mockingbird is powered by the Cappuccino web framework, which means it works well in any modern browser on Mac, Windows or Linux. No installing of software or configuration required.

    • Linking between pages: This is the really killer feature that sets Mockingbird apart from the pack, in my opinion. It’s all very well to hand the client a PDF of consecutive pages, or load up the relevant files in Fireworks, one at a time. But to let them click and explore, as if they were navigating a real app, is insanely useful.

    • Low friction sign-up: If you use Mockingbird, you don’t need to sign up for anything before you can begin using it. Of course, once you want to save a wireframe for future reference, then you’ll need to provide an email address — but that’s it. The administrative interactions are kept to a minimum, allowing the app itself to shine.

    • Sharing: Once you’re ready to share your wireframes with someone else, you can generate a URL to send to your peers, your client or to participants in your usability test.

    • Undo. It’s a feature that we come to expect in desktop apps, but hitting Ctrl-Z (Windows) or Cmd-Z (Mac) is one of those things that I often assume won’t be available in a web app, aside from the rudimentary text undo built into a browser. Not so with Mockingbird — what seems like an infinite number of Undo states are available, so you can roll back your actions should you need to. Nice.

    • Smart Guides: It seems like the kind of feature that would be impossible to implement in JavaScript, but credit to them — the creators of Mockingbird have done it. When you’re aligning objects in Mockingbird, you’ll be presented with helpful horizontal and vertical guides to indicate when an object is lined up with another object on the page.

    Of course, no tool is perfect — there are a few areas that could do with some improvement. Let’s take a look at some of them.

    If Only It Could …

    While Mockingbird is certainly an impressive web app, here are some of the shortcomings that I hope the creators can address before releasing version 1.0.

    • Slow load time: Once you’ve had a play with Mockingbird, you’ll realise that its goals are very ambitious. There is a fair amount of processing going on to ensure that the experience of prototyping your Next Big Thing™ is as much like using a desktop app as possible.

      As a result, not every machine is going to be able to run Mockingbird with ease. If you’re running an older machine, chances are your browser will regularly throw you the error message: “The script on this page is taking a long time to execute. Do you want to wait, or shall I terminate the script?” This performance issue possibly stems from the Cappuccino framework itself.

    • Awkward item hierarchy: Like many graphics applications, Mockingbird places your widgets on the screen in a hierarchy, with the most recent item being added to the top. However, the management of these layers is almost non-existent — there are Front and Back buttons, but there’s no way to know which objects are on top of which. Likewise, if you want to bring an object from the bottom to the top of the stack, you have to hit the Front button repeatedly until your object rises to the top. Adding Bring to Front or Send to Back buttons would go some way to solving this issue.

    • Off-screen bugs: Resizing or dragging items within the viewport works extremely well in Mockingbird. But if the dimensions of your wireframe are larger than the viewport, then things don’t work quite so smoothly — it can be a little frustrating trying to guess where to finish dragging an object off-screen without actually seeing it. That said, the current implementation is no show-stopper, and I’m sure the team are working on fixing this behaviour.

      Note: while not perfect, the development team have updated the Mockingbird UI so that dragging or resizing items off-screen works is vastly improved. Kudos!

    • Mockingbird now offers the ability to export to either PDF or PNG format.

      Lack of export: The only way you can get your wireframes out of Mockingbird at present is to do a screen capture. I’m betting that this will be one of the key features of a paid subscription service, once this launches.

    • It can get in the way when testing: We ran some usability tests on the wireframes that we created with Mockingbird, and for the most part it was suitable for this purpose. However, a couple of our subjects confused the Mockingbird banner across the top of the page (promoting the tool and providing some simple navigation between wireframes) with the wireframe itself. Additionally, the link area for clickable portions of the page is quite small, which confused some of our users.

    All in all, Mockingbird is an excellent tool that raises the bar for what is possible with a web application. The fact that it is free means that you now have no excuse not to include wireframes in your web design process!

    This blog post was republished from Issue #67 of the Design View newsletter. If you enjoyed it, subscribe to the to receive the latest in web design wisdom via email.