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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • LFA

    I have never before used mockups but thought I’d give it a try for once. I set out to do a mockup of my almost complete current project.

    I’m hooked! I never thought it would be so simple! I did it in under 15 minutes! Amazing…

    I’m absolutly going to use it in future project. Really cool!
    Thanks for a good article.

  • RGL

    Not sure why you state that Mockingbird doesn’t have an export function, because it does export to PDF and PNG.

  • http://geeksupport.com GeekSupport

    Another mock up place I like is Balsamiq Mockups (http://www.balsamiq.com/). All the mockup elements are hand-drawn and even have some elements for iPhone.

  • http://geeksupport.com GeekSupport

    http://www.balsamiq.com/ also lets you export/import the XML

  • http://www.pointclickproductions.com nbeske

    Nice review, I just signed up to test it out and like the system quite a bit. Im already using Balsamiq Mockups and find the selection and placement of Widgets better in Mockingbird. The desktop version of balsamiq is very cool though.

  • http://www.yummyduckdesign.co.uk mdavis1982

    The other thing that I found pretty infuriating with Mockingbird is that I couldn’t find a way to align the centres of elements to get, for example, a logo to be in the middle of a container. Is there any way to do that?

  • Anon

    Major issue you forgot to mention – does not work with IE

  • Sheena Pakanati

    I’m one of the co-creators of Mockingbird. Thanks very much for the write-up! We really appreciate your feedback.
    I just wanted to correct a couple of points that aren’t quite up-to-date:
    1. Export is available to PDF or PNG.

    2. We’ve done a lot of work to improve performance and you should now see a load progress bar instead of “slow script” errors when loading a large project.

    3. The off-screen scrolling behavior you mentioned has also been fixed.

    Thanks again for your other suggestions. We’ll work to make layers easier to order. We’ll also consider how to make it clearer where the Mockingbird interface ends and the wireframe begins – perhaps a fullscreen mode?


    sheena@gomockingbird.com
    Twitter: @gomockingbird @sheenapakanati

  • http://www.daniliants.com ArtemD

    I like FlairBuilder more. It has more features and export functionality.

  • Saikat Chakrabarti

    I’m the other co-founder of Mockingbird. Just to reply to some of the comments here:

    Anon: We’re working on the IE support – sorry about that!

    mdavis1982: There is an align option in the toolbar that should let you align multiple elements on the left, center, or right edges. If you mean something else though, please feel free to E-mail me – I’d like to solve this issue as fast as I can.

    Thanks for the feedback guys!

    - Saikat
    saikat@gomockingbird.com
    Twitter: @gomockingbird @saikatc

  • http://www.magain.com/ Matthew Magain

    @sheena Thanks for chiming in with those updates. Fantastic to hear that you’ve added that stuff (apologies, you obviously added it all immediately after I finished that project! I see your blog mentions being able to click the entire widget when linking pages, which is also great news.

    Full-screen mode wouldn’t necessarily fix the problem to which I’m referring. For example, if using a remote usability testing service like usertesting.com, I wouldn’t want to explain to my test users that they need to visit a URL, then enter “full screen mode”. I just want to be able to let them view the wireframe without the promotional “make your own” badge or the dropdown box. Perhaps something that a paid subscription could choose to hide?

    Thanks again for your comments and updates. Looking forward to watching Mockingbird evolve.

    Cheers
    Matt

  • http://www.magain.com/ Matthew Magain

    @ArtemD FlairBuilder looks interesting, but the convenience of having your wireframing tool as a web app is certainly something that appeals to me. Being able to usability test my wireframes by sending someone a URL and not requiring them to install anything is invaluable.

  • LostAgain

    Is there a definitive best wireframing tool out there?

  • http://www.magain.com/ Matthew Magain

    @RGL Right you are—it’s a relatively new addition, and wasn’t available when I was using Mockingbird intensively last month. I’ve updated the post.

    Cheers
    Matt

  • http://www.magain.com/ Matthew Magain

    @LFA Glad you enjoyed the experience of creating your first wireframe, and that you liked the article. Hope that wireframing serves you well in your next project, whichever tool you use!

  • http://www.magain.com/ Matthew Magain

    @LostAgain It depends on what’s important to you. People like different tools for different reasons.

    Gary Barber wrote an article about wireframing and prototyping tools for SitePoint last year (before Mockingbird launched) that covers a number of them, which you may find useful.

  • JdL

    It is NOT cross-browser. Mockingbird does not work with ANY version of IE right now, nor has it in the past 6 months since it went into public beta.

    Until it works in IE, I cannot recommend we use this at my firm since most of our F500 clients use IE.

    So Sitepoint sucks for saying “cross-browser” without checking the facts. And Mockingbird sucks for not supporting IE. Otherwise it is the most rocking mocking app I’ve seen to date and cannot wait until we can start using it with our clients.

  • Mats Svensson

    Seems too limited and hardcoded to me, but so does 100% of all these tools i have seen.

    You can never find the items and shapes you really want.

    You should just be able to quickly draw any shapes or figures freehand and have the program straighten the lines out, so you don’t have to be able to draw well.
    Then you wouldn’t need any library of graphics, pre-guessed by the program designers, that never fits anyway.

  • http://www.magain.com/ Matthew Magain

    Mats Svensson wrote:

    You can never find the items and shapes you really want. You should just be able to quickly draw any shapes or figures freehand and have the program straighten the lines out, so you don’t have to be able to draw well. Then you wouldn’t need any library of graphics, pre-guessed by the program designers, that never fits anyway.

    I disagree. The reason that so many UI conventions exist is that they work. If you’re reinventing a wild and crazy new way of allowing your users to navigate that doesn’t make use of tabs, buttons, radio buttons, checkboxes, boxes etc then you better have a pretty damn good reason for doing so. 99% of the time, the widgets on offer should suffice. You can style them to make them unique and personalised later.