Mockery Blog

After several months, we released Mockery 1.1.0 last night. There are a lot of big changes:

• New and much improved rich text widget (based on TinyMCE)
• Awesome new data grid editor/builder
• Improved look and feel
• Much better stability, particularly on Macs and with large documents

You’ll find lots of other fixes and tweaks; it’s our biggest update yet. But you may wonder why it took nearly 5 months. Well, for me the central character in the story is Not Invented Here Syndrome.

Now, you’re probably all familiar with this nefarious malady that we developers suffer. In case any of you aren’t, it’s a term to describe reluctance to use technologies that were not developed in-house. There are a lot of justifications for it, and it doesn’t always cause problems, but what is important to consider is that if it bites you, it’s probably going to bite you twice.

What does that mean? Take the example of Mockery’s rich text editor control. When we started Mockery, we built what we thought was a robust and powerful editor. Why didn’t we use a free, open source, off-the-shelf solution? Well, the options we had were mostly web-based, and Mockery isn’t really a web app, and we were sure we could do a better job…and so on. At least part of the reasoning was (I’m sure) that it would be fun to write a WYSIWYG.

It was, and it wasn’t. But that doesn’t matter, because either way it was a lot of work. So we stuck it out, but eventually it became clear that we did not have the focus, resources, or motivation to compete with TinyMCE. The only answer that made sense was to bite the bullet and just use it. No big deal, right? We’ll just throw our stuff out and integrate the new stuff, no problem, right?

Unfortunately, we’d already painted ourselves into a bit of a corner with our own tool. It had features that no off-the-shelf system had, had a different input and output model, fired different events, accepted different commands…incorporating a 3rd party tool into an existing app is not an easy task.

The moral of the story is this: think very seriously about what you’re doing before you set about reimplementing anything non-trivial. You’re not just risking the time it takes to re-write what someone else already wrote; you’re risking the time it will then take you to integrate what you should have used in the first place.

I know I’ll be heeding this advice, and I know Mockery will be much better for it.

Today I’m posting the first of what I intend to be a regular series of posts detailing tips, tricks, and lesser-known features in Mockery. You may be using Mockery (if you’re not, get over to the download page and get your copy!) without knowing about some really cool features.

OS Themes

One of Mockery’s most powerful features is one that a surprising number of users don’t take advantage of: the ability to view your mockups as realistic Windows or Mac applications. You can change the OS theme of the current slide on-the-fly using the toolbar buttons:

Populate menubars and menus with common values

You can save a lot of time when adding menus to a mockup by using the Populate with common values command. To do this, first add a menubar to a window by checking the “Has a menubar” box. You’ll see the menubar appear (either in the window or at the top of the slide, depending upon whether the current theme is MacOS X). You can enter the name of a new menu in the text box and press enter to add a new menu.

However, Mockery can help out by adding the default File, Edit, and Help menus for you, including their common menu items. Just right-click on the the menubar (Cmd-click on a Mac) and choose Populate with common values. You’ll see the new menus right away.

Copy as Image, and paste image data into Mockery

You may not know that you can copy any Mockery element to the clipboard as an image and paste it into an email or word processing document. It’s easy. Just highlight the item you want to copy and click the Copy as image button on the toolbar.

You also may not know that you can paste image data directly in to Mockery. This can be very useful for basing new mockups on existing applications. Just take a screenshot of the app you want to modify, then choose Edit-Paste in Mockery. You’ll see a new image element has been added to your document.

Where to learn more

You can find lots of tips and instructions on the support page. Also feel free to get in touch with me via email or on Twitter at getMockery.

My apologies if this is too obvious, but based on a discussion I was involved in yesterday it seems there are three distinct steps to creating a great UI.

1. Accomplish the task

Often overlooked, this is the foundation and the most important step. Without this step, no matter how well you do on steps 2 and 3, you have failed. You must allow the user to accomplish their task. That may be editing a photo, sending an email, or sequencing a DNA strand. Whatever it is the user is trying to do with your software, it must be possible for them to do. Sounds obvious, but consider how many times you have used software that has failed this step.

2. Facilitate the process

Once you’ve established that your UI allows the user to accomplish a task, the next step is to make accomplishing that task as easy as possible. This involves arranging controls and pages correctly, minimizing the risk of unwanted actions or data loss, usability testing to ensure that the UI is efficient and to minimize user errors, and smart feature design to increase efficiency.

As long as step one is followed, users may put up with some pain to use your application. However, if you don’t do your best to facilitate the process, using your software will be an unpleasant chore that users put up with. We can summarize step 2 as don’t get in your users’ way.

3. Make it fun

Here’s the step that gets missed most often. Step 1 enables users to use your software. Step 2 minimizes the pain of doing so. But the rare piece of software that takes the next step is something special.

One way to make software fun to use is to make the UI visually appealing. Your users are going to have to look at it while they use it, so it might as well be pretty. Apple has obviously always been a leader on this front, but Microsoft has been making some strides on the eye-candy front lately.

Making your software fun to use also involves exceeding your users’ expectations in a surprising way. This can come from some unexpected sources; just recently I found that the mail merge option in Microsoft Word was so easy I couldn’t believe it. When I learned that I can highlight an email attachment in Mac Mail and press spacebar to QuickView it, I was delighted. I’m sure you can remember plenty of times a piece of software just got something right.

So once you’ve established that your software gets the job done and stays out of the way in the process, we can sum up step 3 as make them love it. I know that’s my goal with Mockery.