I’ve had a special interest in GUI design, usability, hci, … for quite some time.

The last few years, when I started working on a new feature I tried to forget everything I know about programming and fully concentrate on the user interface first: who will use it, how should it integrate into their workflow, how often will they use it, etc. Just ban any data model or database thoughts, pick up pen and paper and draw the user interface.

As a programmer you tend to focus on the data first. This is the way we fit the problem into our programmer’s mind, this is also the part that might contain pitfalls and when you ‘solved’ it you’re usually pretty sure that it’s solved in a good (enough) manner (development = left side o/t brain?).

The user interface on the other hand is usually an afterthought: you know you can do it, there’s no challenge here and it gets rushed together because there’s a deadline you need to consider. For most developers, there’s also a lack of that reassuring feeling that you’re on the right track or a big sense of accomplishment when it’s finished (UI design = more right side o/t brain?).

This is obviously not the right way to go about this: for the user, the user interface IS the program. It’s all he or she sees, and even if it doesn’t look like a rushed afterthought, it often feels like one. Most UI’s still are just a way to interact with the data instead of being a handy, useful tool. They are an interface between the keyboard, mouse, monitor and data instead of being an interface between the user and the task.

Although I’m a firm believer in ‘paper prototyping’ and designing the UI with a clear mind away from the machine, I also often miss digital tools like copy/paste and being able to email my mock-up to someone right away. (but still tend to stick to pen and paper, and not only because it’s got a better carbon footprint 😉

However… these 2 quite recent tools could fill that gap:

  • Balsamiq Mockups not free but I guess you can’t afford not to buy it when working in a pro team
  • The Pencil Project which comes as a Firefox plugin and is totally free

So far, no-one I mentioned these to had heard about them. Maybe I talk to the wrong people.

Balsamiq Mockups keeps the sketchy feeling by for example not using 100% straight lines. This might seem a bit backwards but it keeps you from trying to make your design pixel-perfect and gives the impression that your design is still very open to change and suggestions from others. Although it doesn’t feel right in a programmer’s mind, it is ideal in this GUI-prototyping context.

Do I hear someone say ‘Visio’ ? It’s probably just me but the few times I tried it took me ages to design a GUI with Visio. I’ve seen my share of Visio UI mockups, and I often got the impression that they were made by people who only use MS Office products and design an interface to the data instead of a User Interface. Doesn’t mean Visio is bad though, I guess I’m just Pavloved not to like it.

Enjoy!