The Interactive Prototyping Dilemma – A Review of Software Options

By on September 4, 2008 11:52 am

For UI professionals, the process of visually prototyping an application is a cornerstone in the design process. The challenge has always been to find a tool that will allow us to quickly develop visually detailed, and hopefully somewhat interactive, wireframes and mockups.

Outside of a few incredibly expensive applications, however, there are only a few really versatile options available to UI professionals. The ideal solution would be an application that allows UI pros to quickly wireframe interfaces, then populate the wireframes with high quality graphical elements to create a near-pixel-perfect mockup, share a graphical library with colleagues which can be independently updated and which could automatically propagate changes to dependent mockups, and finally allow for some interactive elements that could demonstrate actual interaction scenarios and allow developers to “experience” the interactions we are designing. Of course, the ability to easily translate a mockup directly into some workable, skeletal code would also be delicious.

In our short series on Tools for the UI Trade, SitePen’s design team will spend some time reviewing the likely contenders and share our thoughts with you. We hope that you’ll share your ideas with us as well, and maybe suggest a few tools we haven’t tried out, by posting your ideas in the comments section.

The Contender:

Today’s article is going to cover OmniGraffle, a Mac-only desktop application produced by the Omni Group.

In the words of the Omni Group:

Need a diagram, process chart, quick page-layout, website mockup or graphic design? OmniGraffle 5 handles all of these in one award-winning application. We’re not just a pretty interface, however. There’s plenty of power under the hood to make all your diagramming and design fast and easy, with the ability to customize and tweak every aspect of your work.

OmniGraffle has been SitePen’s tool of choice for simple mockups and wire-framing of web applications. For anyone not familiar with OmniGraffle, think of it as a much more versatile and clean competitor to Microsoft Visio, but with a user interface that feels as natural to UI workers as, say, an Adobe software package.

We’ve used OmniGraffle like a swiss army knife, deploying it for a ton of tasks, including the creation of organizational charts, information architecture hierarchies, user-path illustrations, initial wireframes, interaction documentation, and even advanced mock-ups (by importing graphics produced in other more design oriented applications like Photoshop and Illustrator).

In general, OmniGraffle has been a blessing, but it has its limitations.

OmniGraffle Strengths

Wireframes: Basic wireframing is a snap with OmniGraffle, and this is the kind of work that the application really excels at in the hands of a good practitioner. OmniGraffle makes it easy to create wireframes and shape diagrams based on boxes and arrows, lines and polygons, and gives the user a host of aesthetically pleasing variables with which to tweak any graphic.

The OmniGraffle interface using some of the freely available stencil elements you can find on the web.

Basic Stencils: Importing and using stencils (many freely available online) for inclusion in mockups is an easy affair. At SitePen we produce an OmniGraffle stencil as soon as we have our visual theme worked out, then we use that stencil to retrofit our original wireframes and show how our imagined software product will actually look. Even before that, we use some freely available stencils featuring standard UI interfaces to flesh out our designs. (Bonus Link! Here’s a link to some very good Omnigraffle stencils from Yahoo’s Developer Network.)

OmniGraffle’s Stencil Window

Notation: Although you won’t get all the controls you’d find in a solid word processor, OmniGraffle makes it easy to add text notes and documentation right in your design documents. We use this feature to insert pop-out descriptions for design elements or interface widgets, which our developers find immensely useful when they get their hands on our work.

Exporting: OmniGraffle isn’t exactly ubiquitous, so it is important that the software can export to some standard formats. Our format of choice for passing designs around is Adobe PDF, simply because everyone seems to be able to deal with it. Don’t expect other software products to be able to open up a standard graffle file. PDFs seem to be the most reliable, and in general the quality of an OmniGraffle PDF export is high.

For all the good, our familiarity with OmniGraffle has yielded a few nits that we’d love to pick at. Obviously, OmniGraffle was not really intended to fill these particular voids, but we can’t help but notice how truly excellent OmniGraffle would be for our purposes with just a couple of changes.

What’s Missing from OmniGraffle

Folders and Layers and Grouping, Oh My: Working in UI and design, we’ve of course gotten used to some of the features of Photoshop. While OmniGraffle does in fact have a basic layering construct that allows design elements to be put on different layers, what we are looking for is a more robust, folder-like model that allows for streamlined layer handling. It would be nice if we could build hierarchical folders that contain multiple layers, other folders, and individual design elements. It would be nice to be able to grab multiple layers, or a folder full of layers, and move them around on screen as naturally as in Photoshop. Also, when it comes to editing complex elements consisting of several shapes, OmniGraffle handles very much like Flash, requiring careful attention to the selection process. We find ourselves constantly having to make extra-sure that we didn’t accidentally select obscured elements. Grouping elements is easy, but then you have to ungroup (or at least click-down within grouping levels) to select a specific element for a more detailed edit. To us, this isn’t really a failing but just a different interaction mindset. On many occasions I’ve selected something to resize it only to find that I had also inadvertently selected a neighboring element. To avoid congested layers and selection snafus, my personal feature wish-list would include the ability to right-click a selection and automatically place the selection in its own layer.

Adobe Photoshop’s Layers and Groups. We want this!

Animation: Of course OmniGraffle isn’t going to have an animation engine. We know that. But man would it be nice. Even a couple of basic effects like tweening, some simple expand/collapse animations, and maybe an event-driven opacity changer, would really change the game. Of course, this would also call for a way to export interactions as a movie or animation of some kind, or we’d have to expect all our coworkers to use the software. But pipe-dream or not, some basic animations would allow us to use OmniGraffle for hard core visual prototyping, something which is becoming more and more desirable as the web discovers newer, stranger, and more beautiful interfaces.

Updating Stencils: A real heartbreaker for us. Above all the other issues, this is the pitfall that really sticks in our craw. Since we work in dynamic teams, it is not uncommon for different members of our design group to be working in parallel. I might be constructing a new set of wireframes while my colleagues revamps a stencil that I am currently using. But what to do when I get that new stencil thrown at me? There’s no way for me to import that stencil and have my wireframes update stencil elements automatically. If the design team has changed a button, I have to go back to all of my wireframes, delete the old button, then drag in the new one. Of course, if the button has changed in dimension, other edits to the wireframe would be required, but simply the ability to update stencil elements dynamically would make a world of difference, as would the ability to share stencils in real time (or at least update them from a common source).

These limitations aren’t crippling, but they do make a difference when trying to span the gap between a flat mockup and an interactive model or visual prototype. They especially hurt when you’ve got multiple team members working on a quickly changing project.

OmniGraffle Wish List

The wish list we just talked about is really a set of tools that would allow SitePen to accomplish a few extra short-term goals. Those goals are:

  • Communicating visual transitional effects.
  • Sharing and updating resources in a team environment.
  • Collaborating with team members on discrete units of the same project.
  • Letting outside eyes take a look at a “visually working” prototype before we start coding.

There may not be a perfect fit out there, but OmniGraffle has proven to be our reliable go-to tool. Maybe future releases will address some of the features we’re salivating to have. Until then the application will remain a trusted, yet imperfect, part of our arsenal.

If you already have OmniGraffle, or if you want to take it for a spin, one of the best places to get a whole slew of useful stencils is Check it out and take some stencils out for a test drive.