A few months ago a few colleagues asked me if I could turn a design document into a low-fi clickable prototype to demonstrate interaction design on an application we were developing. I also talked to an IA recently who had the same need to demonstrate interaction, but lamented over the tools at our disposal.
I've used Visio and Axure Pro in the past to do quick and dirty demos of interaction. With Visio, it's been easy to link sheets together. But I've been spending my time primarily in OmniGraffle Pro lately, so I wanted to demonstrate to the other Mac-using IA's and IxD's out there how you can do the same thing.
With this simple process you can create working prototypes with exported PDFs or HTML with clickable images/image maps. The next step to get this to be a richer tool would be to have working form fields in the prototype, but not sure yet how you would do that natively. The hack would be to absolutely position divs for form elements over the OG image.
Comments
01/24/07 @ 02:35
Great site and nice work! Very helpful. I've been using a drwing program called Canvas that has a link dialog box where you can basically do the same thing as Omni. Not as elegant as Omni, but the drawing features are pretty good. You then can export as "clickable" PDF.
I've used Omni Pro for static site plans and simple wireframes and think I'll start using it as you're suggesting.
01/24/07 @ 10:24
Excellent! I've been using omni for a while, I did not know I could do the pdf clickthrough. However, have you noticed that omni becomes unresponsive/lagged past a certain site size? I often have to break the interface in to separate graffle files and link pngs via dreamweaver.
01/24/07 @ 12:09
No, I haven't noticed that, pauric. How large are the files you're dealing with? I'd send feedback to Omni if you're having these kinds of issues. They're very responsive with customer email.
01/27/07 @ 08:49
Nice little demo. Omni is OK for low fidelity wireframe click-through prototypes but I recently discovered Simunicator, a tool for building both low and high fidelity web app prototypes. It's pretty slick, powerful, and the company, Simunication, has free accounts to go online and build prototypes.
08/15/07 @ 12:04
I had no idea you could do this. Even though we use the software, we still used Acrobat for its image-mapping/link-mapping, not quite sure of the term.
12/20/07 @ 05:16
Very nice! Did found this out myself last week. Now i'm searching for a method within OmniGraffle to create a site flow diagram based on these actions you create.
Can't find such functionality in OmniGraffle, but it would be very nice to have a (clickable) flow diagram as the first page of your PDF prototype. At the moment i create those diagrams manually. Generating them would be soooo nice!
12/21/07 @ 21:25
Too bad the video isn't visible in Safari or Camino.
12/22/07 @ 09:12
Peter, I can see it in both Safari and Camino. You need to have the free Flash Player installed for either. If you don't, you're out of luck.
12/24/07 @ 07:53
Video isn't visible in Safari !
01/08/08 @ 23:51
Excellent tutorial and example of using OmniGraffle Pro. Thank you!
*viewed in Safari, no problem. :-)
01/20/08 @ 07:29
worked on safari OK
02/04/08 @ 19:05
I used Omni pro for static plans of a site and simple wireframes and I think, that I shall start to use it as you suggest.
I LOVE your work and thank you
Andrzej Filipowicz
STILL LIFE PAINTING
03/04/08 @ 07:40
Worked on opera.
03/16/08 @ 00:38
Thanks for the helpful info. We've now taken to using Omni Pro per your suggestion and are very excited about the results.
05/03/08 @ 08:39
I'm going to try them. i think Omnigraffle is what I'm looking for, but that Inspiration looks neat - I qualify for edu discount as a matter of fact.
05/07/08 @ 18:08
Thanks for the video.
07/10/08 @ 12:50
Excellent! I've been using omni for a while, I did not know I could do the pdf clickthrough. Thanks !!!
07/30/08 @ 07:22
I think Omnigraffle is what I'm looking for, but that Inspiration looks neat - I qualify for edu discount as a matter of fact.
08/10/08 @ 18:54
No video showing up here in either Safari or Firefox. Most recent versions of each and updated Flash.
08/11/08 @ 06:16
Should be fine again. I've moved video over to blip.tv.
09/16/08 @ 10:04
Thanks for your helpful tips. I used Visio before, great program, but I think what makes it really easy is Omnigraffle.
10/02/08 @ 09:11
@ urlgreyhot webmaster. The video doesn´t work, do you have another link to see it?
10/02/08 @ 12:13
@Colostrum: The video is working fine for me but you can also view on http://blip.tv/file/1162988
10/07/08 @ 08:54
A student group from Low-Saxony in North Germany did use OmniGraffle to make the prototype for a bionic project: http://bionic.hfk-bremen.de/gruppe3.htm
10/18/08 @ 02:23
Have you successfully placed comps (PNGs) created in other programs (e.g., Fireworks) into Omnigraffle canvases and linked them up? I'm curious if this is possible.
Visio allows you to import bitmapped files; however, when you do so they become very blurry and don't appear at normal scale. I downloaded the latest Omnigraffle beta and found a similar behavior.
I'm wondering what setting you might use to maintain the original crispness of the comp on import and export.
10/18/08 @ 03:45
After searching a bit longer I was able to piece together a solution (with a little serendipity) for the muddy bitmaps in Omnigraffle.
I noticed when I placed an OSX screengrab (PNG) it rendered nice and crisp. In a separate issue I found online, someone mentioned tinkering with the resolution of the file you want to place with Preview. I opened up the screengrab and saw that its resolution was 72.01. I opened up one of my Fireworks comps and saw it was 96. Figuring it could be a resolution issue, I changed the resolution to 72.01. Now I'm able to view the graphics at 100% and everything looks amazing.
The problem I have now is on export. When I view the PDF in Preview or Acrobat, the 100% view is way larger and soft. Anyone know of a fix so the scales match?
10/20/08 @ 11:32
Excellent tutorial and example ! Thank you!
02/14/09 @ 14:06
Thanks for the video.
03/31/09 @ 04:19
Thanks for sharing that very usefull tutorial ! So helpfull for a noob like me !
04/14/09 @ 12:37
I really want to thank you for your work. This my help a lot in my work.
04/16/09 @ 20:20
Do you know of a way to also export the Actions programmed that toggle visibility in layers in OMNI Graffle?
I've just started wireframing in OMNI Graffle and I didn't realize that it only exports the actions that take you to canvases not actions that affect layer visibility. I really need this.
04/17/09 @ 07:33
@Reena: No, this isn't really possible since all exporting to HTML does is export images. You would have to actually create each canvas with the changed state, and assign an action to hide the layers. Not idea. If you want richer prototypes, you'd have to look elsewhere unfortunately.
05/06/09 @ 14:13
FlairBuilder is also a prototyping tool that lets you create interactive multi-page wireframes, with the option of defining masters for pages. It also comes with a palette of fully functional components like links, buttons, menus, tabs etc.
You can give it a try online at http://www.flairbuilder.com/demo.
Hope you'll find it useful!
Cheers,
Cristian
07/03/09 @ 12:27
Thx for the video, helpful.