MPW, CodeWarrior, Visual Studio, Emacs, XEmacs, vi, NetBeans, Eclipse, TextMate, XMLSpy, NotePad, and any number of editors/IDEs all which I’ve used to write code. It’s crazy, but I’ve gone through more editors than programming languages and I still haven’t settled on one that makes me really happy. I almost standardized on Emacs, but it was too much like Linux in that I spent too much time working on it instead of using it. I almost standardized on Eclipse, but that thing is such a memory pig on Windows. I feel like ditching that thing but it’s the standard at work. I want TextMate’s simplicity and project-wide find, Emacs’ auto-complete and integrated shell, and Eclipses debugging and refactoring tools.

One of the big things that thwarts my efforts to find a single editor/IDE is that I use Windows at work and a Mac for everything else. If I ever leave my current job, I’m working somewhere that’s a Mac shop or is platform agnostic so I can choose a Mac to work on.

What brought this on? I was flirting with Emacs again, did I mention I love the integrated shell? Checked out the Cucumber bundle for TextMate, did I mention I love running tests with command-R? And suffered through a day of 400MB Eclipse taking 10s of seconds to open a JSP, did I mention that Eclipse is a memory pig on Windows?!?!

My UI Design Paradigm

Let me say upfront that User Experience (UX) design is a major weak spot in my skill set. I’m pretty good at exposing the functionality to accomplish a given task, but optimizing workflow, influencing behavior, and polishing experience are areas I need to work on. Part of the problem is that it has always been easier for me as a developer to code up a UI and evolve it. This tends to lead to less experimentation and low desire to change something that already works. In this paradigm, even if an interface it poorly designed but exposes all the necessary functionality there isn’t much value in re-coding it as the new design might be just as bad and then you’ve done a bunch of coding without adding features or improving the interface.

Been There, Done That

I’ve tried various ways to design the UI without coding, but I’ve always run into some short coming that leads me back to my code and evolve style. Here are some examples:

• HTML prototype – This doesn’t work for me because I spend more time working on the CSS than the design. I’m also typically working within the development environment I’m going to deploy in so I end up focusing on implementing the elements of the design and not the design.
• Flash prototype – I thought this would be a great way to have interactive prototypes but then I ended up having to code mockup elements and it just turned into another case of focusing on the tools rather than the design.
• Paper prototype – I can’t draw and I couldn’t stand the lack of interactivity.
• DreamWeaver – It’s been a long time since I’ve used DreamWeaver, but I do remember the effort to prototype was substantial (managing templates for one) and I felt cheated that very little of what I built was transferrable to the final project.

A New Way Let me state that I received a free license for Mockup for Desktops with the understanding that I would write a review and this is it.

Enter Mockup for Desktops (MfD) from Balsamiq. MfD is a tool built specifically for prototyping web applications. That focus allowed me to think about the UI design without any thoughts about the tool itself (HTML, Flash, and DreamWeaver) or the implementation of the application (HTML). There was no feeling of wasted effort (Flash and DreamWeaver). And the ability to interact with the design (Paper) was faster than with any of the other tools I had used previously.

As I mentioned, MfD is specifically designed to prototype web applications. It presents you with a canvas where you implement your mockup and a palette of standard HTML elements to use to build the design. I found myself putting together my first mockup in a few minutes and then tweaking and coming up with more pages in just a few hours. Here’s an example:

Then you can use the “hyperlink” UI elements to link to additional mockups and view the mockup as a “presentation” to test out the interactivity.

This leads me to my one major complaint with MfD and that is the lack of a template mechanism. My web app, as most do, has a bunch of elements that are common across multiple pages; navigation menu for example. There isn’t a way to make changes to common elements across multiple mockups. You can achieve this visually by using a common background image, but then you lose the interactivity of the elements. My solution was to just use the main mockup to track changes to common areas and to ignore the discrepancies in subsequent pages. Not ideal, but I’m a developer and can deal with it.

Templates aside, Mockups for Desktops is a great tool for prototyping. It allows you to quickly put together and experiment with different interface elements. Tools that let you focus on the task you are trying to accomplish are awesome to work with.