Interactive Omnigraffle Prototyping

Depending on the team set-up and the development process it might be valuable to prototype your wireframes. Many UX designers are moving to CSS/HTML for this, and that might be great for some projects. For the bulk of our work, at this stage, we like to stay high-level and conceptual. To keep that separation we want to stay out of any code.

So we have this flat file of user flows, IA and boxes within boxes with call outs. Awesome. I can interpret that. But how do you make sure that the developers (who might have missed all the planning meetings) completely understand how the project is supposed to ultimately express itself in the browser?

Well, maybe creating an interactive prototype from the wireframes would assist? It also might benefit the BA/UX team by proving that each interaction has been thought through.

To begin, select an object in the wireframe that will be a user action with a result. Then, select the “Properties” tool, and navigate to the “Actions” section.

image

If you have used layers in your Omnigraffle file, select the “Shows or Hides Layers” options.

If your dialog box, or lightbox or next step is a different page in your Omngraffle file, select “Jumps Elsewhere” .

In this example, we’ll jump to a new canvas after the on-click event:

image

To test your action, hold down the “B” button. All objects on your canvas that have actions associated with them will pulse with a blue border. Click on the object and test the event.

In order to let your users or stakeholders interact with the file, you’ll probably have to export it.

Once you export it, layers will no longer function, so even though they are more elegant, use the “jumps elsewhere” function and switch to canvas or open URL.

I’ve had trouble with links in PDF’s, so to save yourself some pain, export to HTML image map. Then set-up your files on a web server (though they can be used locally in a browser) and test all of your links.

Tip: name your canvases without space characters.

  1. fuckyeahomnigraffle reblogged this from seanabel
  2. seanabel posted this