Queron Jephcott Team : User Experience and Information Architecture Tags : Usability User Experience

Getting clever with Axure’s push/pull widgets

Queron Jephcott Team : User Experience and Information Architecture Tags : Usability User Experience

Axure’s push/pull widgets was a welcome addition to version 7 as it made it A LOT simpler to move items up and down the page. Granted, I’ve still got more control with my old ‘move chaining’, but you can’t argue with the time it takes to get a page moving.

However, there is one thing to remember when you’re using push/pull:

Push/pull doesn’t affect widget inside or outside a dynamic panel

The situation:

I get this one a fair bit. You create a nice multi-step form on a single page. Each panel state is a step in the form. The beauty of push/pull means that my footer slides up and down as we move between each step. But hang on… In one step, I have an address validation field that needs to switch from a form field to a static text version of an address. This needs a panel in a panel; one for the form, and one inside for the address validation field.

The problem:

When my address validation field moves between states, it’ll push/pull the items below it, EXCEPT the footer that’s outside the panels. It won’t move widgets outside the panel state in which it’s placed.

The result:

My beautiful push/pull form now pushing my fields over the top of my footer when the address validation panel changes. :(

The reason:

This might seem like laziness on behalf of the Axure developers when you hit this situation the first time, but it’s by design. Why? The main reason and non-coincidentally the common reason for using dynamic panels; modal windows. It’d be a disaster if my nice pop-up login window started moving shapes on the page behind it, because I push/pull an inline error message above the password field.

A better solution:

Really what Axure needs is the ability to set panels in a ‘move group’. If you could add the two panels two the same move group, the changing address field could move footer, whilst the inline error message in the modal window affect neither.

I’m sure it’s easier to write than build though ;)