Axure how-to: create a conditional button

tools & techniques | Tuesday, January 25th, 2011

Axure is my absolute favorite tool for wireframing, prototyping and even functional specs – but despite my ongoing love affair with the program, it’s not the easiest thing in the world to figure out.

This post will be the first in a series of “Axure how-to’s” that explain how to get it to perform some of its trickier technical maneuvers.

Show, don’t tell

I’ve noticed an interesting phenomenon in the year or two I’ve been showing my prototypes around. People – who were once quite content to read about what a button does in an annotated wireframe – now see an interactive prototype, and all of a sudden they want to see every interactive element in action. No longer satisfied with notes that explain “when you click the button, this happens”, they want to click on it and see it work.

The conditional button is a great example. It’s only enabled if a certain condition is met; otherwise it’s not clickable. You see this behavior in just about every software installation sequence on the license agreement page: first you have to click “I Agree”, then the Next button is enabled and you can go forward.

Can it be done in Axure? But of course! Here’s the finished example.

First, name all the parts

I’ve created a basic wireframe for the license agreement page. There are two elements that we’ll be dealing with here: the “I accept” checkbox, and the “Next” button.

In order for the next step to make sense, these need to have names.

  1. Open the Annotations & Interactions panel (right side of the screen).
  2. Under Footnote and Label, enter a name for each element. (Now would also be a good time to enter an annotation in the Description field that explains what this element does.)
  3. Do this for both elements.

Logic 101: if A, then B

Now, we set up the condition.

  1. Select the “I accept” element.
  2. In the Interactions panel, click Add Case.
  3. Under Step 1, click Add Condition.
  4. Here’s where you build the “If” statement, and why you needed to name the elements. Set it up like this:
  5. Click OK. Back on the Interaction case properties dialog, scroll down and choose Enable Widget(s) (meaning the Next button). Click Widget on the bottom pane, and choose the Next button:
  6. Click OK twice. Now do the exact same thing all over again, except set the “Else” condition so that if the value of “accept terms” is false, the widget will be disabled.

Pages have interactions too

The last thing we have to do is set the Next button so that it’s disabled by default. The way to do this is with a page interaction.

  1. Click the arrow at the bottom of the screen to open the Page Interactions panel.
  2. Click Add Case.
  3. Choose Disable Widget(s), then choose the Next button from the bottom panel (same steps as above).
  4. Click OK. Now the Next button will be inactive by default.

It’s a good idea to set a different visual style for an inactive button, so we’ll do this last.

  1. Right-click on the Next button and choose Edit Button Shape > Edit Disabled Style.
  2. Choose a lighter fill color, font color, etc. and choose OK.
  3. Now the button will look inactive unless the user clicks “I accept”.

And that’s it! F5 to publish and you’re all set with a new, even more interactive prototype.

Try it out here.

6 Comments »

  1. [...] This post was mentioned on Twitter by axure rp and Mauro Lages, caitlin gannon. caitlin gannon said: New Axure tutorial: how-to create a conditional button > http://j.mp/gv9TfX [...]

    Pingback by Tweets that mention Axure how-to: create a conditional button » caitlin gannon - freelance user experience designer -- Topsy.com — February 3, 2011 @ 11:43 am

  2. thanks a lot great explanation. it s even clear for me:)

    Comment by Mertguncer — November 1, 2011 @ 11:21 am

  3. Thank you for this case. It is very helpful for me :)

    Comment by Anvar A. — April 18, 2012 @ 9:13 am

  4. [...] Axure how-to: create a conditional button by Caitlin Gannon [...]

    Pingback by Resources for Axure | Theme Alchemy — May 29, 2013 @ 6:28 pm

  5. [...] Axure how-to: create a conditional button by Caitlin Gannon [...]

    Pingback by Free Resources for Axure | Theme Alchemy — May 29, 2013 @ 7:01 pm

  6. Thanks for the writeup! Very helpful. Cheers.

    Comment by Ray — January 30, 2014 @ 12:03 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

Powered by WordPress | Based on a lovely theme by Roy Tanck | | Log in