24
iRise Company Confidential © 2013 1 iRise Mobile: Advanced - Hands-on Lab Kirsten Stevens & Norman Garrett iRise

iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

  • Upload
    vananh

  • View
    220

  • Download
    2

Embed Size (px)

Citation preview

Page 1: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 1

iRise Mobile: Advanced - Hands-on LabKirsten Stevens & Norman Garrett

iRise

Page 2: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 3: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 3

Agenda

• Mobile Overview• Getting Started• Hands‐on Simulating• Mobile Simulation Review• Best Practices• Questions

Page 4: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 5: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 6: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 7: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 8: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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.

Page 9: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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…

Page 10: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 11: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 11

Hands-on Workshop

• Overview of Hands‐on Exercise• Download Starter Project• Download Content Kits• Create Reusable Assets• Create Scenario

Page 12: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 12

Featured Mobile Functionality

• <description of functionality that we’ll highlight for each session>

Page 13: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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’

Page 14: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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 

Page 15: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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.

Page 16: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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.

Page 17: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 18: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 19: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 19

Hands-on Workshop

• Review Local in Browser• Review on DC in Browser or on Mobile Device

Page 20: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 21: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 22: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

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

Page 23: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 23

Questions

Page 24: iRise Mobile: Advanced - Hands-on Labassets.irise.com/files/events/visualize/2013/day1/Mon_iRise... · iRise Mobile: Advanced - Hands-on Lab ... • Overview of Hands‐on Exercise

iRise Company Confidential © 2013 24