Mock-up and wireframing tools, I've found some decent options

Have you ever gotten part way through coding something only to discover that the customer or user:

• Forgot to mention something obvious and critical?
• Different people involved in the work had different ideas about how the same screen/page was going to work?
• Folks had a limited sense of the overall scope of work of a particular feature or group of features.

If you haven't, you've never worked in a group or for a customer ;-) I've been looking at about ten mock-up/wireframing tools lately and want to share some findings. This is a potentially huge subject so I'll be shorter than I might be...but longer than I probably should be. To cut to the chase, here are three products I recommend:

Mockingbird

Notice the URL - www.mockingbird.com is an unrelated company This is the best tool I've tried for capturing details during a meeting. Not as fast as paper and pencil for sketching, but darn close. No frills, no distractions.

MockFlow

Higher fidelity wireframes with strong linking and collaborative editing features. Really a strong tool.

Flairbuilder

Probably my favorite tool. It's as easy to use as a mockup tool like MockFlow but has a decent collection of low-end prototyping features.

Check them out. Everything I tried (about ten tools) lets you at least try things out for free. The price range on most of these products is in the $0-$99 range, not expensive.

Background

For anyone that's interested, I'll provide a bit more background about what problem(s) these tools solve, where I see them fitting into the overall range of techniques for nailing down requirements and then offer a bit more detail about what I thought about various tools. (There are lots and lots of tools - I tried some of the best and best known.)

As a means of avoiding all of the above problems and what goes with them (bugs, crappy results, cost and time overruns, etc.) there are a lot of techniques for gathering, defining, and validating requirements. In my experience there are two _wildly_ different approaches to this: Êtextual and visual. In what is likely to prove to be only the first of several sweeping generalizations, I'll say that programmers tend to use a more textual style and designers use a more visual style. I've met few people that do both.

I'd guess that most of us have seen requirements that look like this:

Lorem *ipsum dolor sit amet*, consectetur adipisicing elit:

• Sed do eiusmod tempor.
• Incididunt ut labore et dolore/ magna aliqua.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco.
• Laboris nisi ut aliquip ex ea commodo consequat.

And so on at great length. Such things are far less common in a pure-4D project context but do show up in other areas pretty regularly. As far as I can tell, such requirements have a very high rate of failure. Long, detailed requirements with bullet points have the unfortunate property of _looking_ technical and complete. There may be huge sections that are incomplete or really make no sense - but that's hard to see just from looking. I don't know, perhaps it's just me. One solution is to use 'scenarios' - short, narrative examples written as little vignettes that capture the essence of a particular feature. As annoying as I generally find Joel Spolsky, I highly recommend reading through his take on scenarios:

http://www.joelonsoftware.com/articles/fog0000000036.html

Anyway, I think scenarios are a great technique but, then again, I can type about 80 words a minute and did a lit degree. I would think writing little stories makes sense. Most people don't seem to think so or find it easy to do. So, it's a great technique in theory.

Right, now programmers aren't the only people involved in developing software - far from it. Designers and people with lofty and oh-so-modern titles (Interaction Designer, Information Architect, etc.) tend to use visual aids. Web designers, as an example, commonly create 'wireframes' which look basically like storyboards. There's a huge body and variety of tools and techniques in this space and I'm not the right person to map that space out. In any case, I think these guys are seriously onto something. Give me a picture of a screen and I can build it. Give me a bunch of bullet points...it's just not the same.

Why Don't We Wireframe?

I don't know why wireframing is not more common amongst programmers, but it's a dead-simple way to improve communication and reduce mistakes. I decided to take a fresh look at some contemporary tools and see what was best. Well, there isn't a best - it depends a lot on what you need, what you want, and who you are. For example, are you after a low-fidelity sketch look so that no one thinks the app is 'almost done' when it hasn't even started? Are you trying for a full, working prototype? Do you need to export your mock-ups to Word, PDF or something else as a client deliverable? Do you need to collaborate with others on the mock-ups? Different tools aim to accomplish different things. After trying out a stack of tools, I broke them into a few categories.

• Low-fidelity mockup tools
• High-fidelity mockup/wireframing tools
• Prototyping tools
• Other

I made these categories up and the lines between them aren't crisp, so others might rank and classify things differently.

All of the tools come with some kind of a trial version which is what I used before picking the ones I wanted to buy (MockFlow and Flairbuilder.) I built the "same" wireframe in all of the apps: a simple little log-in system that lead to an 'edit person' screen or a 'your log-in didn't work' screen. I wanted a simple but realistic example that involved linked screens. So, here's what I found.

Low-Fidelity Mockup Tools

It's easy for tools to be _too_ fancy. In a way, the very best tools for capturing and sharing ideas are a sketchpad & pencil or a whiteboard. A low fidelity tool ideally is super quick and easy to use and does *not* give a polished final result. The idea is to make things look rough so that people don't get hung up on details when what you're doing for is an overview. I tried out Mockingbird (http://gomockingbird.com/), Pidoco, Balsamiq (very well known), Hotgloo and JustProto. Of these, I though Mockingbird and Pidoco were pretty decent and I'm using Mockingbird these days to capture details from meetings.

High-Fidelity Mockup/Wireframing Tools

This is the sweet spot in my continuum. The tools have enough features to capture a lot of detail, but not so many features that I'd just rather bang out a real prototype. I tried and liked three tools in this category: Flairbuilder, MockFlow and iPlotz. They're all decent and they all seem to be written in Flex. I think Flairbuilder has the best ergonomics and is the best at making a more prototype-like wireframe and that MockFlow perhaps has the best collection of features. I was in love with iPlotz before either of these other two, so it's another worthy contender...with another revision from any or all of these products my relative rankings might well change. MockFlow and iPlotz are stronger on collaboration than Flairbuilder, for the record.

Ah, if you try out MockFlow on-line (you can do real-time collaboration, but I haven't tried that yet - give me a week), also try the off-line (AIR) version. I found it pretty annoying that the on-line version didn't give me standard keyboard shortcuts. Well, the off-line version gives you native shortcuts and syncs up with the hosted data seamlessly, or so it seems to me.

Like I said, I'm buying MockFlow and Flairbuilder and may put iPlotz into the mix as well. As I live with them, I may have more informed opinions. Or just have more opinions ;-)

Prototyping Tools

Prototyping tools aim to let a developer or group build a visually functional prototype without coding. They strike me as an excellent idea for a project where a lot of different stakeholders need to participate. With such tools, you can really nail down the _exact_ behavior of the application unambiguously before any code is written. It's easy to see how this could save huge amounts of time, money, and wasted effort. Eventually, these tools graduate into full code generators that produce Java code or what have you. On the low-end, a Flairbuilder actually has a fair number of prototyping features.

I took a quick look at Axure RP Pro (seems awesome), ForeUI (also looks good) and ProtoShare. As I generally work in 4D and Flex for reasonably small development groups, I don't think the prototyping tools are an ideal match. They're complicated enough that I'm going to keep thinking "I could just wire this up for real, why am I in this complicated tool when I'll have to start over again in 4D or Flex?" This isn't a comment on the tools, I really think they seem promising for the right situation. I'm just not in any of those situations for the moment.

Other

I tried Cacoo as I saw mentions of it as a wireframing tool. Sure enough, it has wireframing diagram abilities, but without the ability (as far as I can tell) to link diagrams together. The point of wireframing apps is, for me, very much about showing the links between screens and states. So, I didn't consider Cacoo suitable for what I need now but I was really impressed all the same. Wireframes are just one of a stack of charts and diagrams you can make with this on-line tool, such as network layout, flowchart, sitemap, office layout, and a bunch of others. If you ever need to do collaborative diagraming - or just want a quick and easy to use on-line diagramming tool, check it out. Cacoo has competitors so if it's not what you're after google something like Cacoo reviews and you'll probably end up with a bunch of links to pages of links to various offerings.

I'd love to hear from anyone that is using any of these tools - or something else. Any suggestions, comments, etc. appreciated. Well, I'll address one comment that will come up right now:

I use 4D for that - it's a great tool for prototyping.

It certainly is. What I'm talking about here is making the overall development process more efficient than you can do if you have to write code. I see trying to do everything in 4D rather than use another tool as similar to graphic folks that do their wireframes in Illustrator, PhotoShop (!), Excel (!!), or PowerPoint (!!!). That's just sad :( Plenty use Visio or OmniGraffle which, while less sad, seems far from ideal.

Anyway, comments appreciated.