Lightweight Prototyping with Adobe InDesign

Stop me if you’ve heard this before or said it under your breath “Damn, I wish I could quickly prototype this! Just to be sure…” Maybe it’s just me but somehow I doubt it. This is for all those User Experience Professionals and Interaction Designers out there that do know what I’m talking about. My goal of this post is to provide an entry level steps to getting up and running with this feature, so if you’re a master at this then you might not get a whole lot from the example.

A Little Background

Earlier this year I found myself at a professional crossroads to turn my back on an old friend and great application, OmniGraffle, in favor of returning to Adobe InDesign for producing user workflows and wireframes. I’d use the app plenty in the past so transitioning back was painless and to top it off I stumbled upon a feature that seemingly, was brand new. INTERACTION. “WTF does InDesign have that for?” Yeah, that pretty much sums up my thoughts on the matter and surprise at finding it. Well it’s probably been there for years but I just now found it, which lead to one of the largest unexpected breakthroughs in my career as an UXD/IxD/IA (you choose the label, as long as I get to keep doing the work).

It turns out that InDesign has a simple and very straightforward way for converting any object into a button that can execute a myriad of navigation commands. Yeah yeah, I’m getting to the sexy part. The point is that within one click you, and I, can EXPORT TO SWF!!! Hell yeah. I flipped out when the realities played out in my head around FINALLY being able to generate rapid prototypes that could also support rapid iteration.

You get the point. Enough babble, let’s get to the example and the inherent benefits….

THE EXAMPLE – iPhone Application

1. Create a new InDesign project of any size. My example is for an iPhone app so it’s sized accordingly. On the workspace menu, select “Interactivity”.

InDesign_workspace_select

3. Create at least 2 pages in the document so that you have at least one destination page to navigate to.

indesign_preview_skin

4. Create a simple object with some text in it. For this example I created a rounded rectangle with some text.

indesign_button

3. Select the button. On the right hand side menu panel you should see a menu labeled “Buttons”. Select that next. Within that menu you will find everything you need to make a simple clickable prototype.

indesign_button_actions

You can name your button and specify normal, rollover, and on-click states for the object. We can get into that more later. The main point is that once you have selected “normal” in the state appearance selector you can select an event to specify.

4. Click on the Event list selector and choose “on release”. Then click on the (+) next to the “Actions” label and select your desired navigation transition. For the purpose of this brief example, I want the button to take me to another page in the layout so I select “Go To Page”.  An input box will be displayed where you can specify the destination page for the on-click event.

indesign_button_navigation

5. Repeat this step on page 2 and cross link the pages to each other.

6. Once you have your two buttons and on-click events defined you will want to click on the File Menu and select Export. Select “SWF” as your export format.

indesign_export7. Selecting the SWF option will bring up this menu. I suggest leaving it at it’s default setting sfor now. You’ll have plenty of time to tweak it later.

indesign_swf_options8. Click “OK” and you’re done, simple as that. The SWF will launch in a browser window and you should be able to click back and forth between

THE BENEFITS

I immediately saw positive results from presenting an interactive prototype as a supplemental deliverable during a meeting for delivering wire frames. The meeting was shorter by more than 50% because our client could subjectively experience the app workflow rather than relying on my explanation and their ability to visualize the interaction. They could walk away with a clickable version of the wires and use the actual wireframe docs and notation to better understand the intricacies of interaction not noted in the prototype. Sometimes I think we put the onus on a client to step into our shoes to envision things in the same manner that we might, which is quite unfair and honestly why they hire us/you.

OK, BUT WHEN?

One thing that’s hard to articulate is when it’s appropriate to use a prototype and at what level of fidelity? Well, it depends. You have to have a good understanding of the project goals, where you’re at in your design phase and what works best to communicate your goals. This is a long conversation that is worth of a blog post on it’s own. I should probably do that next…

So, for those of you that feel you don’t have time or $$$ for prototyping I present the following:

Exhibit A.
Reduced meeting time for presenting your deliverables = more time and budget for design or simply moving to dev sooner

Exhibit B.
You now have an interactive design spec for developers to reference when building the app

Exhibit C.
Allows you to deliver a behavioral representation of otherwise static documents. Wires provide tangible value as reference docs but the prototype tells the true story and allows for a rapid feedback/iteration cycle

Exhibit D.
You can easily insert .ai / .psd . / .fw files for rapid skinning of the prototype, if necessary.

So tell me again, why aren’t you prototyping?

4 comments

  1. thanks so much for the great article. although i’ve recently learned how to use indesign (CS3) to make interactive wireframes, none of this looks familiar to me at all! i use hyperlinks exclusively, rather than buttons. do you have any experience using indesign hyperlinks, and if so, can you how are buttons better or different?

  2. Hey Shirley. Use of buttons seems be more or less the same as hyperlinks but with additional UI support. IMO there is a cleaner and more obvious presentation of options with the added feature for defining the buttons actions and there are 3 definable states for the button itself.

    You also have more options for event triggers in terms of: On Release, On Click, On Roll Over, On Roll Off, On Focus, On Blur. Those, for me, all represent pretty good reasons to make use of that feature as it also has the option to reference a URL.

    Thanks for the comment! Hope this helps!

  3. I have dabbled with different ways of building wireframes and didn’t know about this option in InDesign…

    Thanks.

  4. Pingback: New iPhone stencils for prototypers @ Mediajunkie

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: