Making a click-through HTML or PDF prototype

OmniGraffle allows you to assign actions to objects via the Actions Inspector. A one of the interactions offered is jumping to another canvas on click.

Note that this particular action works when you export to PDF or HTML, so this allows you to make simple prototypes that navigates to different screens when clicking various objects. This works for mobile prototypes as well, though you may need to experiment with various browsers and PDF readers on the device to find the one that works best.

To assign an action, select the object that will trigger navigation, and open the Actions Inspector:

• In the first drop-down, choose "Jumps Elsewhere"
• In the second drop-down, make sure "Switch to a Specific Canvas" is chosen
• In the third drop-down, choose the canvas that you'll jump to upon click

Note that you can test the interaction before exporting to PDF or HTML by selecting the Browse Tool (which looks like a hand with its index finger extended) and clicking on an object.

You can assign actions to any object, but to make these actions easy to find again, I usually put a new layer on top of each canvas called "actions," and place transparent rectangles over objects that I want to react to click.

Once you've assigned actions to the desired objects, export your document to PDF or HTML by choosing the menu File > Export.

For a PDF click-through, set these options in the Export window:

For an HTML click through, set these options in the Export window:

Note that the Scale option is useful if you art targeting a mobile device that is wider or narrower than your prototype.