Learn to use events, cases and actions to add interactivity to your wireframes.
Interactions Overview
You can add a wide range of interactions to your wireframes from basic page links to dynamic “ajax-y” behaviors. The interactions you define will work in the generated prototype.
Every interaction is made up of an event, case(s), and action(s).
Events
Events are the trigger for an interaction like the click of a button. Different widgets can respond to different events.
Below is a list of the events available in Axure RP:
OnClick: A user clicks on a widget (Available for all widgets).
OnMouseEnter: A user mouses over a widget (Available for images, text panels, hyperlinks, button shapes, and image map regions).
OnMouseOut: A user mouses out of a widget (Available for images, text panels, hyperlinks, button shapes, and image map regions).
OnKeyUp: A user releases a keyboard key while typing in a widget (Available for text fields and text areas).
OnFocus: A user clicks or tabs into a form widget (Available for text fields, text areas, droplists, list boxes, checkboxes, and radio buttons).
OnLostFocus: The cursor leaves a form widget (Available for text fields, text areas, droplists, list boxes, checkboxes, and radio buttons).
OnChange: A user selects a droplist or list box item (Available for droplists and listboxes).
Cases
Cases are the possible paths in response to an event. For example, when a Login button is clicked, one case would be if the login succeeds and another case would be if the login fails.
Actions
Actions are what happens within a case. For example, within the login failed case, there may be an action to display an error message or link to an error page.
Below is a list of the available actions:
Open Link in Current Window: Opens a page or external URL in the current window.
Open Link in Popup Window: Opens a page in a popup window. You can specify the size and properties of the window.
Open Link in Parent Window: Used from a popup window to change the page loaded in the parent window that opened it.
Close Current Window: Closes the current window.
Open Link(s) in Frame(s): Used with the inline frame widget to change the page loaded in the inline frame.
Open Link in Parent Frame: Opens a page in the parent frame. Used from a page loaded in an inline frame.
Set Panel state(s) to state(s): Set the current visible state of one or more dynamic panels.
Show Panel(s): Shows (makes visible) one or more dynamic panels.
Hide Panel(s): Hides one or more dynamic panels.
Toggle Visibility for Panel(s): Shows or hides dynamic panels based on their current visibility.
Move Panel(s): Move a dynamic panel to a specific location or by a specified distance.
Bring Panel(s) to Front: Brings a dynamic panel to the top layer of the page.
Set Variable and Widget value(s) equal to Value(s): Sets the value of one or more variables and/or widget values (i.e., text on a widget).
Scroll to Image Map Region (Anchors): Scroll a page to the location of a Image Map Region widget.
Enable Widget(s): Enable form widgets like a droplist or text field.
Disable Widget(s): Disable form widgets.
Set Widget(s) to Selected State: Sets the style of the widget to its Selected style or back to its default style.
Set Focus on Widget: Sets the focus on a form widget (i.e. a text field).
Wait Time: Delays actions by a specified time.
Expand Tree Node(s): Expands the nodes of a tree widget.
Collapse Tree Node(s): Collapses the nodes of a tree widget.
Other: Shows a specified text description of an action such as "Send email to user".
Add Interactions
Select a widget to display the events available for that widget in the Annotations and Interactions pane.
To add a case, select an event in the Interactions pane and click "Add Case". You can also double-click on an event to add a case.
This opens the *Interaction Case Properties dialog where you can edit the case description and choose which actions to perform.
To add actions, check the actions from the list that you would like to perform.
To configure the action (i.e., choose which page to link to, choose which widget to affect, etc.), click on the link in the actions description below the list.
Click OK button when you are finished defining the case.
*In the Mac version, the Interaction Case Properties dialog is called the Case Editor and works a little diffferently.
Example - Basic Link (
RP File |
Prototype )
See an example of a basic link and follow the instructions in the file to create your own.
Tip - Quick Link: If you like shortcuts (and who doesn’t!), select the widget and click on “Quick Link” at the top of the Interactions pane to choose the target page for a basic link.
The Advanced Interactions Editor gives you more control to customize the order of the actions and add multiple of each action. In the Interactions Case Properties dialog, click on the Advanced Editor link in the right-hand corner to open the editor. This is useful for creating animations using multiple Wait action in combination with other actions like setting dynamic panel states. The Advanced Interactions Editor is discussed in more detail at Customize interactions with the Advanced Interactions Editor.
Define Multiple Cases
Select a widget, select an event, and click Add Case. Define the case in the Interaction Case Properties dialog. Repeat these steps to add a second case, and any additional cases.
When you generate the prototype and trigger the event (click the button), the case descriptions are displayed. Clicking on a description performs that case's actions.
Example - Login Button (Multiple Cases) (
RP File |
Prototype )
See an example of a login button with two cases to demonstrate a successful and unsuccessful login. Try it for yourself by following the instructions in the file.
A well written case description is an effective way to communicate conditional flow and is easy to maintain and update. You can also define conditional logic to perform actions based on values stored in variables or values entered by the user in the prototype. This is discussed in Using conditional logic.
Summary
You've just brought your wireframes to life and can now add a wide range of interactions to your designs. Got a question? Email us at support@axure.com.