Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:4Length:17 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Creating a Click-Through Prototype With InVision

In this lesson we’ll create a basic click-through prototype with InVision. I’ll explain some of the value in prototyping, then show how you can very quickly link screens together with InVision using hotspots. I also cover how to pick the right transitions and use fixed headers and footers.

You’ll see that with minimal investment you’ll be able to create something which gives quite a realistic idea of how your app will look and feel in real life.

Relevant Links

2.1 Creating a Click-Through Prototype With InVision

Hi, this is Chris for Envato Tuts+ and welcome back to the course. Let's start creating our first prototype. First of all, I'm gonna open Sketch where I've created these example app screens. You can use your own app that you're working on or you can download the Sketch file which is attached to the course. I just have a really basic set of screens that you'd typically find in a social media app. I have a News feed style screen, a list of messages and contacts, a New message dialog, a profile page and a pop-up. The reason I've chosen these screens is just to show a different variety of interactions that you might encounter. I've also numbered the screens so that they'll be easier to keep track of in InVision later on. If I go to my web browser now and open InVision, I can start a new project. This example is an Android app. I've used mostly standard material design components. You can either save out flat JPEGs or you can import your actual Sketch or Photoshop file. Okay, now it's finished importing and you can see the same six screens are here in InVision. Without doing anything else, you can actually immediately cycle between these screens by hitting right and left here or on the arrow keys of your keyboard. When you wanna view it on your device, you can hit Share here and you can send it to yourself by either Email or SMS. As you can see, they even have a dummy device in this window here so that you can get an idea for how it'll look inside a phone. But to actually link these screens together in the way they would be in a real app, we're gonna use hotspots. Hotspots are just clickable areas of the prototype that you can link to different screens within this prototype. You can start creating hotspots by going to Build Mode down at the bottom here. First of all, on the Home screen, I'm just gonna create a link to first of all the Messages screen, and this is where having sensical file names comes in handy. Let's not worry about the gestures and transitions right now. And secondly, another link to the Contacts screen. Now, when I go back to the Home screen, you see that I can click on the messages here and it'll bring me to that page. However, I haven't created any hotspots on this page yet, so I can't actually click out of it. So now I'm just gonna create similar hotspots on the other tab pages. So now that I've done that, when I return to Preview Mode, I'll be able to click between these three screens. The other thing that you can do immediately with your prototype is scroll through different pages. But this will only happen if your art board and sketch is longer than the device area here. So I'm gonna go back to Sketch and make these art boards longer with more content so that we can scroll through them. So now in Sketch, I've made two of these art boards longer. When I go back into InVision, by default you'll be able to scroll through these, but you'll notice something feels wrong. Typically in an app like this, the header area will be fixed, and that's something that we can do quickly in the Build Mode too. All you have to do is drag down this fixed header area. Now when I go back to Preview Mode, you'll see that that stays in place and everything scrolls beneath it. And even if I'm scrolled halfway down the feed, I can still click through to the other sections. So I'm just gonna go back to Build Mode and have the same fixed header in each of these pages. Now I can scroll through each of them and click between the sections. So you can see how quick this was to set up. And already we're getting a really good idea of how our app will look and feel in real life. Another thing to think about that I mentioned previously was to consider where screens come from. So previously when I went into Build Mode, I said to ignore the gestures and transitions for now. Now that you've got an idea of how it works, let's go back to this. Transition is set to Instant by default, which gives you a functional click-through, but it doesn't really give you a sense of where you are in the app. The apps typically use transitions to communicate the movement between different screens. If you look in this list of transitions you can use something like Dissolve, which just has a nicer effect than Instant, but what we wanna use in this instance is Push Left. That means that the screen exists to the right of this one and that that screen will push this one across, rather than overlaying it, making it feel that they're on the same plane. I'm gonna do the same thing for Contacts as well. And then if we move over to the Messages screen, I'm gonna do the opposite for the Home screen because it's to the left of the Contact screen. So we're gonna say Push Right for this one. And again, with the screen to the right of it, we're gonna hit Push Left. So once I've completed this for all three screens, we're gonna go back to the Preview Mode. The clever thing that you're gonna see now as well, is that when InVision knows that we have fixed headers at the same height on all three screens, it will keep this fixed header area the same through the transitions, which really feels like a native Android app. So now, when I click to the Messages screen, you'll see that it comes from the right and same with the Contacts screen. When I click back two screens to the Home screen, this also works, and it really gives a sense of spatial awareness within the app. And when you keep this consistent, it will help users in finding their way around your app and not getting confused by the navigation. I'm gonna create a slightly different kind of transition now where we wanna show how a user can create a new message. So we're gonna use this floating action button and create a hotspot around it, and we're gonna link that to the Send Message screen. Now this is slightly different, where does this exist, to the left or to the right? Typically for an action like this, the new overlay will appear from the bottom of the screen. So I'm just gonna choose Slide Up here. Now when we go to Preview Mode, The screen doesn't push the other screen up but appears over it as an overlay. We can also create a hotspot on this screen to close it again, and hopefully you're already guessing which way this one's gonna go. When it links back to the Messages screen, if it came up from the bottom, it's gonna go back to end from the top. So when I go back to the Preview Mode, the overlay just slides down from in front of our Messages screen. That's just a really basic introduction to InVision. But you can see how you don't need any crazy technical skills to be able to quickly create a prototype. And for me there's three areas of value in a prototype like this. The first is that you yourself can get a real sense of interacting with your app. You might notice gaps in your thinking from the flat mockups. And it might just answer some questions you have. The second benefit is to communicate with your team. Whether you're sharing your work with other designers, with developers or different stakeholders, having a prototype will really answer a lot of questions and for them to get a real sense of how this app will behave too. The third and most important benefit is that you can actually test this with users. It might be a pretty lightweight prototype but there's still value you can gain in getting this prototype in front of real users and seeing if they have problems performing simple tasks, and if they understand how to get around your app. So now you should have an idea of how to create a decent fidelity click-through with InVision, but what about when you need something more than a click-through? Occasionally, you'll need a more custom interaction or want to get something really high fidelity with one specific part of your app. And for that I'm gonna dive into principle next.