Rapid user interface prototyping using XUL

Categories Development

User interface prototyping and especially Throwaway prototyping is an essential step in developing a user-friendly and useful interface.

Usually, user interface prototyping starts with a low fidelity, paper-based prototype or even a raw sketch drawn during a brainstorming session. Once the main idea is generally accepted, a high fidelity version must be produced.

I used to do this using Visio or even Photoshop but realized that it’s really time-consuming to create a good-looking consistent interface, so I started looking for other ways of producing mockups.

The first thing I tried was using Visual Studio and actually creating forms. Turned out that mocking up using Visual Studio is just as time-consuming as using Visio or Photoshop, plus, I am not really a drag-and-drop enthusiast, always preferring hands-on descriptive coding so I thought about trying XUL or XAML, both XML-based languages that can be used to describe user interfaces.

Using Visual Studio, or any other IDE for that mater you are tempted to use the mockup later. That’s a bad idea, as prototypes are meant to be thrown away.

XUL and XAML aren’t really so much different. I’m not saying that you can just copy some XAML and expect it to run in as XUL but still, the languages are quite similar. I prefer XUL because it doesn’t bring any overhead except for a Gecko-based browser (like Firefox or SeaMonkey, which you should already have), while rapid prototyping with XAML requires Visual Studio .Net (or the Express edition).

I’m just going to demonstrate XUL for rapid prototyping by using a simple bookmarks dialog. Here’s the ugly sketch which I drew on the back of an envelope:
paper_proto.jpg

XUL prototyping:
I generally use SciTE(an excellent text editor) to write the XUL and load it into Firefox but there is an easier way – you can use the Live XUL Editor to see your changes in real time.
Writing XUL is pretty straight forward, especially using a good reference such as XULPlanet.

The result:
xul_proto.JPG

The source:
You can view the source as html or as XUL (with Firefox or SeaMonkey).

What do you use for your user interface prototypes?

1 thought on “Rapid user interface prototyping using XUL

Leave a Reply

Your email address will not be published. Required fields are marked *