Axure tutorial: prototype an ATM

This tutorial is based on Axure RP 8. A trial version of Axure can be downloaded via axure.com/download. A permanent license can be obtained from the teacher.

Axure is a tool to create interactive prototypes of for instance applications or websites. Check out axure.com/learn to quickly learn how it works. We created as an example, a simple prototype of an ATM. The result, the interactive demo, is available here to try:

The focus of this tutorial is to achieve interaction, rather than design or ergonomics. No knowledge of Axure is required to follow this tutorial. This tutorial however does not cover all possibilities. On axure.com/learn you can learn more if needed. If anything is unclear in this tutorial, you can have a look at the end-result, the Axure-file atm_tutorial.rp.

Start

When Axure is started or when you create a new document, a homepage plus three pages are created:

For this prototype, we use only one page, so you can remove page 1-3 (select and press Delete). We will start preparing the Home page.

If you need some guidance when drawing shapes, you can turn on the grid: Choose Arrange > Grid and Guides > Show Grid. There you will also find the grid settings. Through 'Create Guides' you may set columns to help you with layout. Eg. choose a layout of 960 pixels wide by 12 columns.

1. Create main display and welcome message

Select one of the boxes (in the list of widgets) -hold down the mouse button- and drag the box to the drawing area.

Place the box at the top, keep enough space for the number panel etc. which comes below it.

Trim the size if needed. Give it approximately the same size as the example below:

Add a paragraph, and change the text to "Welcome to Designers-Bank, enter your card please".

Adjust the font size, eg. Pt 18, and align the text: 'centered':

Give the box a light background color (use the Fill Color icon in the toolbar):

Finally, we set the name of the paragraph to "MainText": Make sure the box is selected. Type the name in the field under "Inspector Rectangle" on the right.

Save your work: click Save . It is advised to do this regularly.

2. Create and customize the card-slot and realize input of the card in the slot

To draw the card we use a Button. For the card-slot we use a Box. Draw the card all the way to the left. Set the width to 70, change the background color (Fill Color) and set the text to "CARD". Place the slot right below the main display, make it 20 pixels wider than the pass, so 90.

Name the widgets "Card" and "Cardslot".

Style the card slot. In the Inspector (on the right) click "STYLE". At Border change the line thickness. Set the Corner Radius to 5.

Now we make the card interact with the slot. Select the card. Under "Properties, Interactions" double click on "OnClick":

The Case Editor appears. Here we describe what should happen when the widget is clicked. Name the case "CardEntry". We're going to move the card, so we choose "Move", "This Widget" and "To".

In order to ensure that the card moves towards the slot, we change the position, so it becomes the position of the slot. Click on "fx" behind the x position at the bottom right of the screen:

Local variables are variables that are only available in a widget or interaction. Global variables are available throughout the page or application.

fx means that we will use a function to determine that position. We need to use the position of the slot, and add that as a local variable. Click Add Local Variable, name it "Cardslot", choose "Widget" and then choose Cardslot:

Now we can retrieve its position in the field above. If anything is there, remove it. Click Insert Variable or Function and choose the Local Variable "Cardslot":

After this you see:

Change that to:

This makes the value equal to the x-position of the slot plus 10 (pixels). The card then moves to the middle of the slot ( (90-70) / 2).

Press OK to save the value. Repeat this procedure for the y-position:

After you assigned a value for the y-position you can close the Case Editor.

The programmed interaction for the Card should look like this:

If the Preview does not work, eg. if you get an error message from the browser, it is possible that a security application is blocking Axure. Check the security-settings of your browser and anti-virus programs. E.g. Add-ins like "Safe Surfing" / "Safe Surf" you can temporarily disable.

Now we can test it. Click the Preview icon in the upper right of the toolbar. The page should be displayed in a Web browser. If you click on the card, it should move to the slot:

There are still a few details that need to be improved:

The card has to come to the front, so it looks like its in the slot. Right-click it and choose Order, Bring to Front:

We want the card to move smoothly to the slot. Double-click on the Move action:

And adjust the animation to swing:

Press Ok. Save the document. Return to the preview in the browser and refresh the page (you do not need to click the Preview icon again: after a save, you can also refresh the browser to see the new version).

Next, we add a second animation which lets the card disappear into the slot. Make sure the card is selected, double click on CardEntry to start the Case Editor:

Select Hide, 'This Widget' and a slide-up animation of 1000ms:

Add a third action which changes the text in the main display (MainText) to: "Please enter your PIN and press OK.":

Close the Case Editor and test the page in the browser.

If the card begins to decrease while still moving toward the slot, you can add a 'Wait' of 500ms between the Move and Hide in the Case "CardEntry". (The Wait action is almost at the bottom of the list in the Case Editor).

Also, you might want to tweak the y-position the card moves to a little, it is now [[Cardslot.Y+10]] but [[Cardslot.Y+3]] might look better.

3. Input PIN code

* It is also possible to design the buttons first, then create one interaction and copy the interaction to other elements. See "Graphic design tips for Axure".

The PIN will be entered with a numeric keypad, which we build with buttons. First we create one button including interaction, then copy that (including its interactions)*. Start by adding one button with the text "1". Design it as you think a numeric button should look like, name it "BtnPin".

Because a button is an interactive element, you can set interaction styles. For example, to light up the button when it is pressed. To set it, click "MouseDown" under "Interaction Styles" in the Inspector:

Below you see how for a 'MouseDown' interaction the Fill Color is set. The button will become lighter when the button is pressed.

Store the PIN code
Let's add a global variable that will store the value of the PIN entered. A global variable is a variable that is available everywhere, in all widgets and interactions.

Select the button (BtnPin) and add an OnClick case:

In the Case Editor add a rule to set a variable value and name the case "StorePIN". Then click "Add Variable":

Click "Add Variable" and add it using the green plus icon. Name the variable pincode and press OK:

 

We are going to do a trick, to assign the value to the variable. The value is visible on the button (it is its label), this is the text of the widget. We use this in this way because we want to make copies of this button, which only get a different label and interactions still work. We do not to reprogram the interaction for each button.

In the Case Editor select the variable, then press fx:

Press Add Local Variable and type a name (we use 'text'):

This local variable gets the value of the text on the button (in this case "1"). Press Insert Variable or Function ... and choose the variable pincode. Then press Insert Variable or Function again and select 'text':

The value is now: [[pincode]][[This.text]]

Press Ok (twice).

Test
For testing, it might be useful to see what value is entered. We will use a label to display the value of the variable pincode. Place a label somewhere at the side, for example under the card. Set its name to "DebugPIN" and set the text:

We now add a second action to the StorePIN case of the button (BtnPin). This displays the entered PIN in the label "DebugPIN". To set the value press the function-button fx:

Set the value to:

Finish by clicking OK twice and test the page in the browser. If it works well, each time you press the button the displayed value is incremented by one.

We can now copy the created button, add a proper layout and customize the labels of the buttons:

Test the page again. Is the PIN code displayed properly?

With what you have learned up till now, you can add a correction key "C" and its interaction, which erases the entered PIN. Note that this requires two actions: clear the variable pincode and set the label DebugPIN with the original text.

No PIN should be entered when the card is not yet inserted. Therefore, add the same actions to the interaction of the card (the case CardEntry) so the pincode gets cleared after the card is inserted.

4. Check PIN

We first add an Cancel/Stop and an OK button at the bottom next to the main display. Use empty buttons and place labels next to them:

Name the left button BtnScrn4 and the right BtnScrn8 (there will soon be more buttons above them). Name the labels LblStop and LblOk. Consider also setting the Interaction Style (Mouse Down).

We make sure that the labels are become visible when prompted for a PIN. If no components are selected (click on an empty spot in the editor), we can set Page Interactions. Here we hide the labels when loading the page. Double-click OnPageLoad:

Name the Case "OnPageLoad". Select "Hide" and select both widgets LblStop and LblOk. End with Ok.

Select the card. Double click on "CardEntry" and make sure that the widgets LblStop and LblOk will be displayed (with "Show").

Check the PIN
If the OK button is pressed, we will verify the PIN. Select the OK button (BtnScreen8) and double click "OnClick" in the Inspector to start the Case Editor. Name the Case "PIN check". Press the button Add Condition. In the Condition Builder add a check if variable pincode equals "1234". For the demo, we use "1234" as a correct value for the PIN.

Press OK to close the Condition Builder.

The next action we add will only be executed if the condition is true (ie, if the PIN is the correct PIN).

This action is to offer a choice for the amount of money. For now, we only change the text displayed in "MainText". Further actions are explained in the next step.

We display the message "Choose amount and press OK":

Close the Case Editor (with Ok).

If the entered PIN was incorrect, we must respond with a message like "Incorrect PIN, please try again...". And the variable pincode must be cleared. For this we add a new case to the Ok button (Btnscreen8) by clicking "Add Case":

This is then automatically an "else" condition, we name "IncorrectPIN":

The condition "Else If True" means if the previous condition was not true, this action will be processed (as with if () ... else ... statement in Java). In this case "MainText" will display the message "Incorrect PIN, please try again...". And we make the variable pincode empty.

The complete interaction for the Ok button (BtnScreen8) now looks like this:

Test the page before continuing.

* It is also possible to design the buttons first, then create one interaction and copy the interaction to other elements. Also design can be copied to other elements using the Format Painter (CTRL+9). See "Graphic design tips for Axure".

5. Select amount of money

To selecting an amount we add the remaining buttons and labels. It is recommended to first add one button including the interactions* and when it is complete, copy it. We start with the button for the amount "20":

Name this BtnScreen1, with text "20". Next to it, add label "20". We will use the value again in a global variable. The text of the button is hidden later because (physical) buttons beside the screen have no text.

Select the button BtnScreen1 and add an OnClick interaction case. Set the Case Name and select Set Variable Value. Click Add variable to add a new global variable and name it "amount". Press fx, create a local variable with value 'text on widget' and insert that via the link 'Insert Variable or Function'. (This procedure is explained extensively in step 3 for the PIN code). Result:

Now add to this another action that displays the amount selected in the main screen (MainText):

Add the other buttons and labels, by copying them from BtnScreen1 and its label. Give each button corresponding amounts as the text. So the second button "50", the 3rd "70", etc. After that, make the texts invisible by slecting these six buttons and at text properties choose the font color 'no color'.:

Now it looks like this:

Rename the new buttons on the left BtnScreen2 and 3, and on the right side BtnScreen5 - 7 . Also give all labels meaningful names, for example, the label "20" Lbl20 etc. Make sure all labels in the Page Interactions, OnPageLoad are hidden:

At the Ok button (BtnScreen8) we have to ensure now that the labels of the amounts become visible again if a valid PIN was entered. Select the button and double-click the PIN check case. Select Show and then select the six labels Lbl20 - Lbl200:

Test if the amount selected is displayed.

6. Eject note

If you push the button Ok, we have a problem, because the interactions linked to it are for entering the PIN. We can distinguish between these two stages in the process by looking at the variable amount: It has a value (greater than zero), then we are in the phase of output of the money. We will therefore after the PIN has been entered, set the variable amount to zero.

Select the OK button (BtnScreen8) and add to both the 'PIN check' case and the 'IncorrectPIN' case an action that sets the global variable amount to zero:

Now we can add a new case to the button that has the condition "If value amount > 0". If so, then we are in the stage to deliver the money.

Click Add Case (for OK button). Set the case as shown below. Press Add Condition to set the condition.

In the main display (MainText), show the message "Ejecting money ...".

Close the Case Editor.

The order of Cases is wrong now. Drag the new case "OutputMoney" to the top of the list. (You may also use right-click, Move Case Up). The complete set of cases should look like:

If the order of If ... Else If .... Else If ... is different, you can right-click a case and select "Toggle IF / ELSE IF" to change it.

We will now create an animation of a note that comes out of the slot. Copy the cardslot and name it "EjectSlot". Make it a little wider. Draw a new button in the slot and make it look like a banknote. Name it "BankNote".

Hide the BankNote when the page is loaded (in Page, Interactions, OnPageLoad).

Select the OK button (BtnScreen8) and double-click the Case "OutputMoney". Add an action that shows the BankNote with a slide down animation of 1000ms. Add another action that shows the value of the chosen amount on the ticket. Use a Set Text, with a value (via the button fx) of the global variable amount.

The actions for the case "OutputMoney" now look like this:

Try if it works.

7. Stop after note is ejected and enable abort

After the animation of the money is finished, the interface must return to its initial state. Select the OK button (BtnScreen8) and double-click the case "OutputMoney". Add an action "Wait" of 5000ms (5 seconds). You can find it at the bottom of the list under "Miscellaneous".

To return to the initial situation, we can return the page to its original state by doing a Reload of the page:

Check if it works.

After a Reload, global variables still have their values. This may case undesirable results. To prevent this, give all global variables an initial value. We can do this in the "OnPageLoad" page interaction:

This will prevent some of the problems. But if you test carefully, you will see that it is still possible to press the OK button, and get the message that the PIN is incorrect or even withdraw money. We will solve these problems in the next step.

Until now we have done nothing with the Abort-button. A simple way to handle it is go back to the initial state. We just did this after the money was ejected. Now add the same action (Reload) to the Abort-button: select the button (BtnScreen4) and double-click "OnClick" in the widget interactions and add a Reload action as you did above.

8. Prevent unintended interactions

As we saw in the previous step, the user can click on buttons while this is not intended. We have already partially solved things by ensuring that variables have proper values when the page loads. But this will not prevent clicking widgets that should not be used yet. A solution is to make these widgets start disabled, and only enable them when they should be used.

We do this for the Ok button (BtnScreen8): Check this box with the right mouse button and choose disabled:

Then enable the button after entering the card: Select the card. Double-click the "CardEntry" case. Enable the button:

You can do the same for other buttons.

9. Enhance the interface

To make the interface look more like one system, you could add a frame around it. We also add a logo.

Draw a box around the entire interface and place it in the background using the right mouse button menu: Order, Send to Back:

Take care to adjust the layout of this framework by example background color, border and rounded corners.

For example, you can use a gradient as Fill Color as shown here:

You can find this via the extended properties under Style in the Inspector. For example you can set the Corner Radius there also.

To add an image as the logo of the machine, drag an image in the editor. Double click it to add the file that contains the image. If asked if you want to use auto-size, choose Yes, then the image in its original size is put into the page. Choose No, the picture is scaled to fit the image-rectangle as drawn.

An example of the end result you can find below.

10. Export to HTML

Via Publish, Generate HTML files you can store the created page as an HTML file. Then you can publish this for example on a website (you have to upload the entire folder with generated files). This can be useful to offer the page as part of a usability test.

To view the page without the Axure-menu on the left, use the file home.html. If you want to view this page full screen, use the F11 button of the browser.

If you want to edit the HTML code you can easily find all the widgets in the HTML code, the names of the widgets can be found as a comment and have the HTML attribute data-label:

Downloads & more info

The result, the interactive demo created by this tutorial, is available here to try:

Download the resulting Axure-file: atm_tutorial.rp

More info