Creating dynamic interactions is one way to increase the fidelity of your simulations and ensure that your stakeholders have the complete picture when reviewing functional requirements. Page actions in iRise enable reviewers to experience the results of user interactions, greatly enhancing their ability to provide meaningful feedback.
This tutorial will focus on some of the more commonly used and easily configured page actions in iRise, including Show/Hide Widgets, Jump to Widget, Edit User Inputs and Edit Properties.* We’ll walk you through a single example that provides an opportunity to use each of these actions. You’ll also learn how to chain actions together so a single user interaction can trigger multiple events.
*Switch Views, Submit/Reset Form and Set Menus are covered in other tutorials.
Watch this video for a brief demonstration of the concepts covered in this tutorial.
Page actions are used to create events triggered by the reviewer interacting with the simulation. The trigger for an action is configured by creating navigation to an Action widget.
As you can see in the image above, the trigger for an action is not limited to On click. In this case, an On change trigger has been associated with the Select widget so the Edit Properties action will execute when the reviewer makes a selection in the Gender field.
Also shown in the image is the ability to annotate page actions by typing a label in the Action widget’s Properties panel, a useful tool when modeling pages that contain many actions.
Page actions are configured in the Set Page Action dialog, which appears when you drag the Action widget from the Widget Toolbar to the canvas, or when you right-click a page widget and choose Insert > Action.
A third option for creating a new page action is by clicking the +Add button in the Events panel. While this method seldom gets used for common event types, it’s required when setting up an On Drop (Over Target) event.
After you select an action type from the options on the left side of the dialog box, you will configure the action-specific settings on the right side. In the example shown above, an Edit User Inputs action has been configured to display the required date format in the Calendar widget.
To edit an existing page action, double-click the widget on the canvas, or click the Edit button in the widget’s Properties panel.
In the hands-on example that follows, you will add a series of interactions to a profile creation form. This will involve several page actions, some of which will be triggered independently, while others will be combined and triggered by the same interaction.
Let’s start out by laying out a basic form for creating a user profile. Using Text, Text Input, Calendar, Select, Checkbox, Section and Button widgets, lay out your form so it looks like the image below.
At the very least, give descriptive names to the Connect buttons, the Section widget and the Text Input widget. You’ll be glad you did when you configure your page actions.
There are two sets of interactions we are going to create within this form. First, the Connect buttons will only appear when the respective social network is selected, and when each one is revealed, it will also have focus. Second, the Frequency section will only appear when the product updates check box is selected, and the Text Input widget in that section will be auto-populated with text corresponding to the selected frequency. As a bonus, we’ll add a visual indicator of the frequency selected by the reviewer.
Since certain components will not be visible when the page loads in the browser, we need to set the visibility of these components to “Hidden.” Select all three Connect buttons and the Section widget containing the Frequency content (hold down the Ctrl key to select multiple widgets). Then, in the Properties panel, select the Hidden attribute.
Note: This attribute was called “Hide in browser” in older versions of iRise Studio.
Drag the Action widget icon from the Widget Toolbar to the canvas on the right side of the page. In the Set Page Action dialog, accept the defaults for the Action type (Show/Hide Widgets) and the “Select widgets to” options (Toggle visibility). Then, in the widget tree that appears on the right side of the dialog box, locate and select the Connect button associated with the Twitter social network. Click Done when you are finished.
With the new canvas widget still selected, press Ctrl-C and then Ctrl-V to duplicate the Action widget. Double-click the newest widget and edit its settings so the Connect button associated with Facebook is selected, and click Done. Repeat this once more for the Google+ button.
Before continuing, you might want to arrange your new Action widgets neatly on the canvas, and also annotate each one using the Properties panel for easy identification.
Finally, drag the Checkbox widget associated with each social network to the corresponding Action widget to create the navigation that will trigger the page action.
Now repeat this process to toggle the visibility of the Frequency section using the email opt-in check box. At this point, your page should look something like this:
When each Connect button is revealed with a Toggle widgets action, we also want that button to have focus (i.e., the user can press Enter to invoke whatever action is associated with the button). To do this, we’ll create a Jump to Widget action for each button and “chain” it to the corresponding Toggle widgets action.
Add a new Action widget to your canvas to the right of the Toggle widgets actions. This time when the Set Page Action dialog opens, choose Jump to Widget from the options on the left, and then choose the Button widget associated with Twitter on the right. When you click Done, the new Action widget on your canvas will be labeled with the name of the Button widget associated with Twitter.
Repeat this twice, once for each of the remaining Connect buttons. Finally, drag each of the Toggle widgets actions to the corresponding Jump to Widget action. Now each chained action will be invoked in sequence by a single trigger.
When the reviewer selects the email opt-in check box, the Frequency section is revealed. This section presents two options: weekly updates or monthly updates. Depending on which option is chosen, the Text Input widget will display a message confirming the choice. We’ll accomplish this with Edit User Inputs actions.
Start by adding a new Action widget to the canvas. In the Set Page Action dialog, choose Edit User Inputs on the left. On the right, locate the Text Input widget in the widget tree and double-click in the Value column to insert your cursor. When the field is active, type “Weekly updates selected.” Click Done, and with the canvas widget still selected, press Ctrl-C and then Ctrl-V to make a copy. Double-click the new widget and edit the text to say “Monthly updates selected.”
With both page actions on the canvas, arrange them neatly and annotate each one. Finally, connect each Radio Button widget to the corresponding Action widget. Your page should end up looking something like this:
Before we test our interactions, let’s add one more event that will provide a visual indicator of the frequency chosen for email updates. To start out, add a Section widget immediately below the Text Input widget. The section should be approximately 200 pixels wide and 20 pixels high. Also, give the section a background color that stands out from the background color of the form.
We are going to add an Edit Properties action after each of our Edit User Input actions that resizes the section to a specific width. When the reviewer selects weekly updates, the section’s width will expand to 200 pixels, and when monthly updates are selected, the section will shrink down to 50 pixels.
Add an Action widget to the right of the first Edit User Inputs action. In the Set Page Action dialog, choose Edit Properties from the options on the left, and then select the Section widget you just added in the pane on the right. Below the widget selection pane, enter 200 for the width in the ‘Size To’ section. Click Done.
With the new canvas widget still selected, press Ctrl-C and then Ctrl-V to duplicate the Action widget. Double-click the new Action widget to open the Set Page Action dialog, change the width to 50 and click Done.
Finally, chain the Edit Properties actions to the Edit User Inputs actions so clicking the weekly radio button expands the section, and clicking the monthly radio button shrinks the section. Your page should end up looking like this:
Launch your page in the Reader and test your interactions. Select each of the check boxes next to the social networks and confirm that the corresponding Connect button appears and receives focus. Then select the email opt-in check box and confirm that the frequency settings appear. Switch between the two frequency options, confirming that the Text Input displays the correct message and the width of the Section widget changes. If anything doesn’t work as expected, check your blue navigation lines, and if those are connected properly, check the configuration of your page actions.