I’ve heard many people rave about Balsamiq Mockups, an Adobe AIR app that helps design user interfaces, but until today I had never looked into using it myself. Like many developers, I don’t mind opening up my IDE to build a prototype and us that to tweak my user interface from. I felt that I was saving time, since the prototype was the same codebase that would become the app I was getting my design time for free.
That’s a common mind set, but it’s the wrong one. You’re not saving time and instead spending more time because the tool isn’t the right one for the job. Instead of focusing on the user interface you deal with getting the CSS property correct, or the font setting right on the WinForms control. Even Blend, a tool for creating UI, clouds up your process by distracting you with color options and drop shadow effects. It gets worse; since it takes so much effort to get something to look the way you imagined in these tool, you won’t change everything to fix a problem. You accept a subpar user interface and the app suffers.
Today I tried, ranted against, and rejected Seesmic Desktop, the latest twitter client. Like all twitter clients I’ve tried, it was very proud of it’s UI – to the point it was in the way. I might be a minority, but I use twitter website almost exclusively, and don’t want a client taking up half a monitor. I have been thinking of writing a twitter client for me, and I’ve even given it a name: Damn Simple Twitter. I have an idea what it would look like, so I tried out Balsamiq with a quick mockup:
This was a very quick mockup – as in it took me no time at all. The Balsamiq UI is very intuitive, and I had little trouble finding what I was looking for. The export features are nice, which include both xml and png and an export to clipboard feature for pasting mockups into emails (and blogs). There is a full screen mode, and I can see using Balsamiq in a meeting with end users and stake holders to great effect. Once I’ve mastered the hotkeys, I will be putting this theory to test.
Then, the real magic kicked in – looking at this crudely drawn mockup I started to see faults. I had moved the user images out of the way of the text, but the UI still felt bulky. I had a chat window open, and thought “what would a twitter chat client be like?”. Quickly, I changed my mockup to reflect this, and then i started wondering how I would use this app. How can I add a tab? What if I want to manually refresh? How would I setup my account? After about 10 minutes of mad mocking, I was left with:
I fell pretty good about it too. More importantly, had I created the first version in code I would have never been able to make it through all the revisions that led me to this design. The power of right tool for the job.
I’m now using Balsamiq for a larger project at work, and finding that finalizing the user interface and scope to be much easier. When you have all the proposed features on screen at once, it is easy to see what’s redundant and awkward. That’s something bullet points and a text description have a hard time exposing.
I’ve given a pretty glowing review of Balsamiq, and I must disclose that I was given a free copy for review. Actually, I wanted to check out Balsamiq, and hit up my “connections” to get me a free copy (i.e. I begged and abused my blogger status and MVP-ness). Balsamiq has a free trial version and is currently $75 to unlock the full version. I don’t have any negatives, but I do have some things I’d like to see added in a future version:
- Currently you can only save a mockup individually; I’d like to save and load a set of mockups
- The current method of a “master template” is really just creating a background image and loading that for all mockups – real templates would be nice, similar to slide masters in PowerPoint
- When viewing a mockup in full screen mode, page up / page down should cycle through the open mockups – this would be nice in a meeting / review setting, to move through each screen of the app while explaining the user story
Posted By Mike On Thursday, April 09, 2009
Filed under design developer balsamiq |
Comments (4)
Nathan Blevins
-
Thursday, April 09, 2009
8:45:43 AM
Interesting! I am sure that you are aware of it, but have you played with Sketch Flow that was demoed during Mix this year? Balsamiq Mockups looks as if it is a much simpler tool w/ a much simpler goal than Sketch Flow but I wonder how they compare.
Thanks for the post, I will have to check it out.
Re: Twitter client - Sounds like you want to just make an rss of your twitter stream w/ grouping. I know you had issues w/ Tweet Deck, but, currently, it is the best one out there to handle searchs, grouping, etc. Sadly it does not have dual account support. Also, in Seesmic Desktop's defense, they are still in AlphaBetaPreivew (whatever, lol) and are probably very open to comments such as yours. :) I like the promise it offers, but I am giving them a few months before I even try it.
Mike
-
Thursday, April 09, 2009
11:50:02 AM
I haven't tried out Sketch Flow, so I can't say with certainty, but I get the impression it is too detailed and will suck you into "what color should this be?" type of thoughts. The beauty of Balsamiq is the forced simplicity - though looking at Sketch Flow, it's not hard to see where the idea came from ;)
Noel
-
Saturday, April 11, 2009
2:47:18 PM
That's such a great find! When all you want to do is get an idea on "paper" it's important to be able to get the flow going and not distracted by the details of the technology or design. It sounds really easy to use and I'm definitely trying it out.
Klaus Oberdalhoff
-
Tuesday, January 18, 2011
7:25:20 AM
Hi,
as MS decided to not include Sketchflow (part of Expression 4) into the latest MSDN "for mere mortals" it's a rather expensive product as you have to buy the full expression version (~600 $ as faras i know) whereas Balsamiq is available (single user) for less than 100 $.
mfg
Klaus
