LAB – MOBILE PROTOTYPING
The goal of this lab 1 is to further enrich your understanding of prototyping and provide you with
somepractical skills of developing a mobile prototype in Axure.
The following concepts will be covered in this lab:
• Guides and Viewport Tags;
• Scrollable content;
• External links;
• Viewing a prototype on your phone.
Before you begin, please download the MobileAssets.zip1 and extract the contents into a new folder
onto your computer. Then, launch Axure and save a new file as <yourname>.rp using File > Save
As.
PART A: SETUP FILE FOR MOBILE BROWSING
• Step 1: Create guides
Before starting, let's create guides for the screen size we're designing for. For iPhone (and
Android), it's currently typical to use a width of about 390 and a height of 844. To add the
screen size, click the Style tab and select iPhone 12 Pro (or any other screen factor you
wish) from the drop-down list for page dimensions.
• Step 2: Share (publish) the prototype
To view the prototype on your iPhone or Android phone, the prototype files need to be
published to a web server. Click ‘Share’ on the top right corner and give your project a name.
Click ‘Publish’ and copy the URL.
• Step 3: View the prototype on a phone
Open up the URL on your phone. No player or app is required on the phone other than the
browser. At this point your prototype will be empty. You can refresh the browser to see the
changes as you’re working through this tutorial.
PART B: NAVIGATION
• Step 1: Add logo and navigation buttons
First, add an ‘Image’ element within the defined screen size, and import logo.png from the
images folder of the extracted zip file. Place it at the top of the design area. Then add 4
“Button” elements, each 300 x 50px. Delete the text on the top button, and on the next 3
buttons enter the text ‘Directions’, ‘Menu’, and ‘Coupons’ (see Figure 1).
1 Adapted from: http://www.axure.com/mobile-website-tutorial
1 Adapted from: http://www.axure.com/mobile-website-tutorial by Fotios Spyridonis and Annemarie Zijlema
UNIVERSITY OF GREENWICH 1
LAB – MOBILE PROTOTYPING
Figure 1 Logo and navigation buttons
• Step 2: Create button with icon
Drag an image element over the top button. Double-click the image and import ‘cellicon.png’
from the zip file. Drag a “label” element next to the image and enter the text "Order Now!".
Then, place a hot spot over the entire button (drag ‘Hot spot’ from the Library pane onto the
design area and resize accordingly).
Hot spots are special widgets that are always invisible in the web browser. Use one when
you need to add interactivity to an area of your design where there are no other suitable
widgets, such as when adding a hot zone to a particular area of an image.
• Step 3: Add link to dial phone
Select the hot spot and add a ‘Click or Tap’ interaction. Select the ‘Open Link’ action and
then choose "Link to an External url" and enter " [[tel:555-1212]] " in the text field. Generate
a prototype (Share->Update) and try it out on your phone by refreshing the web page.
Clicking the "Order Now!" button should bring up a dialog to call the phone number we
entered.
• Step 4: Add dynamic panel for popup
Next, we're going to add a dynamic panel that we'll use to display directions and the menu. Drag a
‘Dynamic panel’ element and stretch it to cover from the ‘Directions’ button down, leaving the logo
and ‘order now’ visible. Name the dynamic panel "PopupStates". Add two more states in addition to
State1, for a total of three states. You can so by clicking on the dynamic state and using the drop
down arrow behind ‘state 1’ to add a state (select “+ Add a State”). Name the three states
‘Directions’, ‘Menu’, and ‘None’ using the pen icon in the dropdown menu. We will make a separate
‘Coupons’ page in a later step. You can view the three states in the ‘Outline tab’ on the left-hand
side.
• Step 5: Set panel hidden and send to back
And to make it easier to select the buttons, we can right-click the panel and select [Order >
Send to Back].
UNIVERSITY OF GREENWICH 2
LAB – MOBILE PROTOTYPING
• Step 6: Add Click or Tap action to show panel
Now, we are going to add Click or Tap interactions to the Directions and Menu buttons to set our
PopupStates panel to the appropriate state. On the Directions button, add an ‘Interaction’ (click blue
button under the “Interactions” tab” on the right), select ‘Click or Tap’ interaction and select ‘Set Panel
State’) that sets the PopupStates panel to the ‘Directions’ state with an animation to slide up on
animate in (see figure 2). Select the checkbox for "Show panel if hidden" (see Figure 3). You will have
to click on ‘More Options’ to select this checkbox. Click ‘Done’ when you are ready.
Figure 2 Show panel if hidden Figure 3 click or tap set panel state
Important: Additionally, add a ‘Bring to Front/Back’ action to set the PopupStates panel to re-appear at the
front. Click on the grey ‘plus’ icon to ‘add action’ (see Figure 4), select ‘Bring to Front/Back’, and select as
target ‘PopupStates’ (see Figure 5). Click the button ‘OK’ when done.
Figure 4 Bring to Front/Back action Figure 5 Add Action plus button
Repeat this step for the Menu button and the Menu state.
PART C: POP UP DIALOG
• Step 1: Create popup window and close button
Now, we are going to add a background and a button to each of the Directions and Menu
states that will hide the panel when clicked. Open the Directions state to bring it up for editing
(use the Outline panel on the left hand-side and click on ‘Directions’). Add a ‘rectangle’
element and stretch it to cover the state. In the top right-hand corner, add a placeholder
element and resize it to 30x30px (see Figure 6 and 7).
UNIVERSITY OF GREENWICH 3
LAB – MOBILE PROTOTYPING
Figure 6 Add a rectangle and place holder Figure 7 resize the place holder 30 by 30
• Step 2: Add interaction to hide popup
Select the placeholder and add an Action to the Click or Tap event. In the ‘Shape
interactions’ editor, add the ‘Set Panel State’ action to set PopupStates to the state "None"
with a slide down animation for animate out (See Figure 8). Add a Wait action for 500ms
(use the + icon to add the action) as in Figure 9. Finally, use a ‘Hide’ action and select the
PopupStates panel to hide the panel (figure 10).
Figure 8 Click or Tap to hide popup Figure 9 Add a Wait action Figure 10 Add Hide Action
• Step 3: Copy/paste dialog widgets to Menu state
Now copy and paste the background and button from the Directions state to the Menu state.
Alternatively, you can repeat the previous two steps for the Menu state.
UNIVERSITY OF GREENWICH 4
LAB – MOBILE PROTOTYPING
Tip: The Click or Tap interactions on the placeholder can also be copied and pasted from the
Directions state to the Menu state.
PART D: EXTERNAL LINK TO GOOGLE MAPS
• Step 1: Create Directions state with map and text
Open the Directions state and add an ‘image’ element over the rectangle. Double-click the
image and import ‘map.png’ from the extracted zip file. If the image has resized automatically
and its dimensions are distorted, use the ‘preserve corners’ button under the style tab to keep
the original dimensions. Above the map, add a ‘label’ element and type "Pete's Pizza is
located at 311 4th Ave, San Diego, CA". Beneath the map, add a label and type " Click to
view location on Google maps”.
• Step 2: Get link URL from Google Maps
Now we are going to get the link URL from Google Maps that will launch the Google Maps
application on the phone in a new window. Go to “maps.google.com” and search for the
above address. Clickthe “Share” icon and copy the link URL.
• Step 3: Add link to Google Maps link
Select the "Click to View Larger Map" text, right-click and click ‘Insert Text Link’ to open the
link dialog. Paste the link in the "Link to external url" field and click OK. Next, click More
Options and select to open in Pop up Window. See Figure 11.
Figure 11 add link to Google.
Generate the prototype (Share->Update) and try it out on your phone.
PART E: SCROLLABLE CONTENT
• Step 1: Add filler text, convert to Dynamic Panel
Now, we're going to add scrolling content to the Menu state. Open the Menu state and add
a “Paragraph” element. Copy and paste the entire paragraph into the element so there are
two paragraphs. Adjust the width and height to fit the state. Right-click and convert the text
UNIVERSITY OF GREENWICH 5
LAB – MOBILE PROTOTYPING
into a dynamic panel by right-clicking and selecting [Create Dynamic Panel]. Name the panel
"Content".
• Step 2: Resize and add vertical scrollbars
Resize the dynamic panel from the bottom so it fits inside our rectangle. Select the dynamic
panel (now called Content) and in the Style tab select “Scroll as Needed” from the “Dynamic
panel” drop-list. If the placeholder has moved behind the text, the button is probably not
clickable anymore. Either move the text further down or select the placeholder, click on the
menu ‘Arrange’, and select ‘bring forward’.
Figure 12 Allow scrolling
Note: In the web browser and some older mobile browsers this scrolling method will not
work, but it will on most modern devices.
• Step 3: Set up Coupons page
The Home page was designed to fit on a mobile screen without scrolling. But for the Coupons,
we are going to link to a new page that is taller than the screen making it scrollable in the
mobile browser. Add a new “Page 2” (go to the Pages tab on the left) and rename it to
Coupons.
Copy and paste the logo and Order Now button from the Home page.
• Step 4: Add coupons
Beneath the Order Now button, add several “placeholder” elements, such that they go well
below the 844px guide. On the Home page, link the Coupons button to the Coupons page.
Generate the prototype and try it out. You will be able to scroll up and down the coupons
page.
Figure 13 Add link to the Coupons page
UNIVERSITY OF GREENWICH 6
LAB – MOBILE PROTOTYPING
PART F: "JOIN MAILING LIST" FIELD
• Step 1: Add email field and Submit button
At the bottom of the Home page, add a “text field” element and then a “button” element to the
right of it. Add the text "Submit" to the button. Above the text field, add a “label” element.
Change the text to "Join our mailing list". In the element Style pane (on the right), name the
label element"EmailPanel" and the text field "EmailField".
• Step 2: Add interactions to Submit button
Next, select the Submit button and add an action to Click or Tap. In the Shape Interactions Editor,
select "Set Text", choose the “EmailField” element. First, we'll clear the text in the text field. To do this,
we'll leave the value field blank. Add a second "Set Text" action and select the element ‘EmailPanel’.
Select “rich text” from the drop-down list and click the “Edit Text” button. Add the following text "Thank
you for signing up". Give it a try. It should all work right in the browser on your phone.
14 Interactive Submit button
UNIVERSITY OF GREENWICH 7
