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.
Post new comment