Viewing on Mobile Devices

Designing for mobile is different, which is why prototyping is so important. This book takes you through Axure’s capabilities in this field with an example-led, hands-on approach that helps you get started quickly.

(For more resources related to this topic, see here.)

Axure 7 makes it easy to get our work on real devices so we can test out ideas on a device in the lab or field, and so we can let stakeholders experience the design on the intended device with their own hands.

Hosting prototypes

To let users access our prototype on their own devices or the one we control for demonstration or usability testing, we are going to need to find a way to host it in an available web server. Fortunately, because our prototype is a collection of web pages and related files, we can use any web server that can be accessed by the device in question.

AxShare

One of the easiest ways to get our prototype on a device and in the hands of users is to use the free AxShare service as a hosting environment. To publish to AxShare, you first need to set up an AxShare account. To do this, go to http://share.axure.com and you'll be able to create a free account that allows for the hosting of 10 prototypes. If you need to host more prototypes or want a custom domain, there is also an AxShare subscription product. Once the account is created, publishing a prototype to AxShare just requires a click on the AxShare button in the top toolbar pane of the prototype editor.

When we publish to AxShare, we see the dialog box as shown in the following screenshot. We use it to sign in to our AxShare account and can save the sign in credentials. In this dialog box, we can choose to create and upload a new prototype or update an existing one, and decide if we want to use password protection to restrict access to our work. When a new prototype is uploaded to AxShare, it will automatically create a prototype ID that allows people to access it using a mobile web browser.

Remember that Axure ultimately creates HTML files, even when we are simulating fullscreen native apps. We'll see the dialog box shown in the following screenshot when publishing, which confirms we are uploading our files and provides us with the URL we can use to get the prototype on a mobile browser. The random characters at the end of the URL are the prototype ID that AxShare created.

One thing to note is that the URL provided in the dialog box links to the main prototype page, which includes the left panel used to navigate pages or do variable debugging. When sending a prototype to a mobile device, we are going to want to get the exact URL of our home screen and not the main prototype file. This means the URL for a prototype at http://share.axure.com/C1374Q/ will need to be updated to include a specific screen URL so it ends up being more like http://share.axure.com/C1374Q/publishing.html. We can get this URL by closing the left navigation panel after selecting our start screen, and then copying the URL from the desktop browser address bar. And with this URL the person accessing it on a phone is getting our intended start page.

One thing to be aware of when hosting prototypes on AxShare or any cloud-based solution is that there may be network latency just as there is with real mobile websites due to the speed of the network being used and general network traffic. If we need the prototype to behave more real like a native app in which much of the user interface and some data is already on the device, we should consider using HTML 5 device caching.

Home screen icons and splash pages

If we want our app to look like it is running in fullscreen mode like a native app, we can add a home screen icon, an iOS splash screen, and hide the browser's navigation. To do this, add the home screen and splash page PNG images at the sizes specified in the Mobile/Device panel of the Generate Prototype dialog box. We also need to select the checkboxes for the Hide address bar and Hide browser nav (when launched from iOS home screen) options. This panel is also used to generate the HTML viewport meta tag and instruct the mobile browser to hide the address bar and browser navigation in iOS. We can also set the iOS status bar to use the default appearance, a black background, or a black translucent background. For each prototype, we'll want to experiment with these settings to see which works best for our project.

We can add the prototype to the home screen using native browser and OS functionality (this differs between iOS and Android, and even between different versions of Android). On an iPhone 5 which is running on iOS 7, our PNG image appears as an iPhone home screen as shown in the following screenshot:

The splash screen will load as a fullscreen image prior to our main prototype page loading, so users see a fullscreen image as seen in the following screenshot, when they first tap the home screen icon to open our prototype. This is one way to make our prototype feel more like a native app.

Summary

In this article we saw how prototypes can be tested or demonstrated on mobile devices using tools, such as AxShare. We also saw how to create home screen icons and splash pages.

Resources for Article:


Further resources on this subject:


Books to Consider

comments powered by Disqus