3.3 Add Interactive Hotlinks and Animations
We’ll now add interactive hotlinks and animations to the subscription form to mimic user interactions on a mobile device.
1.Introduction4 lessons, 14:32
2.Creating a Mock-Up in Adobe Photoshop5 lessons, 39:54
3.Building the Interactive Prototype With InVision5 lessons, 46:22
4.Sharing and Gathering Design Feedback4 lessons, 26:57
5.Conclusion1 lesson, 01:41
3.3 Add Interactive Hotlinks and Animations
Hi everyone, welcome back. We are still in InVision here. In the last lesson, we brought our project in and you saw how to take your Photoshop document and arrange your layer groups and name your layers, so that it was very easy to bring your screens right into InVision. So we are in the view here, where you can actually preview this project. So back at the main screen here, we can see that we can view our project. That's how we got to where we are. And then, we are viewing the first screen. So that's where we want to start. I get in the habit of naming and arranging my screens in the order that I want them to be interacted with. It just makes it easier. If you had like 20 here, it would really help to organize that, so that it was in the order of interaction, from start to finish. Or if you had multiple interaction, you can organize it like that. Because what ends up happening, is these end up looking very similar, if there's not a lot of differences between your screens. So the naming convention is really the only difference that you're going to see. So that's just a habit that I get into for using this. It makes it a little bit easier. So we're landing on the first screen. This is the unfilled form, that's what we're calling it here. And we're currently in preview mode. So preview mode just allows us to see it as you would see it, if you shared this with a client. And ideally what you would be seeing, if you were looking at this, on a phone. So this is the interaction mode here and its shows that you can view and interact through preview mode with the eye. So when you're ready to add interaction, you just go to the next icon, which is build mode or B for the shortcut. And it allows you to create hotspots. We're going to create a few hotspots here, just to get you familiar with this process. You can go a lot of different ways with this and it's really, really cool. But I just want to show you some basic ideas here for hotspot use and then as you get comfortable and tweak this for your own projects, you can do that. So again, the best thing you can do is think about this in terms of how your users are going to interact with this. It's gonna help you build the interaction and avoid some confusion in this process. I will also say that the more you can practice with this, the better it gets. A little more intuitive it gets. So the very first thing that we need to think about is the form. How are people interacting with this form? When I land on this homepage, the first thing I'm gonna be tempted to do is, click on First Name. That's how I want to fill in the form. That's how we would do this in a real world scenario. So what we're gonna do, you notice that you have a plus sign and you can click and drag to create hotspots, so that's what we're gonna do. We are going to create a hotspot all the way across this. It doesn't have to be perfect, but you probably want to allow this to be across, because on a mobile app, you'll be able to touch anywhere in that form field. If you were on a computer, you might hover over here and highlight first name, but on a mobile device, you could end up clicking anywhere. So we want to mimic that reality, so we're selecting this entire field. Then a little window pops up and you can see that you have some options here of how you want to link this up. So you can select a destination. You have various options here to where you can point to another area on your screen. You can go to the last screen that you visited, previous screen or the next screen. You can even go to an external URL, if you wish, and then you can also come here to picking one of your screens. And if you really thought about your user interactivity in Photoshop, and you saw us do that, where we turn these on and off, before we even got into InVision, this is gonna help you. So we know that our next process is going to be the filled in form, and you can see a preview here, which is gonna help if your screens look different enough, you can see the difference. So we're gonna click on filled. And that's gonna take us to the filled form next. And you have some options here of how you're going to gesture that. So you can mimic real phone and mobile device gestures here. So ideally, if we were using this, somebody's probably gonna tap on that form field. And they're going to be able to interact with that field. They're not gonna do any of these others for the most part. So we're gonna leave it. Another cool feature here is that you can mimic a transition. So if you really wanted to have a specific transition, it can instantly go to that page. Or you can do other things where it can push to the right, push to the left, slide up, down and flip over. And we're actually going to have it flip to the right, just so you can see that animation there. And then we're gonna go ahead and hit save in this case, because we're ready to move to the next hotspot. So once we've clicked on this, and you can go ahead and preview at any time, so you don't have to go through the entire process, we're back to the homepage here. If we click here, you can see now that we can interact just with that field, and we can go anywhere in this field. So if I click here, it's gonna load that secondary screen and you can see here, that now we see that we filled it in. Obviously, there's not gonna be a typing situation in this mock-up, but we can get a feel now for, I'm a user, I filled in my form, my next step is to click join the list. So now that we have that, we can go back to our hotspot. We can drag out another hotspot across the button here. And this one's gonna go to the confirmation page. Now, this is a very simple process. You can definitely make this more complicated by having more screens. We can have an error field here. What happens if we fill the form in incorrectly? We can mock that up, so that we can see what happens in that case. So we are just mimicking the idea here that everything is going smoothly and we're going straight from a form to confirmation page. Ideally, with a sign up form, it should be that simple. There should not be another layer here, aside from, maybe an error that they didn't fill one of the fields in. But other than that, there should not be another page. We want this to be simple. We want this to be a two-click process. We land on the homepage. We fill in our information. And then, the third click is to submit it. But really, it's just a two-click process on the site, itself. So from here again, we're gonna tap to submit. And then, we can go ahead and if you want to pick a transition here. And that's gonna slide down. And then we're gonna hit save. And again, we can go ahead and preview that. Now that we have our form filled in, let's go ahead and hit join the list. You can see that page slid down and now we have been thanked for joining. We have our confirmation page. The end. So now we have some other options here on the confirmation page. You can see that, we have a link down here for the home page. So we can go ahead and mock that up, if we want to, create a hot link again. Just highlight that. And then, we can go to an external URL. If by chance, this is a landing page and the home page is different, we can also go back to the very beginning, in this case, if we want to. And I'm gonna have an instant transition, just so you can see what this looks like. Another cool feature here is to maintain the scroll position after the click. So in a mobile app, you might not have a bunch of scrolling going on, so it's gonna maintain where you were at and mimic that, so it's not scrolling all over the place. So I'm going to check that, just so you can see what that looks like. So that's what we have. If we go back to preview here and you can see now we can click that and nothing changes in my scroll. So I'm exactly where I was before. It makes it really nice to kind of make that realistic. And again, you can see all that we've created with those hot links, just in a few clicks. Personally, I just like the ones where there instantaneous. So if you realize that you don't really care of this to happen, for example. You can go back anytime to your hot links and you can adjust that. So if you don't want this to slide down, for example, and you just want it to be instant. And you also want that to maintain your scroll. You can make that change at any time, go back and preview. And you can see now that it's instantaneous. So you can play with different animations, if you want to, within here. It's all very quick, so it makes it very convenient. The final thing that we need to do is interact with this logo, and this is where we're going to use the hotspot, where we're gonna create a template, so we don't have to do this over and over again. So we're gonna go back to the very first screen, just to make it easy. Start at the top here. And we're gonna create a hotspot for this logo. This is taking us back to the home page, right? This happens on almost every website. So we're gonna highlight a fairly decent area here. And then this is going to stay on this screen. And then, it's gonna be an instant transition and then we're gonna maintain that scroll as well. The only thing that we're gonna change here is that we're gonna include that hotspot in the template and we're gonna create a new one. And then we just call it something like main logo, something like that, and then you can say save. Hit save. And now you can see that that's green. So it's a different sort of color so that we know that a template has been applied. So let's see how easy it is to apply this to a second screen. If we go to our form filled, you can see that it's not highlighted, but we can draw out another hotspot here. And instead of going through the motions, we can come right up top, select main logo, and it automatically applies all of our settings right to that area. And then, if we go to our confirmation page, again, we just have to drag out the logo and again, instead of selecting all of those settings, we can just hit that and it shows us that this is used on three screens. So now if we preview this, we can flip between our screens and end up back at the home page at any time. And all of those features are identical across all of our hotlinks. It's a really cool feature and it's gonna save you some time from having to select all those features, for things that are going to react the same across your mobile application. So this was a look at how to create hotlinks and animations within InVision to create the interactive components that mimic a real active website. The next thing we're gonna look at is some of the additional settings and features that we have, now that we have our prototype ready to go.