Posted on: October 17, 2017
Interactive Prototyping with OmniGraffle
I recently completed a project where I had to prototype with a high level of interaction on OmniGraffle. While going through this process, I learned a few tricks which I thought I could share.
Plan your Project
This point may seem a bit obvious, but it is the most important. Before starting on your wireframes you should always sketch out a plan of what you want to create. It is faster and easier than if you were to plan it as you go. I usually sketch out my screens and annotate these drawings to plan what I want to be included on the screen, what each item on the page does, and what features on the application I can use to create them.
Aside from planning out the wireframes, it is important to know what the wireframe will be used for when you are done. If you are making an interactive prototype in OmniGraffle, you will have different limitations than you would if you wanted to make it interactive in another application or if you just wanted screens for a slideshow. This article covers tips on how you would create a prototype if you wanted it to be interactive in OmniGraffle, either for testing or a walkthrough.
Organize the document
From the start of the project, it is important to keep the document organized. Each canvas and layer should be appropriately named; you should be able to read the name and know exactly what the canvas/layer contains. This is very useful when you go in to add interactions or make changes. It also helps you manage your project as it grows.
You should also order the canvases/layers as you go. For a canvas, this will allow you to easily find pages you are looking for. For layers, it will not only make it easier to find objects, but it determines how layers stack on top of one another. For example, if you have a layer for a pop-up, you need it to be the top layer, since it should appear on top of everything else.
Use shared layers
For any object that is the exact same (in size, shape, colour, location etc.) in more than one canvas, create a shared layer. With shared layers all changes you make or interactions you add will automatically update in all Canvases which contain that layer. This is useful for navigation bars since you won’t have to add the same interaction for each screen.
If you want to make the prototype interactive in OmniGraffle, layers are a great tool. It helps you keep the number of canvases to a minimum while increasing the interactions on each page. When I prototype, I create one canvas for each page of the application, while placing all of the objects on the page (and the different states of these objects) into different layers. I find that this is the best way to mock up a prototype if you want to include multiple interactions on one page. This method allows you to mock up multiple interactions which do not depend on each other in order to work. For example, if you want to create a page where you want users to sign up for an application, each field can be set up so that when clicked it fills in on that page instead of jumping to another page where that field has been filled out.
Layers can also allow you to change interactions for a certain button depending on whether a user has completed a particular task. To do this, you can put an invisible box on a layer which will be hidden until a specific action is performed, e.g. if a field in the sign in page is required, you can set it up so that continue gives you an error message if the field is empty, but when the layer containing the object in that field is shown, another invisible box will appear on the continue button with an interaction that takes them to the next page.
One thing to keep in mind when using layers is that when you export the document, the visible layers are merged; therefore, any interactions which show/hide layers will no longer work.
I tend to use only two interactions, which together allow me to mock up most of what I would want in a prototype. These are: jumps elsewhere and show or hide layers.
Jumps elsewhere is used to move you from one canvas to another. As I previously described, I have each page of an application set up as a separate canvas. That means that Jumps elsewhere is used to move from one page to another.
I also use jump elsewhere to make an object do nothing. This is a workaround to fill a gapin the functions. One issue I have with the preview mode of OmniGraffle is that when you click an object with no interaction, it shifts you to the next canvas (similar to PowerPoint). My way around this is to set an object without an interaction to jump to its own screen.
Show or hide layers is a bit more complicated. It will allow you to show, hide or toggle layers when an item is clicked. As I mentioned, I use layers to create all of the content on a page, and all of the different states of an object. You can use this to make up almost every interaction on a page.
For a checkbox you can select the box and set it to toggle a layer which contains the checkmark; this will allow you or a test participant to check and uncheck a box in preview mode.
Now let’s say you have a menu item that you need to expand. You would set one layer as the contracted item, one as the expanded, then set it so that when the expand button is pressed, the contracted layer is hidden and the expanded layer is shown.
With these tricks, I was able to easily mock up my own prototype on OmiGraffle. Although it was a great tool, I did find that a few key interactions were missing, which I had to work around. These include drag and drop, hovering and scrolling through a page.
If you have any questions or tips of your own leave a comment below!
Sanaz Hafezi, is a UX Intern at Akendi, a firm dedicated to creating intentional experiences through end-to-end experience design. To learn more about Akendi or user experience design, visit www.akendi.com.
Sign up for our UX Blog
Don't miss an article! We'll notify you of each new post.