I design user interfaces for a living, it is a strange blend of code, art, and guesswork. I want my interfaces to be useful, visually appealing, and functional. I’m writing software that people are using to do their job. As such, I want to provide an interface that allows my users to do their jobs as easily as possible. What may seem useful for one group of users may not be useful for another group of users. Trying to guess what people want to do, how they want to do it, and what results they want can be very challenging. While there are definitely wrong choices, I don’t believe it’s possible to satisfy everyone. Some people prefer Gmail, others prefer Yahoo Mail. I don’t think Google or Yahoo made mistakes that drove people away I just think that users have different preferences. To develop effective interfaces, you have to figure out who your users are and provide them an interface they want to use. Putting a good set of UI mockups in front of your users, or proxies for your users, can help determine which designs will work, and which designs won’t.
Mockups
I’ve used two basic strategies for developing UI mockups. First is hand drawing/using some tool like visio. Hand drawing is fairly inflexible, and the tools I’ve used have been fairly clumsy. I’d love to use something that is as quick as hand drawing, that still has the flexibility of using software. A second method of generating mockups is to write user interaction code to drive the mockups. While this method is also time consuming, ideally you will end up with some usable code. When you show the design to the user, you can actually demonstrate how things will work in a live environment, this too is a good thing. If your initial design is too far away from what the user wants, you may end up having to throw away work you were hoping to use later. I know we don’t have time for this in our organization, I doubt others do either. I think it’s useful to develop a set of hand drawn/computer drawn mockups to help present different design options to your potential users. Once you have an idea of what they like/dislike, you can start working on the coded interaction. This way, you are helping to ensure that you are effectively using your time.
Balsamiq Mockups
I have not spent a lot of time looking for other software in this space, so I don’t really have much to compare to, however, Balsamiq Mockups seems to provide the speed of quickly sketching a mockup, with the flexibility of using software. There is a video on their website that shows the tool being used to generate a mockup of a familiar music player. This is done surprisingly quickly and accurately.
To the left is a picture of the main screen. The lower portion of the screen is your canvas, and the top contains the toolbar of widgets. There are a ton of widgets to choose from, including iPhone specific UI elements, and some OSX specific elements, like coverflow. To start creating a mockup, you can either drag widgets from the pallet, or use quick add to search for and add widgets. One of the more interesting widgets is the data grid. This widget allows you to draw a table with your own data inside. To enter the data you simply double click on the widget and start typing.
Columns are separated by commas, the first row is your table header, and you can use special sequences like [x] to indicate things like a checked checkbox. Being able to use your own data inside a mockup is a great feature of this tool. Balsamiq handles things like scrollbars, window actions, and other common UI elements very well. As you can see, the visual style of the mockups look hand drawn, which I actually like. I haven’t spent that much time using Mockups yet, so there may be some quirks I’m not seeing, but it looks like a potentially useful tool. I’m looking forward to trying it for my next design. One thing that is missing, according to their website, is the ability to add custom widgets to the toolbar. At my job we have some standardized UI components, like headers, that I would love to be built into the tool. You can save and import your own templates, which addresses the issue, but putting them in the pallet would be great. I’d like to be able to point the data grids at a text file rather than having to enter the data in the program (I only spent a minute looking, so this might exist). This would make re-using the same data-set across multiple designs easier. Overall, I’m very impressed by the software, and it seems reasonably priced at ~80.00 USD.
