iRise Company Confidential © 2013 1
iRise Mobile: Advanced - Hands-on LabKirsten Stevens & Norman Garrett
iRise
iRise Company Confidential © 2013 2
Pre-Requisite Checklist
iRise Studio Installed What Version?
iRise Mobile App Installed iOS users only
Connection to Wireless Network Eden Roc Conference Eden Roc Guest
Download Starter Project
iRise Company Confidential © 2013 3
Agenda
• Mobile Overview• Getting Started• Hands‐on Simulating• Mobile Simulation Review• Best Practices• Questions
iRise Company Confidential © 2013 4
Mobile Overview
• Leverage features of the iRise Platform to create simulations of mobile applications
o Mobile Device Page Types o Mobile Content Kitso Mobile iBlocs
• Review mobile app simulations through a browser or natively on your mobile device
o Mobile Device Emulatorso iRise Mobile App
iRise Company Confidential © 2013 5
Getting Started
The steps to creating a mobile simulation are:• Select Mobile Device for Simulation• Identify Existing Assets• Create Reusable Assets• Follow the iRise Methodology to complete the simulation
iRise Company Confidential © 2013 6
Getting Started
• Select Mobile Device for Simulation• Configure Mobile Device Settings in iRise Studio
o Set Page Type and Settings
iRise Company Confidential © 2013 7
Getting Started
• Settings ‐ Viewable Areao Only the area enclosed by
the solid grey line will be viewable in the simulation (within an emulated mobile device or the iRise Mobile App)
o Any modeling done outside of the viewable area will be accessible in simulation solely by scrolling
iRise Company Confidential © 2013 8
Getting Started
• Identify Existing Content Kitso iPhone Content Kit
• Includes standard iPhone interactions, including tab and navigation bars, alerts, a homescreenicon builder, static and dynamic lists, grid views, and much more.
o Android Content Kit• Includes navigation bars, popovers, alerts, split view, static and dynamic lists, and much more. Inline guides and sample how to's are included to help you through the process.
iRise Company Confidential © 2013 9
Getting Started
• Create reusable assetso Reusable assets are pages, components or styles likely to appear in more than one place in your project used to promote consistency and reusability throughout your project
• Masters: headers, footers, images, buttons, icons, navigation, etc…• Templates: page layout, sizes, colors, etc…
iRise Company Confidential © 2013 10
Getting Started
• Complete the simulation following the iRise Methodologyo Scenario Ideation
• Capture the high‐level scenarios and flows supported by the application and will be created in the visualization
o Analysis‐Level Simulation• Identify and validate the initial page layout and functionality for each page identified during Scenario Ideation
o High‐Fidelity Simulation• Focus on designing a detailed page layout, look, and feel and refining usability of the visualization
iRise Company Confidential © 2013 11
Hands-on Workshop
• Overview of Hands‐on Exercise• Download Starter Project• Download Content Kits• Create Reusable Assets• Create Scenario
iRise Company Confidential © 2013 12
Featured Mobile Functionality
• <description of functionality that we’ll highlight for each session>
iRise Company Confidential © 2013 13
Hands-on Workshop
• Overview of Hands‐on Exerciseo Scheduling App for Visualize 2013o Builds on Beginner Hands‐on Workshopo Key functionality:
• Add high visual fidelity styles • Add high visual fidelity interactivity • Add high function fidelity interactivity
– Search events– Remove events from ‘My Events’
iRise Company Confidential © 2013 14
Mobile Simulation Review
• After creating a simulation using the mobile page types, review may take place:
o Within a browser or the iRise Mobile App (iPhone or iPad)o Leveraging the iRise Definition Center or locally
iRise Company Confidential © 2013 15
Mobile Simulation Review
• Mobile pages automatically simulate inside an emulated device
o An image of the mobile device automatically appears on the page with the viewable area positioned within the device screen
• Emulated Functionalityo Virtual keyboard o Momentum scrolling (no scroll bars)o Mouse pointer changes to a semi‐transparent
circle to simulate finger movements.
iRise Company Confidential © 2013 16
Mobile Simulation Review
• When reviewing the simulation through the iRise Mobile App, mobile pages are displayed without the device frame and behave as expected on a touch screen device.
o There is no mouse cursor.o The virtual keyboard is disabled.o Scrolling is achieved through clicking and dragging. o Commenting is disabled (since the Reader framework is hidden).o Guides are enabled, but typically should not be used for iPhone‐
based reviews since they detract from the realism of the simulation.
iRise Company Confidential © 2013 17
Definition Center Review
• Definition Center o iRise Definition Center is a secure, central repository for users to share and collaborate on iRise projects
o When a Mobile project is added to the Definition Center, users can login to review the project through a browser or via the iRise Mobile App
iRise Company Confidential © 2013 18
Local Review
• No Definition Center connection is required• Mobile device and Studio must be on the
same network• To setup:
o Go to Edit ‐> Preferences in Studioo Create ID and Passwordo Launch iRise Mobile and select Touch to Connecto Enter ID and Password o Touch Connect to Studioo View your simulations
Simulations on your local Studio can be viewed via iRise Mobile
iRise Company Confidential © 2013 19
Hands-on Workshop
• Review Local in Browser• Review on DC in Browser or on Mobile Device
iRise Company Confidential © 2013 20
Definition Center via iRise Cloud HostingThis session is accessing a DC via our new iRise Cloud Hosting service• Secure environment in the cloud with reliable back ups and day‐to‐day maintenance• Worry‐free maintenance and support• Security to fit any enterprise• Scalable and optimized• Available in three tiers
o iRise Cloud Hostingo iRise Managed Cloud Hostingo iRise Dedicated Managed Cloud Hosting
irise.com/solutions/[email protected] or pick‐up information at Registration
iRise Company Confidential © 2013 21
Best Practices
• Set mobile preferences at the start of the project• Resize pages height and width to fit content
o Pages that extend beyond the viewable region will allow momentum scrolling to occur• Avoid using functionality that cannot be achieved on a mobile device
o e.g. any of the “on mouse” trigger types• Ensure the iRise toolbars are hidden when reviewing mobile simulations as to not
detract from the mobile experienceo Reader framework is disabled when using the iRise Mobile App, therefore the toolbars
are not displayed• Because the Reader framework is disabled when reviewing on a mobile phone, on‐
device reviews should be limited to those situations when it is critical that the simulation environment come as close as possible to that of using the real application.
o e.g. Usability testing and product demos
iRise Company Confidential © 2013 22
Notes
• The iPhone's Home button cannot be configured to trigger events in your simulation
• When reviewing through a browser, both the reviewer's physical keyboard and virtual keyboard can be used to type into a user input that has focus
o Switching back and forth between the keyboards may cause unexpected behaviors
• The virtual keyboard does not appear when reviewing a simulation on a mobile phone.
o However, the virtual keyboard will appear when reviewing a simulation through a browser on a tablet, i.e. both the virtual keyboard and the tablet's built‐in keyboard will appear and can be used to enter text.
o The virtual keyboard will not appear when using the iRise Mobile App on the iPad
• To hide the virtual keyboard, you must click the Done key or Return key
iRise Company Confidential © 2013 23
Questions
iRise Company Confidential © 2013 24