From the course: Principle for UX Design (2019)

Drag and drop - Principle Tutorial

From the course: Principle for UX Design (2019)

Start my 1-month free trial

Drag and drop

“

- [Narrator] In this chapter we're going to create apply everything you've learned so far in this course. And we're going to start with a common interaction which is dragging and dropping something into place. So to get yourself started, open the drag drop file found in your chapter download. When the file opens you will see three art boards, and a bunch of images. The first art board is the start position, and the last one shows the dragged image dropped into position. So let's get started. So the first step is to select the drum tower on the first art board. So we'll just open up the images group here, and we're going to set its properties to drag. We're going to set a drag on the vertical, and the horizontal axis because people tend to move around. And were going to do the same thing over on the second art board. But we'll get to the in a second. So, what we'll need to do is drag, and you have to understand that a drag contains two events. The first event is the mouse down or touch down event. The user has selected the image and is dragging it but once its in position he or she lifts their finger or, releases the mouse, and that's a touch up event. So we're going to select the drum tower on the first art board, and we're going to add a touch begins event and just point it over to the second art board. And then we'll do the same thing with this art board but, we're going to add a touch ends event. So it just drags in to position. So lets see how all that works. I'm going to click preview, and we click, and you can see it just drops into place. Okay, so we have this thing kind of worked out the way we want it to. But let's start giving the user some feedback. And the first little bit of feed back is when we touch this we immediately come over to this art board. So let's show the user that they have indeed selected the drum tower, and we're going to do that by giving it a bit of a rotation, and a bit of drop shadow. So we select the image, and we'll set the angle to minus 15 degrees and we'll add a little drop shadow which is right here. So, you just select it and you can choose your drop shadow color in here using the color picker and we'll just take the blur out, and I'm just going to scrub across, and well give it a blur of about, let's say, 20. Just enough to let people know its blurred. And of course we got to scale it up so that they can see that they've actually chosen this. So were going to make it 1.3 on the scale. And again if we show the preview, and rewind, you can see that you've got it and if I let go, it goes into place. Now, lets come over to the third art board and deal with another issue. And the issue is the drum tower is still there. And not only that, the group does not slide over. So what we're going to do, is take the drum tower on this third art board, and we're going to set its opacity to zero. And then were going to come to the images group, select it, and then I'm just going to use the arrow key and I'm going to slide the group over. I'm going to use the shift key to give it a little bit of a boost there and so its somewhat even with the drag exercise text. So we'll show that in the preview, rewind, select it dropped into the box and everything works. So there you go, there's drag and drop. It's not that hard to do. We give the user a little bit of feed back We give the user a little bit of feed back and you're good to go. and you're good to go.

Contents