Click-and-Drag Simulation in Axure

Prototyping click-and-drag functionality in Axure has proven to be a problem. I’d like to show off a little technique I just developed for simulating a “draggable” interaction in a prototype. It’s not the real thing, but it’s the closest I’ve seen, and can be used to prototype touchscreen applications like those of the iPhone. It requires an obsessive focus to detail, but hey, that’s what makes a great designer.

“Draggable”, Animated Carousel

The Carousel will be included in the next pattern library update, but until then, this is what it will look like:

Try it Out OR Download the Axure (.rp) file

There is another release of the library in the works, in which I’ve basically gone off the deep end with some sweet interactions. However, I’ll wait until a few more pieces click together before I post it, including some additions from other designers.

How it’s Made

This Carousel uses a couple of tricky techniques that are confusing at first, but useful once learned. Here are the fundamentals:

Windowing
To create the movable filmstrip of items, place one dynamic panel that will be your “window”, which shows only a few items at a time. Inside that dynamic panel, place another, much wider dynamic panel that has all your items nicely lined up and spaced out evenly. Then, all you have to do is move the inner dynamic panel around using interactions.
Animation (with Momentum)
Victor at Axure has explained how to do time-delayed interactions, and I won’t repeat that. However, momentum hasn’t been discussed. To create momentum, move your panel by a decreasing amount each time. Your cases should look something like this, which will create the appearance of slowing down:

Case 1: Move (panel) by 50px
Case 2: Wait 50ms and Move (panel) by 40px
Case 3: Wait 100ms and Move (panel) by 30px
Case 4: Wait 150ms and Move (panel) by 20px
Case 5: Wait 200ms and Move (panel) by 10px
Fake Click-and-Drag
To do this, first, lay an image map region over the “window” panel. Then create a hidden “Controls” dynamic panel on top of the image map, which will have controls inside that move the inner, “filmstrip” panel around. Set the onClick interaction on the image map region to show the “Controls” panel.
So, when the user clicks the image map, “Controls” will appear between the mouse pointer and the image map they just clicked.
Now open up the Controls panel, and within it create two more image maps, one on each side. Use the MouseOver interaction on each of these image maps to 1) animate the “filmstrip” in its respective direction, and 2) re-hide the Controls panel.
Finally, in the middle of the Controls panel, place some helpful text and arrows telling the user to slide their mouse in either direction.
Here is an exploded view:

Whew. Did you make it through all that? You deserve a bonus (it’s included in the .rp file, too).

Happy prototyping!

Will

Is the dynamic panel within the dynamic panel a ‘state’ of the window panel?
http://acleandesign.com Loren

Will: I wouldn’t say that it IS a state of the window panel, but yes, it lives inside the window panel’s single state. So, you have to edit that state to get to it.
Will

Thank you for the prompt response Loren. I am struggling with the standard carousel master. I am attempting to recreate, but the scroll will move vertical. I set it up in the same manner as your example but upon click nothing happens. I can get the main window to move, but not the dynamic panel within, even though I have selected it in the dialog box. I noticed in your example the images are one with the panel…did you ‘group’ them? When I do that I can not name the panel. I attempted to group and nothing worked. I am thinking there is a subtle design flaw that I am missing due to my lack of experience. Any ideas? I did notice that on my button there is not the small folded corner..is that an indication of an action.

I do have to say the carousel is a beauty…great job.
http://acleandesign.com Loren

Thanks for the feedback, glad you like it. So keep in mind that there are two dynamic panels: the first is the window, name it “window” and make it kind of small. Window should have a single state – go ahead and “edit state” on that one. Now, inside this state, create a long dynamic panel called “filmstrip”. This will hold all of your images. Again, it will have a single state – “edit state” for it. Now, we’re two levels down, inside filmstrip. This is where you place all your images (no need to group them).

Finally, go back to the main page in your prototype (outside of window and filmstrip). This is where you place your control buttons. The buttons should “Move Panel” on the “filmstrip” panel when clicked. And don’t forget to switch your Move Panel interaction from “Move Panel to:” to “Move Panel by:”. I hope that can clarify, and if not, just email me the prototype at loren at acleandesign.com and I’ll take a look at it.
Will

Loren,
Thank you so much! Works like a charm. Thank you for the clarification and all the help.
http://www.per-so-na.com/blog/labels/experience.html Marianna

Thank you very much for this open source.
“Carousel” is a useful tool that I will try to use in my prototypes.
Melody

I’m a beginner with Axure, transitioning from Visio. This is VERY cool… I’m wondering though what you’re defining as “draggable”? I would expect to place my cursor on the frame of the carousel and “drag’ it somewhere else on the screen. Sorry I’m a novice…
http://acleandesign.com Loren

@Melody In this example, it’s a click and drag that you might compare to coverflow or navigating on the iPhone – grab the pictures and swipe them to the left, or to the right. You can find a better example of the click and drag that you are mentioning in this post: http://www.acleandesign.com/2009/01/axure-roundup-drag-n-drop-widget-libraries/

But now you’ve also made me realize that I need to update this interaction to use the better method that Jeff Harrison figured out :)
zhangjie

hi，i am chinese man,I will always come

i feel your design very good, i like it

tanks