AXURE RP FOR INTERACTIVE PROTOTYPES
When static wireframes, mockups, and flows aren't enough to communicate the complexity of your ideas, it's time to make your designs interactive. Axure RP supports richly interactive prototyping: dynamic styling, animations, interactive forms, and data-driven visualizations (in addition to standard hyperlinks of course). Harness these effects through a variety of events: as a response to a page load, button or key press, swipe, or just about any other thing a person can do with a software user interface.
CONTINUE WITH CORE TRAINING
© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
Interactivity in Axure RP can be used sparingly to great effect; you don't always need highly sophisticated interactions in order to get your point across. Consider the click-through prototype: a series of otherwise static pages that each advance the viewer to the next page in the series when clicked. You can make the entire contents of the page clickable, or you can choose a region or element (like a button) on which to focus the action. For example, a page comprising a registration form might include a "submit" button which links to a confirmation page.
HIGHLIGHTING INTERACTIVE ELEMENTS IN THE PROTOTYPE
When viewing your generated output in the browser, highlight the diagram's interactive elements by clicking the "Highlight interactive elements" icon at the top of the Pages pane in the prototype sidebar. Turning on the highlight will add colored outlines to any widgets having at least one case.
Turning on highlighting changes the page URL. If you send this changed link to other viewers, highlighting will already be turned on when they view the page.
Another way to hint that a widget might be interactive is to give it a MouseOver interaction style. The MouseOver style will show up whenever your audience moves their mouse cursor over that widget in the browser (and the style will persist until they mouse away from the widget). Add a MouseOver interaction style from the Properties tab of the Inspector.
Different types of widgets have different interactive properties. The section below introduces a variety of widget types and the special interactive properties of each type.
INTERACTIVE FORM WIDGETS
Interactive forms are very common components of projects built in Axure RP, and RP includes several widget types dedicated to the creation of forms. You can find these widgets in the Forms section of the Default widget library.
Form elements in RP are functional—they become real, working HTML form elements in the generated output. Text fields can be typed into, droplists disclose options when clicked, checkboxes can be filled and cleared, and so forth. One thing HTML form elements have in common is that their styling is generally governed by the web browser, so form widgets in RP have minimal styling options as compared to shape widgets.
Text fields have an "input type" property, which will make them behave uniquely in the browser; for example, "password"-type text fields will mask their contents with black dots. Specify an input type for your text field from the Properties tab of the Inspector. For a summary of each input type, visit the Text Fields article.
Double-click a droplist widget on your canvas to begin adding list items. Click the green "plus" icon to add one item at a time, or click the "Add Many" button to add multiple items. In the "Edit Droplist" menu, you’ll see a checkbox next to each item in the list. Check the checkbox next to a list item to make it the default option—the one visible when the droplist is closed. (If you don't select a default, the first item in the list will be the default.) If you prefer to have the droplist appear blank by default, add a first list item containing just a single space character.
The defining characteristic of radio button controls in typical HTML forms is that only one button in a set can be selected at a time, and selecting any one deselects the others. You can use what's called a "radio group" to achieve this behavior for your own set of radio buttons in RP. Specify a radio group from the Properties tab of the Inspector after selecting one or more radio buttons on the canvas.
NAVIGATING A FORM
When your audience encounters your interactive form, they'll have been taught from prior experience that they can use their [TAB] key to move between form elements and that they can press the [ENTER] key to submit the form when they've completed it. These behaviors are available in Axure RP by managing the layer order of your widget and by assigning a submit button, respectively.
Tab order is determined by widget layer order: the [TAB] key moves between widgets from the back-most widget to the front-most. Widgets' layer order is reflected in the Outline pane (bottom-right corner of the interface). To make sure that focus goes directly from one form element to the next when tabbing in the output, make sure form widgets are next to each other in the Outline.
The Outline can be sorted either front-to-back (the default) or back-to-front. Front-to-back sort is intuitive in the sense that widgets at the top of the Outline list appear in front of other widgets in the diagram. But when working with the tab order of a form, front-to-back sort is counterintuitive. When working on tab order, consider switching to the "Back to Front" sort option instead. Do this from the "Sort and Filter" button in the local toolbar of the Outline pane.
To make it so that pressing the [ENTER] key submits the form, you can associate whatever "submit" button you've designed with one or more of your form widgets. Do this from the Properties tab of the Inspector or from the context menu after selecting one or more form widgets on the canvas. Once set, your "submit" button's OnClick interaction will be carried out whenever the [ENTER] key is pressed while one of the associated form widgets has focus in the browser.
Interaction styles can add the to the fidelity of your prototypes. These can be found near the bottom of the Properties tab, below the Interactions section. Above, you were introduced to the MouseOver interaction style.
Interaction styles are widget styles that are applied dynamically based on interactions in the browser. Available interaction styles are MouseOver, MouseDown, Selected, and Disabled. Interaction styles change the styling of a widget from its base style to an alternative style so long as the widget is in a certain state (moused over, selected, etc.).
MouseOver and MouseDown interaction styles are automatically applied when the mouse cursor enters the area of the widget (for MouseOver) or clicks on the widget (MouseDown). When the triggering event stops for these two interaction styles, the widget reverts to its previous style.
To apply Selected or Disabled styles to a widget, use an action (see below). The action called "Set Selected" will, among other things, apply the Selected interaction style. The Disabled interaction style is similarly associated with the "Enable/Disable" action. Take note that a disabled widget isn't just styled differently—it also cannot be clicked. To enable the widget again, use the Enable action.
Interactions determine the dynamic behaviors of a widget or page. You can see the interactions set up on a widget or page at the top of the Properties tab in the Inspector. When you used "Create Link" at the top of this article to link from one page to another, an OnClick interaction was created.
As mentioned in The Basics, interactions have three parts: events, cases, and actions.
An "event" in Axure RP is a trigger. An event sets in motion a prepared response in the form of one or more cases and their constituent actions. An OnClick event, for example, fires when a widget is clicked; an OnMouseEnter event fires when the mouse cursor crosses into the area of a widget; an OnMove event fires when a widget is moved by another action on the page; and so on.
Some events, like OnClick and OnMouseEnter, are available for every type of widget. Other events are unique to certain widget types. The most commonly used events for each type of widget are shown at all times in the Inspector pane's Properties tab. To see the full list of events available for a widget, click the “More Events” option. Learn about individual events in our Interactions reference article.
The Case Editor dialog is Axure RP's interactivity command center. It's where you'll build any case more complex than a link between pages. A case is an ordered collection of one or more outcomes assigned to a specific event of a specific widget or page.
To add a case to an event, double-click the event name. You can also single-click to select the event name and then click the "Add Case" option at the top of the Interactions section. Either method gets you to the Case Editor.
An event can have one or more cases. If there are multiple cases, an Axure RP feature called "conditional logic" can optionally be used to determine which case should fire. If conditional logic is not used, a selection menu of all cases appears in the browser when the triggering event occurs. Learn more about conditional logic in the Conditional Logic section of the online training.
The Case Editor contains the full list of available actions. Actions are the possible outcomes that can occur when the event fires. One or many actions can occur as part of the total interaction. Actions include outcomes like: opening a link to a new page, changing the text on a widget, and showing or hiding a widget.
When many actions appear in the same case, they usually fire in sequence. Exceptions to this rule are animation actions like move, rotate, hide, and resize, which occur simultaneously so as to allow for complex animations (like a simultaneous move-resize, for example).
Configure your actions in the Case Editor from left to right. First, select an action from the left-hand column. In the center column, labeled "Organize actions", your chosen actions can be clicked to select or dragged to reorder. Use the [DEL] key to remove selected actions from the list.
The right-hand column, labeled "Configure actions", is where each action is finished or adjusted. Some examples: for an "Open Link" action, this column is where you'll specify which page will open and whether it'll open in the same browser tab or a new one. When changing the text on a widget, this column is where you'll input the new text. When showing or hiding a widget, this is where you’ll set up an associated animation (like a fade).
Some actions work with only certain types of widgets. If an action requires you to choose a target widget, you'll be shown only eligible widgets in the "configure actions" section.
Click "OK" to close the Case Editor and return to the main interface. You’ll see your new case, called "Case 1" by default, listed under its parent event. You can double-click any case to reopen it in the Case Editor. There's a "Case Name" field at the top of the Case Editor window where you can rename the case or add a short description of its function.
We've already discussed links, which are the most common type of interaction. A few other commonly used action are explained below.
SHOWING AND HIDING
Show and hide widgets with the "Show" and "Hide" actions. These actions are by default instantaneous, but can be made to fade for a specified duration. The "show" action has a few other special behaviors in the "More Options" dropdown: the object widget can be brought to front, it can act as a flyout, it can act as a lightbox, or it can push away the other widgets on the page to make room for itself as it appears. The "hide" animation has a corresponding "Pull Widgets" option to reverse the effect after the widget disappears.
SCROLL TO WIDGET
Use the "Scroll to Widget" action to create an "anchor link" effect—where clicking a button scrolls to a specific section of a long page. If there’s not already a widget in the exact spot you’d like to scroll to, add a hot spot widget to your diagram in that location before building the "Scroll to Widget" action. (The hot spot widget is invisible when viewing the output in a browser.)
Widgets can be grouped. Groups have events just like individual widgets do and can be assigned cases and actions which will affect the entire group.
Let's say you want a button with an icon image. You might create this structure using two widgets, one for the button shape and one for the image. You could then group these widgets and add an OnClick behavior to the entire group, saving you the trouble of maintaining a case on both of the component widgets or adding a hot spot on top in order to capture the button click effectively. You could take a similar approach featuring a group when showing or hiding a set of related widgets.
To create a group, select your component widgets and use the shortcut [CTRL] / [CMD] + [G]. To select a widget that's part of a group, click anywhere on the parent group to select it before clicking the widget you want. When a grouped widget is selected on the canvas, the canvas outside the group will be shaded grey, which indicates that widgets not in the group are not editable at that time. Any new widgets added to the diagram while a group is selected will be added into that group.
Groups are shown in the Outline pane and work similarly to how folders do in the Pages pane, in that they can be named, collapsed or expanded, and items can be dragged in or out. Groups can also be hidden on the canvas by clicking the blue square next to a group name. (Take note that hiding a group in this way will hide it on the canvas but not in the output.)
Dynamic panels are special, container-type widgets. Their primary function is to contain multiple alternative versions of a design—called "panel states"—which can be switched between using the "Set Panel State" action. Only one panel state can be visible at a time. You can think of a dynamic panel like a deck of cards with only the top card showing.
Dynamic panels are good for certain specific things. They're useful for making slideshows (a.k.a. carousels) for example. (To see how, check out our carousel step-by-step tutorial.) If your design requires a multi-layered component, create that component as a multi-state dynamic panel rather than as several separate widgets or groups of widgets. Dynamic panels are also the only widgets that feature drag and swipe events, so reach for one in those scenarios too. But if you just want to group widgets and you don't need the specific features offered by a dynamic panel, you're better off using a group instead.
Dynamic panels have events, just like groups and individual widgets do. When a case is set up on a dynamic panel (on its OnMouseEnter event, for example), any part of the dynamic panel can trigger the event and fire the case.
To add a dynamic panel to your diagram, you can drag an empty one in from the Default widget library. Alternatively, you can select one or more widgets already on the canvas and convert them into a dynamic panel by right-clicking and using the "Convert to Dynamic Panel" context menu command. This command will create a one-state dynamic panel with your selected widgets already loaded into it.
Double-click a dynamic panel to get into the Dynamic Panel State Manager, a dialog from which you can add, duplicate, delete, or rename panel states, or open them on the canvas for editing. You can also get to these functions from the Outline pane.
You were introduced to masters in the previous article. Now that you're working with interactions, take another look at masters—and their companion feature, "raised events". Raised events provide a way to make different instances of a master do different things in response to the same event. For example: you could make instances of the same "next" button master link to different "next" pages.
If this sounds like something you'd like to explore right now, check out our Raised Events section in the online training. If you don't need this feature yet, just keep in mind that it's available in case the need comes up later on.
To add a link, first select the widget on your canvas you'd like to make interactive. Then, in the Properties tab of the Inspector, click on the blue text reading “Create Link” and choose your target page from the resulting list.
Under the "Interactions" heading in the Inspector, you’ll see that a new case has been created on the OnClick event. You'll learn more about events and cases below.
To test your link, click the "Preview" button (looks like "play" icon) in the Main Toolbar to open your page in the browser. Find and click your interactive widget to go to the target page.
IMPORTANT NOTE: Like groups, empty areas of dynamic panels are see-through. But unlike groups, empty areas of dynamic panels are not "click-through"—widgets seen underneath a panel state cannot be interacted with using your pointing device unless the dynamic panel is moved or hidden. Plan accordingly!