Preamble
(if you rate this I would like to read your comments about your rating)
In Part 1, Balsamiq was reviewed, and so now let’s continue with Part 2, ForeUI, a Java based UI Design Tool. Since ForeUI is built on top of Java it should run on Linux, Solaris, Windows and OS X though there are only 2 pre-built installers: Windows and OS X. I installed ForeUI on my MacBook Pro running OS X 10.5.8 using Java version 1.5.0_19. Here is a brief list of features that ForeUI offers.
Side: I read an interesting article on the ForeUI site: “When Will We Need UI Prototype?“. I have to say I agree with almost all of the points in the article especially getting early user feedback and working with your team (paraphrasing here). I only bring this up because I ran a little Discussion Post on the RIA Developers group on LinkedIn and had one reply was “Why do a Mockup? Why not build the UI directly?”. This was after Part 1 and it got me thinking. Why would I do a mockup instead of just building the UI? My response (to myself) was that a mockup is much easier to work with instead of an IDE (I don’t have time to sort out WPF while I am soliciting user input during a meeting, it’s MUCH easier to send a mockup in the form of a .png or .pdf (I know you can take screen shots) and it’s much faster to knock out a wireframe and move forward until the user has what they need THEN I do a real UI. Just my two cents.
FYI: Similar to Balsamiq, ForeUI allows you to use your license on every machine you own. Nice!
Update – 08.14.2009: Made some minor grammar corrections and updated this post based on the first comment from the Vendor below (look for Update by each item that the vendor commented on).
Info on ForeUI
- Current Version: 1.45
- Cross Platform
- Java Based
- Price: $79
Standard Disclaimer
Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view. This is not some indirect advertising or some way to push more business to ForeUI. Enough said.
Finally, here’s some links for ForeUI:
Interactive Tour (screen shots, tour, samples)
Interactive Demo (runs as Java Applet)
Contents
Looking Around
Let’s take a quick look at some of the features of ForeUI.
The drawing features of ForeUI are top notch. I have to say that they are among the best I have used. In spite of the fact ForeUI is created in Java the UI is really quite responsive and precise.
On a less happy note: why all the prompts telling me I only have 7 days for the demo and trying to get me to buy or enter a license number? I mean, come on, if you are letting me demo and it stops in 7 days that ‘s a fair thing but why keep prompting me every time I Save As or Export to an image? Kind of annoying. Update: The vendor is willing to change this so there is only one prompt (perhaps?) or maybe, as an option, just leave the words (Evaluation Version) in the title bar and that’s it?
General
I like the design of ForeUI in terms of the smoothness and clarity but I can’t really get my mind around all of the brown/tan. After a while it feels kind of monotonous (I probably read too much into this but I like color!). Aside from the color everything is pretty simple in ForeUI. The menu system is uncluttered (not shown here since we are on a Mac and I am screenshot challenged), the toolbar is simple and the navigation through the UI controls is pretty commonplace in a lot of applications. All in all, this is a cleanly laid out program and I had no problem getting up to speed for most things very quickly.
UI Library
The UI controls are located along the left in a standard slider type of presentation with controls separated by category. Again, easy to use and figure out. It appears that the UI library is a fixed one with some customization of existing UI controls available but no way to import new controls unless this feature totally eluded me but not the vendor – correction, importing is an option – see Update just below.
Update: I copied what the vendor said here – he does a better job of describing things than I do – “You can create your own element by customizing existing UI controls, you can select elements in the plot and right-click the mouse, then you will find an item named “Create Customized Element …”. You can also import the customized element (.fce file) created by others, just go to the “Customization” group in the list, click that button with green icon, you can see the “Add Element from File…” option. We also have a plan to allow sharing the customized elements via internet.”
Canvas (Plot)
The Plot is where you draw you mockup (see the white area above) and you can customize a couple of things from the bottom toolbar: Type of UI (very nice!), the background, the size of the Plot and whether you want to add a rumple effect to the Plot (kind of like crumpled paper smoothed out). The rumple effect is kind of different and I have not seen that on other prototype/mockup tools and I am unsure how a client would like that – one of those things you have to try.
Properties
The properties dialog is kind of unique to me (coming from more of a Windows background) as it kind of disappears until you move the mouse over the dialog. However, you can ‘pin’ (or is that unpin?) the dialog with the pushpin in the upper, right corner which keeps the dialog on top and visible at all times (unless you click on the plot background) which is nice.
Here is what the properties look like:
I wonder if it would be possible to put the properties dialogs along the right, left, etc and have the common properties (to all UI elements) in the top 1/2 of the properties dialog and in the bottom 1/2 put the unique elements. That would be useful.
Working with Images
I was hoping to be able to import my own images into the Plot I was working on but I could not figure out how – see Update below. The Image UI control just displayed a generic image which I guess is supposed to be representative of all images. I find that sometimes I can accomplish a lot by importing images and making things seem more ‘realistic’ but that’s just me.
Update: You can change the image of the Image control by clicking on the Image…. line within the properties – I must have been blind to miss that – my mistake.
Configuration
As far as I could tell there are no real configuration features in ForeUI except for what you see at the bottom toolbar for the Plot. I am actually suprised because just about every program I have worked with has some sort of configuration (I kind of like messing around with configs – makes it more personal when you can tune it to your own needs) but ForeUI does not appear to. If anything, I would like to have the ability to change the look and feel of ForeUI.
Update: This is on the ToDo list according to the vendor including changing the Look and Feel.
Exporting and Importing
Importing is non-existant as far as I could tell.
Exporting has 3 options:
- Export to Image
- Export to Pdf
- Export to DHTML
Export to Images works about how you would expect and works well. I would not recommend the Export to Pdf (it’s not for me anyway) as it created 2 pages where 1 was only needed with the first page only have “Page 1” on it and the next page having an image of the mockup. By far, Export to DHTML is the best since you can send the mockup along with the Actions enabled to a client, put them on an internal web server or publish the mockup on the web – well done feature in my opinion.
Actions and Simulations
Actions is the name of the feature in ForeUI that allows you to choose events for any UI element (this is an assumption as I did not try ALL of them) and tie that event or those events to actions. For instance, in my sample I tied a Click event for the Run button to display a question dialog (Flow Control) and based on a Yes or No I display an appropriate dialog. The coolest thing is that when you run your prototype as a Simulation (see image just below) those events and actions turn into Javascript – very handy!
Here is a shot of the Actions editor:
Kind of slick isn’t it? Actions really add some extra goodness to your prototypes and I imagine it is a really helpful thing to demonstrate basic flow from Page to Page, etc..
Here are a series of shots showing the running of my sample as a Simulation:
You can see that my prototype is ‘running’ in the Safari Web Browser:
Now you can see the effect of clicking on the Run button (my screen shots are different becuase I had to switch to selection mode instead of application capture):
Finally you can see what happens when I click Ok:
Very cool stuff. Might very well be worth the price of ForeUI to be able to build simulations.
What I Did
Aside from working with ForeUI, I decided to do a quick mockup of a dialog so here are some screen shots from that mockup. It’s not real and it’s not mentally fascinating but it gives you an idea of how ForeUI looks/works:
Pretty amazing right? Well, maybe not but this is just the beginning… Anyway, you can see I picked the Hand Drawing option for the type of prototype I wanted to do (you can choose from Wireframe, OS X, Windows XP and Hand Drawing). You can also see how the Plot area (canvas if you will) has that crinkled paper looked (Rumpling) – kind of interesting.
Wow, it’s really coming along: a Tab control makes all the difference! What’s really cool is I just double-clicked on the Tabs in the Tab control to add the nifty descriptions for each tab.
Now we have a Treeview control with sample Folders, Leaf, etc.. I was uncertain how you actually define a Folder or a Leaf in the properties of the Treeview but obviously you can do that.
Here we are with the final prototype with a couple of Buttons added. The interesting thing (and you can’t see it here but in the ForeUI Plot you can) is that I added some Actions to the Run button for when my prototype runs in Simulation mode.
At last, the final screen shot just to show the Annotations you can use: Mouse Cursor, Balloon and a Post It near the bottom.
Well that’s it for what I did. Very simple and very fast to build a good representation of a UI that just about any end user or dev team can grasp.
Off the Top
Things I liked
What I think really makes this program work for me.
I really liked the option to have 4 different looks for my prototype: OS X, Windows XP (Vista would be nice), Wireframe or Hand Drawing – this is a very cool feature.
I liked this Rumple effect (rumpled paper) for the Plot background – kind of interesting idea.
I liked The ability to use the arrow keys to fine tune the location of the UI elements on the Plot is nice.
It’s cool the way you can double click on the UI elements and change their properties right there (ie.. clicking on the tabs of the tab folder allows you to change the title of the tabs).
The Run Simulation feature is so awesome! After I built my little mockup (with some minor Actions) I clicked on the Run Simulation button and ForeUI loaded up my web browser with my mockup in a generated page and all of the Actions were converted to Javascript – sweet!
One of the top things I like about ForeUI is the Action feature which allows you to bind simple events to UI elements and bind actions to those events and that’s pretty excellent.
The ability to edit some of the UI controls is very handy (ie.. boilerplate dialogs).
Things I could like
Some things that would be cool (to me) if they existed (suggestions?) or, perhaps corrected, in ForeUI
I would be nice if there was actually a help document (the online documentation is a page that says it’s being worked on) since I don’t want to contact support for every question I might have. Update: This is on the long ToDo list – it is slated to be done just down the road.
I would be great if, when you create a new plot, ForeUI asks for the plot size up front. Currently you have to change the height and the width at the bottom right corner and apply each change separately (height change, apply, width change, apply) or better yet: allow me to resize the ‘plot’ on the screen with the mouse. Update: An option to specify the default plot size will be in the up and coming configuration (it’s in the ToDo list).
I would love it if the demo version would stop popping up a dialog everytime I saved – it kills the experience and I do believe I understand the demo is only for 7 days – why remind me every time I save? Update: See comments above and in the comments section.
It would be nice if the Save/Save As dialog allowed me to create a new folder (seems like the lame save dialog Java offers). Update: In the ToDo list.
I could like it if ForeUI offered an import option to allow new controls to be imported into the controls area. It would also be nice to be able to import other documents into the current one but the binary file format probably prevents that. Update: See UI Library in the Looking Around section above
I would be very happy if it was possible to draw lines (with those little arrows) to UI elements or connect them with connector lines (similar to Dia or Visio) as sometimes I may want to annotate with more than just my finger! Update: In the ToDo list.
It would be excellent if ForeUI (and all prototype/mockup tools) generated XAML (.Net WPF) and/or MXML (Flex) – how slick would that be? Update: From the vendor – “XAML and MXML generation: Not scheduled yet but sounds like very interesting features, may be they will be available in ForeUI 2.0 ?“
Recommendation
That’s it for this review. I am kind of torn here with my recommendation because there are some very important (to me) features that I really like such as: Actions and Simulations but some of the way ForeUI works makes me think that it has some maturing to do before I would spend the $79 to buy it. It’s not any one thing that makes me think this but just the combination of a lot of things I mentioned earlier tell me that some polish is needed in other areas and perhaps some usability studies with changes made that will help the user and not just be familiar to the developer. What I mean by that is that sometimes when developing it is easy to get used to how a feature looks/works so that you no longer notice that it’s really not that user friendly.
Anyway, this is a good option if the things that seem to be lacking don’t bother you as there are some real strengths with this program that will help it shine in future versions.
Update: I am thinking I could like this program a lot more down the road as more ToDo items get accomplished. I have to say the vendor (Xavier) is very professional and addressed all of the issues/suggestions I came up with. That’s worth a lot these days when it’s hard to even get good customer service face-to-face.
Side: I was going to write a separate post about mockup magnets (called GuiMags) but that’s been done here. So I thought I would entice your thought processes by mentioning you can get coated, magnetized, UI shapes for the ultimate manual UI design process. You can write on them like a white board and best of all you can reuse them! Here is the site where you can get GuiMags (as well as GuiBoards). Check it out as a compliment to your digital mockups!
Stay tuned for UI Prototyping and Mockups Part 3 – ? (ideas?).
Tab
Coding Tools, Reviews, and Solutions 
You must be logged in to post a comment.