There is a whole variety of situtations where you will find application prototypes useful:
- Presenting navigation paths
- Usability testing
- Visualizing information architecture
- Designing available interface functions
- Communicating branding and business goals with design
- Expressing your concept during a bidding
- Preparing a documentation for visual designers and developers
If you’re in one of these situations, don’t let terms such as “clickable”, “clickthrough” and “interactive” haunt you. Let me show you how you can use those keywords to describe your own prototype. Quick, easy and above all – no coding skills required.
Keep up with the examples and try these tips in UXPin.
Setting user interactions with interactive prototype elements
If you want a given element to interact with another element in a prototype, there is an easy way to do it called setting up interactions. Let’s say, you want to design a photo teaser that should have these basic interactions:
a) Interaction 1 – “on click”
Occurs when a user clicks or taps (in mobile device cases) on an element. Let’s try it with something quick and easy – when the teaser is clicked we want to show a picture below it. So there are two elements involved (a teaser and a picture) and we need to put them on the canvas. Let’s also give them names, so we could easily identify them in the whole prototype if we want to use them again.
Quick tip: try to name elements with significance realted to a group or unique identity. For example, if you know that the teaser will be the one of many, you can call it for instance “teaser 1” or “teaser #1” and never get confused with other teaser elements. If the element is unique, you can give it a similiarily unique name, like “Pink Floyd teaser”. Don’t worry if you forget how you named an element – while in interactions window hover over an element and UXPin will highlight it on the prototype.
Having them put on the canvas, it’s time to set up interactions. Open the interactions of “teaser 1” window by double clicking the element and then click “Edit interactions” button. Chose your setup from the combo boxes — for the interaction showing “picture 1” on “on click” of “teaser 1” the setup should look like this.
Our setup is now: on click | show | picture 1 and this will do the trick :).
Notice that once you set up an interaction, a link icon shows in the upper right corner of the element:
Now for the picture 1 element. If the clicked teaser should show the image below, it means that the image must be invisible before clicking. Let’s make that happen. Since we set up an “on click” interaction with this element, we only need to hide “picture 1” on start to make the appearing effect take place. Just double click the element and change the element state to “hidden” like so:
And that’s all you need to do to show people involed in your project that clicking on this element should make a picture appear. Hit the preview button to see your work in action.
b) Interaction 2 – “on mouse over”
Occurs when a user hovers the cursor over an element (without clicking the element). The pattern for setting this is the same as with the “on click” interaction but with setting “on mouse over” instead “on click”. So if you can make the teaser appear when a user clicks, you can make it appear when a user hovers the cursor over by now.
But let’s dramatise things a bit here. Let’s say we want a tooltip to appear when the cursor is over the teaser and keep the image below appear when the teaser is clicked. Standard stuff seen “under every rock”. We need a new element here and let’s call it “tooltip”. I also added a text to it “Click to see the picture” and you can too by double-clicking on the element.
While editing the tooltip, you can experiment with all the customisation options. I customised the size, changed the color and gave the tooltip rounded borders effect.
Quick tip: You can place elements on the canvas in two ways: you can simply drag&drop them on the canvas or you can use a cool search feature. I mostly do it like this: hit ctrl+f (this brings up the search bar), then just type in a keyword related to an element I seek, click it and it’s there on the canvas.
Next, as you probably expect, we need to make this tooltip invisible on start and set up an “on mouse over” interaction with elements “teaser 1” and “tooltip”. Notice that the new interaction has to be set in the “teaser 1” interactions window, because that’s the element that user interacts with to cause the tooltip to show.
Quick tip: You are not limited to one interaction per element. You can set up multiple interactions with different elements in your interactive prototype.
So now we have a teaser element that shows a tooltip when the cursor is over it and an image when the user clicks it.
3. Linking pages in an interactive prototype
Last but not least: linking pages. You can make any element on an interactive prototype link to anything you wish, be it pages inside your prototype or external pages. Try it once, and you’ve learned the whole process. Here’s how I linked “picture 1” to another site called “site 2″. Follow these easy steps.
a) Set up a new site
b) Click the element that will link (“picture 1”), and click the link tool. Choose the site you want to link to and you’re interaction is ready.
Notice that you can also navigate through the pages using the left menu bar in the preview.
And that’s all. Now you can create “clickable”, “clickthrough” and “interactive” prototypes. Visual designers and developers will love you for it :).