Learn how to create simple interactions to create a click-through prototype.
- [Narrator] Now that we have our medium fidelity wireframe sort of in place, where we know where all the elements are, it's a good opportunity for us to sort of take a look at how does this all work? So how do I get from page to page? This is where adding a quick interaction, just a quick click through, and testing really comes in to play. So what we're going to do here is set this up so that we're on the Homepage and we click the Camp button, we go to the Camp page and on the Camp page, we're going to return back to the Homepage. To get yourself started, open up the wireframe prototype that's sitting in your dashboard.
When it opens let's go to work. The first thing I got to do is select the Homepage. Select the icon for the tent. I'm going to come over here to the Interactions. So this is where it all happens. Click on the Interactions and I say I want a New Interaction on the tent. What will trigger it, it's a three step process, what will trigger it, so I'll work with the Click or a tap, What will happen? We're going to go to the Camp page, so we're going to look for Go to page.
It's going to ask you "What page do you want to go to?" and I'm going to select Camp. I can click the Add interactions button. Then I come to the Camp page and we'll use this icon up here to get us back. It's the same thing, New Interaction, on Tap, What will happen. We're going to go to a page. What page are we going to go to? Going to go to the Homepage and we'll click Add. We come back to our Homepage and it's now time to test.
Now you'll notice that your icon with the New Interaction has a little lightning bolt beside it. So you can click on the lightning bolt and that will open the Interactions panel. So let's test this. We're going to go to Preview and this will go to the Preview page. We come down and we click on Camp or tap on it and you'll notice that the icon changes, so you click, there we go. If we go there, so there you go you've created a very quick click through.
Now a couple of things you can do here, so if you send it out, you can get comments on it. Now you can take a look at a sitemap, if you click that you can just see the sitemap over here. You can send this out for a usability tester. You can also use it as a live presentation to show all the stakeholders where the project is at this point. Right here is this little icon that returns us back to the editor. So if I click that and we're back at the editor. So there you go. There's creating a medium fidelity click through.
It is really simple to accomplish. Just select the element you want to apply the interaction to. Click on New Interaction, tell it what triggers it, what it's supposed to do, where it's supposed to go, and then hit Preview.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus