Transcripts
1. Introduction: Hey, guys, I'm at today. We're gonna be learning how to create interactive Iva T prototypes fast with a program called Proto by. You can Catch a free download where you could get a license $100 for a year of updates, and I think that's well worth the price. And we'll get into why it's valuable later. What is an I T product I like to think of i o T products as something with multiple channels of communication. Think it elects a nest Philip to light bulb. So it's anything that's connecting with a physical product and a digital counterpart, and it's really this interaction in between that's so difficult to test. And that's why it takes so much time and money to really get something tangible to get user feedback on. And that's the reason I'm making this video is because I know of a quick way and process that people can get user feedback early in the process to end a lot of the speculation that happens about what people think products should do. So one of the things you're going to come away from with this class is how to make a quick prototype get user feedback on it and end a lot of that. Speculation that happens in early development process is so a little background on me. I'm a product designer digital scientist in Atlanta, and my background is in mobile applications and websites, specifically for a i ot products. I've worked on everything from power tool to smart home products, and these are all things I've learned to improve my process, and I hope they're things that can be valuable as well, so let's get started.
2. Step: 1 Creating the Input (Toggle Switch): Okay, So once you opened credible, you'll notice to the left. You have example files that are helpful for reference, but for this one will be selecting new pie. Who will minimize this preview? And that was to start so a quick rundown of what's on the screen to the left. We have the layers panel in the middle of the art boards. This is where well, draw everything to the right is the interaction panel, and to the right of that is the intra patient panel and as a start, will make sure our screen sizes correct. So this is just gonna vary depending on what you're designing for. But for me, I'll select Android. So the first thing I'd like to create is my toggle switch for the light bulb. So we'll bring a rectangle in, and we'll put the origin to the center and note. It's not really important where the origin is, as long as it's consistent with everything you drop, so we'll make this a little bit more of a rectangle. I'm just dragging down there, and we will center it on our board, and then, since it's a toggle switch, will make the radius 100 and the first thing we want the toggle switch to be on is on, so we'll go ahead and making and next we will make over. There was gonna be the switch and so again will make the origin the center and we'll drop that to the middle. And we're gonna use option shift to scale this down. And over here, the size you noticed, there's a little lock. And if we select that luck, we can use these buttons to make it scale uniformly and then use the keyboard to bump it over it, where we need Teoh and will change the color. A little is well down here. We can also add a drop shadow and I will because it's an element that's on top of the background layer. And so now that we have our toggle switch drawn, we can look at it in the preview window and we have our toggle switch. So the next step we're gonna do here, if you notice clicking here, doesn't do anything yet, and that's because we haven't added any interactions. So that's gonna be our next step
3. Step 2: Adding Interactions: Okay, So the first interaction we're gonna add will be to move this toggle switch over to the left, effectively turning off our life. So we'll go to add trigger and we want to tap. And if you look, there's a bunch of other options here, and you can really get some pretty in depth interactions, but we'll be keeping it simple for this one. So top and asked me to select a layer, and I have over one and rectangle one and a quick note. It's always helpful to name you're layers appropriately, because on some big files, it's very easy to get these mixed up. So now, if we go over, will want to tell her switch, and what we want to switch to do is moved to the left, simulating it being turned off. So if we go over here, we needed to move on the X axis. So if you click on the art board, we know it's a position to 7.5, and it's helpful to write these numbers down, either in notes or on paper, whatever you prefer, so we'll move it over to about where it should be to be turned off and we're 1 53.5 not Command Z until it's back to where it started. Then we'll go to X, and we know it needs to move to 1 53.5 So now that we have this set up, we can look at it in our preview window. So if we select tap, it means ever to where it should. So the next step is we don't want it just to move. We want the color to change, to signify that it's turning off. So we'll go color background and then get that filled to change to Gray. If you'll notice here, there's some other easing and animation tweaks you can make for the for. The purposes of this glass will just be keeping is in and out in a duration of point to. But if you ever want to explore, there's some pretty interesting animations you can adjust and some pretty easy things to get into. Let's go back to our preview. I'm actually gonna drop this down so we could see our preview window on top. So now when we click, it will also change color. But the problem is when we click again, It wont move. That's what we need to dio is put a conditional statement in to make sure the switch could be turned on and off. So if our switch, if their switches X value is equal to 1 53.5 so that's the value for it being off. Then we wanted to move back to its on position at two of 7.5. Now, let's check to see if that worked. Okay, Great. It did work. So now you notice we can turn it on and off. Now, all we need to do is at a color change back to green for that condition. Make sure the right layers selected green. Okay, Perfect. Everything else looks good. That's preview it one more time. Awesome. So now that we have her file set up with interactions, the next thing we're going to do is send commands to another prototype
4. Step 3: Creating the Output (Light): Okay, so now we want to add sin commands to another prototype. And so all that means is when we talk about the switch on and off, it will be sitting a command to another prototype to turn a light own house. So we will go here, gonna send command. And we just added that before this condition, and we know that means to turn on and no notice you can select channel appear we use credit by studios. That just means it's gonna communicate with another prototype android broadcast is something a little different. Get into later, the message will be turned on, and so will get down here beneath the conditional statement. We'll add another send command to be turned off. And it's important to remember what you name these because it does need to be the exact aim to recall the command and other predators. So now that that's done, we can go file save, and we will call this switch input. We'll say that to the desktop, and then we can create a new file super size. I'm gonna put it his desktop. And the reason I'm doing this is because we'll probably shown another computer or a TV screen or even possibly a projector. It really just depends on how you want to show a prototype to a user. And so what we're gonna do is important Allied, we're not gonna import. We're gonna bring in an image we're gonna bring in this light bulb. It will center that on the screen, and then we're gonna go rectangle. We're gonna make a rectangle that's the size of the art board and notice in this layer panel, it's not showing up. All you can do is drag and drop to reorder. And we're gonna make this rectangle black to signify the light is turned off so you can't see anything. And then after we get that, we'll go to add trigger over here, do you receive? And the message it wants to receive is turned off and will make sure that changes the color of the rectangle toe black and the other message we wanted to receive will be turned on. And we want the color to change. Let's say to orange when it receives the turn on command, everything looks good so we can preview that minimize. And so what we can do now is you can take your phone out and down the prettify app if you haven't already done so and we can preview this first design on it.
5. Step 4: Previewing on Mobile: So if research prettify player in the APP store, we'll find what we need. And so once you get that opened up, you'll notice at the top. We have scanned type in US speed. You can use all three of those to connect to a prototype, and you also have recent connections. The bottom If you've already connected WiFi, but will you scan for this one? It's usually pretty safe in your first using it, and you can go to the top two device to pull up that barcode they know noticed. Your prototype automatically comes to your phone, and we'll use that for the next step.
6. Final Step: Viewing your interaction: So once you get your credit by APP downloaded, you can scan or use USB to pull the prototype up or use WiFi if it's been connected before . But once we get it pulled up, we can pull up our light prototype on her computer, and you'll notice that if we talk about the switch on and off our light response and the beauty of this being on a computer to if you need to, you can hook it up to a TV or a projector. If you're in a meeting room with user, it's really easy to kind of mocked this up in a little more professional setting. But the great thing about this is we're beginning to test the interaction between a digital and a physical product, and it's a good way to split the users focus a little and get them to understand how it's going to be used in context, a little more than something like quick prototypes or just a simple paper prototype and moving forward with next classes. What we could get into executing more high fidelity prototype with mawr interactions and a more believable environment we can render. But for now, please feel free to try to class exercise and let me know. You guys think thanks
Matt Ward, Product Designer
