I build wireframes in all shapes and sizes. Some take the form of sketches in my Moleskine while others demonstrate higher fidelity- typically using Omnigraffle. With the advent of all of these mockup sites that allow you to link one “page” to another the same can be achieved with good old fashion Omnigraffle.

Why Link?

Linking screens are like discovering transitions in writing. From sentence to sentence and paragraph to paragraph you find little disruptions, rather opportunities to make your idea easier to comprehend. In our case we’re making the flow of information from screen to screen easier to comprehend and use. Remember there is an impression from one screen that follows the user to the next. If the next screen doesn’t provide enough information to confirm that it is the correct screen then it leads to: pogo sticking, frustration, and ultimately abandonment. You can’t see these issues and opportunities without linking your wireframes.

Also, and more obvious, is that linking makes your wireframes easier to use as a testable prototype. You can set up divergent paths, exception cases, all by refining your views. It’s great for running scenarios. And it makes your test a bit more real.

How to Do It

Linking pages in Omnigraffle 5 is quite easy.

1. Select an Object (it can be text or an image)
2. Navigate to Properties/Action (Command 2)
3. Select: Jumps to Elsewhere/Switch to a Specific Canvas/”Pick Canvas Name”

That’s it. Save the document, and export it as a PDF or run the Presentation Mode and you can begin clicking away.

Tip Alert!

These tips have saved me lots of time.

1. When setting up your global navigation, make sure each category label is individual so you can link it properly. You can’t draw a box around a single string of text and set links.
2. Make sure your header and nav items are “Shared Layers”. It will make linking much easier.

POST A NEW COMMENT

Your Message

Name

Email

Website (optional)

Subscribe to replies