The Importance of Lo-fi Mockups (and why Balsamiq rocks)
Now as a (mainly) back end shop, the issue we run into is that we often get comps from designers that look good but that have no information architecture (IA) thinking at all. Also, as we're often brought in after the comps have been agreed, we seldom have the ability to change the approved comps. It is bad enough that the sites often don't get any IA loving, but sometimes we even get sites where the functionality implied by the comps is different from the functionality we quoted for, leading to the designer having to change the approved comps or us having to re-price the job to add the cost of implementing the additional functionality.
For larger projects we sometimes used to develop wireframes, but usually the cost of wireframing the IA was too high (bear in mind these are usually sub $25k apps to the end user - often sub $15k - including project management, look and feel plus the substantial back end functionality we provide). Also, I never really found a tool that I was comfortable with for quickly wireframing sites. I'm not a designer and I found most of the designery tools to be a little too slow to use and to have a little more learning curve that I was willing to put up with . . .
Recently, I started playing around with Balsamiq. It's an AIR app that you can use to very quickly create wireframes of applications (here are some of their sample screen shots). My rule of thumb is that if I can't be productive in the first hour and be doing wireframes in 5-10 minutes per project, I'm probably not going to bother. Yeah, I know, I'm a bad human being, but I'm just not that into prettying things up and while I understand intellectually the substantial power of visual representations when compared to plain text in terms of clarity and comprehension, it just isn't something I've ever been able to persuade myself to spend the time on.
I saw Balsamiq back in the summer, but I've been too busy with other things so I only started to play with it for real earlier today, and I've got to say that I am very impressed. Within five minutes I had my first site mockup and I felt it was something I'd be willing to show to a client to discuss their site. The UI is very intuitive (dragging and dropping a set of graphics), the graphics are (for me) perfect. I always think the best wireframes are the ones that look hand drawn. I find that if the wireframes are too clean or precise, users assume that they are conveying more information than planned (e.g. assuming hat perfect rectangular boxes are the exact size that they'll take up in the final comps). I love the hand drawn style and while I haven't had a chance to use the tool for a real project, I think it's going to be great for the projects where I can justify an extra half hour or hour upfront to agree the IA before getting the designer to "skin" them and produce comps.
Have you played with Balsamiq? Do you do mock ups for small projects? What are your experiences? Input appreciated!
In my experience, the root of customer complaints is that we don't force them to actually site down and use the mockup first hand. If we did that, I have to honestly say that I am not sure how much the fidelity would actually matter.
For clients I do agree with Ben - I think they expect to be able to click things - but even then I think Balsamiq has some benefit... pre-mockup mockups???
It would be intesting to see the code behind it - I'm wondering if it wouldn't be possible to layout something and then press a button to generate the code for it - at least in a rough fashion that you could then refine...
http://www.pbell.com/index.cfm/2008/11/3/Wireframe...
and then two!
http://www.pbell.com/index.cfm/2008/11/3/Prototypi...
Interesting thought (genning code from the wireframe), but having looked at it I'm not convinced it is worth the effort. I find that te amount of data in a mock up is small enough that to save the effort of re-keying the data isn't worth the exra formality that becomes necessary when you increase the amount of meaning of your mock ups sufficiently to make them usable for code gen.
It is an interesting thought though as my original goal was a pure progressive refinement approach where you started with business intent, then roles, then user stories and slowly added more information until you ended up with with a working application with full traceability. I'm now a little more pragmatic and am open to the occasional bit of duplication f information. That said, being able to gen lower fidelity mockups from the actual working application could have some value in terms of being able to look at different system concerns from the same code base, but it isn't something I'm in a rush to develop!
@Mike, No I haven't, but I'll have a quick look.
I tried Pencil when it was first released and it was a bit rough around the edges and then I found Balsamiq and never went back to try it again.
I've only used it a little bit, and not on a "real" project, so I can't attest to how well end users will react to how lo-fi it is.
The ability to link mockups together is a highly requested feature, and I am thinking about how to provide it without making the tool harder to use (it's a tricky one). Also, once you have that feature people will request "Export to HTML+Image Maps" and "Export to interactive PDF", which I can also do...but it will take time. That's the reason I am keeping this feature for v.2, once the dust settles on the current 1.5 updates ( http://www.balsamiq.com/products/mockups/desktop/n... ).
That said, the format I use is simple XML (I call it BMML), so someone with mad XSL skillz could write a BMML->HTML tool, or BMML->MXML...you name it. :)
Peldi
The developer, Peldi who posted above, seems to be a great guy, and responds very quickly to questions. He even gives away licenses to people "doing good work" such as charity etc. Everyone who does web development needs to at least look at Mockups.