Balsamiq Mockups Review

April 23rd, 2010 • 3 comments Articles, Reviews
Tags: gui, wireframing

I was looking for a tool to separate two concerns: How a website looks, and what it does. These two are often mixed up, and that especially hurts large projects.

The Tools

Wireframing tools take away the looks and replace it with hurried sketches. By tools I mean anything from a napkin and thick ball pen, storyboards with post-it notes, to complex pieces of software that require prior training.

The problem with drawing websites on napkins is that you can’t easily simulate what happens when somebody clicks on a button or writes the wrong text. It is possible, but you’ll have to stress your imagination skills, which would take away a tiny, precious part of your brain.

Although nothing is as intuitive as your pen and throw-aways, the added bonus of a nearly functional sketch tips the scale for me towards software. There’s a sense of accomplishment when a project starts to make sense, and all that’s left is to dress it in silk and gold.

I had to choose one of these tools and stick to, and since this is a Balsamiq Mockups review, I’ll brief you quickly on each:

Pencil

This is a nifty Firefox addon. Pencil runs like a separate application. It’s pretty capable, but it seems to be geared towards sketching desktop applications. It’s also lacking on the that side since there’s no snapping, no grid, no easy alignment and distribution. The stencil library is ok, but it barely has more than a few Windows and Linux GUI widgets.

Denim

Denim tries to be your digital napkin. It’s just a large canvas that you’re free to draw anything on. This is great for jotting down a sitemap, a flowchart for interactions, but leaves you wanting when you want to take things a step further.

The cool thing about Denim is that you can create interactions and link multiple pages from a sitemap togther. On the other hand, I’ll need to buy a tablet if I want to make the most out of Denim. My hand drawing is ugly enough, and mouse make my drawings even worse.

MockingBird

This is my second favorite piece of software. It has a nice library of widgets that look half-done, it’s very simple to use and you don’t even need to install it. The best and worst thing about it is that it’s completely online. So there’s no need to download or install anything, but without internet, you’re stuck. You also need to register to save your projects.

Projects are useful, and it’s one of the few things missing in Balsamiq. You can link to widgets to different pages by a simple drag and drop, and once you save a project you can share with a team of collaborators.

Balsamiq Mockups

Often mistakenly called Balsamiq. It’s very similar to MockingBird. But while the latter is built entirely with JavaScript, Mockups is built on Flash, so you can use it both online and from the confines of your desktop

Like MockingBird, Balsamiq Mockups has a large library of widgets, but unlike MockingBird you can extend it, either with your own, or from Mockups To Go. Balsamiq can also import and export your designs to PNG, PDF and copy it to clipboard.

Disclosure

I chose Balsamiq Mockups. Not only because I could write a keygen for it in 10 minutes, but precisely because I didn’t need to. Balsamiq sent me a free license, one that even they can’t revoke. I felt so special, until I found out that Balsamiq give away free licenses left and right. Non-profits, bloggers and reviewers, all can get a license.

Their philosophy is: If don’t want to buy the software, you never will. You’ll pirate it, hide it from friends and family and live years of shame, but you wouldn’t spend a dime. On the other hand, if you really like the product, the company or the team behind either, you’ll probably shell out this money with a smile, even if the product is free in the first place.

Balsamiq make you like them, even if that costs them $49 in Mockups revenue.

The Greeting

Balsamiq Mockups is pretty simple. You get a white canvas with a grid, and a tabbed bar filled with icons. If you know how to drag and drop, you already are a Mockups expert.

Mockups doesn’t bother you with constant nagging about registration. It’s mostly free. You only need to register when you want to link multiple mockups, or when you want to save your work in Mockups’ native format. You can still export and import your work in the unregistered version, but that’s a hassle.

The Goodies

Most wireframing tools have a separate pane to edit widgets’ properties. Like changing the text on a button, or the colors of your widget borders. Balsamiq saves precious workspace and uses a tiny floating window that only shows when you move your mouse over a widget.

The library is extensive, and it hits that spot of looking rough, but not ugly. The collection includes almost everything under the sun: Big pie charts, navigation menus, buttons, lists, checkboxes, date and color pickers, scroll bars, tabbed windows, even iPhone controls. In addition to that, you get mark up widgets for your designs, like sticky notes, arrows and a picture to scratch out unwanted elements (I’ve used this to scratch out the EQ from the iPhone draft below).

Editing widgets is a breeze. Mockups uses plain text for most widgets to modify what they display. See for example how the iPhone menu below is generated. I didn’t have to select each menu item, go to a properties window and select how I want it to look like or what’s written in it. All I did was edit the text.

Mockups can link multiple pages together. This is an advantage over napkin drawings. You can create a fully interactive, nearly functional design to demonstrate, and get a feel of how the final project will act. Remember, Mockups are all about action and preliminary layout. At this stage, how your project looks, styling and colors are irrelevant. Most elements can be linked to other pages, as long as all pages (Mockups files) are in the same folder.

The fun begins when you’re done editing, laying out and linking pages together. That’s when you get to show off your skills and crazy ideas. Mockups’ full screen mode has a huge blue mouse cursor that’s impossible to miss, and there’s a button to hide your little comments and sticky notes.

The Badies

Let’s start off with the obvious one. Mockups is built with Flash, and Flash sucks. I know that I’m going to raise an entire crowd of “Flashists” against me, but there are only so many things you exclusively need Flash for, and applications isn’t one of them. I could partially justify it if Mockups was an online-only service and it was impossible to implement otherwise, but MockingBird proves that assumption wrong.

As for the desktop version, Flash is even a worse excuse. Nothing beats native applications, no matter how close you come. I don’t care how you build, what tools you use, but it has to look and act like everything else on my desktop. I expect the same shortcuts, the same behavior, the same dialogs and the same extensibility, especially on a Mac.

Another caveat is that Mockups’ thinks a project shouldn’t be more than a folder with a few mockup files in it. Mockups lets you create links only if the mockup files are in the same folder, and it turns a blind eye to files within subfolders. This it too simplistic an approach for large projects where things get hairy and organization is vital.

Speaking of links. I like MockingBird’s approach better than Balsamiq Mockups. Mockups makes me click on a widget, go to float properties window, then select a page from a drop down menu. It’ll be great if I could drag a page and drop it on the element to link them together. I don’t want to spend time hunting for anything in dropdown menu.

These are the biggies. The rest of the little bugs are easier to forgive. Like the useless grid that you can’t snap to. Mockups remedies that by snapping to existing objects, so you can center things and align them together. But the grid is ticking me off. If it’s there, I should be able to snap and resize my objects to it.

Keyboard navigation is only 80% where it should be. Since I’m not drawing anything, I want to be able to move through objects using a keyboard. Or navigate the widgets library. I want to use my Tab button to switch between selected elements. I add and place my widgets without having to resort to a mouse.

Conclusion

In a nutshell: Buy Balsamiq Mockups (or review it on your blog). It does exactly what you would need, and nothing more. This “nothing more” is what sold me on Mockups.

OpenDocument: Signs of Winning

May 5th, 2006 • 1 comment Articles, General

If you were following up on the Massachusetts case and you really like to see ODF win, then I think you’ll be happy to hear that ODF is now ISO/IED 26300.

Here’s the gist of the story so far:

• Massachusetts wants to use ODF instead of Microsoft Office format. They say it’s open and it’s XML.
• Omitting the “and it’s”, Microsoft calls their new competitive format OpenXML!
• Massachusetts say no, it’s not standard.
• Microsoft submits OpenXML to ECMA. They pledge not to sue.
• Massachusetts start reconsidering.
• ODF is approved by ISO. OpenDocument Foundation makes a Microsoft Office plugin to support ODF.

But what’s the big fuzz, eh? Office files are office files, there shouldn’t be a big difference in what to use, or so they want you to think.

You see, the big difference, the “openness” of a file format isn’t technical at all. Developers can support binary file formats (e.g. PDF) just as well as they support plain text or XML-based ones (e.g. ODF), there’s nothing much to it as long as the format itself is well document.

The burden is rather legal, it comes from enforcing patents and licensing costs on those who try to support Microsoft Office file formats. That’s completely irrelevant to the technology itself. Massachusetts didn’t want that burden, they wanted a format that no vendor can control.

The way I see it is if you’re looking for vendor independence (as opposed to vendor neutrality) then you should go for ODF. It’s similar to how Ogg Vorbis compares to MP3, in the sense that the former is unincumbered by licensing, free from patents and you’re absolutely free to do whatever the hell you want with it (just don’t claim you invented it), while the latter forces you to pay licensing costs and at time you can be stopped legally from supporting MP3.

Vendor neutrality is all good, I’d be happy to see Microsoft taking a step towards that and be able to use their format in any other software. But what bothers me is that Microsoft would still retain the rights to modify the format for their own benefit without prior notice. They’ve been doing it for years with their binary format, and using XML doesn’t chage that.

Now compare that to vendor independence, where the format is controlled by a comittee (e.g. ISO, ECMA, W3C?). Technically, that doesn’t chage the fact that there’s a single legal entity behind the standard, but it’s completely different when that entity is a non-profit / non-profit-seeking one.

I’m not sure why Microsoft is scared from openning up their file formats, I mean really openning up. Nobody could care less about who invented a standard if it’s well-supported and approved by international standarization groups. Microsoft would still have a big advantage over the competition.

Everybody knows that Microsoft Office is superior to OpenOffice, and it would probably stay that way. Those guys have invested 15 years of R&D into that gorilla, it’s one hell of a beast there, it does everything you might ever want to do. Of course, most people don’t use 10% of its features, and 50% don’t work as advertised, but that’s besides the point.

Microsoft can learn a lot from Adobe! Think of it, Adobe created PostScript, PDF and SVG, all standards, all open, both binary and XML-based. How exactly are they supporting those? What’s in it for them? Well for starters, Acrobat now rhymes with PDF, their products are more or less synonyms with the technologies they invented. They have almost no competition, it’s very difficult to beat them at their own game, they invented that game.

Microsoft can do (or should’ve done) the same, open up their file formats, make everybody use them regardless of whether they trust the company or not (since that would’ve been irrelevant), eliminate the need for another format (just like PostScript did), and bam! You’ve got yourself total control over the office market. Competition would be running behind Microsoft trying to keep up with their features, and there would be no way they can do that without having a comparable budget.

Honestly, I switched to OpenOffice in it’s pre-1.0 days, my only reason was that I didn’t want to keep my files in .doc format. I didn’t miss many Word features, mainly because I don’t use most of them, I’m sure others would have. My second reason was that OpenOffice was Free software.

I value my freedom, I am not willing to let go that easily.

Which <H> to Use for Headers

February 13th, 2006 • Articles

I spent some time reading other’s opinion on which headings to use for entries. It’s shouldn’t be a big topic, but you’d be surprised just how many other perfectionist bloggers have discussed it. Colly has a great, though a little old, summery. Read more »