Axure RP widget: sliding card queue

card_queue_smaller

Axure RP is a great tool, but like everything, it has its limitations. One of those limitations I’ve had to work around time and time again is the default system of transitions between dynamic panel states. Let’s say you’re given the task of prototyping a mobile photo gallery that allows you to swipe between images. Easy, right? Create a dynamic panel, give that panel states for every photo in the gallery, and then add linear or cubic slide transitions to the onSwipeLeft and onSwipeRight interactions.

But wait — during user testing, you decide the gallery would be clearer if it showed the edges of the next and previous photos to either side of the current photo. Whoops, there’s no way to do it! Nor is there a built-in scroll indicator that shows you how far into the gallery you are. Nor, I might add, can your users “peek” at the next image by stopping midway through the swipe and then reversing their direction — by default, once Axure registers a swipe, the transition is inevitable. Finally, there’s no built-in feedback once the user swipes to the end of the gallery; the swipe action just won’t work anymore.

I made this widget library to solve this problem. The card queue is completely customizable — the cards can be any size you want (as long as the widths are equal), there can be as many of them as you want, they can contain whatever images or content you want.  There’s a “controls” state with some text fields that you’ll need to fill out, but this should greatly simplify your workflow when you find yourself in need of something like this.  As of now, there are two widgets included in the library: one that mimics the layout of Google Glass, and one that’s more suited to mobile phones. These are just to get you started, though — make them any size you want!

See an example | download the library

A brief note about this widget’s limitations: it seems to work best in Firefox. Chrome sometimes works, but other times the drag listener fires even when you’re not holding the mouse button down. I’ll post a video tutorial at some point, but in the mean time if you have any questions about how to use the widgets, leave a comment below.

4 thoughts on “Axure RP widget: sliding card queue

  • March 3, 2015 at 10:25 am
    Permalink

    Fantastic Luke. Looks like a lot of work went into this. It would be worth posting on the Axure forums.
    Have you made any other Axure libs?

    • March 5, 2015 at 12:49 pm
      Permalink

      Thank you for the kind words, Meirion! I’ll definitely post this on the forums- just need to add a little more detail to the instructions first, I think. Did you use the lib? I’d be curious to know if you had any difficulty figuring it out. Most of the other libraries I’ve done have been for internal use at various companies, but I absolutely plan to post some of the more abstract ones here.

  • September 15, 2016 at 10:44 am
    Permalink

    This was amazing – just what I was looking form, very helpful indeed. Thank you for sharing!

  • October 13, 2016 at 7:15 am
    Permalink

    Thanks Luke
    Exactly what I need it

Comments are closed.