UI Mockups
I spoke in the past about the importance of UI mockups. I consider them an essential part of software design. It is often much easier to gather requirements when you are talking in concrete terms about how the software looks like.
It is important to note that I do not care about the look and feel of the mockup, in fact, I don’t want it to look good, it should have a drafty look that would make it clear that this is just a mockup. It is a communication tool as much as anything else. It just allow me to talk about things in concrete terms.
A while ago I found Balsamiq, and I was happy. Balsamiq does just about everything that I want from a UI mockup tool.
Except, it doesn’t do Hebrew :-(.
That prompt me to start looking at several other UI mockup tools, to see if there are any that do support Hebrew and that I can tolerate them.
I tried a few others, and got varying support for Hebrew. The best ones from Hebrew support perspective where Mockup Screens and Blend’s SketchFlow.
My test scenario was this UI (in Hebrew):
This is Balsamiq mock, which took about 3 minutes to build, the first time I used Balsamiq.
I could get it in Mockup Screens after about ten minutes of playing with the options to get it working. Mockup Screens is nice, but it is giving me too many knobs to turn. I felt it especially when I tried to do the table. I had to specify columns & rows, and specifying the data was done in a separate dialog.
It works, but it is awkward.
The next one I tried is Blend’s SketchFlow. I heard a lot of excitement about it, so I tried to give it a spin. A Silverlight 3 SketchFlow project simply does not support Hebrew. A WPF SketchFlow does, and that exposed me to a very nasty surprise. I was expected a way to easily build sketches of the screens that I was interested in.
Basically, something similar to what Balsamiq gives me. What it turns out is that there are a few simple controls (check box, drop down, etc) and everything else that you want you need to actually sketch. That is, sit down and draw it.
The problem is that this take inordinate amount of time. Especially if you are actually trying to do something like the screen above. I just wan’t a stupid table with some data, but this was way too hard to do in SketchFlow. If I am reduced to literally drawing on the screen, I might as well draw it on paper. It is about as easy to manipulate, at that stage.
In the end, I think that what I’ll end up doing is using Excel or Word as the mockup tool. They both have good Hebrew support, and they can do things like tables, drop downs and checkbox easily, which is pretty much all I need. It also make it perfectly clear that this isn’t something executable.
And if you don’t care for Hebrew support, go and use Balsamiq, it is awesome.
Update:
Matt Kellogg has informed me that you can use Balsamiq with Hebrew support, all you need to do is set Use System Fonts:
And once that is done, it took only a few moments to handle this:
Now, it does suffer from all the usual RTL problems, but it is working, and it is still by far the best one out there.
Comments
I was going to say, a drawing board and a pencil in your hand fully supports Hebrew.
You have inspired me to use UI prototypes earlier / more often.
What if you turn on "Use System Fonts" In Balsamiq? I turned it on and was able to paste in a few Hebrew characters and they appeared fine. The option is under the View menu.
very cool product, just checked it out for the first time. This avoids the anti-pattern of using your native code and ending up with prototype code in production (which I see too often).
Also much more slick than Visio
Matt!!!!!!
THANK YOU SO VERY MUCH!!!
You solved my problem :-)
Glad I could help :)
In a previous workplace, all mockups were done using mspaint.exe... They'd take an existing screenshot, copy+paste textboxes & whatever, change texts... The product managers got quite good at doing that, too!
I love balsamiq...only thing I miss is the notion of showing a hierarchical grid which we tend to have in place quite often...
Balsamiq is a top shelf example of a small and useful MicroISV product that excels in usability.
I am in awe at how simple it is they made it so easy to use.
To make something that simple to use must be really difficult :-).
Ayende, if I understand correctly, the problem with Hebrew and Balsamic is related to the sketch-like font not having Hebrew characters?
I used to use Form Designer which is just wrapper over normal Win32 controls. Good thing about it is that the mockup itself is stored as XML file so it can be versioned in source control.
It also allows to save/preview the mockup as HTML. Easy enough, but some controls are tricky to use :)
www.argocomputing.com.au/.../FormDesigner.aspx
Frank,
It isn't just the font issue, it is also RTL issue.
As a good example, I want to write:
foo * bar
If I was writing that in Hebrew in Balsamiq, it would probably show up something like
bar foo *
Or something like that.
Just curious - did you put in a feature request to the developer to support RTL?
It is not but I believe that Axure supports Rtl correctly. It's also one of the easiest tools I have used.
Symon,
Of course I did.
Here's Balsamiq's position on RTL support: getsatisfaction.com/.../supporting_right_to_lef...
BTW, they rock. I've put a feature request in their getsatisfaction and it got implemented very timely.
Hi,
I am the developer of WireframeSketcher. It's a wireframing tool for Eclipse and Eclipse-based IDEs. One advantage of the Eclipse platform is that it provides RTL support for free. If you are an Eclipse user then this might be the solution to your problem. Find more about WireframeSketcher here: http://wireframesketcher.com
Comment preview