In this tutorial, you will learn how to use multiple cases to show the different paths a user can take in a login scenario.
Basic Interactions Tutorial
Show Different Login Scenarios
First, open MultipleCases.rp and open the "Login Button" page.
Select the Login button and add a case to OnClick. This opens the Case Editor dialog.
At the top of the Case Editor dialog next to "Step 1: Description" edit the case description from "Case 1" to "If login succeeds".
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
The Round Up
This zip file contains the RP file needed to complete this tutorial
If the login fails, we want the user to link to Page 2 so let's add an action to "Open Link in Current Window" and choose Page 2. Click "OK".
Now, the OnClick interaction should look like the above screenshot, and have these two cases:
If login succeeds, Open Page 1 in Current Window
If login fails, Open Page 2 in Current Window.
Change the description from "Case 1" to "If login fails".
Case descriptions can be useful for communicating multiple paths, but sometimes that just isn't enough! In those situations, you can use Conditional Logic.
Generate the prototype (Generate -> Prototype in the main menu) and you can see that clicking the Login button presents you with the two case options. Clicking on "If login succeeds" opens Page 1. Clicking on "If login fails" opens Page 2.
When the login succeeds, we want the user to link to Page 1, so add an action to "Open Link in Current Window" and choose Page 1. Click "OK" to close the Case Editor.
Now, let's add a second case to the Login button. To do this, select the OnClick event again and click on "Add Case" again (or, double-click on the event). This opens the new case in the Case Editor dialog.
Step 1: Add the first OnClick case
Step 2: Edit the case description
Step 3: Add an action for "If login succeeds"
Step 4: Add a second OnClick case
Step 5: Edit the case description
Step 6: Add an action for "If login fails"
Step 7: Review the cases
Step 8: Generate the prototype