Review: Balsamiq Mockups

In an unrelated post, Jamis Charles asked, “I know this is totally unrelated, but you mentioned some time ago you started using Balsamiq Mockups. I’d like to pitch it to my UI Team. How has it been working for you? How do you incorporate it into your workflow? Has it increased productivity? A post about this would be greatly appreciated. Thanks.”

I’ll let others speak to their own experience, but here’s a quick post on how it worked for me. I was looking for something easy that would help my team focus less on pixels and colors during the planning stage, and just focus on concepts and framework. Balsamiq worked admirably for that purpose. In fact, within weeks of using Balsamiq for our weekly high-level design meetings, team members were themselves articulating the reason to use Balsamiq: “We don’t get bogged down in the details anymore!”

The workflow was something like this:

1. I would review high level requirements, talk with the customer and mock something up quickly in Balsamiq, with sketchy notes in the margins. As promised, the tool is drop-dead simple for most things it supports. Don’t expect a freeform drawing tool, but for dragging and dropping basic UI elements, it’s very easy.
2. Team would meet to discuss.
3. I would take notes directly in Balsamiq, sometimes updating the mockup, but often just leaving a note in the margins for later. Because of the low fidelity of the prototype, the team was able to get past nitpicking the details and focus on the functional requirements and workflow.
4. Once we moved out of planning into iterative development, I would refer to the mockups and the notes recorded there to create higher fidelity prototypes, using Fireworks images or HTML prototypes, depending on the need. I tried to get a cycle or two ahead of the dev team, and was generally successful.
5. As the high fidelity design progressed, we referenced the low fidelity mockups less and less. By the last cycle or two, we were hardly using them at all anymore. I probably haven’t opened the tool in 3 months.

So in terms of productivity, our planning discussions were more productive because we were not bogged down at the pixel level. But in terms of turning the Balsamiq Mockups into production code—that was not really our intent, nor does the tool really support that.

Anybody else have a perspective to share on this or other rapid prototyping tools?

posted by ted on Thursday, Jul 02, 2009 · 1 comment

Webslug: Helping measure the worldwide wait… sorta

Webslug claims it can “help you measure the worldwide wait.” Cool tagline, but I’m skeptical.

The time I got back on one site was infinitesimally small (less than a twentieth of a second) when personal experience shows it takes around 10 seconds. Another site showed over 40 seconds when my experience has been around 20 seconds. And finally the site doesn’t answer the question, “How fast is it at a given connection speed?” It just gives seconds to load without the context of a data rate. (The Firefox Throttle Add-On does this nicely, but only on the Windows version.)

On the upside, it does let you compare two sites to each other and collects measurements of all the sites that get tested for public review. I like these ideas, but Webslug will have to fix those deficiencies before I come back often.

One final wishlist item, the value of which was demonstrated in a presentation by Aaron Barker recently, is being able to see the difference between “page appears” (something happens to show the user that the site is loading), “page is partially functional”, and “page is fully functional” (100% loaded). If a page takes too long to appear initially, the user may get impatient and hit Refresh—which will actually delay them further by restarting the whole process. So even if it’s not fully functional there is value to getting something up there quick, even if it’s not the full meal deal. But I’m not sure an automated tool could really do that… Someone prove me wrong please!

See Webslug for yourself.

Also check Yahoo’s best practices for increasing performance on the front end. (Thanks for all your recent help on this stuff Aaron!)

posted by ted on Thursday, Jul 10, 2008