How to create Interactive Prototypes with Omnigraffle

In this post i’ll provide a brief overview of why prototypes are an important cornerstone of the UX Design process and will demonstrate how you can create them efficiently.

What is a Prototype?

A Prototype is typically a low fidelity representation of your website or native app that simulates any interactive elements like buttons within the interface. A good Prototype should demonstrate key journeys and focus on how you expect the user to perform tasks and navigate smoothly.

They are not meant to represent your final design and you may encounter some confusion when sharing with your clients so take the time to explain the difference. ‘Why is everything grey?’, ‘I can’t see our logo on the page’ are some comments I have encountered in the past.

Benefits of Prototyping

  • A more realistic way to explore and validate your ideas
  • Puts something tangible in front of your users quickly for user testing.
  • Easy to reiterate based on feedback
  • Begins to demonstrates technical requirements and functionality

Prototyping Tools

Being able to create your prototypes in a timely manner is an invaluable tool in your UX Design tool box. There are a number of options out there like UX Pin and the increasingly popular InVision – but my recommendation would be Omnigraffle.

Why use Omnigraffle for your Prototypes

  • Convert your wireframes to interactive prototypes quickly
  • No need to redraw any additional boxes or overlays
  • No coding knowledge required
  • Easy to update and modify

How to create a Prototype in Omnigraffle

In this example i’ll be demonstrating how to simulate the behaviour of a mobile drawer menu that slides in from the right-hand side of the screen. If you don’t have a copy of Omnigraffle you can download a free trial from their website. Once you have prepared a wireframe you can use you can now start adding the interactivity by using the “Actions”, which are configured in the “Properties” section of the sidebar.

properties
Select the object (button, text link etc.) you want to add an action too and then click the dropdown underneath “Actions”.

action-options

You’ll see you are presented with a number of options. You can ignore “Runs a Script” and “Opens a File” and focus on the following:

Opens a URL  Define a URL for a link or object to open.

Jumps Elsewhere – This allows to link from one canvas to another and will be the primary action for adding your interactivity.

Show or Hide Layers – You can select layers to toggle on and off. This is particularly useful for demonstrating drop down menus and state changes whilst remaining on the same canvas.

 

Choose the “Jumps Elsewhere” option and make sure “Switch to a Specific Canvas” is selected in the dropdown below.  Now choose which Canvas you want the object to link to. It helps to think of Canvases as individual pages or screens within your website or app.

select-canvas

 

Viewing and publishing your prototype

Presentation mode in Omnigraffle

You can view your Prototype directly in Omnigraffle via “View” > “Presentations”. You can edit the Presentation settings in “Preferences”.

I would recommend the settings shown above. By turning off any highlighting you’re removing any unnecessary distractions and helping to create a more realistic experience for whoever you are showing your prototype to.

Exporting as HTML

To export your now interactive Prototype as HTML go to “File” > “Export” and select “HTML Image Map” from the format dropdown. Omnigraffle creates and converts your wireframes into a basic html version, You can view your prototype in a browser and is useful if you are running any remote user testing as it can be uploaded online and shared.

Exporting as a PDF

Go to “File” > “Export” and select “HTML Image Map” from the format dropdown. You can then open up the saved PDF in a reader of your choice and easily email it to a team member, client or again use it for some feedback.

If you have any comments or further questions about creating Prototypes please comment below or feel free to email me.

  • OlivierSeres

    hi, I’ve got version 7.5 and cannot achieve links between canevas any longer after an PDF or a HTML export : The little hand is shown when mouse over, but no action is performed :-/ Used to work on previous versions as far as I remember…