Mock Your Users!

Mock Your Users!

You want it to what? You want it when?

Balsamiq Mockups Hands-On Review

Designing screens and web pages can be a tedious headache. But the biggest headache occurs when you use a tool like Photoshop or the Visual Studio designers to make a mockup screen that looks too good, and your users think you’re already done with the application!

To a user, the screen is the application. Everything else is “black magic”.

a mockup of this review

Background

A couple of years ago, I ran across an excellent mockup product, Balsamiq Mockups. Balsamiq is an Adobe AIR application, so it runs the same on Windows, Linux, and Mac (there are also online versions, but I don’t use them). Not only does it vastly speed up the process of producing screen mockups, it has two additional features that are invaluable:

  • The screens look good enough to get the ideas across, but don’t look so good that the users think you’re finished with the application.
  • You can link screens together and go through them in “presentation mode”, which?make reviewing the interface with your users a breeze.

Balsamiq Basics

Balsamiq includes mockup elements for all the major screen controls: web pages, dialogs, labels, textboxes, text areas, checkboxes, data grids, images, et al, and also includes some useful annotation elements such as a “sticky note”, geometrics shapes like circles and rectangles, and arrows, and even specialized mock controls for the iPhone. The geometric controls are especially useful for making wireframes, highlighting changes, and making reminders and notes for discussion items.

The program starts with the last mockup or a blank mockup, and a toolbar containing the mockup elements. Drag and drop the elements desired to the work surface, arrange to suit, and edit the properties as desired. Simple.

Keyboard shortcuts are thoughtfully provided for all mockup elements, so once you’re used to the application you can hide the toolbar and use the shortcuts to work even faster.

There are good video tutorials on the Balsamiq site, and the help document is adequate. It’s a fairly simple screen designer, not Adobe Illustrator, so not a lot of training, documentation, or hand-holding will be necessary. Watch the introductory video and get mocking in a few minutes.

Balsamiq Advanced

Balsamiq has a few advanced capabilities worthy of individual attention:

  • keyboard shortcuts
  • Grouping and Duplication
  • image overlays
  • screen linking and presentation mode
  • XML file exchange and PNG export

Keyboard Shortcuts

In practice, I’ve found that using the keyboard shortcuts does save time, since there are a lot of mockup elements on the toolbar. For example, you can type “la” for a label, “te” for a textbox, and so on; the shortcut box will show a droplist of choices if there are multiple elements that start with the same letters.

Grouping and Duplication

Any collection of mockup elements on a screen may be grouped and treated as a single shape. Double-clicking the grouped shape allows editing of the individual elements without having to ungroup and regroup them. Any set of selected shapes may be duplicated (Ctrl+D), and the File menu allows you to create a clone of the entire mockup – which is very useful for detailed presentations.

XML File Exchange and PNG Export

Balsamiq saves mockup information in an XML file so two or more developers can exchange mockups. PNG files can be exported individually or all at once.

Image Overlays

Using the image mockup element, you can take an image of an existing screen to be reproduced or redesigned and place into the mockup. Mockup elements can be positioned on top of the image to reproduce a screen if desired, or the mock screen can be placed next to the image for easy before-and-after comparison. Once you’re done with the mockup, export it to a PNG file and drop it on your screen design surface (i.e. as a picturebox element or a web page background image) and draw the real screen elements on top of it. Remember to remove the background image when you’re done.

Screen Linking and Presentation Mode

Mockup screens can be linked via navigation elements (buttons, links, list elements, et al) and shown full-screen in presentation mode. You can flip back and forth from presentation mode to editing mode to quickly make changes even during a presentation.

Hands-On Example

I am working on a web-based scheduling application for music studios with 100+ students, multiple teachers, and multiple studios. I started with a scan of the paper application form, and dropped it into a mockup using an image element, then quickly reproduced the relevant data-entry elements in a web page mockup, making a few notes as I went. The purpose of this first mockup was to represent the data on the form, not to design the screen. I added buttons to the mockup surface for presentation navigation; these would not appear on the final screens of course.

?

initial mockup from paper application form

Then I went back over the form and made some notes about logical groupings, ease-of-use considerations, and notes to myself.
online application form, annotated

Then I regrouped the data-entry elements logically, adding in elements that were missing such as checkboxes for email and SMS notifications.

online application form, final

The entire process took a couple of hours. If I had tried to use Visual Studio or Dreamweaver to do this, I’d probably still be working on it 😉

I have used this method to design screens for entire systems, reviewing the mockups in presentation mode with groups of users to clarify issues, expose new features, and get feedback about ease-of-use issues.

Technical Details

  • The documentation is pretty good, and there are some video tutorials to help you get started quickly.
  • There are converters for the XML representation to generate screen layouts for some systems, but not for .NET. There are web-based versions of Balsamiq, but I have not used them. Presumably they work the same way.
  • I found a small bug when first using the application and sent them an email. They fixed it the next day!
  • The application does rarely crash (on Windows) so save often.
  • Licensing is personal and portable. A single desktop license (as of this writing) costs $79.00, and includes perpetual free upgrades. There is a 7-day fully-functional trial available; after the trial period you can no longer save XML files, but you can still export PNG images. In addition, there are a number of ways to get a free license if you are so inclined.

Conclusion

Balsamiq is stable, useful, and highly recommended. Personally, the time this tool saved me on the very first project was worth far more than the license cost. Highly recommended.

6 thoughts on “Mock Your Users!

  1. Pingback: Balsamiq Mockups Hands-On Review at SavageNomads.net « Steven A. Lowe
  2. one of my clients used these, had no idea it was done with a mockup product… looks better to use than those handrawn ones where you cant make out what was written in them

  3. Pingback: 5 Reasons Why Lorem Ipsum SUCKS « Steven A. Lowe
  4. I have created a simple application that converts Balsamiq mockup files into C# Windows Forms code (not WPF/XAML).

    As a special bonus for readers of this fine blog, email me steven [dot] lowe [at] nov8r.com if you would like to have the pre-release version for free.

    You will likely need to customize it some for your purposes, but it can still save you a lot of time versus manually creating screens from the mockups!

  5. Another HTML interactive tool you might want to check out is Tiggr ? http://gotiggr.com. With Tiggr you can create, share and preview Web and mobile HTML prototypes. The key is that you can create interactive HTML prototypes with navigation which you can view and test in any browser.

Leave a Reply to CindyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.