OmniGraffle

Matt MacDonaldInteractive mobile app wireframes with OmniGraffle, PDF & GoodReader

Matt MacDonald posted on Friday, November 12th, 2010 | Mobile, OmniGraffle, Wireframes | 2 Comments

I’m late to the game in figuring out that the Action property existed in OmniGraffle but I did find what I think is a pretty cool way to create super quick, easy to build, interactive mobile app demos to test out concepts. I’ve been working quite a bit on the user experience side for our iPhone/iPad projects and I mentioned the awesome OmniGraffle iPhone and iPad stencils that I’ve been using in a previous post. When thinking about ways to test out some ideas we’ve been floating for the This American Life iPad app that we’ve been designing, I discovered the “Action” property for objects in OmniGraffle. This property gives us great power.

You’ll want to create multiple canvases in your demo document to really see the benefit.

Mini Tutorial

There isn’t much to it once you figure out the options. Create a new Document in OmniGraffle and draw an object. After selecting the object, open the inspector (Shift + Command + I). Open the properties dialog (Command + 2). The object will default to Geometry, which is the only view that I ever cared to check out until I stumbled on the Action dialog. Choose the Action view (third tab over for OmniGraffle Pro 5.2.3).

You should see something similar to this:

OmniGraffle Action Property dialog

OmniGraffle Action Property dialog

Note the Jumps Elsewhere option. When you have multiple canvases you can direct the users click action to another canvas, which can simulate your app functionality. In my demo here I’ve wired up the Home canvas New object/grouping to point to the News canvas.

Interactive PDF home screen

Interactive PDF home screen

Export as  PDF

Now that you have your actions wired up in OmniGraffle you can export the interactive wireframe as a PDF and share with the world. In OmniGraffle select (Option + Command + E) and choose the Format as PEF vector image and make sure the Export Area is Entire Document.

Running the demo on a device

After exporting the PDF I use the really nice Good Reader iPhone/iPad app to get the PDF on a device for demo purposes. It’s a paid app but it makes getting PDFs on the device super easy, supports the hyperlink/action functions and runs full screen without navigation chrome.

Downside

Lack of gesture support. Users have become accustomed to interacting with the iPhone and iPad using the swipe and pinch gestures. The PDF obviously doesn’t support that so there is a little setup when placing the demo in a users hands.

Resources

  • Sample PDF: interactive-pdf.pdf
  • Sample OmniGraffle file: interactive-pdf.zip
  • Tags: , , ,

    Support Us!

    PRX

    Categories & projects

    Archives